storm/bragi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve filters layout (for now...)

Browse Source
This commit is contained in:
Tyler Vigario 2020-04-20 20:33:53 -07:00
parent 5be387c81c
commit a768c68912
No known key found for this signature in database
GPG Key ID: 4D670648A0376AA4
1 changed files with 135 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
templates/index.html
View File

@ -168,14 +168,13 @@
<div class="card-body"> <div class="card-body">
<div class="card mb-3" style="background-color: #e2e3e5;"> <div class="card mb-3" style="background-color: #e2e3e5;">
<div class="card-body"> <div class="card-body">
<h4>Filters</h4> <h5 class="card-title">Filters</h5>
<hr>
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div id="filter-type" class="form-group row"> <label>Type</label>
<label class="col-auto col-form-label">Type</label> <div id="filter-type" class="input-group mb-2">
<div class="btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<div class="col btn-group btn-group-sm btn-group-toggle" data-toggle="buttons">
<button type="button" id="filter-type-file" class="btn btn-secondary btn-sm" <button type="button" id="filter-type-file" class="btn btn-secondary btn-sm"
onclick="setFilterType('file')">File onclick="setFilterType('file')">File
</button> </button>
@ -187,37 +186,27 @@
</button> </button>
</div> </div>
</div> </div>
<div id="filter-path" class="form-group row">
<label class="col-auto col-form-label" for="filter-dir">Directory</label>
<div class="col"> <label for="filter-dir">Directory</label>
<select class="form-control form-control-sm" id="filter-dir" <div id="filter-path" class="input-group mb-2">
style="margin-top:5px;" disabled> <select class="form-control form-control-sm" id="filter-dir" disabled>
<option value="">.</option> <option value="">.</option>
{% for dir in dirs %} {% for dir in dirs %}
<option value="{{ dir }}">{{ dir }}</option> <option value="{{ dir }}">{{ dir }}</option>
{% endfor %} {% endfor %}
</select> </select>
</div> </div>
</div>
<div id="filter-path" class="form-group row"> <label for="filter-keywords">Keywords</label>
<label class="col-auto col-form-label" for="filter-keywords">Keywords</label> <div id="filter-path" class="input-group mb-2">
<div class="col">
<input class="form-control form-control-sm" id="filter-keywords" name="keywords" <input class="form-control form-control-sm" id="filter-keywords" name="keywords"
placeholder="Keywords..." style="margin-top:5px;" /> placeholder="Keywords..." style="margin-top:5px;" />
</div> </div>
</div> </div>
</div>
<div class="col"> <div class="col">
<div class="row">
<div class="col-auto">
<label for="filter-tag">Tags</label> <label for="filter-tag">Tags</label>
</div> <div id="filter-type mb-2">
<div id="filter-type" class="col">
{% for tag in tags_color_lookup.keys() %} {% for tag in tags_color_lookup.keys() %}
<span id="filter-tag" <span id="filter-tag"
class="filter-tag tag-unclicked tag-click badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span> class="filter-tag tag-unclicked tag-click badge badge-{{ tags_color_lookup[tag] }}">{{ tag }}</span>
@ -229,7 +218,7 @@
</div> </div>
</div> </div>
<div id="library-group" class="list-group library-group"> <div id="library-group" class="list-group library-group" style="overflow: auto;">
<div id="library-item-loading" class="list-group-item library-item"> <div id="library-item-loading" class="list-group-item library-item">
<img style="margin: auto; width: 35px;" src="../static/image/loading.svg" /> <img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
</div> </div>
@ -241,8 +230,7 @@
<div class="library-thumb-col"> <div class="library-thumb-col">
<div class="library-thumb-img"> <div class="library-thumb-img">
<img class="library-item-thumb library-thumb-img" <img class="library-item-thumb library-thumb-img" src="../static/image/unknown-album.png" />
src="../static/image/unknown-album.png" />
</div> </div>
<div class="btn-group-vertical library-thumb-grp"> <div class="btn-group-vertical library-thumb-grp">
<div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play"> <div class="library-item-play btn btn-secondary library-thumb-btn-up" title="Play">
@ -273,18 +261,16 @@
<div class="btn-group library-action"> <div class="btn-group library-action">
<button class="library-item-add-next btn btn-info btn-sm btn-space" type="button" <button class="library-item-add-next btn btn-info btn-sm btn-space" type="button"
title="Next to play"> title="Next to play">
<svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="5 5 17 17">
viewBox="5 5 17 17">
<path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z" /> <path d="m5.700245,3.92964l0,14.150376l11.451127,-7.075188l-11.451127,-7.075188z" />
<path <path
d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z" /> d="m20.942859,18.221072l-3.323292,0l0,3.323292l-1.107764,0l0,-3.323292l-3.323292,0l0,-1.107764l3.323292,0l0,-3.323292l1.107764,0l0,3.323292l3.323292,0l0,1.107764z" />
</svg> </svg>
</button> </button>
<button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" <button class="library-item-add-bottom library-btn btn btn-info btn-sm btn-space" type="button"
type="button" title="Add to bottom"> title="Add to bottom">
<svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" <svg class="library-btn-svg" style="width: 1rem; fill: currentColor;" viewBox="2 2 20 20">
viewBox="2 2 20 20">
<path <path
d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" /> d="M2,16H10V14H2M18,14V10H16V14H12V16H16V20H18V16H22V14M14,6H2V8H14M14,10H2V12H14V10Z" />
</svg> </svg>
@ -350,7 +336,6 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div id="upload" class="container mb-3"> <div id="upload" class="container mb-3">
<div class="card"> <div class="card">