github/plexpy
1
0
Fork 0
mirror of https://github.com/Tautulli/Tautulli.git synced 2025-07-07 05:31:15 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

More styling changes.

Browse source 
Tables should look better on mobile now.
Don't show table column selector on mobile sizes.
Show more important columns on mobile.
This commit is contained in:
Tim 2015-07-19 15:04:17 +02:00
parent 1c1ad5ab30
commit 63f45d285d
10 changed files with 76 additions and 38 deletions
Download patch file Download diff file Expand all files Collapse all files

16
data/interfaces/default/config.html
View file

@ -13,10 +13,10 @@
<div class='row-fluid'> <div class='row-fluid'>
<div class='span12'> <div class='span12'>
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
<h2><i class="fa fa-cog"></i> Settings</h2> <h2><i class="fa fa-cog"></i> Settings</h2>
</div> </div>
<div style="float: right;" class="button-bar"> <div class="button-bar">
% if config['check_github']: % if config['check_github']:
<button id="menu_link_update_check" class="rounded"><i class="fa fa-arrow-circle-up"></i> Check for Updates</button> <button id="menu_link_update_check" class="rounded"><i class="fa fa-arrow-circle-up"></i> Check for Updates</button>
% endif % endif
@ -123,7 +123,7 @@
</div> </div>
</div> </div>
</div> </div>
<input type="button" class="btn btn-medium btn-primary save-button" value="Save" data-success="Changes saved successfully"> <input type="button" class="rounded rounded-primary save-button" value="Save" data-success="Changes saved successfully">
</div> </div>
<div role="tabpanel" class="tab-pane" id="tabs-2"> <div role="tabpanel" class="tab-pane" id="tabs-2">
@ -183,7 +183,7 @@
<p class="help-block">Port that Plex Media Server is listening on.</p> <p class="help-block">Port that Plex Media Server is listening on.</p>
</div> </div>
<input type="hidden" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}"> <input type="hidden" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}">
<a class="btn btn-default btn-sm" id="verify-plex-server" href="javascript:void(0)" role="button">Verify</a><span style="margin-left: 10px; display: none;" id="pms-verify-status"></span> <a class="rounded" id="verify-plex-server" href="javascript:void(0)" role="button">Verify</a><span style="margin-left: 10px; display: none;" id="pms-verify-status"></span>
</fieldset> </fieldset>
</div> </div>
<div class="span4"> <div class="span4">
@ -220,7 +220,7 @@
</div> </div>
</div> </div>
</div> </div>
<input type="button" class="btn btn-medium btn-primary save-button" value="Save" data-success="Changes saved successfully"> <input type="button" class="rounded rounded-primary save-button" value="Save" data-success="Changes saved successfully">
</div> </div>
<div role="tabpanel" class="tab-pane" id="tabs-3"> <div role="tabpanel" class="tab-pane" id="tabs-3">
@ -363,7 +363,7 @@
</div> </div>
</div> </div>
<br/> <br/>
<input type="button" class="btn btn-medium btn-primary save-button" value="Save" data-success="Changes saved successfully"> <input type="button" class="rounded rounded-primary save-button" value="Save" data-success="Changes saved successfully">
</div> </div>
<div role="tabpanel" class="tab-pane" id="tabs-5"> <div role="tabpanel" class="tab-pane" id="tabs-5">
@ -656,7 +656,7 @@
</div> </div>
<br/> <br/>
</div> </div>
<input type="button" class="btn btn-medium btn-primary save-button" value="Save" data-success="Changes saved successfully"> <input type="button" class="rounded rounded-primary save-button" value="Save" data-success="Changes saved successfully">
</div> </div>
</div> </div>
</div> </div>
@ -815,7 +815,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class=""> <div class="">
<input type="button" id="get-pms-auth-token" class="btn btn-primary" value="Fetch Token"> <input type="button" id="get-pms-auth-token" class="rounded rounded-primary" value="Fetch Token">
<span id="pms-token-status"></span> <span id="pms-token-status"></span>
</div> </div>
</div> </div>

44
data/interfaces/default/css/plexwatch.css
View file

@ -8277,9 +8277,9 @@ ol.test >li {
font-size: 12px; font-size: 12px;
} }
button.rounded { .rounded {
padding: 4px 12px; padding: 4px 12px;
margin-bottom: 0; margin: 4px 4px 4px 0px;
font-size: 14px; font-size: 14px;
font-weight: normal; font-weight: normal;
line-height: 1.42857143; line-height: 1.42857143;
@ -8301,6 +8301,44 @@ button.rounded {
-webkit-appearance:none; -webkit-appearance:none;
} }
.rounded:hover{ .rounded:hover {
color: #F9AA03; color: #F9AA03;
} }
.rounded:active {
border: 1px solid #eb8600;
}
.rounded-primary {
background-color: #eb8600;
color: #f2f2f2;
}
.rounded-primary:hover {
color: #fff;
}
.rounded-primary:active {
border: 1px solid #444;
color: #444;
}
.header-bar {
float: left;
}
.button-bar {
float: right;
}
@media (min-width: 1024px) {
.colvis-button-bar {
float: right;
}
}
@media (max-width: 1023px) {
.colvis-button-bar {
display: none;
}
}

10
data/interfaces/default/history.html
View file

@ -15,10 +15,10 @@ from plexpy import helpers
<div class='row-fluid'> <div class='row-fluid'>
<div class='span12'> <div class='span12'>
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
<h2><i class="fa fa-history"></i> History</h2> <h2><i class="fa fa-history"></i> History</h2>
</div> </div>
<div style="float: right;" class="button-bar"> <div class="colvis-button-bar">
</div> </div>
</div> </div>
@ -27,10 +27,10 @@ from plexpy import helpers
<thead> <thead>
<tr> <tr>
<th class="all" align='left' id="time">Time</th> <th class="all" align='left' id="time">Time</th>
<th class="all" align='left' id="friendly_name">User</th> <th class="min-tablet" align='left' id="friendly_name">User</th>
<th class="desktop" align='left' id="platform">Platform</th> <th class="desktop" align='left' id="platform">Platform</th>
<th class="desktop" align='left' id="ip_address">IP Address</th> <th class="desktop" align='left' id="ip_address">IP Address</th>
<th class="min-tablet" align='left' id="title">Title</th> <th class="all" align='left' id="title">Title</th>
<th class="min-tablet" align='left' id="started">Started</th> <th class="min-tablet" align='left' id="started">Started</th>
<th class="desktop" align='left' id="paused_counter">Paused</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="stopped">Stopped</th>
@ -73,7 +73,7 @@ from plexpy import helpers
history_table = $('#history_table').DataTable(history_table_options); history_table = $('#history_table').DataTable(history_table_options);
var colvis = new $.fn.dataTable.ColVis( history_table ); var colvis = new $.fn.dataTable.ColVis( history_table );
$( colvis.button() ).appendTo('div.button-bar'); $( colvis.button() ).appendTo('div.colvis-button-bar');
}); });
</script> </script>

12
data/interfaces/default/info.html
View file

@ -167,11 +167,11 @@ from plexpy import helpers
<div class='row-fluid'> <div class='row-fluid'>
<div class='span12'> <div class='span12'>
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
% if data['type'] == 'movie' or data['type'] == 'episode' or data['type'] == 'show': % if data['type'] == 'movie' or data['type'] == 'episode' or data['type'] == 'show':
<h3>Watch history for <strong>${data['title']}</strong></h3> <h3>Watch history for <strong>${data['title']}</strong></h3>
</div> </div>
<div style="float: right;" class="button-bar"> <div class="colvis-button-bar">
</div> </div>
</div> </div>
<div class="table-card-back"> <div class="table-card-back">
@ -185,9 +185,9 @@ from plexpy import helpers
<th class="min-tablet" align='left' id="title">Title</th> <th class="min-tablet" align='left' id="title">Title</th>
<th class="min-tablet" align='left' id="started">Started</th> <th class="min-tablet" align='left' id="started">Started</th>
<th class="desktop" align='left' id="paused_counter">Paused</th> <th class="desktop" align='left' id="paused_counter">Paused</th>
<th class="desktop" align='left' id="stopped">Stopped</th> <th class="min-tablet" align='left' id="stopped">Stopped</th>
<th class="desktop" align='left' id="duration">Duration</th> <th class="desktop" align='left' id="duration">Duration</th>
<th class="desktop" align='left' id="percent_complete"></th> <th class="min-tablet" align='left' id="percent_complete"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -260,7 +260,7 @@ from plexpy import helpers
history_table.column(4).visible(false); history_table.column(4).visible(false);
var colvis = new $.fn.dataTable.ColVis( history_table ); var colvis = new $.fn.dataTable.ColVis( history_table );
$( colvis.button() ).appendTo('div.button-bar'); $( colvis.button() ).appendTo('div.colvis-button-bar');
}); });
</script> </script>
@ -281,7 +281,7 @@ from plexpy import helpers
history_table = $('#history_table').DataTable(history_table_options); history_table = $('#history_table').DataTable(history_table_options);
var colvis = new $.fn.dataTable.ColVis( history_table ); var colvis = new $.fn.dataTable.ColVis( history_table );
$( colvis.button() ).appendTo('div.button-bar'); $( colvis.button() ).appendTo('div.colvis-button-bar');
}); });

2
data/interfaces/default/js/jquery.dataTables.bootstrap.pagination.integration.js
View file

@ -65,7 +65,7 @@ $.extend( $.fn.dataTableExt.oPagination, {
// Add the new list items and their event handlers // Add the new list items and their event handlers
for ( j=iStart ; j<=iEnd ; j++ ) { for ( j=iStart ; j<=iEnd ; j++ ) {
sClass = (j==oPaging.iPage+1) ? 'class="active"' : ''; sClass = (j==oPaging.iPage+1) ? 'class="active"' : '';
$('<li '+sClass+'><a href="#">'+j+'</a></li>') $('<li '+sClass+'><a class="hidden-phone" href="#">'+j+'</a></li>')
.insertBefore( $('li:last', an[i])[0] ) .insertBefore( $('li:last', an[i])[0] )
.bind('click', function (e) { .bind('click', function (e) {
e.preventDefault(); e.preventDefault();

4
data/interfaces/default/logs.html
View file

@ -19,10 +19,10 @@ from plexpy import helpers
<div class='row-fluid'> <div class='row-fluid'>
<div class='span12'> <div class='span12'>
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
<h2><i class="fa fa-book"></i> Logs</h2> <h2><i class="fa fa-book"></i> Logs</h2>
</div> </div>
<div style="float: right;" class="button-bar"> <div class="button-bar">
<button class="rounded" id="clear-logs"><i class="fa fa-trash-o"></i> Clear log</button> <button class="rounded" id="clear-logs"><i class="fa fa-trash-o"></i> Clear log</button>
</div> </div>
</div> </div>

2
data/interfaces/default/plexwatch_import.html
View file

@ -26,7 +26,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div> <div>
<input type="button" id="import_db" class="btn btn-primary" value="Save"> <input type="button" id="import_db" class="rounded rounded-primary" value="Import">
<span id="status-message"></span> <span id="status-message"></span>
</div> </div>
</div> </div>

6
data/interfaces/default/sync.html
View file

@ -20,10 +20,10 @@ from plexpy import helpers
<div class='row-fluid'> <div class='row-fluid'>
<div class='span12'> <div class='span12'>
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
<h2><i class="fa fa-cloud-download"></i> Synced Items</h2> <h2><i class="fa fa-cloud-download"></i> Synced Items</h2>
</div> </div>
<div style="float: right;" class="button-bar"> <div class="colvis-button-bar">
</div> </div>
</div> </div>
<div class='table-card-back'> <div class='table-card-back'>
@ -68,7 +68,7 @@ from plexpy import helpers
sync_table = $('#sync_table').DataTable(sync_table_options); sync_table = $('#sync_table').DataTable(sync_table_options);
var colvis = new $.fn.dataTable.ColVis( sync_table ); var colvis = new $.fn.dataTable.ColVis( sync_table );
$( colvis.button() ).appendTo('div.button-bar'); $( colvis.button() ).appendTo('div.colvis-button-bar');
}); });
</script> </script>
</%def> </%def>

14
data/interfaces/default/user.html
View file

@ -175,12 +175,12 @@ from plexpy import helpers
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
<h3>Watch History for <strong> <h3>Watch History for <strong>
<span class="set-username">${data['friendly_name']}</span> <span class="set-username">${data['friendly_name']}</span>
</strong></h3> </strong></h3>
</div> </div>
<div style="float: right;" id="button-bar-history"> <div class="colvis-button-bar" id="button-bar-history">
</div> </div>
</div> </div>
<div class="table-card-back"> <div class="table-card-back">
@ -191,12 +191,12 @@ from plexpy import helpers
<th class="never" align='left' id="friendly_name">User</th> <th class="never" align='left' id="friendly_name">User</th>
<th class="desktop" align='left' id="platform">Platform</th> <th class="desktop" align='left' id="platform">Platform</th>
<th class="desktop" align='left' id="ip_address">IP Address</th> <th class="desktop" align='left' id="ip_address">IP Address</th>
<th class="min-tablet" align='left' id="title">Title</th> <th class="all" align='left' id="title">Title</th>
<th class="min-tablet" align='left' id="started">Started</th> <th class="min-tablet" align='left' id="started">Started</th>
<th class="desktop" align='left' id="paused_counter">Paused</th> <th class="desktop" align='left' id="paused_counter">Paused</th>
<th class="desktop" align='left' id="stopped">Stopped</th> <th class="min-tablet" align='left' id="stopped">Stopped</th>
<th class="desktop" align='left' id="duration">Duration</th> <th class="desktop" align='left' id="duration">Duration</th>
<th class="desktop" align='left' id="percent_complete"></th> <th class="min-tablet" align='left' id="percent_complete"></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
@ -215,12 +215,12 @@ from plexpy import helpers
<div class="row-fluid"> <div class="row-fluid">
<div class="span12"> <div class="span12">
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
<h3>Synced Items for <strong> <h3>Synced Items for <strong>
<span class="set-username">${data['friendly_name']}</span> <span class="set-username">${data['friendly_name']}</span>
</strong></h3> </strong></h3>
</div> </div>
<div style="float: right;" id="button-bar-sync"> <div class="colvis-button-bar" id="button-bar-sync">
</div> </div>
</div> </div>
<div class="table-card-back"> <div class="table-card-back">

4
data/interfaces/default/users.html
View file

@ -13,10 +13,10 @@ from plexpy import helpers
<div class='row-fluid'> <div class='row-fluid'>
<div class='span12'> <div class='span12'>
<div class='table-card-back'> <div class='table-card-back'>
<div style="float: left;"> <div class="header-bar">
<h2><i class="fa fa-group"></i> Active Users</h2> <h2><i class="fa fa-group"></i> Active Users</h2>
</div> </div>
<div style="float: right;" class="button-bar"> <div class="button-bar">
<button class="rounded" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button> <button class="rounded" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button>
</div> </div>
</div> </div>