From 590a6ffec26aed5cb309f368a43f858df37f0e48 Mon Sep 17 00:00:00 2001
From: Ricky 'fluffybrony' Spaghettio <fluffybrony@fbi.gov>
Date: Tue, 5 Sep 2023 21:43:46 +0200
Subject: [PATCH] flexxing boxes and fading button

---
 ircradio/static/index.css     | 19 +++++++++++++++++--
 ircradio/templates/index.html | 15 +++++++++------
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/ircradio/static/index.css b/ircradio/static/index.css
index 6681a56..fda081b 100644
--- a/ircradio/static/index.css
+++ b/ircradio/static/index.css
@@ -6,12 +6,23 @@ button[data-playing="true"] { color: white; }
 .container {max-width:96%;}
 .card {border: 1px solid rgba(250,250,250,.1) !important;}
 .card-body {background-color: #151515;}
-.card-header{background-color: rgb(25, 25, 25) !important;}
+.card-header{background-color: rgb(25, 25, 25) !important; text-align: center;}
 .text-muted { color: #dedede !important;}
 .btn-outline-primary {
     color: #5586b7;
     border-color: #527ca8;
 }
+@keyframes gradient {
+  0% { background-position: 0% 50%; }
+  50% { background-position: 100% 50%; }
+  100% { background-position: 0% 50%; }
+}
+.btn-active {
+  color:white;
+  background: linear-gradient(45deg, rgba(255, 42, 212, 1) 0%, rgba(255, 204, 0, 1) 100%);
+  background-size: 400% 400%;
+  animation: gradient 3s ease infinite;
+}
 .bootstrap-table .search {
   float: none !important;
   width: 100% !important;
@@ -23,6 +34,10 @@ button[data-playing="true"] { color: white; }
   max-height: 170px;
   object-fit: cover;
 }
+.card-footer {
+  border:none !important;
+  background-color: #151515 !important;
+}
 @media screen and (min-width:1100px){
   .container {max-width:1200px;}
-}
\ No newline at end of file
+}
diff --git a/ircradio/templates/index.html b/ircradio/templates/index.html
index 34ff5ac..4b2a8f5 100644
--- a/ircradio/templates/index.html
+++ b/ircradio/templates/index.html
@@ -7,8 +7,8 @@
 <div class="container">
   <div class="row">
     {% for rs in radio_stations %}
-      <div class="col-md-4 col-sm-6 col-xl-3">
-      <div data-radio="{{ rs.id }}" class="card box-shadow mb-4">
+      <div class="col-md-4 col-sm-6 col-xl-3 d-flex">
+      <div data-radio="{{ rs.id }}" class="card box-shadow mb-4 flex-fill">
         <div class="card-header">
           <h5 class="my-0 font-weight-normal">{{ rs.title }}</h5>
         </div>
@@ -19,7 +19,11 @@
             <li class="d-none listeners_str">0 listeners</li>
             <li class="progress_str text-muted">00:00 / 00:00</li>
           </ul>
-
+        </div>
+        <div class="card-footer">
+            <small class="footer d-block text-muted mt-3">{{ rs.description | safe }}</small>
+        </div>
+        <div class="card-footer">
           <button data-playing="false" data-url="{{ settings.icecast2_scheme + settings.icecast2_hostname + "/" + rs.mount_point }}" data-radio="{{ rs.id }}" type="button" class="btn btn-play btn-block btn-outline-primary mb-2">
             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="btn_audio_icon bi bi-play" viewBox="0 0 16 16">
               <path d="M10.804 8 5 4.633v6.734L10.804 8zm.792-.696a.802.802 0 0 1 0 1.392l-6.363 3.692C4.713 12.69 4 12.345 4 11.692V4.308c0-.653.713-.998 1.233-.696l6.363 3.692z"></path>
@@ -50,7 +54,6 @@
 
           {% endif %}
 
-          <small class="footer d-block text-muted mt-3">{{ rs.description | safe }}</small>
         </div>
       </div>
       </div>
@@ -137,11 +140,11 @@
     _sel.find('.btn_audio_icon').remove();
 
     if(active) {
-      _sel.addClass('btn-primary');
+      _sel.addClass('btn-active');
       _sel.attr('data-playing', 'true');
       _sel.prepend(icon_stop);
     } else {
-      _sel.removeClass('btn-primary');
+      _sel.removeClass('btn-active');
       _sel.attr('data-playing', 'false');
       _sel.prepend(icon_play);
     }