From: 2weiEmu <saalbach.robert@outlook.de>
Date: Fri, 22 May 2026 20:30:22 +0000 (+0200)
Subject: updated: just working on the design
X-Git-Url: https://git.saalbach.dev/?a=commitdiff_plain;h=e8d49ff29629c3e12ae1e8bbcd2449fa92b90d4e;p=binbsis50-sm.git

updated: just working on the design
---

diff --git a/public/css/index.css b/public/css/index.css
index 826e097..b68a18b 100644
--- a/public/css/index.css
+++ b/public/css/index.css
@@ -4,5 +4,30 @@
 
 
 .songElement {
+	display: flex;
+	margin: 10px;
 
+	* {
+		margin: auto 10px auto 10px;
+	}
+
+	p {
+		font-size: 16px;
+	}
+
+	img {
+		height: 60px;
+		width: 60px;
+	}
+
+	.songElementBy, .songElementId {
+		font-size: 12px;
+	}
+
+	.songElementCheck {
+		padding: 0;
+		font-size: 2.25rem;
+		line-height: 2.25rem;
+
+	}
 }
diff --git a/public/js/index.js b/public/js/index.js
index 62e7815..6c18802 100644
--- a/public/js/index.js
+++ b/public/js/index.js
@@ -21,12 +21,13 @@ let innerSongList = document.getElementById("innerSongList")
  **/
 /*
 <div songId="[ID OF SONG (just number)]" id="SONG:XX" class="songElement">
-	<p>✅</p> // or false
-	<p>SONG NAME</p> BY
-	<p>ARTIST NAME</p>
+	<p class="songElementCheck">✅</p> // or false
 	<img></img> // HERE WOULD GO THE IMAGE
 	<button>EDIT</button>
-	<p>ID: []</p>
+	<p class="songElementName">SONG NAME</p>
+	<p class="songElementBy">by</p>
+	<p class="songElementArtist">ARTIST NAME</p>
+	<p class="songElementId">ID: []</p>
 </div>
 */
 function NewSongElement(exists, songName, artistName, imageUrl, id) {
@@ -40,12 +41,19 @@ function NewSongElement(exists, songName, artistName, imageUrl, id) {
 	if (exists) {
 		check.innerText = "✅"
 	}
+	check.classList = "songElementCheck"
 
 	let songNameP = document.createElement("p")
 	songNameP.innerText = songName
+	songNameP.classList = "songElementName"
+
+	let byP = document.createElement("p")
+	byP.innerText = "by"
+	byP.classList = "songElementBy"
 
 	let artistNameP = document.createElement("p")
 	artistNameP.innerText = artistName
+	artistNameP.classList = "songElementArtist"
 
 	let image = document.createElement("img")
 	image.src = imageUrl
@@ -55,12 +63,14 @@ function NewSongElement(exists, songName, artistName, imageUrl, id) {
 	
 	let idP = document.createElement("p")
 	idP.innerText = id
+	idP.classList = "songElementId"
 
 	wrapper.appendChild(check)
-	wrapper.appendChild(songNameP)
-	wrapper.appendChild(artistNameP)
 	wrapper.appendChild(image)
 	wrapper.appendChild(editButton)
+	wrapper.appendChild(songNameP)
+	wrapper.appendChild(byP)
+	wrapper.appendChild(artistNameP)
 	wrapper.appendChild(idP)
 
 	return wrapper
@@ -107,7 +117,7 @@ let songFilterInput = document.getElementById("songFilterInput")
 
 
 
-
+getSongList()
 
 // ==============================================================
 /*
diff --git a/songmanager b/songmanager
index cee7e08..635b639 100755
Binary files a/songmanager and b/songmanager differ