updated: styling of main page basically done

diff --git a/public/css/index.css b/public/css/index.css
index 8b745d400ddb60facc22e6966cda3a41805be9c5..dcb36a34253639770dc440914827515cbc4b1a8e 100644 (file)
--- 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 77c5e71aaa1872ef261a4f8740c37f258ff1de4c..c93e54abb03793c0671edb6e0c72fad50ae4a6f7 100644 (file)
--- a/public/index.html
+++ b/public/index.html
@@ -30,13 +30,14 @@
 
                </div>
                <div>
-                       <h1><u>File List</u></h1>
+                       <h1>Files</h1>
                        <div id="songFileFilterInputs">
                                <input placeholder="File name..." id="songFileFilterName"></input>
                        </div>
                        <div id="innerSongFileList">
                        </div>
                </div>
+               <div id="filler"></div>
        </body>
 
        <div id="songCreationMenu">
@@ -71,7 +72,7 @@
 
        <div id="editMenu">
                <div id="innerEditMenu">
-                       <h1>Song Title</h1>
+                       <h1 id="editMenuSongTitle">Song Title</h1>
                        <p id="editMenuSongKey">Key:</p>
                        <input id="editMenuArtistName" placeholder="Arist Names (~) separated...">Artist Names</input><br>
                        <input id="editMenuTrackName" placeholder="Track Name...">Track Name</input><br>

diff --git a/public/js/index.js b/public/js/index.js
index 88888e7f5f150eea221f50f638c0f9e5b670f66a..d724d98c1c963e365626fcbcdb9b8f3a31b5e990 100644 (file)
--- 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
  **/
 /*
-<div songId="[ID OF SONG (just number)]" id="SONG:XX" class="songElement">
-       <p class="songElementCheck">✅</p> // or false
-       <img></img> // HERE WOULD GO THE IMAGE
-       <button onclick="openEditMenu(this.parentElement.songId)">EDIT</button>
-       <p class="songElementName">SONG NAME</p>
-       <p class="songElementBy">by</p>
-       <p class="songElementArtist">ARTIST NAME</p>
-       <p class="songElementId">ID: []</p>
-</div>
+</div songId="[ID OF SONG, NUMBER]" id="SONG:XX" class="songElement"> // event listener on this
+       <div class="songElementBorder">
+               <img class="presentImage" src="[IF PRESENT OR NOT]"></img>
+       </div> // this should have a border on the right
+       <img src="artwork60URL"></img>
+       <div>
+               <p class="songElementTitle">Title</p>
+               <p class="songElementArtist">Artist</p>
+       </div>
+
+<div>
 */
 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 (executable)
Binary files a/songmanager and b/songmanager differ