Better hover style on media rows

approot/artist.xml

@@ -12,16 +12,22 @@
 </message>
 
 <message id="Lms.Explore.Artist.template.entry">
-	<div class="media-left">
+	<div class="row">
-		${cover class="media-object"}
+		<div class="col-xs-12 Lms-explore-artist-entry">
-	</div>
+			<div class="media">
-	<div class="media-body media-middle">
+				<div class="media-left media-middle">
-		<h4 class="media-heading">
+					${cover class="media-object"}
-			${name}
+				</div>
-		</h4>
+				<div class="media-body media-middle">
-		${<if-has-various-artists>}<h4><i>${tr:Lms.Explore.various-artists}</i></h4>${</if-has-various-artists>}
+					<h4 class="media-heading">
-		<h4><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></h4>
+						${name}
-		${play-btn}${add-btn}
+					</h4>
+					${<if-has-various-artists>}<h4><i>${tr:Lms.Explore.various-artists}</i></h4>${</if-has-various-artists>}
+					<h4><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></h4>
+					${play-btn}${add-btn}
+				</div>
+			</div>
+		</div>
 	</div>
 </message>
 

approot/releases.xml

@@ -21,16 +21,22 @@
 </message>
 
 <message id="Lms.Explore.Releases.template.entry">
-	<div class="media-left">
+	<div class="row">
-		${cover class="media-object"}
+		<div class="col-xs-12 Lms-explore-releases-entry">
-	</div>
+			<div class="media">
-	<div class="media-body media-middle">
+				<div class="media-left media-middle">
-		<h4 class="media-heading">
+					${cover class="media-object"}
-			${release-name}
+				</div>
-		</h4>
+				<div class="media-body media-middle">
-		${<if-has-artist>}<h4><small><i>${artist-name}</i></small></h4>${</if-has-artist>}
+					<h4 class="media-heading">
-		${clusters}
+						${release-name}
-		${play-btn}${add-btn}
+					</h4>
+					${<if-has-artist>}<h4><small><i>${artist-name}</i></small></h4>${</if-has-artist>}
+					${clusters}
+					${play-btn}${add-btn}
+				</div>
+			</div>
+		</div>
 	</div>
 </message>
 

approot/releasesinfo.xml

@@ -10,14 +10,20 @@
 </message>
 
 <message id="Lms.Explore.ReleasesInfo.template.entry">
-	<div class="media-left">
+	<div class="row Lms-explore-releasesinfo-entry">
-		${cover class="media-object"}
+		<div class="col-xs-12">
-	</div>
+			<div class="media">
-	<div class="media-body media-middle">
+				<div class="media-left media-middle">
-		<div class="media-heading">
+					${cover class="media-object"}
-			${release-name}
+				</div>
+				<div class="media-body media-middle">
+					<div class="media-heading">
+						${release-name}
+					</div>
+					${<if-has-artist>}<small><i>${artist-name}</i></small>${</if-has-artist>}
+				</div>
+			</div>
 		</div>
-		${<if-has-artist>}<small><i>${artist-name}</i></small>${</if-has-artist>}
 	</div>
 </message>
 

docroot/css/lms.css

@@ -12,10 +12,6 @@ a:hover {
 	color: #337ab7;
 }
 
-.media:hover {
-	background-color: lightgrey;
-}
-
 .Lms-vertical-align {
 	display: flex;
 	align-items: center;
@@ -99,6 +95,25 @@ a:hover {
 	border-radius: 8px;
 }
 
+.Lms-explore-releases-entry {
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.Lms-explore-releases-entry:hover {
+	background-color: lightgrey;
+}
+
+.Lms-explore-releasesinfo-entry {
+	margin: 0px;
+	padding-top: 4px;
+	padding-bottom: 4px;
+}
+
+.Lms-explore-releasesinfo-entry:hover {
+	background-color: lightgrey;
+}
+
 .Lms-explore-release-cover {
 	max-width: 100%;
 	border-radius: 8px;
@@ -128,13 +143,22 @@ a:hover {
 
 .Lms-explore-artistsinfo-entry {
 	min-height: 28px;
-	margin: 2px;
+	margin: 0px;
 }
 
 .Lms-explore-artistsinfo-entry:hover {
 	background-color: lightgrey;
 }
 
+.Lms-explore-artist-entry {
+	padding-top: 8px;
+	padding-bottom: 8px;
+}
+
+.Lms-explore-artist-entry:hover {
+	background-color: lightgrey;
+}
+
 .Lms-explore-btn {
 	font-size: 22px !important;
 	cursor: pointer;

src/ui/explore/ArtistView.cpp

@@ -125,7 +125,6 @@ Artist::refresh()
 
 		Wt::WTemplate* entry = releasesContainer->addNew<Wt::WTemplate>(Wt::WString::tr("Lms.Explore.Artist.template.entry"));
 		entry->addFunction("tr", Wt::WTemplate::Functions::tr);
-		entry->setStyleClass("media");
 
 		{
 			Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));

src/ui/explore/ReleasesInfoView.cpp

@@ -43,7 +43,6 @@ void addEntries(Wt::WContainerWidget* container, const std::vector<Release::poin
 	{
 		Wt::WTemplate* entry = container->addNew<Wt::WTemplate>(Wt::WString::tr("Lms.Explore.ReleasesInfo.template.entry"));
 
-		entry->setStyleClass("media");
 		entry->bindWidget("release-name", LmsApplication::createReleaseAnchor(release));
 
 		Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));

src/ui/explore/ReleasesView.cpp

@@ -86,7 +86,6 @@ Releases::addSome()
 
 		Wt::WTemplate* entry = _container->addNew<Wt::WTemplate>(Wt::WString::tr("Lms.Explore.Releases.template.entry"));
 		entry->addFunction("tr", Wt::WTemplate::Functions::tr);
-		entry->setStyleClass("media");
 
 		Wt::WAnchor* anchor = entry->bindWidget("cover", LmsApplication::createReleaseAnchor(release, false));
 		auto cover = std::make_unique<Wt::WImage>();