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

Further improvements to web interface (#139)

Browse Source 
* Implement button toolbar

* Fix filters logic

* Switch to btn-primary for active filters

* Reduce playlist table columns on mobile

* Cleanup playlist area

* Reduce volume spacing

* Hide items in playlist as well for mobile

* Use text utility classes vs style

* Filter use checkbox instead of radio

* Hide library file column on mobile

* Update jQuery and FontAwesome to latest
This commit is contained in:
Tyler Vigario
2020-05-06 18:14:38 -07:00
committed by GitHub
parent 529527c1c0
commit aba9eea336
7 changed files with 187 additions and 4578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
static/css/custom.css
View File

@ -1,24 +1,22 @@
.bs-docs-section{margin-top:4em}
.bs-docs-section .page-header h1 { padding: 2rem 0; font-size: 3rem; margin-bottom: 10px }
.btn-space{margin-right:5px;}
.tag-space{margin-right:3px;}
.playlist-title-td{width:60%}
.playlist-title{float:left; }
.btn-space {margin-right: 5px;}
.tag-space {margin-right: 3px;}
.playlist-title-td {width: 60%;}
.playlist-title {float: left;}
.playlist-item {transition: all 0.2s ease-in-out;}
.playlist-artwork{
float:left;
margin-left:10px;
.playlist-artwork {
float: left;
margin-left: 10px;
white-space: nowrap;
overflow: hidden;
}
.tag-click{
cursor:pointer;
.tag-click {
cursor: pointer;
transition: 400ms;
}
.tag-unclicked{
.tag-unclicked {
opacity: 0.6;
}
.tag-clicked{
.tag-clicked {
box-shadow: 2px 4px 10px #777777;
transform: scale(1.2);
opacity: 1;
@ -43,7 +41,7 @@
background-color: hsl(0, 0%, 43%);
color: white;
}
.library-item{
.library-item {
display: flex;
padding: .5rem .5rem .5rem 0;
height: 72px;
@ -100,11 +98,23 @@
.library-action {
margin-left: auto;
}
.library-info-col .path{
.library-info-col .path {
font-style: italic !important;
font-weight: 300;
}
#volume-slider {
margin-top: 8px;
margin-right: 6px;
}
.dropdown {
display: inline-block;
}
@media (max-width: 399.98px) {
#volume-slider {
width: 80px;
}
}
@media (max-width: 329.98px) {
#volume-slider {
display: none;
}
}

61
static/js/custom.js
View File

@ -269,8 +269,8 @@ function updateControls(empty, play, mode, volume) {
}
}
for (const otherModes of Object.values(playModeBtns)) {
otherModes.removeClass('active');
for (const otherMode of Object.values(playModeBtns)) {
otherMode.removeClass('active');
}
playModeBtns[mode].addClass('active');
@ -335,46 +335,25 @@ setInterval(checkForPlaylistUpdate, 3000);
// ---------------------
// ------ Browser ------
// ---------------------
var filter_file = false;
var filter_url = false;
var filter_radio = false;
var filters = {
file: $('#filter-type-file'),
url: $('#filter-type-url'),
radio: $('#filter-type-radio'),
};
var filter_dir = $("#filter-dir");
var filter_keywords = $("#filter-keywords");
var filter_btn_file = $("#filter-type-file");
var filter_btn_url = $("#filter-type-url");
var filter_btn_radio = $("#filter-type-radio");
function setFilterType(type) {
filter_types = [];
function setFilterType(event, type) {
event.preventDefault();
if (type === "file") {
if (filter_btn_file.hasClass("btn-primary")) {
filter_btn_file.removeClass("btn-primary").addClass("btn-secondary");
filter_dir.prop("disabled", true);
filter_file = false;
} else {
filter_btn_file.removeClass("btn-secondary").addClass("btn-primary");
filter_dir.prop("disabled", false);
filter_file = true;
}
} else if (type === "url") {
if (filter_btn_url.hasClass("btn-primary")) {
filter_btn_url.removeClass("btn-primary").addClass("btn-secondary");
filter_url = false;
} else {
filter_btn_url.removeClass("btn-secondary").addClass("btn-primary");
filter_url = true;
}
} else if (type === "radio") {
if (filter_btn_radio.hasClass("btn-primary")) {
filter_btn_radio.removeClass("btn-primary").addClass("btn-secondary");
filter_radio = false;
} else {
filter_btn_radio.removeClass("btn-secondary").addClass("btn-primary");
filter_types.push('radio');
filter_radio = true;
}
if (filters[type].hasClass('active')) {
filters[type].removeClass('active btn-primary').addClass('btn-secondary');
filters[type].find('input[type=radio]').removeAttr('checked');
} else {
filters[type].removeClass('btn-secondary').addClass('active btn-primary');
filters[type].find('input[type=radio]').attr('checked', 'checked');
}
updateResults();
}
@ -511,9 +490,11 @@ function getFilters(dest_page = 1) {
});
filter_types = [];
if (filter_file) { filter_types.push("file"); }
if (filter_url) { filter_types.push("url"); }
if (filter_radio) { filter_types.push("radio"); }
for (const filter in filters) {
if (filters[filter].hasClass('active')) {
filter_types.push(filter);
}
}
return {
type: filter_types.join(','),

4387
static/js/fontawesome.all.js
View File

File diff suppressed because one or more lines are too long

5
static/js/fontawesome.all.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

2
static/js/jquery-3.4.1.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
static/js/jquery-3.5.1.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

266
templates/index.html
View File

@ -24,125 +24,119 @@
</div>
</div>
<div class="container mb-5">
<div id="playlist">
<div class="row">
<div class="col-auto">
<button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()">
<i class="fas fa-play"></i>
<div id="playlist" class="container mb-5">
<div class="btn-toolbar mb-2" role="toolbar" aria-label="Playlist controls">
<button type="button" id="play-pause-btn" class="btn btn-info mb-2" onclick="togglePlayPause()">
<i class="fas fa-play"></i>
</button>
<div class="ml-auto">
<div class="dropdown mr-2">
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
</button>
<div class="dropdown-menu" aria-labelledby="play-mode">
<a class="dropdown-item" href="#" id="one-shot-mode-btn" onclick="changePlayMode('one-shot')">
<i class="fas fa-tasks mr-2" aria-hidden="true"></i>One-shot
</a>
<a class="dropdown-item" href="#" id="random-mode-btn" onclick="changePlayMode('randomize')">
<i class="fas fa-random mr-2" aria-hidden="true"></i>Random
</a>
<a class="dropdown-item" href="#" id="repeat-mode-btn" onclick="changePlayMode('repeat')">
<i class="fas fa-redo mr-2" aria-hidden="true"></i>Repeat
</a>
<a class="dropdown-item" href="#" id="autoplay-mode-btn" onclick="changePlayMode('autoplay')">
<i class="fas fa-robot mr-2" aria-hidden="true"></i>Autoplay
</a>
</div>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_down'})">
<i class="fa fa-volume-down" aria-hidden="true"></i>
</button>
<input type="range" class="custom-range ml-1" id="volume-slider" min="0" max="1" step="0.01"
value="0.5" onchange="setVolumeDelayed(this.value)" />
<button type="button" class="btn btn-warning ml-1"
onclick="request('post', {action : 'volume_up'})">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</button>
</div>
<div class="col btn-group">
<div class="dropdown mb-2 btn-space" style="margin-left: auto;">
<button class="btn btn-secondary dropdown-toggle" type="button" id="play-mode"
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fas fa-tasks mr-2" aria-hidden="true" id="modeIndicator"></i>
</button>
<div class="dropdown-menu" aria-labelledby="play-mode">
<a class="dropdown-item" href="#" id="one-shot-mode-btn"
onclick="changePlayMode('one-shot')">
<i class="fas fa-tasks mr-2" aria-hidden="true"></i>One-shot
</a>
<a class="dropdown-item" href="#" id="random-mode-btn" onclick="changePlayMode('randomize')">
<i class="fas fa-random mr-2" aria-hidden="true"></i>Random
</a>
<a class="dropdown-item" href="#" id="repeat-mode-btn" onclick="changePlayMode('repeat')">
<i class="fas fa-redo mr-2" aria-hidden="true"></i>Repeat
</a>
<a class="dropdown-item" href="#" id="autoplay-mode-btn"
onclick="changePlayMode('autoplay')">
<i class="fas fa-robot mr-2" aria-hidden="true"></i>Autoplay
</a>
</div>
</div>
<div class="btn-group mb-2">
<button type="button" class="btn btn-warning btn-space"
onclick="request('post', {action : 'volume_down'})">
<i class="fa fa-volume-down" aria-hidden="true"></i>
</button>
<input type="range" class="custom-range" id="volume-slider" min="0" max="1" step="0.01"
value="0.5" onchange="setVolumeDelayed(this.value)" />
<button type="button" class="btn btn-warning btn-space"
onclick="request('post', {action : 'volume_up'})">
<i class="fa fa-volume-up" aria-hidden="true"></i>
</button>
</div>
</div>
</div>
</div>
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col" class="playlist-title-td">Title</th>
<th scope="col">Url/Path</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="playlist-table" class="playlist-table">
<tr id="playlist-loading">
<td colspan="4" style="text-align:center;">
<img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
</td>
</tr>
<tr id="playlist-empty" style="display: none;">
<td colspan="4" style="text-align:center;">
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
</td>
</tr>
<tr id="playlist-expand" class="table-dark" style="display: none;">
<td colspan="4" style="text-align:center;">
<a class="text-muted" href="javascript:">See item <span
class="playlist-expand-item-range"></span> on the playlist.</a>
</td>
</tr>
<tr class="playlist-item-template" style="display: none;">
<th scope="row" class="playlist-item-index"></th>
<td>
<input hidden type="text" class="playlist-item-id" value="" />
<div class="playlist-title">
<img width="80" class="playlist-item-thumbnail"
src="static/image/unknown-album.png" />
</div>
<div class="playlist-artwork">
<b class="playlist-item-title"></b>
<span class="playlist-item-type badge badge-secondary"></span>
<br />
<span class="playlist-item-artist"></span>
<br />
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th scope="col" class="d-none d-md-table-cell">#</th>
<th scope="col" class="playlist-title-td">Title</th>
<th scope="col" class="d-none d-md-table-cell">Url/Path</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody id="playlist-table" class="playlist-table">
<tr id="playlist-loading">
<td colspan="4" class="text-center">
<img style="margin: auto; width: 35px;" src="static/image/loading.svg" />
</td>
</tr>
<tr id="playlist-empty" style="display: none;">
<td colspan="4" class="text-center">
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" />
</td>
</tr>
<tr id="playlist-expand" class="table-dark" style="display: none;">
<td colspan="4" class="text-center">
<a class="text-muted" href="javascript;">See item <span
class="playlist-expand-item-range"></span> on the playlist.
</a>
</td>
</tr>
<tr class="playlist-item-template" style="display: none;">
<th scope="row" class="playlist-item-index d-none d-md-table-cell"></th>
<td>
<input hidden type="text" class="playlist-item-id" value="" />
<div class="playlist-title">
<img width="80" class="playlist-item-thumbnail" src="static/image/unknown-album.png" />
</div>
<div class="playlist-artwork">
<b class="playlist-item-title"></b>
<span class="playlist-item-type badge badge-secondary"></span>
<br />
<span class="playlist-item-artist"></span>
<br />
<div class="playlist-item-tags">
<a class="playlist-item-edit tag-space tag-click"><i class="fas fa-edit"
style="color: #AAAAAA"></i></a>
</div>
<div class="playlist-item-tags">
<a class="playlist-item-edit tag-space tag-click"><i class="fas fa-edit"
style="color: #AAAAAA"></i></a>
</div>
</td>
<td>
<small class="playlist-item-path"></small>
</td>
<td>
<div class="btn-group">
<button type="button" class="playlist-item-play btn btn-info btn-sm btn-space">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
<button type="button" class="playlist-item-trash btn btn-danger btn-sm btn-space">
<i class="fas fa-trash-alt" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</td>
<td class="d-none d-md-table-cell">
<small class="playlist-item-path"></small>
</td>
<td>
<div class="btn-group">
<button type="button" class="playlist-item-play btn btn-info btn-sm">
<i class="fa fa-play" aria-hidden="true"></i>
</button>
<button type="button" class="playlist-item-trash btn btn-danger btn-sm ml-1">
<i class="fas fa-trash-alt" aria-hidden="true"></i>
</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger btn-space" onclick="request('post', {action : 'clear'})">
<i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-danger mr-1" onclick="request('post', {action : 'clear'})">
<i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
</button>
</div>
</div>
@ -163,16 +157,19 @@
<div class="col">
<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">
<button type="button" id="filter-type-file" class="btn btn-secondary btn-sm"
onclick="setFilterType('file')">File
</button>
<button type="button" id="filter-type-url" class="btn btn-secondary btn-sm"
onclick="setFilterType('url')">URL
</button>
<button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm"
onclick="setFilterType('radio')">Radio
</button>
<div class="btn-group btn-group-sm btn-group-toggle">
<label id="filter-type-file" class="btn btn-secondary"
onclick="setFilterType(event, 'file')">
<input type="checkbox" name="options"> File
</label>
<label id="filter-type-url" class="btn btn-secondary"
onclick="setFilterType(event, 'url')">
<input type="checkbox" name="options"> URL
</label>
<label id="filter-type-radio" class="btn btn-secondary"
onclick="setFilterType(event, 'radio')">
<input type="checkbox" name="options"> Radio
</label>
</div>
</div>
@ -236,7 +233,7 @@
</div>
</div>
<div class="library-info-col col-4" style="padding: 3px;">
<div class="library-info-col col-4 d-none d-md-flex" style="padding: 3px;">
<span class="library-item-path text-muted path">Path/to/the/file</span>
<div class="library-item-tags">
<a class="tag-space tag-click library-item-edit"><i class="fas fa-edit"
@ -288,18 +285,21 @@
</div>
</div>
<div class="btn-group" style="margin-bottom: 5px;" role="group">
<button type="submit" class="btn btn-secondary btn-space" onclick="addAllResults()"><i
class="fa fa-plus" aria-hidden="true"></i> Add All</button>
<button type="submit" class="btn btn-secondary btn-space"
<div class="btn-group" role="group" class="mb-2">
<button type="submit" class="btn btn-secondary mr-1" onclick="addAllResults()"><i class="fa fa-plus"
aria-hidden="true"></i> Add All
</button>
<button type="submit" class="btn btn-secondary mr-1"
onclick="request('post', {action : 'rescan'}); updateResults()">
<i class="fas fa-sync-alt" aria-hidden="true"></i> Rescan Files
</button>
<button type="submit" class="btn btn-secondary btn-space" onclick="downloadAllResults()"><i
class="fa fa-download" aria-hidden="true"></i> Download All</button>
<button type="button" class="btn btn-danger btn-space" data-toggle="modal"
<button type="submit" class="btn btn-secondary mr-1" onclick="downloadAllResults()"><i
class="fa fa-download" aria-hidden="true"></i> Download All
</button>
<button type="button" class="btn btn-danger mr-1" data-toggle="modal"
data-target="#deleteWarningModal"><i class="fas fa-trash-alt" aria-hidden="true"></i>
Delete All</button>
Delete All
</button>
</div>
<div class="modal fade" id="deleteWarningModal" tabindex="-1" role="dialog"
@ -461,10 +461,10 @@
</div>
</div>
<script src="static/js/jquery-3.4.1.min.js"></script>
<script src="static/js/jquery-3.5.1.min.js"></script>
<script src="static/js/popper.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/fontawesome.all.js"></script>
<script src="static/js/fontawesome.all.min.js"></script>
<script src="static/js/custom.js"></script>
</body>