Start styling changes. After updating to this force a refresh (shift+refresh) in your browser to reload styles.

Make more use of card-type layouts.
Make tables responsive.
This commit is contained in:
Tim 2015-06-28 16:59:36 +02:00
commit 762199344c
14 changed files with 1367 additions and 303 deletions

View file

@ -55,6 +55,7 @@ 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.responsive.css">
</%def>
<%def name="body()">
@ -178,47 +179,45 @@ from plexpy import helpers
<div class='container-fluid'>
<div class='row-fluid'>
<div class='span12'>
<div class='wellbg'>
<div class='table-card-back'>
% if data['type'] == 'movie' or data['type'] == 'episode' or data['type'] == 'show':
<div class="wellheader">
<div class="dashboard-wellheader">
<h3>Watch history for <strong>${data['title']}</strong></h3>
</div>
</div>
<h3>Watch history for <strong>${data['title']}</strong></h3>
</div>
<div class="table-card-back">
<table class="display" id="history_table" width="100%">
<thead>
<tr>
<th align='left' id="id"><i class='fa fa-sort'></i> ID</th>
<th align='left' id="date"><i class='fa fa-sort'></i> Time</th>
<th align='left' id="user"><i class='fa fa-sort'></i> User</th>
<th align='left' id="platform"><i class='fa fa-sort'></i> Platform</th>
<th align='left' id="ip_address"><i class='fa fa-sort'></i> IP Address</th>
<th align='left' id="title"><i class='fa fa-sort'></i> Title</th>
<th align='left' id="started"><i class='fa fa-sort'></i> Started</th>
<th align='left' id="paused_counter"><i class='fa fa-sort'></i> Paused</th>
<th align='left' id="stopped"><i class='fa fa-sort'></i> Stopped</th>
<th align='left' id="duration"><i class='fa fa-sort'></i> Duration</th>
<th align='left' id="percent_complete"> Completed</th>
<th align='left' id="rating_key"> RatingKey</th>
<th align='left' id="xml"></th>
<th class="never" align='left' id="id">ID</th>
<th class="all" align='left' id="time">Time</th>
<th class="all" align='left' id="user">User</th>
<th class="min-tablet" align='left' id="platform">Platform</th>
<th class="desktop" align='left' id="ip_address">IP Address</th>
<th class="min-tablet" align='left' id="title">Title</th>
<th class="desktop" align='left' id="started">Started</th>
<th class="desktop" align='left' id="paused_counter">Paused</th>
<th class="desktop" align='left' id="stopped">Stopped</th>
<th class="desktop" align='left' id="duration">Duration</th>
<th class="desktop" align='left' id="percent_complete">Completed</th>
<th class="never" align='left' id="rating_key">RatingKey</th>
<th class="never" align='left' id="xml"></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div id="info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="info-modal"
aria-hidden="true">
</div>
% elif data['type'] == 'season':
<div class="wellheader">
<div class="dashboard-wellheader">
<h3>Episode list for <strong>${data['title']}</strong></h3>
</div>
</div>
<div id="episode-list">
</div>
% endif
</div>
<div id="info-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="info-modal"
aria-hidden="true">
</div>
% elif data['type'] == 'season':
<div class="wellheader">
<div class="dashboard-wellheader">
<h3>Episode list for <strong>${data['title']}</strong></h3>
</div>
</div>
<div id="episode-list">
</div>
% endif
</div>
</div>
</div>
@ -238,6 +237,7 @@ from plexpy import helpers
<%def name="javascriptIncludes()">
<script src="interfaces/default/js/jquery.rateit.min.js"></script>
<script src="interfaces/default/js/jquery.dataTables.min.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/moment-with-locale.js"></script>