[UI] Better looking

This commit is contained in:
emeric
2016-01-16 17:36:47 +01:00
parent 514e46a724
commit 027e9d9bf7
3 changed files with 37 additions and 10 deletions
+9 -6
View File
@@ -531,16 +531,19 @@
<message id="wa-audio-player"> <message id="wa-audio-player">
${audio} ${audio}
${prev}${play-pause}${next} ${prev}${play-pause}${next}
<div class="mediaplayer-volume-container visible-lg">
${volume}
</div>
<div class="mediaplayer-cover hidden-xs"> <div class="mediaplayer-cover hidden-xs">
${cover} ${cover}
</div> </div>
<div class="mediaplayer-info-container"> <div class="mediaplayer-info-container">
<span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span> <br/> <div class="mediaplayer-track-info">
${seekbar} <span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span>
</div> </div>
${curtime}${duration} <div class="mediaplayer-progress-container">
<div class="mediaplayer-volume-container visible-lg"> ${curtime}${seekbar}${duration}
${volume} </div>
</div> </div>
${shuffle}${repeat}${playlist} ${shuffle}${repeat}${playlist}
</message> </message>
+25 -2
View File
@@ -87,11 +87,34 @@
} }
.mediaplayer-info-container { .mediaplayer-info-container {
width: 100%;
min-width: 100px;
margin: 8px;
}
.mediaplayer-track-info {
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
width: 100%; }
margin: 8px;
.mediaplayer-progress-container {
display: flex;
align-items: center;
}
.mediaplayer-badge {
min-width: initial;
}
.mediaplayer-current-duration {
margin-right: 8px;
}
.mediaplayer-total-duration {
margin-left: 8px;
}
.mediaplayer-seekbar {
} }
.mediaplayer-volume-container { .mediaplayer-volume-container {
+3 -2
View File
@@ -108,6 +108,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
_cover->setImageLink(SessionCoverResource()->getUnknownTrackUrl(64)); _cover->setImageLink(SessionCoverResource()->getUnknownTrackUrl(64));
InputRange *seekbar = new InputRange(); InputRange *seekbar = new InputRange();
seekbar->addStyleClass("mediaplayer-seekbar");
bindWidget("seekbar", seekbar); bindWidget("seekbar", seekbar);
bindString("track", "Track"); bindString("track", "Track");
@@ -177,11 +178,11 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
bindWidget("play-pause", playPauseBtn); bindWidget("play-pause", playPauseBtn);
Wt::WText *trackCurrentTime = new Wt::WText("00:00"); Wt::WText *trackCurrentTime = new Wt::WText("00:00");
trackCurrentTime->addStyleClass("hidden-xs"); trackCurrentTime->addStyleClass("hidden-xs badge mediaplayer-badge mediaplayer-current-duration");
bindWidget("curtime", trackCurrentTime); bindWidget("curtime", trackCurrentTime);
_trackDuration = new Wt::WText("00:00"); _trackDuration = new Wt::WText("00:00");
_trackDuration->addStyleClass("hidden-xs"); _trackDuration->addStyleClass("hidden-xs badge mediaplayer-badge mediaplayer-total-duration");
bindWidget("duration", _trackDuration); bindWidget("duration", _trackDuration);
this->doJavaScript( this->doJavaScript(