Better hover style on media rows
This commit is contained in:
+16
-10
@@ -12,16 +12,22 @@
|
||||
</message>
|
||||
|
||||
<message id="Lms.Explore.Artist.template.entry">
|
||||
<div class="media-left">
|
||||
${cover class="media-object"}
|
||||
</div>
|
||||
<div class="media-body media-middle">
|
||||
<h4 class="media-heading">
|
||||
${name}
|
||||
</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 class="row">
|
||||
<div class="col-xs-12 Lms-explore-artist-entry">
|
||||
<div class="media">
|
||||
<div class="media-left media-middle">
|
||||
${cover class="media-object"}
|
||||
</div>
|
||||
<div class="media-body media-middle">
|
||||
<h4 class="media-heading">
|
||||
${name}
|
||||
</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>
|
||||
|
||||
|
||||
+16
-10
@@ -21,16 +21,22 @@
|
||||
</message>
|
||||
|
||||
<message id="Lms.Explore.Releases.template.entry">
|
||||
<div class="media-left">
|
||||
${cover class="media-object"}
|
||||
</div>
|
||||
<div class="media-body media-middle">
|
||||
<h4 class="media-heading">
|
||||
${release-name}
|
||||
</h4>
|
||||
${<if-has-artist>}<h4><small><i>${artist-name}</i></small></h4>${</if-has-artist>}
|
||||
${clusters}
|
||||
${play-btn}${add-btn}
|
||||
<div class="row">
|
||||
<div class="col-xs-12 Lms-explore-releases-entry">
|
||||
<div class="media">
|
||||
<div class="media-left media-middle">
|
||||
${cover class="media-object"}
|
||||
</div>
|
||||
<div class="media-body media-middle">
|
||||
<h4 class="media-heading">
|
||||
${release-name}
|
||||
</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>
|
||||
|
||||
|
||||
@@ -10,14 +10,20 @@
|
||||
</message>
|
||||
|
||||
<message id="Lms.Explore.ReleasesInfo.template.entry">
|
||||
<div class="media-left">
|
||||
${cover class="media-object"}
|
||||
</div>
|
||||
<div class="media-body media-middle">
|
||||
<div class="media-heading">
|
||||
${release-name}
|
||||
<div class="row Lms-explore-releasesinfo-entry">
|
||||
<div class="col-xs-12">
|
||||
<div class="media">
|
||||
<div class="media-left media-middle">
|
||||
${cover class="media-object"}
|
||||
</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>
|
||||
|
||||
|
||||
+29
-5
@@ -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;
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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));
|
||||
|
||||
@@ -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>();
|
||||
|
||||
Reference in New Issue
Block a user