technicie/MarietjeDjango
1
0
Fork 0
mirror of https://gitlab.science.ru.nl/technicie/MarietjeDjango.git synced 2025-12-09 21:02:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

Make queue and request form not scrollable horizontally for better mobile usage.

Browse Source
This commit is contained in:
Jim Driessen
2017-02-01 13:52:43 +01:00
parent 0ed4f5af63
commit 7339c897f9
2 changed files with 73 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
marietje/marietje/static/css/custom.css
View File

@ -1,3 +1,7 @@
.search-input {
width: 100%;
}
.control-icons {
min-width: 90px;
}

144
marietje/queues/templates/queues/queue.html
View File

@ -8,86 +8,80 @@
<button id="request-button" class="btn btn-primary">Request</button>
<br><br>
<div id="request-container" class="hidden">
<div class="table-responsive">
<table id="request-table" class="table table-striped">
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
<th>Uploader</th>
</tr>
<tr>
<th colspan="2"><input id="search-all" class="search-input" type="text"></th>
<th><input id="search-uploader" class="search-input" type="text"></th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3" class="ts-pager form-horizontal">
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
<select class="pagesize input-mini" title="Select page size">
<option selected value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
<select class="pagenum input-mini" title="Select page number"></select>
</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
<table id="request-table" class="table table-striped">
<thead>
<tr>
<th>Artist</th>
<th>Title</th>
<th>Uploader</th>
</tr>
<tr>
<th colspan="2"><input id="search-all" class="search-input" type="text"></th>
<th><input id="search-uploader" class="search-input" type="text"></th>
</tr>
</thead>
<tfoot>
<tr>
<th colspan="3" class="ts-pager form-horizontal">
<button type="button" class="btn first"><i class="icon-step-backward glyphicon glyphicon-step-backward"></i></button>
<button type="button" class="btn prev"><i class="icon-arrow-left glyphicon glyphicon-backward"></i></button>
<button type="button" class="btn next"><i class="icon-arrow-right glyphicon glyphicon-forward"></i></button>
<button type="button" class="btn last"><i class="icon-step-forward glyphicon glyphicon-step-forward"></i></button>
<select class="pagesize input-mini" title="Select page size">
<option selected value="10">10</option>
<option value="25">25</option>
<option value="50">50</option>
<option value="100">100</option>
<option value="500">500</option>
<option value="1000">1000</option>
</select>
<select class="pagenum input-mini" title="Select page number"></select>
</th>
</tr>
</tfoot>
<tbody>
</tbody>
</table>
</div>
<div id="queue-container">
<h1 class="h1">Now Playing</h1>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-4">Artist</th>
<th class="col-md-4">Title</th>
<th class="col-md-2">Requested By</th>
<th class="col-md-1">Time Left</th>
<th class="col-md-1">Skip</th>
</tr>
</thead>
<tbody>
<tr class="currentsong">
<td class="artist"></td>
<td class="title"></td>
<td class="requestedby"></td>
<td class="timeleft"></td>
<td>
<a id="skip" href="#"></a>{% if perms.queues.can_control_volume %}&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-down" class="glyphicon glyphicon-volume-down" href="#"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-up" class="glyphicon glyphicon-volume-up" href="#"></a>{% endif %}
</td>
</tr>
</tbody>
</table>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-4">Artist</th>
<th class="col-md-4">Title</th>
<th class="col-md-2">Requested By</th>
<th class="col-md-1">Time Left</th>
<th class="col-md-1 control-icons">Control</th>
</tr>
</thead>
<tbody>
<tr class="currentsong">
<td class="artist"></td>
<td class="title"></td>
<td class="requestedby"></td>
<td class="timeleft"></td>
<td>
<a id="skip" href="#"></a>{% if perms.queues.can_control_volume %}&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-down" class="glyphicon glyphicon-volume-down" href="#"></a>&nbsp;&nbsp;&nbsp;&nbsp;<a id="volume-up" class="glyphicon glyphicon-volume-up" href="#"></a>{% endif %}
</td>
</tr>
</tbody>
</table>
<h1 class="h1">Queue</h1>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-4">Artist</th>
<th class="col-md-4">Title</th>
<th class="col-md-2">Requested By</th>
<th class="col-md-1">Plays At</th>
<th class="col-md-1">Control</th>
</tr>
</thead>
<tbody class="queuebody">
</tbody>
</table>
</div>
<table class="table table-striped">
<thead>
<tr>
<th class="col-md-4">Artist</th>
<th class="col-md-4">Title</th>
<th class="col-md-2">Requested By</th>
<th class="col-md-1">Plays At</th>
<th class="col-md-1 control-icons">Control</th>
</tr>
</thead>
<tbody class="queuebody">
</tbody>
</table>
</div>
<script type="text/javascript" src="{% static 'js/js.cookie-2.1.3.min.js' %}"></script>