From 027e9d9bf70f78142fef3c12303705d3cc261218 Mon Sep 17 00:00:00 2001
From: emeric <itmfr@yahoo.fr>
Date: Sat, 16 Jan 2016 17:36:47 +0100
Subject: [PATCH] [UI] Better looking

---
 approot/templates.xml        | 15 +++++++++------
 docroot/css/lms.css          | 27 +++++++++++++++++++++++++--
 src/ui/audio/AudioPlayer.cpp |  5 +++--
 3 files changed, 37 insertions(+), 10 deletions(-)

diff --git a/approot/templates.xml b/approot/templates.xml
index 4b7a4e69..c6e1c600 100644
--- a/approot/templates.xml
+++ b/approot/templates.xml
@@ -531,16 +531,19 @@
 <message id="wa-audio-player">
 	${audio}
 	${prev}${play-pause}${next}
+	<div class="mediaplayer-volume-container visible-lg">
+		${volume}
+	</div>
 	<div class="mediaplayer-cover hidden-xs">
 		${cover}
 	</div>
 	<div class="mediaplayer-info-container">
-		<span class="mediaplayer-track">${track}</span>   <span class="mediaplayer-artist">${artist}</span> <br/>
-		${seekbar}
-	</div>
-	${curtime}${duration}
-	<div class="mediaplayer-volume-container visible-lg">
-		${volume}
+		<div class="mediaplayer-track-info">
+			<span class="mediaplayer-track">${track}</span> <span class="mediaplayer-artist">${artist}</span>
+		</div>
+		<div class="mediaplayer-progress-container">
+			${curtime}${seekbar}${duration}
+		</div>
 	</div>
 	${shuffle}${repeat}${playlist}
 </message>
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index c6ba8d11..6c0bf27d 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -87,11 +87,34 @@
 }
 
 .mediaplayer-info-container {
+	width: 100%;
+	min-width: 100px;
+	margin: 8px;
+}
+
+.mediaplayer-track-info {
 	text-overflow: ellipsis;
 	overflow: hidden;
 	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 {
diff --git a/src/ui/audio/AudioPlayer.cpp b/src/ui/audio/AudioPlayer.cpp
index 4fc43104..b8498493 100644
--- a/src/ui/audio/AudioPlayer.cpp
+++ b/src/ui/audio/AudioPlayer.cpp
@@ -108,6 +108,7 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 	_cover->setImageLink(SessionCoverResource()->getUnknownTrackUrl(64));
 
 	InputRange *seekbar = new InputRange();
+	seekbar->addStyleClass("mediaplayer-seekbar");
 	bindWidget("seekbar", seekbar);
 
 	bindString("track", "Track");
@@ -177,11 +178,11 @@ AudioPlayer::AudioPlayer(Wt::WContainerWidget *parent)
 	bindWidget("play-pause", playPauseBtn);
 
 	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);
 
 	_trackDuration = new Wt::WText("00:00");
-	_trackDuration->addStyleClass("hidden-xs");
+	_trackDuration->addStyleClass("hidden-xs badge mediaplayer-badge mediaplayer-total-duration");
 	bindWidget("duration", _trackDuration);
 
 	this->doJavaScript(