Improved ui style

README.md

@@ -3,13 +3,15 @@
 LMS is a self-hosted media streaming software, released under the GPLv3 license.
 It allows you to access your music using an http(s) web interface.
 
-## Features
+## Main features
-- Audio transcode for maximum interoperability and low bandwith requirements
+- Responsive design
-- User management
 - Browse your audio collection using tag-based filters
 - Custom tag support
+- User management
+- Persistent play queue
+- Radio mode
 - MusicBrainzID support to handle duplicated artist and release names
-- Reverse proxy support
+- Audio transcode for maximum interoperability and low bandwith requirements
 
 LMS is written entirely in C++. Therefore, it is suitable to run on embedded devices, where space and memory are limited.
 

approot/artist.xml

@@ -8,19 +8,19 @@
 		${clusters}
 		${play-btn}${add-btn}
 	</div>
-	${releases class="list-group"}
+	${releases}
 </message>
 
 <message id="Lms.Explore.Artist.template.entry">
-	<div class="media list-group-item">
+	<div class="media-left">
-		<div class="pull-left media-middle">
+		${cover class="media-object"}
-			${cover class="media-object"}
+	</div>
-		</div>
+	<div class="media-body media-middle">
-		<div class="media-body">
+		<h4 class="media-heading">
-			<h4 class="media-heading">${name}</h4>
+			${name}
-		</div>
+		</h4>
-		${<if-has-various-artists>}${tr:Lms.Explore.various-artists}${</if-has-various-artists>}
+		${<if-has-various-artists>}<h4><i>${tr:Lms.Explore.various-artists}</i></h4>${</if-has-various-artists>}
-		<h4>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</h4>
+		<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>
 </message>

approot/artists.xml

@@ -12,15 +12,14 @@
 			${search}
 		</div>
 	</div>
-	${artists class="list-group"}
+	${artists}
 	${show-more}
 </message>
 
 <message id="Lms.Explore.Artists.template.entry">
-	<div class="list-group-item">
+	<div class="Lms-explore-artists-entry Lms-vertical-align">
-		<span class="badge">${nb-release}</span>
+		<h4>${name}</h4>
-		${name}
+		<span class="badge Lms-explore-artists-entry-nb-releases">${nb-release}</span>
-		${clusters}
 	</div>
 </message>
 

approot/explore.xml

@@ -3,11 +3,11 @@
 
 <message id="Lms.Explore.template">
 	<div class="row">
-		<div class="col-sm-3">
+		<div class="col-sm-4">
 			${filters class="Lms-explore-filters"}
 			${info class="Lms-explore-info hidden-xs"}
 		</div>
-		<div class="col-sm-8 col-sm-offset-1">
+		<div class="col-sm-8">
 			${contents}
 		</div>
 	</div>

approot/messages.xml

@@ -62,7 +62,7 @@
 <message id="Lms.Auth.welcome">Welcome!</message>
 
 <!--Explore-->
-<message id="Lms.Explore.add-filter">Add</message>
+<message id="Lms.Explore.add-filter">Add filter</message>
 <message id="Lms.Explore.artists">Artists</message>
 <message id="Lms.Explore.filters">Filters</message>
 <message id="Lms.Explore.releases">Albums</message>

approot/release.xml

@@ -9,9 +9,9 @@
 	        </div>
 	</div>
 	<div class="page-header">
-		<h2>${name}</h2>
+		<h3>${name}</h3>
-		${<if-has-artist>}<h4>${artist-name}</h4>${</if-has-artist>}
+		${<if-has-artist>}<h4><i>${artist-name}</i></h4>${</if-has-artist>}
-		<h4>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</h4>
+		<h4><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></h4>
 		${clusters}
 		${play-btn}${add-btn}
 	</div>
@@ -22,7 +22,7 @@
 	<div class="row Lms-explore-release-entry Lms-vertical-align">
 		<div class="col-xs-9 Lms-explore-release-entry-name">
 			${<if-has-disc-number>}${disc-number}-${</if-has-disc-number>}${<if-has-track-number>}${track-number}. ${</if-has-track-number>}
-			${<if-has-artist>}${artist-name} - ${</if-has-artist>}
+			${<if-has-artist>}<i>${artist-name}</i> - ${</if-has-artist>}
 			${name}
 		</div>
 		<div class="col-xs-3 Lms-explore-release-entry-controls">

approot/releases.xml

@@ -12,19 +12,19 @@
 			${search}
 		</div>
 	</div>
-	${releases class="list-group"}
+	${releases}
 	${show-more}
 </message>
 
 <message id="Lms.Explore.Releases.template.entry">
-	<div class="media list-group-item">
+	<div class="media-left">
-		<div class="pull-left media-middle">
+		${cover class="media-object"}
-			${cover class="media-object"}
+	</div>
-		</div>
+	<div class="media-body media-middle">
-		<div class="media-body">
+		<h4 class="media-heading">
-			<h4 class="media-heading">${release-name}</h4>
+			${release-name}
-			${<if-has-artist>}${artist-name}${</if-has-artist>}
+		</h4>
-		</div>
+		${<if-has-artist>}<h4><small><i>${artist-name}</i></small></h4>${</if-has-artist>}
 		${clusters}
 		${play-btn}${add-btn}
 	</div>

approot/releasesinfo.xml

@@ -10,9 +10,15 @@
 </message>
 
 <message id="Lms.Explore.ReleasesInfo.template.entry">
-	${cover}
+	<div class="media-left">
-	${release-name}
+		${cover class="media-object"}
-	${<if-has-artist>}${artist-name}${</if-has-artist>}
+	</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>
 </message>
 
 </messages>

docroot/css/lms.css

@@ -118,6 +118,18 @@ a:hover {
 	text-align: center;
 }
 
+.Lms-explore-artists-entry {
+	min-height: 48px;
+}
+
+.Lms-explore-artists-entry:hover {
+	background-color: lightgrey;
+}
+
+.Lms-explore-artists-entry-nb-releases {
+	margin: 8px;
+}
+
 .Lms-explore-btn {
 	font-size: 22px !important;
 	cursor: pointer;

src/ui/explore/ArtistView.cpp

@@ -125,6 +125,7 @@ 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/Filters.cpp

@@ -145,7 +145,7 @@ Filters::Filters()
 	addFunction("tr", &Functions::tr);
 
 	// Filters
-	Wt::WPushButton *addFilterBtn = bindNew<Wt::WPushButton>("add-filter", Wt::WText::tr("Lms.Explore.add-filter"));
+	Wt::WPushButton *addFilterBtn = bindNew<Wt::WPushButton>("add-filter", Wt::WText::tr("Lms.add"));
 	addFilterBtn->clicked().connect(this, &Filters::showDialog);
 
 	_filters = bindNew<Wt::WContainerWidget>("clusters");

src/ui/explore/ReleasesInfoView.cpp

@@ -43,11 +43,12 @@ 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));
 		auto cover = std::make_unique<Wt::WImage>();
-		cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 128));
+		cover->setImageLink(LmsApp->getImageResource()->getReleaseUrl(release.id(), 48));
 		anchor->setImage(std::move(cover));
 
 		auto artists = release->getArtists();

src/ui/explore/ReleasesView.cpp

@@ -87,6 +87,7 @@ 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>();