Still converting to bootstrap 5

approot/artist.xml

@@ -6,7 +6,7 @@
 	<div class="mb-3">
 		${name}
 		${clusters class="mb-2"}
-		${play-btn class="me-2"}${more-btn}
+		${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
 	</div>
 	${<if-has-release>}
 	${releases class="row gy-4"}

approot/release.xml

@@ -18,7 +18,7 @@
 				${<if-has-various-release-artists>}${tr:Lms.Explore.various-artists}${</if-has-various-release-artists>}
 				${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}
 				${clusters class="mb-2"}
-				${play-btn class="btn btn-dark me-2"}${more-btn class="btn btn-dark"}
+				${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
 			</div>
 			${container class="d-grid gap-3"}
 		</div>
@@ -54,20 +54,26 @@
 	${tracks class="d-grid gap-1"}
 </message>
 
+<message id="Lms.Explore.Release.template.entry-nodisc">
+	${tracks class="d-grid gap-1"}
+</message>
+
 <message id="Lms.Explore.Release.template.entry">
 	<div class="d-flex align-items-center">
 		<div class="p-2 text-muted text-end" style="min-width: 2.1rem;">
 			${<if-has-track-number>}${track-number}${</if-has-track-number>}
 		</div>
 		<div class="p-2 flex-fill">
-			${name}
+			<div class="Lms-mw-fit-content">
-				${<if-has-artists>}<div><div style="display: inline-block;" onclick="Wt.stopPropagation(event)">${artists}</div></div>${</if-has-artists>}
+				${name}
+				${<if-has-artists>}${artists}${</if-has-artists>}
+			</div>
 		</div>
 		<div class="p-2 d-none d-sm-block text-muted">
 			${duration}
 		</div>
-		<div class="p-2" onclick="Wt.stopPropagation(event)">
+		<div class="p-2">
-			${more-btn class="btn btn-sm btn-outline-secondary border-0"}
+			${play-btn class="btn btn-sm btn-outline-secondary border-0"}${more-btn class="btn btn-sm btn-outline-secondary border-0"}
 		</div>
 	</div>
 </message>

approot/releases.xml

@@ -5,7 +5,7 @@
 <message id="Lms.Explore.Releases.template">
 	<div class="mb-3">
 		${mode class="nav nav-pills mb-2"}
-		${play-btn class="me-2"}${more-btn}
+		${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
 	</div>
 	${releases}
 </message>

approot/tracks.xml

@@ -6,7 +6,7 @@
 <message id="Lms.Explore.Tracks.template">
 	<div class="mb-3">
 		${mode class="nav nav-pills mb-2"}
-		${play-btn class="me-2"}${more-btn}
+		${play-btn class="btn btn-lg btn-outline-dark border-0 me-2"}${more-btn class="btn btn-lg btn-outline-dark border-0"}
 	</div>
 	${tracks}
 </message>
@@ -27,7 +27,7 @@
 			</div>
 			<div class="col-2 col-sm-2 col-md-2">
 				${duration}
-				${play-btn class="me-2"}${more-btn}
+				${play-btn class="btn btn-sm btn-outline-secondary border-0"}${more-btn class="btn btn-sm btn-outline-secondary border-0"}
 			</div>
 		</div>
 </message>

docroot/css/lms.css

@@ -5,3 +5,7 @@ body {
 .Lms-player {
 	height: 70px;
 }
+
+.Lms-mw-fit-content {
+	max-width: fit-content;
+}

src/lms/ui/LmsApplication.cpp

@@ -452,7 +452,6 @@ LmsApplication::createHome()
 	_coverResource = std::make_shared<CoverResource>();
 
 	declareJavaScriptFunction("onLoadCover", "function(id) { id.className += \" Lms-cover-loaded\"}");
-	declareJavaScriptFunction("stopPropagation", "function(event) { event.stopPropagation() }");
 	doJavaScript("$('body').tooltip({ selector: '[data-toggle=\"tooltip\"]'})");
 
 	Wt::WTemplate* main {root()->addWidget(std::make_unique<Wt::WTemplate>(Wt::WString::tr("Lms.main.template")))};

src/lms/ui/explore/ArtistView.cpp

@@ -22,6 +22,7 @@
 #include <Wt/WAnchor.h>
 #include <Wt/WImage.h>
 #include <Wt/WPopupMenu.h>
+#include <Wt/WPushButton.h>
 #include <Wt/WTemplate.h>
 #include <Wt/WText.h>
 
@@ -140,8 +141,7 @@ Artist::refreshView()
 
 	bindString("name", Wt::WString::fromUTF8(artist->getName()), Wt::TextFormat::Plain);
 	{
-		Wt::WText* playBtn = bindNew<Wt::WText>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML);
+		Wt::WPushButton* playBtn {bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)};
-
 		playBtn->clicked().connect([=]
 		{
 			artistsAction.emit(PlayQueueAction::Play, {_artistId});
@@ -149,8 +149,7 @@ Artist::refreshView()
 	}
 
 	{
-		Wt::WText* moreBtn = bindNew<Wt::WText>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML);
+		Wt::WPushButton* moreBtn {bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)};
-
 		moreBtn->clicked().connect([=]
 		{
 			Wt::WPopupMenu* popup {LmsApp->createPopupMenu()};

src/lms/ui/explore/ReleaseView.cpp

@@ -181,7 +181,7 @@ Release::refreshView()
 	const auto totalDisc {release->getTotalDisc()};
 	const bool isReleaseMultiDisc {totalDisc && *totalDisc > 1};
 
-	// Expect to be call in asc order
+	// Expect to be called in asc order
 	std::map<std::size_t, Wt::WContainerWidget*> trackContainers;
 	auto getOrAddDiscContainer = [&](std::size_t discNumber, const std::string& discSubtitle) -> Wt::WContainerWidget*
 	{
@@ -204,6 +204,18 @@ Release::refreshView()
 		return tracksContainer;
 	};
 
+	Wt::WContainerWidget* noDiscTracksContainer{};
+	auto getOrAddNoDiscContainer =  [&]
+	{
+		if (noDiscTracksContainer)
+			return noDiscTracksContainer;
+
+		Wt::WTemplate* disc {rootContainer->addNew<Wt::WTemplate>(Wt::WString::tr("Lms.Explore.Release.template.entry-nodisc"))};
+		noDiscTracksContainer = disc->bindNew<Wt::WContainerWidget>("tracks");
+
+		return noDiscTracksContainer;
+	};
+
 	const auto clusterIds {_filters->getClusterIds()};
 	const auto tracks {release->getTracks(clusterIds)};
 
@@ -213,17 +225,14 @@ Release::refreshView()
 
 		const auto discNumber {track->getDiscNumber()};
 
-		Wt::WContainerWidget* container {rootContainer};
+		Wt::WContainerWidget* container;
 		if (isReleaseMultiDisc && discNumber)
 			container = getOrAddDiscContainer(*discNumber, track->getDiscSubtitle());
+		else
+			container = getOrAddNoDiscContainer();
 
 		Wt::WTemplate* entry {container->addNew<Wt::WTemplate>(Wt::WString::tr("Lms.Explore.Release.template.entry"))};
 
-		entry->clicked().connect([=]
-		{
-			tracksAction.emit(PlayQueueAction::Play, {trackId});
-		});
-
 		entry->bindString("name", Wt::WString::fromUTF8(track->getName()), Wt::TextFormat::Plain);
 
 		const auto artists {track->getArtists({TrackArtistLinkType::Artist})};
@@ -249,6 +258,12 @@ Release::refreshView()
 			entry->bindInt("track-number", *trackNumber);
 		}
 
+		Wt::WPushButton* playBtn {entry->bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)};
+		playBtn->clicked().connect([=]
+		{
+			tracksAction.emit(PlayQueueAction::Play, {trackId});
+		});
+
 		Wt::WPushButton* moreBtn {entry->bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)};
 		moreBtn->clicked().connect([=]
 		{

src/lms/ui/explore/ReleasesView.cpp

@@ -21,6 +21,7 @@
 
 #include <Wt/WMenu.h>
 #include <Wt/WPopupMenu.h>
+#include <Wt/WPushButton.h>
 #include <Wt/WText.h>
 
 #include "services/database/Release.hpp"
@@ -60,12 +61,12 @@ Releases::Releases(Filters& filters)
 		addItem(*menu, Wt::WString::tr("Lms.Explore.all"), ReleaseCollector::Mode::All);
 	}
 
-	Wt::WText* playBtn {bindNew<Wt::WText>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)};
+	Wt::WPushButton* playBtn {bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)};
 	playBtn->clicked().connect([this]
 	{
 		releasesAction.emit(PlayQueueAction::Play, getAllReleases());
 	});
-	Wt::WText* moreBtn {bindNew<Wt::WText>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)};
+	Wt::WPushButton* moreBtn {bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)};
 	moreBtn->clicked().connect([=]
 	{
 		Wt::WPopupMenu* popup {LmsApp->createPopupMenu()};

src/lms/ui/explore/TracksView.cpp

@@ -21,6 +21,7 @@
 
 #include <Wt/WMenu.h>
 #include <Wt/WPopupMenu.h>
+#include <Wt/WPushButton.h>
 #include <Wt/WText.h>
 
 #include "services/database/Session.hpp"
@@ -62,13 +63,13 @@ _trackCollector {filters, _defaultMode, _maxCount}
 		addItem(*menu, Wt::WString::tr("Lms.Explore.all"), TrackCollector::Mode::All);
 	}
 
-	Wt::WText* playBtn = bindNew<Wt::WText>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML);
+	Wt::WPushButton* playBtn {bindNew<Wt::WPushButton>("play-btn", Wt::WString::tr("Lms.Explore.template.play-btn"), Wt::TextFormat::XHTML)};
 	playBtn->clicked().connect([=]
 	{
 		tracksAction.emit(PlayQueueAction::Play, getAllTracks());
 	});
 
-	Wt::WText* moreBtn = bindNew<Wt::WText>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML);
+	Wt::WPushButton* moreBtn {bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.Explore.template.more-btn"), Wt::TextFormat::XHTML)};
 	moreBtn->clicked().connect([=]
 	{
 		Wt::WPopupMenu* popup {LmsApp->createPopupMenu()};