From: 2weiEmu Date: Wed, 17 Jun 2026 13:53:48 +0000 (+0200) Subject: updated: styling of main page basically done X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=03ab6fbd420da02562b59a0324aaf30922f4aebc;p=binbsis50-sm.git updated: styling of main page basically done --- 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 54aed9c..0758ad0 100755 Binary files a/songmanager and b/songmanager differ