From 4c2dca647becb3ade91e764422136d3311f30dcd Mon Sep 17 00:00:00 2001
From: emeric <itmfr@yahoo.fr>
Date: Fri, 31 Aug 2018 15:48:01 +0200
Subject: [PATCH] Improved the tracks/playqueue view

---
 approot/playqueue.xml               | 16 +++++++++++----
 approot/tracks.xml                  | 15 ++++++--------
 docroot/css/lms.css                 | 32 +++++++++++++++++++++++++----
 src/ui/explore/ReleasesInfoView.cpp |  1 +
 src/ui/explore/ReleasesView.cpp     |  2 ++
 src/ui/explore/TracksView.cpp       |  5 +++--
 6 files changed, 52 insertions(+), 19 deletions(-)

diff --git a/approot/playqueue.xml b/approot/playqueue.xml
index 2e45a05c..205a14da 100644
--- a/approot/playqueue.xml
+++ b/approot/playqueue.xml
@@ -23,16 +23,24 @@
 </message>
 
 <message id="Lms.PlayQueue.play">
-	<i class="fa fa-play"></i>
+	<i class="fa fa-play Lms-playqueue-btn"></i>
 </message>
 
 <message id="Lms.PlayQueue.delete">
-	<i class="fa fa-remove"></i>
+	<i class="fa fa-remove Lms-playqueue-btn"></i>
 </message>
 
 <message id="Lms.PlayQueue.template.entry">
-	${play-btn} ${del-btn}
-	${name} ${<if-has-release>}${release-name}${</if-has-release>} ${<if-has-artist>}${artist-name}${</if-has-artist>}
+	<div class="row Lms-playqueue-entry Lms-vertical-align">
+		<div class="col-xs-9">
+			<h4>${name}</h4>
+			${<if-has-release>}<div class="hidden-xs" style="display: inline"><small>${release-name}</small></div>${</if-has-release>}
+			${<if-has-artist>}<small><i>${artist-name}</i></small>${</if-has-artist>}
+		</div>
+		<div class="col-xs-3 Lms-playqueue-entry-controls">
+			${play-btn} ${del-btn}
+		</div>
+	</div>
 </message>
 
 </messages>
diff --git a/approot/tracks.xml b/approot/tracks.xml
index da9139e6..46c647ae 100644
--- a/approot/tracks.xml
+++ b/approot/tracks.xml
@@ -19,16 +19,13 @@
 </message>
 
 <message id="Lms.Explore.Tracks.template.entry">
-	<div class="media list-group-item">
-		<div class="pull-left media-middle">
+	<div class="media-left">
 			${cover class="media-object"}
-		</div>
-		<div class="media-body">
-			<h4 class="media-heading">${name}</h4>
-		</div>
-		${<if-has-release>}${release-name}${</if-has-release>}
-		${<if-has-artist>}${artist-name}${</if-has-artist>}
-		${clusters}
+	</div>
+	<div class="media-body media-middle">
+		<h4 class="media-heading">${name}</h4>
+		${<if-has-release>}<h4><small>${release-name}</small></h4>${</if-has-release>}
+		${<if-has-artist>}<h4><small><i>${artist-name}</i></small></h4>${</if-has-artist>}
 		${play-btn}${add-btn}
 	</div>
 </message>
diff --git a/docroot/css/lms.css b/docroot/css/lms.css
index 1bfeb730..3889aa80 100644
--- a/docroot/css/lms.css
+++ b/docroot/css/lms.css
@@ -72,10 +72,6 @@ a:hover {
 	margin-bottom: 4px;
 }
 
-.Lms-playqueue-selected {
-	font-weight: bold;
-}
-
 .Lms-contents {
 	margin-bottom: 50px;
 }
@@ -125,6 +121,34 @@ a:hover {
 	cursor: pointer;
 }
 
+.Lms-playqueue-entry {
+	min-height: 32px;
+	margin-bottom: 2px;
+}
+
+.Lms-playqueue-entry:hover {
+	background-color: lightgrey;
+}
+
+.Lms-playqueue-entry-controls {
+	text-align: center;
+}
+
+.Lms-playqueue-btn {
+	font-size: 22px !important;
+	cursor: pointer;
+	margin: 2px;
+}
+
+.Lms-playqueue-selected {
+	font-weight: 800;
+}
+
+.Lms-playqueue-selected h4 {
+	font-weight: inherit;
+}
+
+
 .Lms-player {
 	position: fixed;
 	bottom: 0;
diff --git a/src/ui/explore/ReleasesInfoView.cpp b/src/ui/explore/ReleasesInfoView.cpp
index 7d564e52..1b3ae36c 100644
--- a/src/ui/explore/ReleasesInfoView.cpp
+++ b/src/ui/explore/ReleasesInfoView.cpp
@@ -49,6 +49,7 @@ void addEntries(Wt::WContainerWidget* container, const std::vector<Release::poin
 		Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
 		auto cover = std::make_unique<Wt::WImage>();
 		cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 48));
+		cover->setWidth(48);
 		anchor->setImage(std::move(cover));
 
 		auto artists = release->getArtists();
diff --git a/src/ui/explore/ReleasesView.cpp b/src/ui/explore/ReleasesView.cpp
index 89bd9f07..ecf5dee7 100644
--- a/src/ui/explore/ReleasesView.cpp
+++ b/src/ui/explore/ReleasesView.cpp
@@ -92,6 +92,8 @@ Releases::addSome()
 		Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
 		auto cover = std::make_unique<Wt::WImage>();
 		cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 128));
+		// Some images may not be square
+		cover->setWidth(128);
 		anchor->setImage(std::move(cover));
 
 		entry->bindWidget("release-name", LmsApplication::createReleaseAnchor(release));
diff --git a/src/ui/explore/TracksView.cpp b/src/ui/explore/TracksView.cpp
index 0b9e4c8b..c5d0621a 100644
--- a/src/ui/explore/TracksView.cpp
+++ b/src/ui/explore/TracksView.cpp
@@ -115,6 +115,7 @@ Tracks::addSome()
 	{
 		auto trackId = track.id();
 		Wt::WTemplate* entry = _tracksContainer->addNew<Wt::WTemplate>(Wt::WString::tr("Lms.Explore.Tracks.template.entry"));
+		entry->addStyleClass("media");
 
 		entry->bindString("name", Wt::WString::fromUTF8(track->getName()), Wt::TextFormat::Plain);
 
@@ -130,9 +131,9 @@ Tracks::addSome()
 			entry->bindWidget("release-name", LmsApplication::createReleaseAnchor(track->getRelease()));
 		}
 
-		Wt::WImage* cover = entry->bindNew<Wt::WImage>("cover", LmsApp->getImageResource()->getTrackUrl(track.id(), 64));
+		Wt::WImage* cover = entry->bindNew<Wt::WImage>("cover", LmsApp->getImageResource()->getTrackUrl(track.id(), 128));
 		// Some images may not be square
-		cover->setWidth(64);
+		cover->setWidth(128);
 
 		Wt::WContainerWidget* clusterContainers = entry->bindNew<Wt::WContainerWidget>("clusters");
 		{