Now diplaying albums in grid mode

This commit is contained in:
emeric
2020-05-18 18:12:35 +02:00
parent 6989c3aa81
commit 0655e75d7e
26 changed files with 387 additions and 378 deletions
+20 -22
View File
@@ -3,14 +3,20 @@
<!--FORMS message blocks-->
<message id="Lms.Explore.Artist.template">
<div class="Lms-header">
<h2><div class="Lms-artistname text-primary">${name}</div></h2>
${clusters}
${play-btn}${add-btn}
</div>
<div class="row">
<div class="col-md-8">
<div class="Lms-header">
<h2><div class="Lms-artistname text-primary">${name}</div></h2>
${clusters}
${play-btn}${add-btn}
${releases class="Lms-explore-artist-entries-container"}
</div>
<div class="row">
<div class="col-md-4">
<div class="well well-sm">
<h3>${tr:Lms.Explore.Artist.similar-artists}</h3>
${similar-artists}
</div>
${releases class="Lms-explore-artist-entries-container"}
</div>
${<if-has-mbid>}
<div class="col-md-4">
@@ -20,29 +26,21 @@
</div>
</div>
${</if-has-mbid>}
<div class="col-md-4">
<div class="well well-sm">
<h3>${tr:Lms.Explore.Artist.similar-artists}</h3>
${similar-artists}
</div>
</div>
</div>
</message>
<message id="Lms.Explore.Artist.template.entry">
<div class="Lms-explore-artist-entry Lms-entry-hoverable">
<div class="media">
<div class="media-left media-middle">
<div class="media-object Lms-cover-container-small">
<div class="Lms-explore-entry-list">
<div class="row Lms-vertical-align">
<div class="col-xs-4 col-sm-3 col-md-2">
<div class="Lms-responsive-square Lms-cover-container">
${cover}
</div>
</div>
<div class="media-body media-middle">
<h4 class="media-heading">
${name class="Lms-releasename text-primary"}
</h4>
${<if-has-artist>}<h4><small>${artist class="Lms-artistname text-muted"}</small></h4>${</if-has-artist>}
<h4><small><div class="text-muted">${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</div></small></h4>
<div class="col-xs-8 col-sm-9 col-md-10 Lms-explore-list-entry-text-container">
<h5>${name class="Lms-releasename text-primary"}</h5>
${<if-has-artist>}<h6>${artist class="Lms-artistname text-muted"}</h6>${</if-has-artist>}
<h6><small><div class="text-muted">${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</div></small></h6>
</div>
</div>
</div>
+2 -2
View File
@@ -5,8 +5,8 @@
${contents class="Lms-explore-contents"}
</message>
<message id="Lms.Explore.template.add-btn"><i class="fa fa-fw fa-plus-circle Lms-explore-btn Lms-control-btn"></i></message>
<message id="Lms.Explore.template.play-btn"><i class="fa fa-fw fa-play-circle Lms-explore-btn Lms-control-btn"></i></message>
<message id="Lms.Explore.template.add-btn"><i class="fa fa-plus-circle Lms-explore-btn Lms-control-btn"></i></message>
<message id="Lms.Explore.template.play-btn"><i class="fa fa-play-circle Lms-explore-btn Lms-control-btn"></i></message>
<message id="Lms.Explore.template.filters">
${add-filter class="btn-sm btn-info"} ${clusters class="Lms-explore-clusters"}
+12 -16
View File
@@ -27,24 +27,20 @@
<message id="Lms.PlayQueue.template.delete-btn"><i class="fa fa-fw fa-times-circle Lms-playqueue-btn Lms-control-btn"></i></message>
<message id="Lms.PlayQueue.template.entry">
<div class="row Lms-playqueue-entry Lms-entry-hoverable Lms-vertical-align ${is-selected}">
<div class="col-xs-9 Lms-playqueue-entry-name">
<div class="media">
<div class="media-left media-middle hidden-xs">
<div class="media-object Lms-cover-container-small">
${cover}
</div>
</div>
<div class="media-body media-middle">
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
<div class="row Lms-vertical-align Lms-explore-entry-list Lms-playqueue-entry ${is-selected}">
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="Lms-responsive-square Lms-cover-container">
${cover}
</div>
</div>
<div class="col-xs-3">
<div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container">
<div class="Lms-trackname text-primary"><h5>${name}</h5></div>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="Lms-playqueue-entry-controls Lms-vertical-align">
${play-btn}${del-btn}
</div>
+16 -12
View File
@@ -7,11 +7,11 @@
</message>
<message id="Lms.Explore.Release.template">
<div class="row">
<div class="col-md-3">
<div class="row Lms-explore-release">
<div class="col-md-4">
${cover class="Lms-explore-release-cover"}
</div>
<div class="col-md-5">
<div class="col-md-8">
<div class="Lms-header">
<h3><div class="Lms-releasename text-primary">${name}</div></h3>
${<if-has-artist>}<h4>${artist class="Lms-artistname text-muted"}</h4>${</if-has-artist>}
@@ -19,10 +19,20 @@
${clusters}
${play-btn}${add-btn}
</div>
${container class="Lms-explore-release-entries-container"}
${container}
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-8">
<div class="well well-sm">
<h3>${tr:Lms.Explore.Release.similar-releases}</h3>
<div class="row">
${similar-releases}
</div>
</div>
</div>
${<if-has-copyright>}
<div class="col-md-4">
<div class="col-xs-12 col-md-4">
<div class="well well-sm">
<h3>${tr:Lms.Explore.Release.copyright}</h3>
${copyright class="text-muted"}
@@ -30,19 +40,13 @@
</div>
${</if-has-copyright>}
${<if-has-mbid>}
<div class="col-md-4">
<div class="col-xs-12 col-md-4">
<div class="well well-sm">
<h3>${tr:Lms.Explore.links}</h3>
${mbid-link class="text-muted"}
</div>
</div>
${</if-has-mbid>}
<div class="col-md-4">
<div class="well well-sm">
<h3>${tr:Lms.Explore.Release.similar-releases}</h3>
${similar-releases}
</div>
</div>
</div>
</message>
+20 -24
View File
@@ -8,47 +8,43 @@
${mode class="nav nav-pills Lms-explore-mode-container"}
${play-btn}${add-btn}
</div>
${releases}
<div class="row">
${releases}
</div>
<div class="Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
</div>
</message>
<message id="Lms.Explore.Releases.template.entry">
<div class="Lms-explore-releases-entry Lms-entry-hoverable">
<div class="media">
<div class="media-left media-middle">
<div class="media-object Lms-cover-container-small">
${cover}
</div>
<message id="Lms.Explore.Releases.template.entry-grid">
<div class="col-xs-6 col-sm-3 col-md-2 col-lg-2">
<div class="Lms-explore-entry-grid">
<div class="Lms-responsive-square Lms-cover-container">
${cover}
</div>
<div class="media-body media-middle">
<h4 class="media-heading">
${release-name class="Lms-releasename text-primary"}
</h4>
${<if-has-artist>}<h4><small>${artist-name class="Lms-artistname text-muted"}</small></h4>${</if-has-artist>}
<div class="Lms-explore-entry-grid-text-container">
<h5>${release-name class="Lms-releasename text-primary"}</h5>
<div class="Lms-explore-entry-separator"><h6>${<if-has-year>}<small><span class="text-muted">${year}</span></small>${</if-has-year>}${<if-has-artist>}${artist-name class="Lms-artistname text-muted"}${</if-has-artist>}</h6></div>
</div>
</div>
</div>
</message>
<message id="Lms.Explore.Releases.template.entry-small">
<div class="Lms-explore-releaselink Lms-entry-hoverable">
<div class="media">
<div class="media-left media-middle">
<div class="media-object Lms-cover-container-smaller">
<message id="Lms.Explore.Releases.template.entry-list">
<div class="Lms-explore-entry-list">
<div class="row Lms-vertical-align">
<div class="col-xs-4 col-sm-3 col-md-2">
<div class="Lms-responsive-square Lms-cover-container">
${cover}
</div>
</div>
<div class="media-body media-middle">
<div class="media-heading">
${release-name class="Lms-releasename text-primary"}
</div>
${<if-has-artist>}<small>${artist-name class="Lms-artistname text-muted"}</small>${</if-has-artist>}
<div class="col-xs-8 col-sm-9 col-md-10 Lms-explore-entry-list-text-container">
<h5>${release-name class="Lms-releasename text-primary"}</h5>
${<if-has-artist>}<h6>${artist-name class="Lms-artistname text-muted"}</h6>${</if-has-artist>}
<h6><small><div class="text-muted">${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</div></small></h6>
</div>
</div>
</div>
</message>
</messages>
+16 -31
View File
@@ -3,51 +3,36 @@
<!--FORMS message blocks-->
<message id="Lms.Explore.Search.template">
<div class="Lms-header">
<h2>${tr:Lms.Explore.Search.search}</h2>
</div>
<div class="row">
${<if-artists>}
<div class="col-lg-8">
<div class="Lms-header">
<h2>${tr:Lms.Explore.Search.search}</h2>
</div>
${<if-artists>}
<div class="well well-sm">
<h3>${tr:Lms.Explore.artists}</h3>
${artists}
</div>
${</if-artists>}
${<if-releases>}
</div>
${</if-artists>}
${<if-releases>}
<div class="col-lg-8">
<div class="well well-sm">
<h3>${tr:Lms.Explore.releases}</h3>
${releases}
<div class="row">
${releases}
</div>
</div>
${</if-releases>}
${<if-tracks>}
</div>
${</if-releases>}
${<if-tracks>}
<div class="col-lg-8">
<div class="well well-sm">
<h3>${tr:Lms.Explore.tracks}</h3>
${tracks}
</div>
${</if-tracks>}
</div>
</div>
</message>
<message id="Lms.Explore.Search.template.track-entry">
<div class="Lms-explore-tracks-entry Lms-entry-hoverable Lms-vertical-align">
<div class="Lms-explore-tracks-entry-name">
<div class="media">
<div class="media-left media-middle hidden-xs">
<div class="media-object Lms-cover-container-small">
${cover}
</div>
</div>
<div class="media-body media-middle">
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
</div>
</div>
${</if-tracks>}
</div>
</message>
+18 -22
View File
@@ -20,32 +20,28 @@
</message>
<message id="Lms.Explore.Tracks.template.entry">
<div class="row Lms-explore-tracks-entry Lms-entry-hoverable Lms-vertical-align ${is-playing}">
<div class="col-xs-9 Lms-explore-tracks-entry-name">
<div class="media">
<div class="media-left media-middle hidden-xs">
<div class="media-object Lms-cover-container-small">
${cover}
</div>
<div class="row Lms-vertical-align Lms-explore-entry-list Lms-explore-tracks-entry ${is-playing}">
<div class="col-xs-3 col-sm-2 col-md-2">
<div class="Lms-responsive-square Lms-cover-container">
${cover}
</div>
<div class="media-body media-middle">
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
<div class="col-xs-7 col-sm-8 col-md-8 Lms-explore-entry-list-text-container">
<div class="Lms-trackname text-primary"><h5>${name}</h5></div>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}${artists}${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
<div class="col-xs-2 col-sm-2 col-md-2">
<div class="Lms-explore-tracks-entry-controls">
${play-btn}${add-btn}
</div>
<div class="Lms-explore-tracks-entry-duration text-muted">
${duration}
</div>
</div>
</div>
<div class="col-xs-3">
<div class="Lms-explore-tracks-entry-controls">
${play-btn}${add-btn}
</div>
<div class="Lms-explore-tracks-entry-duration text-muted">
${duration}
</div>
</div>
</div>
</message>
<message id="Lms.Explore.Tracks.template.entry-artist">