owen/lms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Reworked CSS in order to isolate themable elements

Browse Source
This commit is contained in:
emeric
2020-04-12 18:35:55 +02:00
parent 8d8d778e47
commit fa14586b64
14 changed files with 123 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
approot/artist.xml
+6 -6
View File
@@ -4,7 +4,7 @@
<message id="Lms.Explore.Artist.template">
<div class="page-header">
<h2>${name}</h2>
<h2><div class="Lms-artistname text-primary">${name}</div></h2>
${clusters}
${play-btn}${add-btn}
</div>
@@ -12,18 +12,18 @@
</message>
<message id="Lms.Explore.Artist.template.entry">
<div class="row Lms-explore-artist-entry">
<div class="row Lms-explore-artist-entry Lms-entry-hoverable">
<div class="col-xs-12">
<div class="media">
<div class="media-left media-middle">
${cover class="media-object"}
${cover class="media-object Lms-cover"}
</div>
<div class="media-body media-middle">
<h4 class="media-heading">
${name class="Lms-explore-releasename"}
${name class="Lms-releasename text-primary"}
</h4>
${<if-has-artist>}<h4><small>${artist class="Lms-explore-artistname"}</small></h4>${</if-has-artist>}
<h4><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></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>
${play-btn}${add-btn}
</div>
</div>
approot/artistlink.xml
+2 -2
View File
@@ -3,9 +3,9 @@
<!--FORMS message blocks-->
<message id="Lms.Explore.ArtistLink.template">
<div class="row Lms-explore-artistlink Lms-vertical-align">
<div class="row Lms-explore-artistlink Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-12">
${name class="Lms-explore-artistname Lms-explore-artistlink-name"}
${name class="Lms-artistname text-primary"}
</div>
</div>
</message>
approot/artists.xml
+2 -2
View File
@@ -28,9 +28,9 @@
</message>
<message id="Lms.Explore.Artists.template.entry">
<div class="row Lms-explore-artists-entry Lms-vertical-align">
<div class="row Lms-explore-artists-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-12">
<h4>${name class="Lms-explore-artistname Lms-explore-artists-entry-name"}</h4>
<h4>${name class="Lms-artistname text-primary"}</h4>
</div>
</div>
</message>
approot/explore.xml
+4 -4
View File
@@ -7,18 +7,18 @@
${contents class="Lms-explore-contents"}
</div>
<div class="col-lg-4">
${filters class="Lms-explore-filters"}
${info class="Lms-explore-info"}
${filters class="well well-sm"}
${info class="well well-sm"}
</div>
</div>
</message>
<message id="Lms.Explore.template.add-btn">
<i class="fa fa-plus-circle Lms-explore-btn"></i>
<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"></i>
<i class="fa fa-play-circle Lms-explore-btn Lms-control-btn"></i>
</message>
<message id="Lms.Explore.template.filters">
approot/mediaplayer.xml
+8 -9
View File
@@ -8,20 +8,20 @@
<div class="Lms-player-seek-container">
<input id="lms-mp-seek" class="Lms-player-seek-common Lms-player-seek" type="range" min="0" max="100" step="1" value="0"/>
<div class="progress Lms-player-seek-common Lms-player-progress">
<div id="lms-mp-progress" class="progress-bar progress-bar-info progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
<div id="lms-mp-progress" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: 0%">
</div>
</div>
</div>
<div class="row">
<div class="col-xs-4 col-sm-2 Lms-player-controls">
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-player-btn-controls"></i>
<i id="lms-mp-previous" class="fa fa-step-backward Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i>
<i id="lms-mp-playpause" class="fa fa-play Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i>
<i id="lms-mp-next" class="fa fa-step-forward Lms-player-btn Lms-control-btn Lms-player-btn-controls"></i>
</div>
<div class="hidden-xs col-sm-2">
<div class="Lms-player-volume">
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-player-btn-volume"></i>
<i id="lms-mp-volume" class="fa fa-fw fa-volume-up Lms-player-btn Lms-control-btn Lms-player-btn-volume"></i>
<span class="hidden-xs Lms-player-volume-slider-container">
<input id ="lms-mp-volume-slider" type="range" min="0" max="1" step="0.01" value="0.8" class="Lms-player-volume-slider"/>
</span>
@@ -29,18 +29,17 @@
</div>
<div class="col-xs-8 col-sm-6">
<div class="Lms-player-text-center">
${title class="Lms-player-text"}
${title class="Lms-player-text Lms-trackname text-primary"}
</div>
<div class="Lms-player-text-center">
<small><span class="hidden-xs">${release class="Lms-player-text Lms-explore-releasename"}</span>${artist class="Lms-player-text Lms-explore-artistname Lms-player-artistname"}</small>
<span class="hidden-xs">${release class="Lms-player-text Lms-releasename text-primary"}</span><small>${artist class="Lms-player-text Lms-artistname text-muted"}</small>
</div>
</div>
<div class="hidden-xs col-sm-2 Lms-player-duration">
<div class="hidden-xs col-sm-2 Lms-player-duration text-muted">
<span id="lms-mp-curtime">--</span> / <span id="lms-mp-duration">--</span>
</div>
</div>
</div>
</message>
</messages>
approot/playhistory.xml
+14 -10
View File
@@ -3,23 +3,27 @@
<!--FORMS message blocks-->
<message id="Lms.PlayHistory.template">
<div class="page-header">
<h2>${tr:Lms.PlayHistory.playhistory}</h2>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
<div class="col-lg-8">
<div class="page-header">
<h2>${tr:Lms.PlayHistory.playhistory}</h2>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
</div>
</div>
</div>
</div>
</message>
<message id="Lms.PlayHistory.template.entry">
<div class="row Lms-playhistory-entry Lms-vertical-align">
<div class="row Lms-playhistory-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-12 Lms-playhistory-entry-name">
<h4>${name}</h4>
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-explore-releasename"}</small>${</if-has-release>}
${<if-has-release>}<small>${release class="Lms-releasename text-primary"}</small>${</if-has-release>}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
${</if-has-artists-or-release>}
</div>
@@ -27,7 +31,7 @@
</message>
<message id="Lms.PlayHistory.template.entry-artist">
${artist class="Lms-explore-artistname"}
${artist class="Lms-artistname text-muted"}
</message>
</messages>
approot/playqueue.xml
+24 -20
View File
@@ -3,57 +3,61 @@
<!--FORMS message blocks-->
<message id="Lms.PlayQueue.template.clear-btn">
<i class="fa fa-times-circle Lms-playqueue-btn"></i>
<i class="fa fa-times-circle Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.shuffle-btn">
<i class="fa fa-random Lms-playqueue-btn"></i>
<i class="fa fa-random Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.repeat-btn">
<i class="fa fa-repeat Lms-playqueue-btn"></i>
<i class="fa fa-repeat Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.radio-btn">
<i class="fa fa-rss Lms-playqueue-btn"></i>
<i class="fa fa-rss Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template">
<div class="page-header">
<h2>${tr:Lms.PlayQueue.playqueue}</h2>
${clear-btn}${shuffle-btn}${repeat-btn}${radio-btn}
<h4><small>${nb-tracks}</small></h4>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
<div class="col-lg-8">
<div class="page-header">
<h2>${tr:Lms.PlayQueue.playqueue}</h2>
${clear-btn}${shuffle-btn}${repeat-btn}${radio-btn}
<h4><small>${nb-tracks}</small></h4>
</div>
${entries}
<div class="row">
<div class="col-xs-12 Lms-horizontal-center">
${show-more class="btn-primary Lms-show-more"}
</div>
</div>
</div>
</div>
</message>
<message id="Lms.PlayQueue.template.play-btn">
<i class="fa fa-play-circle Lms-playqueue-btn"></i>
<i class="fa fa-play-circle Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.delete-btn">
<i class="fa fa-times-circle Lms-playqueue-btn"></i>
<i class="fa fa-times-circle Lms-playqueue-btn Lms-control-btn"></i>
</message>
<message id="Lms.PlayQueue.template.entry">
<div class="row Lms-playqueue-entry Lms-vertical-align">
<div class="row Lms-playqueue-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-9 Lms-playqueue-entry-name">
<h4>${name}</h4>
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-explore-releasename"}</small>${</if-has-release>}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
${<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-3">
<div class="Lms-playqueue-entry-controls">
${play-btn}${del-btn}
</div>
<div class="Lms-playqueue-entry-duration">
<div class="Lms-playqueue-entry-duration text-muted">
${duration}
</div>
</div>
@@ -61,7 +65,7 @@
</message>
<message id="Lms.PlayQueue.template.entry-artist">
${artist class="Lms-explore-artistname"}
<small>${artist class="Lms-artistname text-muted"}</small>
</message>
</messages>
approot/release.xml
+8 -8
View File
@@ -13,8 +13,8 @@
</div>
</div>
<div class="page-header">
<h3>${name}</h3>
${<if-has-artist>}<h4>${artist class="Lms-explore-artistname"}</h4>${</if-has-artist>}
<h3><div class="Lms-releasename text-primary">${name}</div></h3>
${<if-has-artist>}<h4>${artist class="Lms-artistname text-muted"}</h4>${</if-has-artist>}
<h4><small>${<if-has-year>}${year}${</if-has-year>}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>}</small></h4>
${clusters}
${play-btn}${add-btn}
@@ -23,19 +23,19 @@
</message>
<message id="Lms.Explore.Release.template.entry">
<div class="row Lms-explore-release-entry Lms-vertical-align">
<div class="col-xs-1 Lms-explore-release-entry-tracknumber">
<div class="row Lms-explore-release-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-1 Lms-explore-release-entry-tracknumber text-muted">
${<if-has-disc-number>}${disc-number}-${</if-has-disc-number>}${<if-has-track-number>}${track-number}${</if-has-track-number>}
</div>
<div class="col-xs-8 Lms-explore-release-entry-name">
${name}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
<div class="Lms-trackname text-primary">${name}</div>
${<if-has-artists>}${artists}${</if-has-artists>}
</div>
<div class="col-xs-3">
<div class="Lms-explore-release-entry-controls">
${play-btn}${add-btn}
</div>
<div class="Lms-explore-release-entry-track-duration">
<div class="Lms-explore-release-entry-track-duration text-muted">
${duration}
</div>
</div>
@@ -43,7 +43,7 @@
</message>
<message id="Lms.Explore.Release.template.entry-artist">
${artist class="Lms-explore-artistname"}
<small>${artist class="Lms-artistname text-muted"}</small>
</message>
</messages>
approot/releaselink.xml
+4 -4
View File
@@ -3,17 +3,17 @@
<messages xmlns:if="Wt.WTemplate.conditions">
<message id="Lms.Explore.ReleaseLink.template">
<div class="row Lms-explore-releaselink">
<div class="row Lms-explore-releaselink Lms-entry-hoverable">
<div class="col-xs-12">
<div class="media">
<div class="media-left media-middle">
${cover class="media-object"}
${cover class="media-object Lms-cover"}
</div>
<div class="media-body media-middle">
<div class="media-heading">
${release-name class="Lms-explore-releasename"}
${release-name class="Lms-releasename text-primary"}
</div>
${<if-has-artist>}<small>${artist-name class="Lms-explore-artistname Lms-explore-releaselink-artist"}</small>${</if-has-artist>}
${<if-has-artist>}<small>${artist-name class="Lms-artistname text-muted"}</small>${</if-has-artist>}
</div>
</div>
</div>
approot/releases.xml
+4 -4
View File
@@ -22,17 +22,17 @@
</message>
<message id="Lms.Explore.Releases.template.entry">
<div class="row Lms-explore-releases-entry">
<div class="row Lms-explore-releases-entry Lms-entry-hoverable">
<div class="col-xs-12">
<div class="media">
<div class="media-left media-middle">
${cover class="media-object"}
${cover class="media-object Lms-cover"}
</div>
<div class="media-body media-middle">
<h4 class="media-heading">
${release-name class="Lms-explore-releasename"}
${release-name class="Lms-releasename text-primary"}
</h4>
${<if-has-artist>}<h4><small>${artist-name class="Lms-explore-artistname"}</small></h4>${</if-has-artist>}
${<if-has-artist>}<h4><small>${artist-name class="Lms-artistname text-muted"}</small></h4>${</if-has-artist>}
${play-btn}${add-btn}
</div>
</div>
approot/templates.xml
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="container">
${contents class="Lms-contents"}
</div>
${player class="Lms-player"}
${player class="Lms-player well well-sm"}
</message>
</messages>
approot/tracks.xml
+6 -6
View File
@@ -23,19 +23,19 @@
</message>
<message id="Lms.Explore.Tracks.template.entry">
<div class="row Lms-explore-tracks-entry Lms-vertical-align">
<div class="row Lms-explore-tracks-entry Lms-entry-hoverable Lms-vertical-align">
<div class="col-xs-9 Lms-explore-tracks-entry-name">
<h4>${name}</h4>
<h4><div class="Lms-trackname text-primary">${name}</div></h4>
${<if-has-artists-or-release>}
${<if-has-release>}<small>${release class="Lms-explore-releasename"}</small>${</if-has-release>}
${<if-has-artists>}<small>${artists}</small>${</if-has-artists>}
${<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-3">
<div class="Lms-explore-tracks-entry-controls">
${play-btn}${add-btn}
</div>
<div class="Lms-explore-tracks-entry-duration">
<div class="Lms-explore-tracks-entry-duration text-muted">
${duration}
</div>
</div>
@@ -43,7 +43,7 @@
</message>
<message id="Lms.Explore.Tracks.template.entry-artist">
${artist class="Lms-explore-artistname"}
<small>${artist class="Lms-artistname text-muted"}</small>
</message>
</messages>
approot/tracksinfo.xml
+1 -1
View File
@@ -11,7 +11,7 @@
<message id="Lms.Explore.TracksInfo.template.entry">
<div class="row Lms-explore-tracksinfo-entry Lms-vertical-align">
<div class="col-xs-12">
<div class="col-xs-12 Lms-trackname">
${name}
</div>
</div>