Psion-fanatic/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; margin: auto;
} }
ul.tab-nav {
padding-left: 0 !important; /* Override skeleton-tabs default */
}
.tab-content { .tab-content {
border: 1px solid #bbb; border: 1px solid #bbb;
border-top: 0; border-top: 0;
padding: 20px; padding: 20px;
margin: -25px 0 auto 5px; margin-top: -25px;
} }
.playback-controls { .playback-controls {
text-align: right; text-align: center;
} }
.button[disabled] { .button[disabled] {
background: rgba(240,240,240,1) background: rgba(240,240,240,1)
} }
.track-info {
.now-playing > .artist { text-align: center;
font-weight: bold; margin-bottom: 15px;
display: block;
} }
.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 updateControls = function(status, track) {
var $playbackControls = $('.playback-controls'); var $playbackControls = $('.playback-controls');
var $curTrack = $('.now-playing'); var $curTrack = $('.track-info');
if (status) { if (status) {
switch (status.state.toLowerCase()) { 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> <script type="text/javascript" src="{{ url_for('static', filename='js/music.mpd.js') }}"></script>
<div class="row"> <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="no-track">No media is being played</span>
<span class="artist"></span> <span class="artist"></span>
<span class="track"></span> <span class="track"></span>
</div> </div>
<div class="six columns playback-controls"> <div class="row">
<button data-action="previous"> <div class="eight columns offset-by-two playback-controls">
<i class="fa fa-step-backward"></i> <button data-action="previous">
</button> <i class="fa fa-step-backward"></i>
</button>
<button data-action="play"> <button data-action="play">
<i class="fa fa-play"></i> <i class="fa fa-play"></i>
</button> </button>
<button data-action="pause"> <button data-action="pause">
<i class="fa fa-pause"></i> <i class="fa fa-pause"></i>
</button> </button>
<button data-action="stop"> <button data-action="stop">
<i class="fa fa-stop"></i> <i class="fa fa-stop"></i>
</button> </button>
<button data-action="next"> <button data-action="next">
<i class="fa fa-step-forward"></i> <i class="fa fa-step-forward"></i>
</button> </button>
</div>
</div> </div>
</div> </div>