start huge dashboard rework; improve dark theme
This commit is contained in:
parent
14feb47640
commit
f324c249f6
GPG key ID:
CF99829C92678188
21 changed files with 365 additions and 235 deletions
|
|
@ -3,9 +3,9 @@
|
|||
|
||||
:root {
|
||||
--bg-0: #101010;
|
||||
--bg-1: #141414;
|
||||
--bg-2: #181818;
|
||||
--bg-3: #202020;
|
||||
--bg-1: #181818;
|
||||
--bg-2: #282828;
|
||||
--bg-3: #404040;
|
||||
|
||||
--fg-0: #b0b0b0;
|
||||
--fg-1: #c0c0c0;
|
||||
|
|
@ -67,77 +67,111 @@
|
|||
}
|
||||
|
||||
body {
|
||||
width: 100%;
|
||||
width: calc(100% - 180px);
|
||||
height: calc(100vh - 1em);
|
||||
|
||||
margin: 0;
|
||||
margin: 0 0 0 180px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
font-family: "Inter", sans-serif;
|
||||
font-size: 16px;
|
||||
|
||||
color: var(--fg-0);
|
||||
background: var(--bg-0);
|
||||
|
||||
transition: background .1s ease-out, color .1s ease-out;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
color: var(--fg-3);
|
||||
}
|
||||
|
||||
nav {
|
||||
width: min(720px, calc(100% - 2em));
|
||||
height: 2em;
|
||||
margin: 1em auto;
|
||||
header {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-direction: column;
|
||||
width: 180px;
|
||||
background-color: var(--bg-1);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
transition: background .1s ease-out, color .1s ease-out;
|
||||
}
|
||||
nav {
|
||||
height: 100%;
|
||||
margin: 1em 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: left;
|
||||
gap: .5em;
|
||||
user-select: none;
|
||||
}
|
||||
nav .icon {
|
||||
height: 100%;
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--shadow-sm);
|
||||
overflow: hidden;
|
||||
}
|
||||
nav .icon img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.nav-item {
|
||||
width: auto;
|
||||
height: 100%;
|
||||
width: fit-content;
|
||||
height: fit-content;
|
||||
padding: 0;
|
||||
margin: 0 auto 1em auto;
|
||||
display: flex;
|
||||
|
||||
color: var(--fg-2);
|
||||
background: var(--bg-2);
|
||||
border-radius: 10em;
|
||||
border-radius: 100%;
|
||||
box-shadow: var(--shadow-sm);
|
||||
|
||||
overflow: clip;
|
||||
}
|
||||
nav .icon img {
|
||||
width: 3em;
|
||||
height: 3em;
|
||||
}
|
||||
.nav-item {
|
||||
display: flex;
|
||||
color: var(--fg-2);
|
||||
line-height: 2em;
|
||||
font-weight: 500;
|
||||
transition: color .1s, background-color .1s;
|
||||
}
|
||||
.nav-item:hover {
|
||||
background: var(--bg-1);
|
||||
background: var(--bg-2);
|
||||
text-decoration: none;
|
||||
}
|
||||
.nav-item.active {
|
||||
border-left: 4px solid var(--fg-2);
|
||||
}
|
||||
.nav-item.active a {
|
||||
padding-left: calc(1em - 4px);
|
||||
}
|
||||
nav a {
|
||||
padding: 0 1em;
|
||||
padding: .2em 1em;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
width: 100%;
|
||||
}
|
||||
nav a.icon {
|
||||
padding: 0;
|
||||
nav a.active {
|
||||
border-left: 5px solid var(--fg-0);
|
||||
padding-left: calc(1em - 5px);
|
||||
}
|
||||
nav #logout {
|
||||
/* margin-left: auto; */
|
||||
nav hr {
|
||||
width: calc(100% - 2em);
|
||||
margin: .5em auto;
|
||||
border: none;
|
||||
border-bottom: 1px solid var(--fg-0);
|
||||
}
|
||||
nav .section-label {
|
||||
margin: 8px 0 2px 15px;
|
||||
font-size: 10px;
|
||||
text-transform: uppercase;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(720px, calc(100% - 2em));
|
||||
width: min(calc(100% - 16px), 720px);
|
||||
height: fit-content;
|
||||
min-height: calc(100vh - 2em);
|
||||
margin: 0 auto;
|
||||
padding: 1em;
|
||||
}
|
||||
main.dashboard {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
|
|
@ -163,7 +197,24 @@ code {
|
|||
|
||||
|
||||
|
||||
.cards {
|
||||
width: 100%;
|
||||
height: fit-content;
|
||||
display: flex;
|
||||
gap: 2em;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.card {
|
||||
flex-basis: 40em;
|
||||
padding: 1em;
|
||||
background: var(--bg-1);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-lg);
|
||||
|
||||
transition: background .1s ease-out, color .1s ease-out;
|
||||
}
|
||||
main:not(.dashboard) .card {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
|
@ -171,7 +222,7 @@ code {
|
|||
margin: 0 0 .5em 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
.card-header {
|
||||
margin-bottom: 1em;
|
||||
display: flex;
|
||||
gap: 1em;
|
||||
|
|
@ -179,17 +230,31 @@ code {
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-title h1,
|
||||
.card-title h2,
|
||||
.card-title h3 {
|
||||
.card-header h1,
|
||||
.card-header h2,
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
.card-header a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
.card-header small {
|
||||
display: inline-block;
|
||||
font-size: 15px;
|
||||
transform: translateY(-2px);
|
||||
color: var(--fg-0);
|
||||
}
|
||||
|
||||
.flex-fill {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.artists-group {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(5, 1fr);
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 520px) {
|
||||
body {
|
||||
font-size: 12px;
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ h1 {
|
|||
}
|
||||
.artist-avatar #remove-avatar {
|
||||
margin-top: .5em;
|
||||
padding: .3em .4em;
|
||||
padding: .3em .6em;
|
||||
}
|
||||
|
||||
.artist-info {
|
||||
|
|
@ -75,7 +75,7 @@ input[type="text"]:focus {
|
|||
justify-content: right;
|
||||
}
|
||||
|
||||
.card-title a.button {
|
||||
.card-header a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -90,6 +90,13 @@ input[type="text"]:focus {
|
|||
border-radius: 16px;
|
||||
background: var(--bg-2);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
cursor: pointer;
|
||||
transition: background .1s;
|
||||
}
|
||||
|
||||
.credit:hover {
|
||||
background: var(--bg-1);
|
||||
}
|
||||
|
||||
.release-artwork {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { hijackClickEvent } from "./admin.js";
|
||||
|
||||
const artistID = document.getElementById("artist").dataset.id;
|
||||
const nameInput = document.getElementById("name");
|
||||
const avatarImg = document.getElementById("avatar");
|
||||
|
|
@ -77,3 +79,9 @@ removeAvatarBtn.addEventListener("click", () => {
|
|||
avatarImg.src = "/img/default-avatar.png"
|
||||
saveBtn.disabled = false;
|
||||
});
|
||||
|
||||
document.addEventListener('readystatechange', () => {
|
||||
document.querySelectorAll('.card#releases .credit').forEach(el => {
|
||||
hijackClickEvent(el, el.querySelector('.credit-name a'));
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -155,7 +155,7 @@ dialog div.dialog-actions {
|
|||
gap: .5em;
|
||||
}
|
||||
|
||||
.card-title a.button {
|
||||
.card-header a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
|
@ -163,7 +163,7 @@ dialog div.dialog-actions {
|
|||
* RELEASE CREDITS
|
||||
*/
|
||||
|
||||
.card.credits .credit {
|
||||
.card#credits .credit {
|
||||
margin-bottom: .5em;
|
||||
padding: .5em;
|
||||
display: flex;
|
||||
|
|
@ -172,24 +172,30 @@ dialog div.dialog-actions {
|
|||
gap: 1em;
|
||||
|
||||
border-radius: 16px;
|
||||
background: var(--bg-2);
|
||||
background-color: var(--bg-2);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
cursor: pointer;
|
||||
transition: background .1s ease-out;
|
||||
}
|
||||
.card#credits .credit:hover {
|
||||
background-color: var(--bg-1);
|
||||
}
|
||||
|
||||
.card.credits .credit p {
|
||||
.card#credits .credit p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card.credits .credit .artist-avatar {
|
||||
.card#credits .credit .artist-avatar {
|
||||
border-radius: 12px;
|
||||
}
|
||||
|
||||
.card.credits .credit .artist-name {
|
||||
.card#credits .credit .artist-name {
|
||||
color: var(--fg-3);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.card.credits .credit .artist-role small {
|
||||
.card#credits .credit .artist-role small {
|
||||
font-size: inherit;
|
||||
opacity: .66;
|
||||
}
|
||||
|
|
@ -308,32 +314,33 @@ dialog div.dialog-actions {
|
|||
* RELEASE LINKS
|
||||
*/
|
||||
|
||||
.card.links {
|
||||
.card#links ul {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
gap: .2em;
|
||||
}
|
||||
|
||||
.card.links a.button:hover {
|
||||
.card#links a.button:hover {
|
||||
color: var(--bg-3) !important;
|
||||
background-color: var(--fg-3) !important;
|
||||
}
|
||||
|
||||
.card.links a.button[data-name="spotify"] {
|
||||
.card#links a.button[data-name="spotify"] {
|
||||
color: #101010;
|
||||
background-color: #8cff83
|
||||
}
|
||||
|
||||
.card.links a.button[data-name="apple music"] {
|
||||
.card#links a.button[data-name="apple music"] {
|
||||
color: #101010;
|
||||
background-color: #8cd9ff
|
||||
}
|
||||
|
||||
.card.links a.button[data-name="soundcloud"] {
|
||||
.card#links a.button[data-name="soundcloud"] {
|
||||
color: #101010;
|
||||
background-color: #fdaa6d
|
||||
}
|
||||
|
||||
.card.links a.button[data-name="youtube"] {
|
||||
.card#links a.button[data-name="youtube"] {
|
||||
color: #101010;
|
||||
background-color: #ff6e6e
|
||||
}
|
||||
|
|
@ -421,7 +428,7 @@ dialog div.dialog-actions {
|
|||
* RELEASE TRACKS
|
||||
*/
|
||||
|
||||
.card.tracks .track {
|
||||
.card#tracks .track {
|
||||
margin-bottom: 1em;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
|
|
@ -433,43 +440,47 @@ dialog div.dialog-actions {
|
|||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
|
||||
.card.tracks .track h3,
|
||||
.card.tracks .track p {
|
||||
.card#tracks .track h3,
|
||||
.card#tracks .track p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card.tracks h2.track-title {
|
||||
.card#tracks h2.track-title {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
gap: .5em;
|
||||
}
|
||||
|
||||
.card.tracks h2.track-title .track-number {
|
||||
.card#tracks h2.track-title .track-number {
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.card.tracks .track-album {
|
||||
.card#tracks a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.card#tracks .track-album {
|
||||
margin-left: auto;
|
||||
font-style: italic;
|
||||
font-size: .75em;
|
||||
opacity: .5;
|
||||
}
|
||||
|
||||
.card.tracks .track-album.empty {
|
||||
.card#tracks .track-album.empty {
|
||||
color: #ff2020;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.card.tracks .track-description {
|
||||
.card#tracks .track-description {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.card.tracks .track-lyrics {
|
||||
.card#tracks .track-lyrics {
|
||||
max-height: 10em;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.card.tracks .track .empty {
|
||||
.card#tracks .track .empty {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { hijackClickEvent } from "./admin.js";
|
||||
|
||||
const releaseID = document.getElementById("release").dataset.id;
|
||||
const titleInput = document.getElementById("title");
|
||||
const artworkImg = document.getElementById("artwork");
|
||||
|
|
@ -96,3 +98,9 @@ removeArtworkBtn.addEventListener("click", () => {
|
|||
artworkData = "";
|
||||
saveBtn.disabled = false;
|
||||
});
|
||||
|
||||
document.addEventListener("readystatechange", () => {
|
||||
document.querySelectorAll(".card#credits .credit").forEach(el => {
|
||||
hijackClickEvent(el, el.querySelector(".artist-name a"));
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1,20 +1,16 @@
|
|||
@import url("/admin/static/release-list-item.css");
|
||||
|
||||
.artist {
|
||||
margin-bottom: .5em;
|
||||
padding: .5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: .5em;
|
||||
|
||||
color: var(--fg-3);
|
||||
background: var(--bg-2);
|
||||
box-shadow: var(--shadow-md);
|
||||
border-radius: 16px;
|
||||
text-align: center;
|
||||
|
||||
transition: background .1s ease-out;
|
||||
cursor: pointer;
|
||||
transition: background .1s ease-out, color .1s ease-out;
|
||||
}
|
||||
|
||||
.artist:hover {
|
||||
|
|
@ -23,10 +19,9 @@
|
|||
}
|
||||
|
||||
.artist-avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.track {
|
||||
|
|
@ -39,6 +34,8 @@
|
|||
border-radius: 8px;
|
||||
background: #f8f8f8f8;
|
||||
border: 1px solid #808080;
|
||||
|
||||
transition: background .1s ease-out, color .1s ease-out;
|
||||
}
|
||||
|
||||
.track p {
|
||||
|
|
|
|||
|
|
@ -76,7 +76,7 @@ newTrackBtn.addEventListener("click", event => {
|
|||
});
|
||||
|
||||
document.addEventListener("readystatechange", () => {
|
||||
document.querySelectorAll(".card.artists .artist").forEach(el => {
|
||||
document.querySelectorAll("#artists .artist").forEach(el => {
|
||||
hijackClickEvent(el, el.querySelector("a.artist-name"))
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
border-radius: 16px;
|
||||
background: var(--bg-2);
|
||||
box-shadow: var(--shadow-md);
|
||||
|
||||
transition: background .1s ease-out, color .1s ease-out;
|
||||
}
|
||||
|
||||
.release h3,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue