Added some style to improve usability

approot/artistsinfo.xml

@@ -3,19 +3,10 @@
 <!--FORMS message blocks-->
 
 <message id="Lms.Explore.ArtistsInfo.template">
-	<div class="hidden-xs">
+	<h3>${tr:Lms.Explore.ArtistsInfo.most-played}</h3>
-		<div class="page-header">
+	${most-played}
-			<h2>${tr:Lms.Explore.ArtistsInfo.most-played}</h2>
+	<h3>${tr:Lms.Explore.ArtistsInfo.recently-added}</h3>
-		</div>
+	${recently-added}
-		${most-played}
-	</div>
-
-	<div class="hidden-xs">
-		<div class="page-header hidden-xs">
-			<h2>${tr:Lms.Explore.ArtistsInfo.recently-added}</h2>
-		</div>
-		${recently-added}
-	</div>
 </message>
 
 <message id="Lms.Explore.ArtistsInfo.template.entry">

approot/explore.xml

@@ -4,8 +4,8 @@
 <message id="Lms.Explore.template">
 	<div class="row">
 		<div class="col-sm-3">
-			${filters}
+			${filters class="Lms-explore-filters"}
-			${info}
+			${info class="Lms-explore-info hidden-xs"}
 		</div>
 		<div class="col-sm-8 col-sm-offset-1">
 			${contents}
@@ -18,12 +18,8 @@
 </message>
 
 <message id="Lms.Explore.template.filters">
-	<div class="form-group">
+	<h3>${tr:Lms.Explore.filters} ${add-filter class="btn-primary"}</h3>
-		<div class="page-header">
+	${clusters}
-			<h3>${tr:Lms.Explore.filters} ${add-filter class="btn-primary"}</h3>
-		</div>
-		${clusters}
-	</div>
 </message>
 
 <message id="Lms.Explore.template.cluster-entry">

approot/mediaplayer.xml

@@ -4,10 +4,10 @@
 
 <message id="Lms.MediaPlayer.template">
 	<audio id="lms-mp-audio"></audio>
-	<i id="lms-mp-previous" class="fa fa-step-backward fa-2x"></i>
+	<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn"></i>
-	<i id="lms-mp-play" class="fa fa-play fa-2x"></i>
+	<i id="lms-mp-play" class="fa fa-play Lms-player-btn"></i>
-	<i id="lms-mp-pause" class="fa fa-pause fa-2x" style="display: none"></i>
+	<i id="lms-mp-pause" class="fa fa-pause Lms-player-btn" style="display: none"></i>
-	<i id="lms-mp-next" class="fa fa-step-forward fa-2x"></i>
+	<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn"></i>
 	${title}${artist}${release}
 	<span id="lms-mp-time">00:00</span>
 	<span id="lms-mp-duration">00:00</span>

approot/release.xml

@@ -11,7 +11,11 @@
 </message>
 
 <message id="Lms.Explore.Release.template">
-	${cover}
+	<div class="row">
+		<div class="col-md-12">
+			${cover class="Lms-explore-release-cover"}
+	        </div>
+	</div>
 	<div class="page-header">
 		<h2>${name}</h2>
 		${<if-has-artist>}<h4>${artist-name}</h4>${</if-has-artist>}

approot/releasesinfo.xml

@@ -3,19 +3,10 @@
 <messages xmlns:if="Wt.WTemplate.conditions">
 
 <message id="Lms.Explore.ReleasesInfo.template">
-	<div class="hidden-xs">
+	<h3>${tr:Lms.Explore.ReleasesInfo.most-played}</h3>
-		<div class="page-header">
+	${most-played}
-			<h2>${tr:Lms.Explore.ReleasesInfo.most-played}</h2>
+	<h3>${tr:Lms.Explore.ReleasesInfo.recently-added}</h3>
-		</div>
+	${recently-added}
-		${most-played}
-	</div>
-
-	<div class="hidden-xs">
-		<div class="page-header">
-			<h2>${tr:Lms.Explore.ReleasesInfo.recently-added}</h2>
-		</div>
-		${recently-added}
-	</div>
 </message>
 
 <message id="Lms.Explore.ReleasesInfo.template.entry">

approot/templates.xml

@@ -3,8 +3,10 @@
 
 <message id="Lms.template">
 	${navbar-top class="main-nav"}
-	${contents class="container"}
+	<div class="container">
-	${player class="Lms-player"}
+		${contents class="Lms-contents"}
+	</div>
+	${player class="Lms-player Lms-vertical-align"}
 </message>
 
 </messages>

docroot/css/lms.css

@@ -1,3 +1,7 @@
+.Lms-vertical-align {
+	display: flex;
+	align-items: center;
+}
 
 .Lms-cluster {
 }
@@ -46,7 +50,38 @@
 	font-weight: bold;
 }
 
-.Lms-player {
+.Lms-contents {
-	background-color: grey;
+	margin-bottom: 50px;
 }
 
+.Lms-explore-filters {
+	background-color: #f5f5f5;
+	padding: 8px;
+	border-radius: 8px;
+	margin-bottom: 16px;
+}
+
+.Lms-explore-info {
+	background-color: #f5f5f5;
+	padding: 8px;
+	border-radius: 8px;
+}
+
+.Lms-explore-release-cover {
+	max-width: 100%;
+}
+
+.Lms-player {
+	  position: fixed;
+	  bottom: 0;
+	  width: 100%;
+	  height: 50px;
+	  background-color: #f5f5f5;
+}
+
+.Lms-player-btn {
+	font-size: 34px !important;
+	margin: 8px;
+}
+
+