pratyush/ircradio
1
0
Fork 0
mirror of https://github.com/sanderfoobar/ircradio.git synced 2025-02-16 21:40:50 +01:00
Code Issues Projects Releases Wiki Activity

flexxing boxes and fading button

Browse Source
This commit is contained in:
Ricky 'fluffybrony' Spaghettio 2023-09-05 21:43:46 +02:00
parent a0440060b4
commit 590a6ffec2
2 changed files with 26 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
ircradio/static/index.css
View File

@ -6,12 +6,23 @@ button[data-playing="true"] { color: white; }
.container {max-width:96%;} .container {max-width:96%;}
.card {border: 1px solid rgba(250,250,250,.1) !important;} .card {border: 1px solid rgba(250,250,250,.1) !important;}
.card-body {background-color: #151515;} .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;} .text-muted { color: #dedede !important;}
.btn-outline-primary { .btn-outline-primary {
color: #5586b7; color: #5586b7;
border-color: #527ca8; 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 { .bootstrap-table .search {
float: none !important; float: none !important;
width: 100% !important; width: 100% !important;
@ -23,6 +34,10 @@ button[data-playing="true"] { color: white; }
max-height: 170px; max-height: 170px;
object-fit: cover; object-fit: cover;
} }
.card-footer {
border:none !important;
background-color: #151515 !important;
}
@media screen and (min-width:1100px){ @media screen and (min-width:1100px){
.container {max-width:1200px;} .container {max-width:1200px;}
} }

15
ircradio/templates/index.html
View File

@ -7,8 +7,8 @@
<div class="container"> <div class="container">
<div class="row"> <div class="row">
{% for rs in radio_stations %} {% for rs in radio_stations %}
<div class="col-md-4 col-sm-6 col-xl-3"> <div class="col-md-4 col-sm-6 col-xl-3 d-flex">
<div data-radio="{{ rs.id }}" class="card box-shadow mb-4"> <div data-radio="{{ rs.id }}" class="card box-shadow mb-4 flex-fill">
<div class="card-header"> <div class="card-header">
<h5 class="my-0 font-weight-normal">{{ rs.title }}</h5> <h5 class="my-0 font-weight-normal">{{ rs.title }}</h5>
</div> </div>
@ -19,7 +19,11 @@
<li class="d-none listeners_str">0 listeners</li> <li class="d-none listeners_str">0 listeners</li>
<li class="progress_str text-muted">00:00 / 00:00</li> <li class="progress_str text-muted">00:00 / 00:00</li>
</ul> </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"> <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"> <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> <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 %} {% endif %}
<small class="footer d-block text-muted mt-3">{{ rs.description | safe }}</small>
</div> </div>
</div> </div>
</div> </div>
@ -137,11 +140,11 @@
_sel.find('.btn_audio_icon').remove(); _sel.find('.btn_audio_icon').remove();
if(active) { if(active) {
_sel.addClass('btn-primary'); _sel.addClass('btn-active');
_sel.attr('data-playing', 'true'); _sel.attr('data-playing', 'true');
_sel.prepend(icon_stop); _sel.prepend(icon_stop);
} else { } else {
_sel.removeClass('btn-primary'); _sel.removeClass('btn-active');
_sel.attr('data-playing', 'false'); _sel.attr('data-playing', 'false');
_sel.prepend(icon_play); _sel.prepend(icon_play);
} }