Still converting to bootstrap 5. Converted some dropdowns + some nav menus

This commit is contained in:
emeric
2022-05-08 14:58:42 +02:00
parent 5a6c1cd180
commit 8534717517
12 changed files with 164 additions and 118 deletions
+25 -4
View File
@@ -3,10 +3,31 @@
<!--FORMS message blocks-->
<message id="Lms.Explore.Artists.template">
${mode class="nav nav-pills mb-1"}
<div class="row mb-3">
<div class="col-lg-3">
${link-type}
<div class="mb-3">
<ul class="nav nav-pills mb-1">
<li class="nav-item">
${random class="nav-link"}
</li>
<li class="nav-item">
${starred class="nav-link"}
</li>
<li class="nav-item">
${recently-played class="nav-link"}
</li>
<li class="nav-item">
${most-played class="nav-link"}
</li>
<li class="nav-item">
${recently-added class="nav-link"}
</li>
<li class="nav-item">
${all class="nav-link"}
</li>
</ul>
<div class="row">
<div class="col-lg-3">
${link-type class="form-select"}
</div>
</div>
</div>
${artists}
+6 -6
View File
@@ -19,9 +19,9 @@
${clusters class="mb-2"}
</div>
<div class="col-12">
<div class="mb-3">
<div class="mb-3 d-flex">
${play-btn class="btn btn-outline-primary me-2"}
<span class="dropdown">
<div class="dropdown d-inline-block">
${more-btn class="btn btn-outline-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>
@@ -32,7 +32,7 @@
${</if-has-mbid>}
<li>${download class="btn dropdown-item"}</li>
</ul>
</span>
</div>
</div>
${container class="d-grid gap-3"}
</div>
@@ -80,16 +80,16 @@
<div class="p-2 d-none d-sm-block text-muted">
${duration}
</div>
<div class="p-2">
<div class="p-2 d-flex">
${play-btn class="btn btn-sm btn-outline-secondary border-0"}
<span class="dropdown">
<div class="dropdown d-inline-block">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li>
<li>${download class="btn dropdown-item"}</li>
</ul>
</span>
</div>
</div>
</div>
</message>
+10 -1
View File
@@ -24,7 +24,16 @@
${all class="nav-link"}
</li>
</ul>
${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
<div class="d-flex">
${play-btn class="btn btn-outline-primary me-2"}
<div class="dropdown d-inline-block">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-outline-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>
</div>
${releases}
</message>
+41 -11
View File
@@ -5,8 +5,36 @@
<message id="Lms.Explore.Tracks.template">
<div class="mb-3">
${mode class="nav nav-pills mb-2"}
${play-btn class="btn btn-outline-primary me-2"}${more-btn class="btn btn-outline-primary"}
<ul class="nav nav-pills mb-2">
<li class="nav-item">
${random class="nav-link"}
</li>
<li class="nav-item">
${starred class="nav-link"}
</li>
<li class="nav-item">
${recently-played class="nav-link"}
</li>
<li class="nav-item">
${most-played class="nav-link"}
</li>
<li class="nav-item">
${recently-added class="nav-link"}
</li>
<li class="nav-item">
${all class="nav-link"}
</li>
</ul>
<div class="d-flex">
${play-btn class="btn btn-outline-primary me-2"}
<div class="dropdown d-inline-block">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-outline-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>
</div>
${tracks}
</message>
@@ -27,15 +55,17 @@
</div>
<div class="col-2 col-sm-2 col-md-2">
${duration}
${play-btn class="btn btn-sm btn-outline-secondary border-0"}
<span class="dropdown">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li>
<li>${download class="btn dropdown-item"}</li>
</ul>
</span>
<div class="d-flex">
${play-btn class="btn btn-sm btn-outline-secondary border-0"}
<div class="dropdown d-inline-block">
${more-btn data-bs-toggle="dropdown" aria-expanded="false" class="btn btn-sm btn-outline-secondary border-0"}
<ul class="dropdown-menu" aria-labelledby="${id:more-btn}">
<li>${play-last class="btn dropdown-item"}</li>
<li>${star class="btn dropdown-item"}</li>
<li>${download class="btn dropdown-item"}</li>
</ul>
</div>
</div>
</div>
</div>
</message>