technicie/MarietjeDjango
1
0
Fork 0
mirror of https://gitlab.science.ru.nl/technicie/MarietjeDjango.git synced 2025-12-10 09:02:20 +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 { .search-input {
width: 100%; 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> <button id="request-button" class="btn btn-primary">Request</button>
<br><br> <br><br>
<div id="request-container" class="hidden"> <div id="request-container" class="hidden">
<div class="table-responsive"> <table id="request-table" class="table table-striped">
<table id="request-table" class="table table-striped"> <thead>
<thead> <tr>
<tr> <th>Artist</th>
<th>Artist</th> <th>Title</th>
<th>Title</th> <th>Uploader</th>
<th>Uploader</th> </tr>
</tr> <tr>
<tr> <th colspan="2"><input id="search-all" class="search-input" type="text"></th>
<th colspan="2"><input id="search-all" class="search-input" type="text"></th> <th><input id="search-uploader" class="search-input" type="text"></th>
<th><input id="search-uploader" class="search-input" type="text"></th> </tr>
</tr> </thead>
</thead> <tfoot>
<tfoot> <tr>
<tr> <th colspan="3" class="ts-pager form-horizontal">
<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 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 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 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>
<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">
<select class="pagesize input-mini" title="Select page size"> <option selected value="10">10</option>
<option selected value="10">10</option> <option value="25">25</option>
<option value="25">25</option> <option value="50">50</option>
<option value="50">50</option> <option value="100">100</option>
<option value="100">100</option> <option value="500">500</option>
<option value="500">500</option> <option value="1000">1000</option>
<option value="1000">1000</option> </select>
</select> <select class="pagenum input-mini" title="Select page number"></select>
<select class="pagenum input-mini" title="Select page number"></select> </th>
</th> </tr>
</tr> </tfoot>
</tfoot> <tbody>
<tbody> </tbody>
</tbody> </table>
</table>
</div>
</div> </div>
<div id="queue-container"> <div id="queue-container">
<h1 class="h1">Now Playing</h1> <h1 class="h1">Now Playing</h1>
<div class="table-responsive"> <table class="table table-striped">
<table class="table table-striped"> <thead>
<thead> <tr>
<tr> <th class="col-md-4">Artist</th>
<th class="col-md-4">Artist</th> <th class="col-md-4">Title</th>
<th class="col-md-4">Title</th> <th class="col-md-2">Requested By</th>
<th class="col-md-2">Requested By</th> <th class="col-md-1">Time Left</th>
<th class="col-md-1">Time Left</th> <th class="col-md-1 control-icons">Control</th>
<th class="col-md-1">Skip</th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr class="currentsong">
<tr class="currentsong"> <td class="artist"></td>
<td class="artist"></td> <td class="title"></td>
<td class="title"></td> <td class="requestedby"></td>
<td class="requestedby"></td> <td class="timeleft"></td>
<td class="timeleft"></td> <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 %}
<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>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table>
</div>
<h1 class="h1">Queue</h1> <h1 class="h1">Queue</h1>
<div class="table-responsive"> <table class="table table-striped">
<table class="table table-striped"> <thead>
<thead> <tr>
<tr> <th class="col-md-4">Artist</th>
<th class="col-md-4">Artist</th> <th class="col-md-4">Title</th>
<th class="col-md-4">Title</th> <th class="col-md-2">Requested By</th>
<th class="col-md-2">Requested By</th> <th class="col-md-1">Plays At</th>
<th class="col-md-1">Plays At</th> <th class="col-md-1 control-icons">Control</th>
<th class="col-md-1">Control</th> </tr>
</tr> </thead>
</thead> <tbody class="queuebody">
<tbody class="queuebody"> </tbody>
</tbody> </table>
</table>
</div>
</div> </div>
<script type="text/javascript" src="{% static 'js/js.cookie-2.1.3.min.js' %}"></script> <script type="text/javascript" src="{% static 'js/js.cookie-2.1.3.min.js' %}"></script>