Better hover style on media rows

This commit is contained in:
emeric
2018-09-01 17:16:48 +02:00
parent c8c28d84e2
commit 9945e14bc6
7 changed files with 74 additions and 35 deletions
+16 -10
View File
@@ -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
View File
@@ -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>
+13 -7
View File
@@ -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
View File
@@ -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;
-1
View File
@@ -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));
-1
View File
@@ -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));
-1
View File
@@ -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>();