63f45d285d
Tables should look better on mobile now. Don't show table column selector on mobile sizes. Show more important columns on mobile.
75 lines
2.8 KiB
HTML
75 lines
2.8 KiB
HTML
<%inherit file="base.html"/>
|
|
<%!
|
|
from plexpy import helpers
|
|
%>
|
|
|
|
<%def name="headIncludes()">
|
|
<link rel="stylesheet" href="interfaces/default/css/plexwatch-tables.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/dataTables.colVis.css">
|
|
<link rel="stylesheet" href="interfaces/default/css/dataTables.responsive.css">
|
|
<style>
|
|
td {word-wrap: break-word}
|
|
</style>
|
|
</%def>
|
|
|
|
<%def name="headerIncludes()">
|
|
</%def>
|
|
|
|
<%def name="body()">
|
|
<div class='container-fluid'>
|
|
<div class='row-fluid'>
|
|
<div class='span12'>
|
|
<div class='table-card-back'>
|
|
<div class="header-bar">
|
|
<h2><i class="fa fa-cloud-download"></i> Synced Items</h2>
|
|
</div>
|
|
<div class="colvis-button-bar">
|
|
</div>
|
|
</div>
|
|
<div class='table-card-back'>
|
|
<table class="display" id="sync_table" width="100%">
|
|
<thead>
|
|
<tr>
|
|
<th class="desktop" align='left' id="state">State</th>
|
|
<th class="all" align='left' id="username">Username</th>
|
|
<th class="all" align='left' id="title">Title</th>
|
|
<th class="desktop" align='left' id="type">Type</th>
|
|
<th class="min-tablet" align='left' id="device">Device</th>
|
|
<th class="desktop" align='left' id="platform">Platform</th>
|
|
<th class="desktop" align='left' id="size">Total Size</th>
|
|
<th class="min-tablet" align='left' id="items">Total Items</th>
|
|
<th class="desktop" align='left' id="converted">Converted</th>
|
|
<th class="desktop" align='left' id="downloaded">Downloaded</th>
|
|
<th class="desktop" align='left' id="percent_complete">Complete</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</%def>
|
|
|
|
<%def name="javascriptIncludes()">
|
|
<script src="interfaces/default/js/jquery.dataTables.min.js"></script>
|
|
<script src="interfaces/default/js/dataTables.colVis.js"></script>
|
|
<script src="interfaces/default/js/dataTables.responsive.js"></script>
|
|
<script src="interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js"></script>
|
|
<script src="interfaces/default/js/tables/sync_table.js"></script>
|
|
<script>
|
|
$(document).ready(function() {
|
|
sync_table_options.ajax = {
|
|
"url": "get_sync"
|
|
}
|
|
sync_table = $('#sync_table').DataTable(sync_table_options);
|
|
|
|
var colvis = new $.fn.dataTable.ColVis( sync_table );
|
|
$( colvis.button() ).appendTo('div.colvis-button-bar');
|
|
});
|
|
</script>
|
|
</%def>
|