From 774ad74e7efd7d81612bccf346e2fe34853ca036 Mon Sep 17 00:00:00 2001
From: equilet <2237372+equilet@users.noreply.github.com>
Date: Fri, 7 Apr 2023 15:39:11 -0700
Subject: [PATCH] more minimal design with less borders, isolated text elements
 into flex

---
 index.html | 22 ++++++++--------
 player.js  | 23 +++++++++--------
 style.css  | 74 ++++++++++++++++++++++++++++++++++++------------------
 3 files changed, 74 insertions(+), 45 deletions(-)

diff --git a/index.html b/index.html
index a56a652..2e59abe 100644
--- a/index.html
+++ b/index.html
@@ -47,18 +47,20 @@
 						</audio>
 					</div>
 					<div class="player-text" id="player-heading">
-						<div>now playing</div>
+						<div class="plabel" id="player-np">now playing</div>
+						<div class="plabel" id="status">status: unknown</div>
 					</div>
 					<div class="player-text" id="player-info">
-						<div id="track-show">---</div>
-						<div id="track-artist">---</div>
-						<div id="track-name">---</div>
-						<div id="status">status: unknown</div>
-
-						<!-- <div class="plabel" id="bitrate">\\\</div> -->
-						<!-- <div class="plabel" id="samplerate">\\\</div> -->
-						<!-- <div class="plabel" id="trackchans">\\\</div> -->
-						<div class="plabel" id="desc">\\\</div>
+						<div id="ptext-top">
+							<div class="plabel" id="broadcast-artist">---</div>
+							<div class="plabel" id="broadcast-name">---</div>
+						</div>
+						<div id="ptext-middle">
+						</div>
+						<div id="ptext-bottom">
+							<div class="plabel" id="show-name">---</div>
+							<div class="plabel" id="desc">\\\</div>
+						</div>
 					</div>
 			</div>
 
diff --git a/player.js b/player.js
index 8472126..5ada359 100644
--- a/player.js
+++ b/player.js
@@ -41,9 +41,9 @@ function loadData(url, callback, ...args) {
 
 function showText(){
 
-	var show = document.getElementById('track-show');
-	var artist = document.getElementById('track-artist');
-	var episode = document.getElementById('track-name');
+	var show = document.getElementById('show-name');
+	var artist = document.getElementById('broadcast-artist');
+	var episode = document.getElementById('broadcast-name');
 
 	//var br = document.getElementById('bitrate');
 	//var sr = document.getElementById('samplerate');
@@ -51,8 +51,9 @@ function showText(){
 	var descr = document.getElementById('desc');
 	var stat = document.getElementById('status');
 
-	show.innerHTML = "SFM broadcasting: " + show_title;
-	artist.innerHTML = "host/dj/artist: " + artist_name;
+	//show.innerHTML = "SFM broadcasting: " + show_title;
+	show.innerHTML = show_title;
+	artist.innerHTML = artist_name;
 
 	//track_title show_title artist_name
 	//if it's a live stream it's not an episode, generally
@@ -60,14 +61,14 @@ function showText(){
 		episode.style.visibility = 'hidden';
 	}else{
 		episode.style.visibility = 'visible';
-		episode.innerHTML = "episode: " + track_title;
+		episode.innerHTML = track_title;
 	}
 
 	//br.innerHTML = "bitrate: " + bitrate / 1000. + "Kbps";
 	//sr.innerHTML = "sample rate: " + samplerate / 1000. + "kHz";
 	//chans.innerHTML = "channels: " + track_chans;
 	descr.innerHTML = "description: " + desc;
-	stat.innerHTML = "status: " + player_status;
+	stat.innerHTML = player_status;
 	stat.style.color = status_color;
 }
 
@@ -159,10 +160,10 @@ function parseJSON2(message) {
 
 	} else {
 		console.log("not a show");
-		track_title = "--- no track currently";
-		artist_name = "--- no artist currently";
-		show_title = "--- no show currently";
-		player_status = "--- off the air"
+		track_title = "no episode title";
+		artist_name = "no host/artist";
+		show_title = "no broadcast currently";
+		player_status = "off the air"
 		status_color = "#898989";
 	}
 	
diff --git a/style.css b/style.css
index fd265a2..53a5e36 100644
--- a/style.css
+++ b/style.css
@@ -16,7 +16,9 @@
 	flex-direction: row;
 	justify-content: flex-end;
 	gap: 1em;
-	border: 1px solid black;
+	border-color: black;
+	border-width: 1px 0px 1px 0px;
+	border-style: solid;
 }
 
 #c-bottom {
@@ -44,12 +46,38 @@
 }
 
 
+#player-info {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+	width: 500px;
+	/* background: rgba(0, 0, 0, 0.03); */
+	padding: 10px;
+}
+
 #player-heading { 
 	display: flex;
-	/* flex-basis: 55%; */
-	/* margin-right: 20px; */
+	flex-direction: column;
+	flex-basis: 200px;
+	background: rgba(128, 128, 128, 0.2); 
+	padding: 10px;
+
+	font-size: 22px;
+	letter-spacing: 0.3rem;
+	text-align: center;
 }	
 
+#ptext-top, #ptext-middle, #ptext-bottom {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+
+	/* background: rgba(0, 0, 0, 0.1); */
+}
+#ptext-middle {
+	height: 66%;
+}
+
 
 /* ---------------------------------------------------------- */
 
@@ -64,7 +92,9 @@
 .player-frame-bottom {
 	margin: 0px;
 	padding: 20px;
-	 border: 1px solid black;
+	border-color: black;
+	border-style: solid;
+	border-width: 2px 0px 2px 0px;
 	/* border-radius: 15px; */
 	background-color: #FFFFFF; 
 }
@@ -140,23 +170,6 @@
 	height: 300px;
 }
 
-#player-info {
-	width: 500px;
-	text-align: right;
-	background: rgba(0, 0, 0, 0.03);
-	padding: 10px;
-}
-
-#player-heading div {
-	color: rgb(255, 255, 255);
-	background: rgba(128, 128, 128, 0.2); 
-	text-align: left;
-
-	letter-spacing: 0.3rem;
-	font-size: 22px;
-
-	padding: 20px;
-}
 
 #infotext p {
 	text-align: center;
@@ -230,18 +243,31 @@ h1, p {
 }
 
 /* ---------------------------------------------------------- */
+/* text elements */
 
+/* now playing */
+#player-np {
+	color: rgb(255, 255, 255);
+}
 
-#track-artist {
+#broadcast-artist {
 	color: #565656;
 }
-#track-show, #status { 
+#show-name, #status { 
 	color: #7a7a7a;
 }
-.plabel {
+#status {
+	font-size: 20px;
+}
+#desc {
 	color: #b2b2b2;
 }
 
+.plabel {
+	/* border: 1px solid black; */
+	margin-bottom: 10px;
+}
+
 /* ---------------------------------------------------------- */
 
 .slider_container {
-- 
2.34.1