more minimal design with less borders, isolated text elements into flex

diff --git a/index.html b/index.html
index a56a652dc3186b44e32cf2735cc750ecae036bf7..2e59abeb4b8ce6e24afa0a569cb853ce9ad54a60 100644 (file)
--- 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 84721260234a11eedeeda938c053bbace66e8f79..5ada359abe178974712448339f6c5b659aaeaabf 100644 (file)
--- 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 fd265a26d62eae90c74384bf0a51a22e889605f1..53a5e367f20da793ded1f78e2684463e91efcd6e 100644 (file)
--- 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 {