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

Improve playlist and library mobile styling

Browse Source
This commit is contained in:
Tyler Vigario 2020-04-20 20:07:26 -07:00
parent 3f4bfe1846
commit 5be387c81c
No known key found for this signature in database
GPG Key ID: 4D670648A0376AA4
2 changed files with 193 additions and 189 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
static/css/custom.css
View File

@ -45,7 +45,6 @@
} }
.library-item{ .library-item{
display: flex; display: flex;
margin-left: 5px;
padding: .5rem .5rem .5rem 0; padding: .5rem .5rem .5rem 0;
height: 72px; height: 72px;
transition: ease-in-out 200ms; transition: ease-in-out 200ms;

125
templates/index.html
View File

@ -6,17 +6,17 @@
<title>botamusique web interface</title> <title>botamusique web interface</title>
<link rel="icon" href="static/image/favicon.ico" /> <link rel="icon" href="../static/image/favicon.ico" />
<link id="pagestyle" rel="stylesheet" href="static/css/bootstrap.min.css"> <link id="pagestyle" rel="stylesheet" href="../static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/custom.css"> <link rel="stylesheet" href="../static/css/custom.css">
</head> </head>
<body> <body>
<div class="container page-header mb-5" id="banner"> <div class="container page-header mb-5" id="banner">
<div class="row"> <div class="row">
<div class="col-auto"> <div class="col-auto">
<img src="static/image/logo.png" height="200px"> <img src="../static/image/logo.png" height="200px">
</div> </div>
<div class="col my-auto"> <div class="col my-auto">
<h1>botamusique Web Interface</h1> <h1>botamusique Web Interface</h1>
@ -25,11 +25,10 @@
</div> </div>
<div class="container mb-5"> <div class="container mb-5">
<div id="playlist">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
<div id="playlist" class="col-lg-12"> <div class="btn-group mb-2">
<div>
<div class="btn-group" style="margin-bottom: 10px;">
<button type="button" id="play-btn" class="btn btn-info btn-space" <button type="button" id="play-btn" class="btn btn-info btn-space"
onclick="request('post', {action : 'resume'})" disabled> onclick="request('post', {action : 'resume'})" disabled>
<i class="fas fa-play" aria-hidden="true"></i> <i class="fas fa-play" aria-hidden="true"></i>
@ -45,10 +44,11 @@
<i class="fas fa-stop" aria-hidden="true"></i> <i class="fas fa-stop" aria-hidden="true"></i>
</button> </button>
</div> </div>
</div>
<div class="btn-group" style="float: right;"> <div class="col text-right">
<button type="button" id="oneshot-btn" class="btn btn-primary btn-space" <div class="btn-group mb-2">
title="One-shot Mode" onclick="request('post', {action : 'one-shot'})" disabled> <button type="button" id="oneshot-btn" class="btn btn-primary btn-space" title="One-shot Mode"
onclick="request('post', {action : 'one-shot'})" disabled>
<i class="fas fa-tasks" aria-hidden="true"></i> <i class="fas fa-tasks" aria-hidden="true"></i>
</button> </button>
@ -62,8 +62,8 @@
<i class="fas fa-redo" aria-hidden="true"></i> <i class="fas fa-redo" aria-hidden="true"></i>
</button> </button>
<button type="button" id="autoplay-btn" class="btn btn-primary btn-space" <button type="button" id="autoplay-btn" class="btn btn-primary btn-space" title="Autoplay Mode"
title="Autoplay Mode" onclick="request('post', {action : 'autoplay'})" disabled> onclick="request('post', {action : 'autoplay'})" disabled>
<i class="fas fa-robot" aria-hidden="true"></i> <i class="fas fa-robot" aria-hidden="true"></i>
</button> </button>
@ -79,9 +79,11 @@
onclick="request('post', {action : 'volume_up'})"> onclick="request('post', {action : 'volume_up'})">
<i class="fa fa-volume-up" aria-hidden="true"></i> <i class="fa fa-volume-up" aria-hidden="true"></i>
</button> </button>
</div>
</div>
</div> </div>
<div class="table-responsive">
<table class="table table-striped table-hover"> <table class="table table-striped table-hover">
<thead> <thead>
<tr> <tr>
@ -94,12 +96,12 @@
<tbody id="playlist-table" class="playlist-table"> <tbody id="playlist-table" class="playlist-table">
<tr id="playlist-loading"> <tr id="playlist-loading">
<td colspan="4" style="text-align:center;"> <td colspan="4" style="text-align:center;">
<img style="margin: auto; width: 35px;" src="static/image/loading.svg" /> <img style="margin: auto; width: 35px;" src="../static/image/loading.svg" />
</td> </td>
</tr> </tr>
<tr id="playlist-empty" style="display: none;"> <tr id="playlist-empty" style="display: none;">
<td colspan="4" style="text-align:center;"> <td colspan="4" style="text-align:center;">
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" /> <img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
</td> </td>
</tr> </tr>
<tr id="playlist-expand" class="table-dark" style="display: none;"> <tr id="playlist-expand" class="table-dark" style="display: none;">
@ -114,7 +116,7 @@
<input hidden type="text" class="playlist-item-id" value="" /> <input hidden type="text" class="playlist-item-id" value="" />
<div class="playlist-title"> <div class="playlist-title">
<img width="80" class="playlist-item-thumbnail" <img width="80" class="playlist-item-thumbnail"
src="static/image/unknown-album.png" /> src="../static/image/unknown-album.png" />
</div> </div>
<div class="playlist-artwork"> <div class="playlist-artwork">
<b class="playlist-item-title"></b> <b class="playlist-item-title"></b>
@ -134,12 +136,10 @@
</td> </td>
<td> <td>
<div class="btn-group"> <div class="btn-group">
<button type="button" <button type="button" class="playlist-item-play btn btn-info btn-sm btn-space">
class="playlist-item-play btn btn-info btn-sm btn-space">
<i class="fa fa-play" aria-hidden="true"></i> <i class="fa fa-play" aria-hidden="true"></i>
</button> </button>
<button type="button" <button type="button" class="playlist-item-trash btn btn-danger btn-sm btn-space">
class="playlist-item-trash btn btn-danger btn-sm btn-space">
<i class="fas fa-trash-alt" aria-hidden="true"></i> <i class="fas fa-trash-alt" aria-hidden="true"></i>
</button> </button>
</div> </div>
@ -147,24 +147,18 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div>
<div class="btn-group"> <div class="btn-group">
<button type="button" class="btn btn-danger btn-space" <button type="button" class="btn btn-danger btn-space" onclick="request('post', {action : 'clear'})">
onclick="request('post', {action : 'clear'})">
<i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist <i class="fas fa-trash-alt" aria-hidden="true"></i> Clear Playlist
</button> </button>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
<div class="container mb-3"> <div class="container mb-3">
<h2 id="forms">Music Library</h2>
<div class="page-header">
<h1 id="forms">Music Library</h1>
</div>
<div id="browser" class="card"> <div id="browser" class="card">
<div class="card-header"> <div class="card-header">
@ -172,28 +166,33 @@
</div> </div>
<div class="card-body"> <div class="card-body">
<div class="alert alert-secondary"> <div class="card mb-3" style="background-color: #e2e3e5;">
<h4 class="alert-heading">Filters</h4> <div class="card-body">
<h4>Filters</h4>
<div class="row"> <div class="row">
<div class="col-6"> <div class="col">
<div id="filter-type" class="form-group row"> <div id="filter-type" class="form-group row">
<label class="col-sm-2 col-form-label">Type</label> <label class="col-auto col-form-label">Type</label>
<div class="btn-group btn-group-toggle" data-toggle="buttons"
style="height: 35px; padding-top:5px;"> <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</button> onclick="setFilterType('file')">File
</button>
<button type="button" id="filter-type-url" class="btn btn-secondary btn-sm" <button type="button" id="filter-type-url" class="btn btn-secondary btn-sm"
onclick="setFilterType('url')">URL</button> onclick="setFilterType('url')">URL
</button>
<button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm" <button type="button" id="filter-type-radio" class="btn btn-secondary btn-sm"
onclick="setFilterType('radio')">Radio</button> onclick="setFilterType('radio')">Radio
</button>
</div> </div>
</div> </div>
<div id="filter-path" class="form-group row"> <div id="filter-path" class="form-group row">
<label class="col-sm-2 col-form-label" for="filter-dir" <label class="col-auto col-form-label" for="filter-dir">Directory</label>
style="max-width: none">Directory</label>
<div class="col-sm-8"> <div class="col">
<select class="form-control form-control-sm" id="filter-dir" style="margin-top:5px;" <select class="form-control form-control-sm" id="filter-dir"
disabled> style="margin-top:5px;" 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>
@ -203,18 +202,22 @@
</div> </div>
<div id="filter-path" class="form-group row"> <div id="filter-path" class="form-group row">
<label class="col-sm-2 col-form-label" for="filter-keywords" <label class="col-auto col-form-label" for="filter-keywords">Keywords</label>
style="max-width: none">Keywords</label>
<div class="col-sm-8"> <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>
<div class="col-6">
<div id="filter-type" class="form-group row"> <div class="col">
<label class="col-sm-2 col-form-label">Tags</label> <div class="row">
<div class="col-sm-10" style="padding-top:5px;"> <div class="col-auto">
<label for="filter-tag">Tags</label>
</div>
<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>
@ -223,22 +226,23 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div> </div>
<div id="library-group" class="list-group library-group"> <div id="library-group" class="list-group library-group">
<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>
<div id="library-item-empty" style="display: none" class="list-group-item library-item"> <div id="library-item-empty" style="display: none" class="list-group-item library-item">
<img style="margin: auto; width: 35px;" src="static/image/empty_box.svg" /> <img style="margin: auto; width: 35px;" src="../static/image/empty_box.svg" />
</div> </div>
<div id="library-item" style="display: none;" class="list-group-item library-item"> <div id="library-item" style="display: none;" class="list-group-item library-item">
<input hidden type="text" class="library-item-id" value="" /> <input hidden type="text" class="library-item-id" value="" />
<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">
@ -246,6 +250,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="library-info-col library-info-title col-5" style="padding: 12px 0;"> <div class="library-info-col library-info-title col-5" style="padding: 12px 0;">
<div> <div>
<span class="library-item-type lead text-muted btn-space">[File]</span> <span class="library-item-type lead text-muted btn-space">[File]</span>
@ -253,6 +258,7 @@
<span class="library-item-artist text-muted"> - Artist</span> <span class="library-item-artist text-muted"> - Artist</span>
</div> </div>
</div> </div>
<div class="library-info-col col-4" style="padding: 3px;"> <div class="library-info-col col-4" style="padding: 3px;">
<span class="library-item-path text-muted path">Path/to/the/file</span> <span class="library-item-path text-muted path">Path/to/the/file</span>
<div class="library-item-tags"> <div class="library-item-tags">
@ -264,7 +270,6 @@
</div> </div>
</div> </div>
<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">
@ -479,10 +484,10 @@
</div> </div>
</div> </div>
<script src="static/js/jquery-3.4.1.min.js"></script> <script src="../static/js/jquery-3.4.1.min.js"></script>
<script src="static/js/bootstrap.bundle.min.js"></script> <script src="../static/js/bootstrap.bundle.min.js"></script>
<script src="static/js/fontawesome.all.js"></script> <script src="../static/js/fontawesome.all.js"></script>
<script src="static/js/custom.js"></script> <script src="../static/js/custom.js"></script>
</body> </body>
</html> </html>