Still converting to bootstrap 5. Reworked play/more button

This commit is contained in:
emeric
2022-05-24 23:39:39 +02:00
parent 6fa5cad955
commit 080ed0bc6d
14 changed files with 50 additions and 58 deletions
+12 -14
View File
@@ -6,20 +6,18 @@
<div class="mb-3">
<h3>${name}</h3>
${clusters class="mb-2"}
<div class="d-flex">
${play-btn class="btn btn-primary me-2"}
<div class="dropdown d-inline-block">
${more-btn class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-shuffled class="btn dropdown-item"}</li>
<li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li>
${<if-has-mbid>}
<li><a href="${mbid-link}" target="_blank" class="dropdown-item">${tr:Lms.Explore.musicbrainz-artist}</a></li>
${</if-has-mbid>}
<li>${download class="btn dropdown-item"}</li>
</ul>
</div>
<div class="btn-group">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<ul class="dropdown-menu">
<li>${play-shuffled class="btn dropdown-item"}</li>
<li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li>
${<if-has-mbid>}
<li><a href="${mbid-link}" target="_blank" class="dropdown-item">${tr:Lms.Explore.musicbrainz-artist}</a></li>
${</if-has-mbid>}
<li>${download class="btn dropdown-item"}</li>
</ul>
</div>
</div>
${<if-has-release>}
+1 -1
View File
@@ -4,7 +4,7 @@
<message id="Lms.Explore.Artists.template">
<div class="mb-3">
<ul class="nav nav-pills mb-1">
<ul class="nav nav-pills mb-2">
<li class="nav-item">
${random class="nav-link"}
</li>
+2 -2
View File
@@ -15,13 +15,13 @@
<div class="d-flex align-items-center">
<div class="d-inline-flex me-2">
<button id="lms-mp-previous" class="btn btn-outline-primary border-0 d-none d-sm-block">
<button id="lms-mp-previous" class="btn btn-sm btn-outline-primary border-0">
<i class="fa fa-fw fa-step-backward"/>
</button>
<button id="lms-mp-playpause" class="btn btn-outline-primary border-0">
<i class="fa fa-fw fa-play"/>
</button>
<button id="lms-mp-next" class="btn btn-outline-primary border-0">
<button id="lms-mp-next" class="btn btn-sm btn-outline-primary border-0">
<i class="fa fa-fw fa-step-forward"/>
</button>
</div>
+1
View File
@@ -121,6 +121,7 @@
<message id="Lms.Explore.most-played">Most played</message>
<message id="Lms.Explore.musicbrainz-artist">MusicBrainz Artist</message>
<message id="Lms.Explore.musicbrainz-release">MusicBrainz Release</message>
<message id="Lms.Explore.play">Play</message>
<message id="Lms.Explore.play-last">Play last</message>
<message id="Lms.Explore.play-shuffled">Play shuffled</message>
<message id="Lms.Explore.random">Random</message>
+1
View File
@@ -121,6 +121,7 @@
<message id="Lms.Explore.most-played">Plus joués</message>
<message id="Lms.Explore.musicbrainz-artist">MusicBrainz Artist</message>
<message id="Lms.Explore.musicbrainz-release">MusicBrainz Release</message>
<message id="Lms.Explore.play">Jouer</message>
<message id="Lms.Explore.play-last">Jouer en dernier</message>
<message id="Lms.Explore.play-shuffled">Jouer aléatoirement</message>
<message id="Lms.Explore.random">Aléatoire</message>
+1
View File
@@ -120,6 +120,7 @@
<message id="Lms.Explore.most-played">Più ascoltati</message>
<message id="Lms.Explore.musicbrainz-artist">Artista MusicBrainz</message>
<message id="Lms.Explore.musicbrainz-release">Album MusicBrainz</message>
<message id="Lms.Explore.play-last">Aggiungi alla coda di riproduzione</message>
<message id="Lms.Explore.play-shuffled">Aggiungi alla coda di riproduzione mischiando</message>
<message id="Lms.Explore.random">Casuali</message>
+1
View File
@@ -121,6 +121,7 @@
<message id="Lms.Explore.most-played">播放最多</message>
<message id="Lms.Explore.musicbrainz-artist">MusicBrainz 歌手</message>
<message id="Lms.Explore.musicbrainz-release">MusicBrainz 专辑</message>
<message id="Lms.Explore.play-last">播放列表</message>
<message id="Lms.Explore.play-shuffled">随机播放</message>
<message id="Lms.Explore.random">随机</message>
+13 -15
View File
@@ -17,23 +17,21 @@
${<if-has-various-release-artists>}<div class="text-secondary">${tr:Lms.Explore.various-artists}</div>${</if-has-various-release-artists>}
<div class="small text-muted">${<if-has-year>}${year}${<if-has-orig-year>} (${orig-year})${</if-has-orig-year>} · ${</if-has-year>}${duration}</div>
${clusters class="mb-2"}
<div class="btn-group">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<ul class="dropdown-menu">
<li>${play-shuffled class="btn dropdown-item"}</li>
<li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li>
${<if-has-mbid>}
<li><a href="${mbid-link}" target="_blank" class="dropdown-item">${tr:Lms.Explore.musicbrainz-release}</a></li>
${</if-has-mbid>}
<li>${download class="btn dropdown-item"}</li>
</ul>
</div>
</div>
<div class="col-12">
<div class="mb-3 d-flex">
${play-btn class="btn btn-primary me-2"}
<div class="dropdown d-inline-block">
${more-btn class="btn btn-primary" data-bs-toggle="dropdown" aria-expanded="false"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-shuffled class="btn dropdown-item"}</li>
<li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li>
${<if-has-mbid>}
<li><a href="${mbid-link}" target="_blank" class="dropdown-item">${tr:Lms.Explore.musicbrainz-release}</a></li>
${</if-has-mbid>}
<li>${download class="btn dropdown-item"}</li>
</ul>
</div>
</div>
${container class="d-grid gap-3"}
${<if-has-copyright>}
<div class="pt-1 mt-1 border-top border-dark small text-muted fw-lighter fst-italic">${copyright class="text-reset"}</div>
+7 -9
View File
@@ -24,15 +24,13 @@
${all class="nav-link"}
</li>
</ul>
<div class="d-flex">
${play-btn class="btn btn-primary me-2"}
<div class="dropdown d-inline-block">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-last class="btn dropdown-item"}</li>
<li>${play-shuffled class="btn dropdown-item"}</li>
</ul>
</div>
<div class="btn-group">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<ul class="dropdown-menu">
<li>${play-last class="btn dropdown-item"}</li>
<li>${play-shuffled class="btn dropdown-item"}</li>
</ul>
</div>
</div>
${releases}
+7 -9
View File
@@ -25,15 +25,13 @@
${all class="nav-link"}
</li>
</ul>
<div class="d-flex">
${play-btn class="btn btn-primary me-2"}
<div class="dropdown d-inline-block">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-primary"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-last class="btn dropdown-item"}</li>
<li>${play-shuffled class="btn dropdown-item"}</li>
</ul>
</div>
<div class="btn-group">
${play-btn class="btn btn-primary"}
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false"/>
<ul class="dropdown-menu">
<li>${play-last class="btn dropdown-item"}</li>
<li>${play-shuffled class="btn dropdown-item"}</li>
</ul>
</div>
</div>
${tracks}