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

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

View File

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

View File

@ -8,7 +8,6 @@
<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>
@ -43,12 +42,10 @@
<tbody>
</tbody>
</table>
</div>
</div>
<div id="queue-container">
<h1 class="h1">Now Playing</h1>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
@ -56,7 +53,7 @@
<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>
<th class="col-md-1 control-icons">Control</th>
</tr>
</thead>
<tbody>
@ -71,9 +68,7 @@
</tr>
</tbody>
</table>
</div>
<h1 class="h1">Queue</h1>
<div class="table-responsive">
<table class="table table-striped">
<thead>
<tr>
@ -81,13 +76,12 @@
<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>
<th class="col-md-1 control-icons">Control</th>
</tr>
</thead>
<tbody class="queuebody">
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="{% static 'js/js.cookie-2.1.3.min.js' %}"></script>