Merge pull request 'flexxing boxes and fading button' (#8) from blasty/ircradio:master into master

Reviewed-on: dsc/ircradio#8

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;}
-}
+}

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);
     }