From 03ab6fbd420da02562b59a0324aaf30922f4aebc Mon Sep 17 00:00:00 2001 From: 2weiEmu Date: Wed, 17 Jun 2026 15:53:48 +0200 Subject: [PATCH] updated: styling of main page basically done --- public/css/index.css | 95 +++++++++++++++++++++++++++++++++++-------- public/index.html | 5 ++- public/js/index.js | 87 ++++++++++++++++++++------------------- songmanager | Bin 11702364 -> 11702364 bytes 4 files changed, 123 insertions(+), 64 deletions(-) diff --git a/public/css/index.css b/public/css/index.css index 8b745d4..dcb36a3 100644 --- a/public/css/index.css +++ b/public/css/index.css @@ -57,9 +57,31 @@ input:focus { .songElement { display: flex; + background-color: var(--lighter-background); + margin: 20px 15px 20px 15px; + padding: 20px 0 20px 0; + border-radius: 10px; + + .songElementBorder { + border-right: 5px solid var(--green-background); + } + + .presentImage { + padding: 0 50px 0 50px; + } + + .songElementTitle { + font-size: 24px; + color: var(--green-foreground); + } + + .songElementArtist { + font-size: 16px; + color: var(--green-background); + } * { - margin: auto 10px auto 10px; + margin: auto 15px auto 15px; } p { @@ -71,20 +93,42 @@ input:focus { width: 60px; } - .songElementBy, .songElementId { - font-size: 12px; - } } +button { + font-family: "Sansita", sans-serif; + font-size: 16px; +} + +.songElement:hover{ + box-shadow: 0 0 8px var(--green-foreground); +} + +#songFileFilterInputs { + margin: 10px 0 20px 0; +} + +#songFileFilterName { + width: 30%; +} + .songFileElement { display: flex; - margin: 10px; - max-width: 40vw; - border-radius: 5px; - box-shadow: grey 3px 3px 2px; - border: 1px solid grey; - padding: 4px; + background-color: var(--lighter-background); + margin: 20px 15px 20px 15px; + padding: 20px 0 20px 0; + border-radius: 10px; + + * { + margin: auto 15px auto 15px; + } + + p { + font-size: 24px; + color: var(--green-foreground); + } + } .success { @@ -93,12 +137,13 @@ input:focus { #editMenu { top: 10vh; - left: 25vw; - border-radius: 5px; + left: 60vw; + border-radius: 10px; + border: 4px solid var(--green-background); position: absolute; - border: 2px solid gray; - background-color: rgb(240, 240, 240); - width: 50vw; + background-color: var(--darker-background); + width: 30vw; + color: var(--green-background); display: none; @@ -108,12 +153,22 @@ input:focus { input { margin: 5px; + color: var(--green-foreground); } +} - #editMenuUpdateButton { - } - +#editMenuCloseButton, #editMenuUpdateButton { + background-color: var(--lighter-background); + color: var(--green-background); + outline: none; + border: none; + padding: 12px; + margin: 20px 10px 20px 0px; + border-radius: 4px; +} +#editMenuUpdateButton { + color: var(--green-foreground); } #songCreationMenu { @@ -126,3 +181,7 @@ input:focus { width: 50vw; display: none; } + +#filler { + height: 200px; +} diff --git a/public/index.html b/public/index.html index 77c5e71..c93e54a 100644 --- a/public/index.html +++ b/public/index.html @@ -30,13 +30,14 @@
-

File List

+

Files

+
@@ -71,7 +72,7 @@
-

Song Title

+

Song Title

Key:

Artist Names
Track Name
diff --git a/public/js/index.js b/public/js/index.js index 88888e7..d724d98 100644 --- a/public/js/index.js +++ b/public/js/index.js @@ -42,12 +42,9 @@ function NewSongFileElement(songFileName) { let songFileNameP = document.createElement("p") songFileNameP.innerText = songFileName - let renameButtonSongFiles = document.createElement("button") - renameButtonSongFiles.innerText = "Rename" - renameButtonSongFiles.addEventListener("click", (_) => { renameSongFile(songFileName) }) + songFileElement.addEventListener("click", (_) => { renameSongFile(songFileName) }) songFileElement.appendChild(songFileNameP) - songFileElement.appendChild(renameButtonSongFiles) return songFileElement } @@ -95,15 +92,17 @@ let innerSongList = document.getElementById("innerSongList") * MAIN SONG ELEMENT **/ /* -
-

✅

// or false - // HERE WOULD GO THE IMAGE - -

SONG NAME

-

by

-

ARTIST NAME

-

ID: []

-
+
// event listener on this +
+ +
// this should have a border on the right + +
+

Title

+

Artist

+
+ +
*/ function NewSongElement(exists, songName, artistName, imageUrl, id) { let wrapper = document.createElement("div") @@ -111,43 +110,39 @@ function NewSongElement(exists, songName, artistName, imageUrl, id) { wrapper.id = id wrapper.songId = id.replace("song:", "") - let check = document.createElement("p") - check.innerText = "❌" - if (exists) { - check.innerText = "✅" + let borderWrapper = document.createElement("div") + borderWrapper.classList = "songElementBorder" + + let presentImage = document.createElement("img") + presentImage.classList = "presentImage" + presentImage.src = "/img/music-present.png" + if (!exists) { + presentImage.src = "/img/music-not-present.png" } - check.classList = "songElementCheck" + borderWrapper.appendChild(presentImage) - let songNameP = document.createElement("p") - songNameP.innerText = songName - songNameP.classList = "songElementName" + let artwork = document.createElement("img") + artwork.src = imageUrl - let byP = document.createElement("p") - byP.innerText = "by" - byP.classList = "songElementBy" + let titleWrapper = document.createElement("div") + let songTitle = document.createElement("p") + songTitle.classList = "songElementTitle" + songTitle.innerText = songName - let artistNameP = document.createElement("p") - artistNameP.innerText = artistName - artistNameP.classList = "songElementArtist" + let songArtist = document.createElement("p") + songArtist.classList = "songElementArtist" + songArtist.innerText = artistName - let image = document.createElement("img") - image.src = imageUrl + titleWrapper.appendChild(songTitle) + titleWrapper.appendChild(songArtist) - let editButton = document.createElement("button") - editButton.innerText = "Edit" - editButton.addEventListener("click", function() { openEditMenu(wrapper.songId) }) - - let idP = document.createElement("p") - idP.innerText = id - idP.classList = "songElementId" - - wrapper.appendChild(check) - wrapper.appendChild(image) - wrapper.appendChild(editButton) - wrapper.appendChild(songNameP) - wrapper.appendChild(byP) - wrapper.appendChild(artistNameP) - wrapper.appendChild(idP) + wrapper.appendChild(borderWrapper) + wrapper.appendChild(artwork) + wrapper.appendChild(titleWrapper) + + wrapper.addEventListener("click", (_) => { + openEditMenu(id.replace("song:", "")) + }) return wrapper } @@ -298,6 +293,8 @@ filterDBImage.addEventListener("click", (_) => { let editMenu = document.getElementById("editMenu") +let editMenuSongTitle = document.getElementById("editMenuSongTitle") + let editMenuSongKey = document.getElementById("editMenuSongKey") let editMenuArtistName = document.getElementById("editMenuArtistName") let editMenuTrackName = document.getElementById("editMenuTrackName") @@ -325,6 +322,8 @@ function openEditMenu(songId) { function openEditMenuWithSong(song) { editMenu.style.display = "block"; + editMenuSongTitle.innerText = song.DisplayTrackName + editMenuSongKey.innerText = song.Key editMenuArtistName.value = song.ArtistName editMenuTrackName.value = song.TrackName diff --git a/songmanager b/songmanager index 54aed9c501787f3e8cf77b4d18aa869962065dbe..0758ad0080edc54694507519de2f239b6bbdba4d 100755 GIT binary patch delta 1135 zcmcb!;1nweZ@9t6uE4?o0@D-K3nZr}{IO)&{D-Z8qu#tQuPnaO$34eA$22{-pgg6* zz);^HC_T+3zalI($I`9XDLq@aEWlVlv^*uaD#fhQD?8HNv>+`v*E2sy->onrBqgKV z&%!G>Dl4EWATrUnk^y9s2m=EHGXn#IyI&|nlhDZ*osEZcrfyl`I(u4?>|}3c5B;3X zBr_BJ=GXk~ulX6X@AWx+y0tguKhK?eEVyDh4$C{itVrYmD*qPE4RPqS80FE zuiE~aU#v;Mzx(#r{2p7oW5^zi6oaGX$_OGHIWib_+tei}I&wn-=yF*G>|IEvl))NWnn z(QaMk*=}9s)oxwo-ELjw({5em+iqRu*KS?q-)>zM&~9B7*lt}F)NWlB+-_YJ(r#T9 z+HPGH)^1%D-fmqL(QaK8*=}7G)oxuC-ELhK({5cA+iqPI*KS=E-)>!%&~9Co*lt~w z)NWms+-_Z!(r#Uq+HPHy)^1&u-fmr$(QaLp*=}8x)oxvt-ELi#({5dr+iqQz*KS>v z-)>!1&~9B-*lt}_)NWl>yxqF0S;Y+Kas*|xadvu#PcXWPc`L#H=ha z#X#TD!zZdTFx03t(KjqNO1H!`(>PE+v^*uaD#fhQD?8HNv>+`v*E2syzqq&{-6^}U zD5c22Bs0LISl7rqlL2It2m=EHGXn#IyI&~7{>cTe6Q*0H-Mo3{SaK^J})h=GSU}&9B}5nqQ~=HNS5AYks}<*ZlhJulWtyU-KKb zzvee;f6Z^){+i#U{WZU7`)hu)_SgL8?XUSQ+F$cqw!h}LYJbgd-Ts>2ru{X)ZTo9} zyY|=o_U*6v9ok>>JGQ^(cWQsl@7(^H-=+OEziazzez*45{O;Rd^LuPb6EQV3Gq5zU z&`mKmF-tZ!Nit3|O4{B(p@f%N16jz-#LV2((9p=-*xbZ2&BQRp+|0xz)hN-_A}MwH zyGjp9F4GW0Gb;m2D+7z^f>j=(ENO{3#nb;!E|F<>sPbrcsPb%gsPbxesPb-isPbud zsPb)hsPb!fsPb=js0wIzs0wU%s0wO#s0wa(s0wL!s0wX&s0wR$s0wd)sETNJsETZN zsETTLsETfPsETQKsETcOsETWMsETiQs7h#es7h>is7h*gs7h{ks7h&fs7h^js7h;h zs7h~lsLE(}sLE`2sLE=0sLF14sLE+~sLE}3sLE@1sLF45s48f8s48rCs48lAs4Cv> zP*w6pl<6A#^n@}Gd)fz(;^YU6tnCU@O4=2sl(s8ODci0vrCj3^V**3M^vu#?tXWR64&$b!uo^3PRJ=#Ow{1=>BYuWt9ezNX#t`r3BS>+9M*udi?SyuM+(=k<-kI{~Kqxd#9M -- 2.54.0