owen/lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Better styling media player

Browse Source
This commit is contained in:
emeric
2018-09-05 21:19:51 +02:00
parent ea4befe765
commit dc6b134af6
2 changed files with 30 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/mediaplayer.xml
+18 -31
View File
@@ -5,42 +5,29 @@
<message id="Lms.MediaPlayer.template"> <message id="Lms.MediaPlayer.template">
<audio id="lms-mp-audio"></audio> <audio id="lms-mp-audio"></audio>
<div class="container"> <div class="container">
<div class="progress Lms-player-progress"> <div class="progress Lms-player-progress">
<div id="lms-mp-progress" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%"> <div id="lms-mp-progress" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<span class="sr-only">20% Complete</span> <span class="sr-only">20% Complete</span>
</div>
</div> </div>
</div>
<div class="container-fluid"> <div class="row">
<div class="row"> <div class="col-xs-4 Lms-player-controls">
<div class="col-xs-4 Lms-horizontal-center"> <i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i> <i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i>
<i id="lms-mp-play" class="fa fa-play Lms-player-btn Lms-player-btn-playpause"></i> <i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i>
<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn Lms-player-btn-playpause" style="display: none"></i> <i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i> </div>
</div> <div class="col-xs-8">
<div class="col-xs-8 Lms-horizontal-center"> <div class="Lms-player-text">
<div class="container-fluid"> ${title}
<div class="row"> </div>
<div class="col-xs-12 Lms-horizontal-center"> <div class="Lms-player-text">
${title} <small><span class="hidden-xs">${release}</span><i>${artist}</i></small>
</div>
</div>
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
<small>
<span class="hidden-xs">
${release}
</span>
<i>${artist}</i>
</small>
</div>
</div>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
</message> </message>
docroot/css/lms.css
+12 -1
View File
@@ -246,7 +246,7 @@ a:hover {
.Lms-player-seek { .Lms-player-seek {
cursor: pointer; cursor: pointer;
z-index: 1; z-index: 1;
# touch-action: manipulation; touch-action: manipulation;
} }
.Lms-player-progress { .Lms-player-progress {
@@ -257,3 +257,14 @@ a:hover {
margin-bottom: 8px; margin-bottom: 8px;
} }
.Lms-player-controls {
text-align: center;
white-space: nowrap;
}
.Lms-player-text {
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}