revil-O/platypush
1
0
Fork 0
forked from platypush/platypush
Code Pull requests Activity

Music player styles

Browse source
This commit is contained in:
Fabio Manganiello 2018-01-29 16:28:32 +01:00
parent 557cb3460b
commit ae3ee8ada5
3 changed files with 34 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
platypush/backend/http/static/css/application.css
View file

@ -24,24 +24,32 @@ main {
margin: auto;
}
ul.tab-nav {
padding-left: 0 !important; /* Override skeleton-tabs default */
}
.tab-content {
border: 1px solid #bbb;
border-top: 0;
padding: 20px;
margin: -25px 0 auto 5px;
margin-top: -25px;
}
.playback-controls {
text-align: right;
text-align: center;
}
.button[disabled] {
background: rgba(240,240,240,1)
}
.now-playing > .artist {
font-weight: bold;
display: block;
.track-info {
text-align: center;
margin-bottom: 15px;
}
.track-info > .artist {
font-weight: bold;
display: block;
}

2
platypush/backend/http/static/js/music.mpd.js
View file

@ -27,7 +27,7 @@ $(document).ready(function() {
var updateControls = function(status, track) {
var $playbackControls = $('.playback-controls');
var $curTrack = $('.now-playing');
var $curTrack = $('.track-info');
if (status) {
switch (status.state.toLowerCase()) {

36
platypush/backend/http/templates/plugins/music.mpd.html
View file

@ -1,32 +1,34 @@
<script type="text/javascript" src="{{ url_for('static', filename='js/music.mpd.js') }}"></script>
<div class="row">
<div class="six columns now-playing">
<div class="ten columns offset-by-one track-info">
<span class="no-track">No media is being played</span>
<span class="artist"></span>
<span class="track"></span>
</div>
<div class="six columns playback-controls">
<button data-action="previous">
<i class="fa fa-step-backward"></i>
</button>
<div class="row">
<div class="eight columns offset-by-two playback-controls">
<button data-action="previous">
<i class="fa fa-step-backward"></i>
</button>
<button data-action="play">
<i class="fa fa-play"></i>
</button>
<button data-action="play">
<i class="fa fa-play"></i>
</button>
<button data-action="pause">
<i class="fa fa-pause"></i>
</button>
<button data-action="pause">
<i class="fa fa-pause"></i>
</button>
<button data-action="stop">
<i class="fa fa-stop"></i>
</button>
<button data-action="stop">
<i class="fa fa-stop"></i>
</button>
<button data-action="next">
<i class="fa fa-step-forward"></i>
</button>
<button data-action="next">
<i class="fa fa-step-forward"></i>
</button>
</div>
</div>
</div>