Updated some views
This commit is contained in:
@@ -3,7 +3,7 @@
|
|||||||
|
|
||||||
<message id="Lms.Admin.Users.template">
|
<message id="Lms.Admin.Users.template">
|
||||||
<h3>${tr:Lms.Admin.Users.users}</h3>
|
<h3>${tr:Lms.Admin.Users.users}</h3>
|
||||||
${users class="d-grid gap-1 mb-3"}
|
${users class="d-grid gap-1 mb-3 Lms-row-container"}
|
||||||
${<if-can-create-user>}
|
${<if-can-create-user>}
|
||||||
${add-btn class="btn btn-primary"}
|
${add-btn class="btn btn-primary"}
|
||||||
${</if-can-create-user>}
|
${</if-can-create-user>}
|
||||||
|
|||||||
@@ -30,8 +30,13 @@
|
|||||||
${entries}
|
${entries}
|
||||||
</message>
|
</message>
|
||||||
|
|
||||||
|
<message id="Lms.PlayQueue.template.entry-container">
|
||||||
|
${elements class="Lms-row-container"}
|
||||||
|
${loading-indicator}
|
||||||
|
</message>
|
||||||
|
|
||||||
<message id="Lms.PlayQueue.template.entry">
|
<message id="Lms.PlayQueue.template.entry">
|
||||||
<div class="d-flex align-items-center rounded Lms-bg-dark-hover mb-2">
|
<div class="d-flex align-items-center mb-2">
|
||||||
<div class="p-1">
|
<div class="p-1">
|
||||||
${cover}
|
${cover}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
+17
-9
@@ -51,30 +51,38 @@
|
|||||||
|
|
||||||
<message id="Lms.Explore.Release.template.entry-disc">
|
<message id="Lms.Explore.Release.template.entry-disc">
|
||||||
<h4>${disc-title}</h4>
|
<h4>${disc-title}</h4>
|
||||||
${tracks class="d-grid gap-1"}
|
${tracks class="d-grid gap-1 Lms-row-container"}
|
||||||
</message>
|
</message>
|
||||||
|
|
||||||
<message id="Lms.Explore.Release.template.entry-nodisc">
|
<message id="Lms.Explore.Release.template.entry-nodisc">
|
||||||
${tracks class="d-grid gap-1"}
|
${tracks class="d-grid gap-1 Lms-row-container"}
|
||||||
</message>
|
</message>
|
||||||
|
|
||||||
<message id="Lms.Explore.Release.template.entry">
|
<message id="Lms.Explore.Release.template.entry">
|
||||||
<div class="d-flex align-items-center rounded Lms-bg-dark-hover">
|
<div class="d-flex align-items-center">
|
||||||
<div class="p-2 text-muted text-end" style="min-width: 2.1rem;">
|
<div class="p-2 text-muted text-end Lms-tracks-entry-position">
|
||||||
${<if-has-track-number>}${track-number}${</if-has-track-number>}
|
${<if-has-track-number>}${track-number}${</if-has-track-number>}
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 flex-fill">
|
<div class="row align-items-center flex-fill overflow-hidden">
|
||||||
${name}
|
<div class="col-12 col-md-6">
|
||||||
${<if-has-artists>}${artists}${</if-has-artists>}
|
<div class="p-2">
|
||||||
|
${name}
|
||||||
|
${<if-has-artists>}${artists class="d-block d-md-none"}${</if-has-artists>}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
|
${<if-has-artists>}${artists-md class="d-none d-md-block"}${</if-has-artists>}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 d-none d-sm-block text-muted">
|
<div class="p-2 d-none d-sm-block text-muted text-center Lms-tracks-entry-duration">
|
||||||
${duration}
|
${duration}
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 d-flex">
|
<div class="p-2 d-flex">
|
||||||
${play-btn class="btn btn-sm btn-outline-secondary border-0"}
|
${play-btn class="d-none d-sm-block btn btn-sm btn-outline-secondary border-0"}
|
||||||
<div class="dropdown d-inline-block">
|
<div class="dropdown d-inline-block">
|
||||||
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
|
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
|
||||||
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
|
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
|
||||||
|
<li>${play class="dropdown-item"}</li>
|
||||||
<li>${play-last class="dropdown-item"}</li>
|
<li>${play-last class="dropdown-item"}</li>
|
||||||
<li>${star class="dropdown-item"}</li>
|
<li>${star class="dropdown-item"}</li>
|
||||||
<li>${download class="dropdown-item"}</li>
|
<li>${download class="dropdown-item"}</li>
|
||||||
|
|||||||
@@ -21,6 +21,11 @@
|
|||||||
${tracks}
|
${tracks}
|
||||||
</message>
|
</message>
|
||||||
|
|
||||||
|
<message id="Lms.Explore.TrackList.template.entry-container">
|
||||||
|
${elements class="Lms-row-container"}
|
||||||
|
${loading-indicator}
|
||||||
|
</message>
|
||||||
|
|
||||||
<message id="Lms.Explore.TrackList.template.delete-tracklist">
|
<message id="Lms.Explore.TrackList.template.delete-tracklist">
|
||||||
<div class="modal fade" tabindex="-1">
|
<div class="modal fade" tabindex="-1">
|
||||||
<div class="modal-dialog">
|
<div class="modal-dialog">
|
||||||
|
|||||||
+16
-11
@@ -37,26 +37,31 @@
|
|||||||
${tracks}
|
${tracks}
|
||||||
</message>
|
</message>
|
||||||
|
|
||||||
|
<message id="Lms.Explore.Tracks.template.entry-container">
|
||||||
|
${elements class="Lms-row-container"}
|
||||||
|
${loading-indicator}
|
||||||
|
</message>
|
||||||
|
|
||||||
<message id="Lms.Explore.Tracks.template.entry">
|
<message id="Lms.Explore.Tracks.template.entry">
|
||||||
<div class="d-flex align-items-center rounded Lms-bg-dark-hover mb-2">
|
<div class="d-flex align-items-center mb-2">
|
||||||
<div class="p-1">
|
<div class="p-1">
|
||||||
${cover}
|
${cover}
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 flex-fill text-truncate">
|
<div class="row align-items-center flex-fill overflow-hidden">
|
||||||
<div class="row">
|
<div class="col-12 col-md-6 col-lg-4">
|
||||||
<div class="col-12 col-md-6 col-lg-4">
|
<div class="p-2 overflow-hidden">
|
||||||
<div class="d-block text-truncate">${name}</div>
|
<div class="d-block text-truncate">${name}</div>
|
||||||
${<if-has-artists>}${artists class="d-block d-md-none text-truncate"}${</if-has-artists>}
|
${<if-has-artists>}${artists class="d-block d-md-none text-truncate"}${</if-has-artists>}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 col-lg-4">
|
</div>
|
||||||
${<if-has-artists>}${artists-md class="d-none d-md-block text-truncate"}${</if-has-artists>}
|
<div class="col-md-6 col-lg-4">
|
||||||
</div>
|
${<if-has-artists>}${artists-md class="d-none d-md-block text-truncate"}${</if-has-artists>}
|
||||||
<div class="col-lg-4">
|
</div>
|
||||||
${<if-has-release>}${release class="d-none d-lg-block text-truncate text-decoration-none link-success"}${</if-has-release>}
|
<div class="col-lg-4 text-truncate">
|
||||||
</div>
|
${<if-has-release>}${release class="d-none d-lg-inline text-truncate text-decoration-none link-success"}${</if-has-release>}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 d-none d-sm-block text-muted">
|
<div class="p-2 d-none d-sm-block text-muted text-center Lms-tracks-entry-duration">
|
||||||
${duration}
|
${duration}
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2 d-flex">
|
<div class="p-2 d-flex">
|
||||||
|
|||||||
+26
-1
@@ -1,5 +1,9 @@
|
|||||||
/* Generic rules */
|
/* Generic rules */
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--lms-striped-bg: #022f3a;
|
||||||
|
}
|
||||||
|
|
||||||
.link-success {
|
.link-success {
|
||||||
transition: color 0.15s ease;
|
transition: color 0.15s ease;
|
||||||
}
|
}
|
||||||
@@ -16,6 +20,19 @@
|
|||||||
background-color: var(--bs-dark);
|
background-color: var(--bs-dark);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Lms-row-container {
|
||||||
|
--lms-striped-bg: #022f3a;
|
||||||
|
--lms-hover-bg: var(--bs-dark);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Lms-row-container > :nth-child(odd) {
|
||||||
|
background-color: var(--lms-striped-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.Lms-row-container > *:hover {
|
||||||
|
background-color: var(--lms-hover-bg);
|
||||||
|
}
|
||||||
|
|
||||||
/* Specific rules */
|
/* Specific rules */
|
||||||
body {
|
body {
|
||||||
padding-bottom: 78px;
|
padding-bottom: 78px;
|
||||||
@@ -32,7 +49,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.Lms-entry-playing {
|
.Lms-entry-playing {
|
||||||
background-color: var(--bs-dark);
|
background-color: #0d4655!important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.Lms-cover {
|
.Lms-cover {
|
||||||
@@ -144,3 +161,11 @@ body {
|
|||||||
display: block;
|
display: block;
|
||||||
padding-bottom: 100%;
|
padding-bottom: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.Lms-tracks-entry-position{
|
||||||
|
width: 2.1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Lms-tracks-entry-duration {
|
||||||
|
width: 4rem;
|
||||||
|
}
|
||||||
|
|||||||
@@ -136,7 +136,7 @@ PlayQueue::PlayQueue()
|
|||||||
saveAsTrackList();
|
saveAsTrackList();
|
||||||
});
|
});
|
||||||
|
|
||||||
_entriesContainer = bindNew<InfiniteScrollingContainer>("entries");
|
_entriesContainer = bindNew<InfiniteScrollingContainer>("entries", Wt::WString::tr("Lms.PlayQueue.template.entry-container"));
|
||||||
_entriesContainer->onRequestElements.connect([this]
|
_entriesContainer->onRequestElements.connect([this]
|
||||||
{
|
{
|
||||||
addSome();
|
addSome();
|
||||||
|
|||||||
@@ -382,6 +382,7 @@ Release::refreshView()
|
|||||||
{
|
{
|
||||||
entry->setCondition("if-has-artists", true);
|
entry->setCondition("if-has-artists", true);
|
||||||
entry->bindWidget("artists", Utils::createArtistContainer(artists));
|
entry->bindWidget("artists", Utils::createArtistContainer(artists));
|
||||||
|
entry->bindWidget("artists-md", Utils::createArtistContainer(artists));
|
||||||
}
|
}
|
||||||
|
|
||||||
auto trackNumber {track->getTrackNumber()};
|
auto trackNumber {track->getTrackNumber()};
|
||||||
@@ -399,6 +400,11 @@ Release::refreshView()
|
|||||||
|
|
||||||
{
|
{
|
||||||
entry->bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.template.more-btn"), Wt::TextFormat::XHTML);
|
entry->bindNew<Wt::WPushButton>("more-btn", Wt::WString::tr("Lms.template.more-btn"), Wt::TextFormat::XHTML);
|
||||||
|
entry->bindNew<Wt::WPushButton>("play", Wt::WString::tr("Lms.Explore.play"))
|
||||||
|
->clicked().connect([=]
|
||||||
|
{
|
||||||
|
_playQueueController.playTrackInRelease(trackId);
|
||||||
|
});
|
||||||
entry->bindNew<Wt::WPushButton>("play-last", Wt::WString::tr("Lms.Explore.play-last"))
|
entry->bindNew<Wt::WPushButton>("play-last", Wt::WString::tr("Lms.Explore.play-last"))
|
||||||
->clicked().connect([=]
|
->clicked().connect([=]
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -174,7 +174,7 @@ namespace UserInterface
|
|||||||
LmsApp->getModalManager().show(std::move(modal));
|
LmsApp->getModalManager().show(std::move(modal));
|
||||||
});
|
});
|
||||||
|
|
||||||
_container = bindNew<InfiniteScrollingContainer>("tracks");
|
_container = bindNew<InfiniteScrollingContainer>("tracks", Wt::WString::tr("Lms.Explore.TrackList.template.entry-container"));
|
||||||
_container->onRequestElements.connect([this]
|
_container->onRequestElements.connect([this]
|
||||||
{
|
{
|
||||||
addSome();
|
addSome();
|
||||||
|
|||||||
@@ -86,7 +86,7 @@ Tracks::Tracks(Filters& filters, PlayQueueController& playQueueController)
|
|||||||
_playQueueController.processCommand(PlayQueueController::Command::PlayOrAddLast, getAllTracks());
|
_playQueueController.processCommand(PlayQueueController::Command::PlayOrAddLast, getAllTracks());
|
||||||
});
|
});
|
||||||
|
|
||||||
_container = bindNew<InfiniteScrollingContainer>("tracks");
|
_container = bindNew<InfiniteScrollingContainer>("tracks", Wt::WString::tr("Lms.Explore.Tracks.template.entry-container"));
|
||||||
_container->onRequestElements.connect([this]
|
_container->onRequestElements.connect([this]
|
||||||
{
|
{
|
||||||
addSome();
|
addSome();
|
||||||
|
|||||||
Reference in New Issue
Block a user