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

Style tweaks and fixes.

Browse source 
Show tooltip over platform image in activity pane that shows player name.
This commit is contained in:
Tim 2015-08-02 22:16:58 +02:00
parent 5530e87a73
commit 6a97537249
15 changed files with 191 additions and 92 deletions
Download patch file Download diff file Expand all files Collapse all files

185
data/interfaces/default/css/plexpy.css
View file

@ -97,16 +97,144 @@ img {
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffbb450', endColorstr='#fff89406', GradientType=0);
}
.btn {
outline:0px !important;
-webkit-appearance:none;
}
.btn-activity-info,
.btn-activity-info:focus {
color: #aaa;
background-color: rgba(0,0,0,0.5);
outline:0px !important;
-webkit-appearance:none;
}
.btn-activity-info:hover {
color: #eee;
}
.btn-dark {
color: #e5e5e5;
background-color: #3B3B3B;
border-color: transparent;
}
.btn-dark:focus,
.btn-dark.focus {
color: #e5e5e5;
background-color: #3B3B3B;
}
.btn-dark:hover {
color: #fff;
background-color: #333;
border-color: #444;
}
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
color: #fff;
background-color: #3B3B3B;
}
.btn-dark:active:hover,
.btn-dark.active:hover,
.open > .dropdown-toggle.btn-dark:hover,
.btn-dark:active:focus,
.btn-dark.active:focus,
.open > .dropdown-toggle.btn-dark:focus,
.btn-dark:active.focus,
.btn-dark.active.focus,
.open > .dropdown-toggle.btn-dark.focus {
color: #fff;
background-color: #3B3B3B;
}
.btn-dark:active,
.btn-dark.active,
.open > .dropdown-toggle.btn-dark {
background-image: none;
}
.btn-dark.disabled,
.btn-dark[disabled],
fieldset[disabled] .btn-dark,
.btn-dark.disabled:hover,
.btn-dark[disabled]:hover,
fieldset[disabled] .btn-dark:hover,
.btn-dark.disabled:focus,
.btn-dark[disabled]:focus,
fieldset[disabled] .btn-dark:focus,
.btn-dark.disabled.focus,
.btn-dark[disabled].focus,
fieldset[disabled] .btn-dark.focus,
.btn-dark.disabled:active,
.btn-dark[disabled]:active,
fieldset[disabled] .btn-dark:active,
.btn-dark.disabled.active,
.btn-dark[disabled].active,
fieldset[disabled] .btn-dark.active {
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-dark .badge {
color: #e5e5e5;
background-color: #3B3B3B;
}
.btn-bright {
color: #fff;
background-color: #eb8600;
border-color: transparent;
}
.btn-bright:focus,
.btn-bright.focus {
color: #fff;
background-color: #eb8600;
}
.btn-bright:hover {
color: #fff;
background-color: #E69400;
border-color: #f9aa03;
}
.btn-bright:active,
.btn-bright.active,
.open > .dropdown-toggle.btn-bright {
color: #fff;
background-color: #eb8600;
}
.btn-bright:active:hover,
.btn-bright.active:hover,
.open > .dropdown-toggle.btn-bright:hover,
.btn-bright:active:focus,
.btn-bright.active:focus,
.open > .dropdown-toggle.btn-bright:focus,
.btn-bright:active.focus,
.btn-bright.active.focus,
.open > .dropdown-toggle.btn-bright.focus {
color: #fff;
background-color: #eb8600;
}
.btn-bright:active,
.btn-bright.active,
.open > .dropdown-toggle.btn-bright {
background-image: none;
}
.btn-bright.disabled,
.btn-bright[disabled],
fieldset[disabled] .btn-bright,
.btn-bright.disabled:hover,
.btn-bright[disabled]:hover,
fieldset[disabled] .btn-bright:hover,
.btn-bright.disabled:focus,
.btn-bright[disabled]:focus,
fieldset[disabled] .btn-bright:focus,
.btn-bright.disabled.focus,
.btn-bright[disabled].focus,
fieldset[disabled] .btn-bright.focus,
.btn-bright.disabled:active,
.btn-bright[disabled]:active,
fieldset[disabled] .btn-bright:active,
.btn-bright.disabled.active,
.btn-bright[disabled].active,
fieldset[disabled] .btn-bright.active {
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn-bright .badge {
color: #fff;
background-color: #eb8600;
}
.modal-header {
padding: 15px 20px;
background-color: #323232;
@ -247,14 +375,16 @@ input[type="color"],
-ms-user-select: none;
user-select: none;
background-image: none;
background-color: #444;
background-color: #3B3B3B;
color: #e5e5e5;
border: 1px solid transparent;
border-radius: 3px;
outline:0px !important;
-webkit-appearance:none;
}
.btn-form:hover {
color: #F9AA03;
color: #fff;
background-color: #333;
}
.btn-form:focus {
color: #fff;
@ -1147,53 +1277,6 @@ input[type="color"],
.table-card-back td {
font-size: 12px;
}
.squared {
padding: 4px 12px;
margin: 2px 2px 2px 0px;
font-size: 14px;
font-weight: normal;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
background-color: #444;
border: 1px solid transparent;
border-radius: 3px;
outline:0px !important;
-webkit-appearance:none;
}
.squared:hover {
color: #F9AA03;
}
.squared:active {
border: 1px solid #eb8600;
}
.squared-primary {
background-color: #eb8600;
color: #f2f2f2;
}
.squared-primary:hover {
color: #fff;
}
.squared-primary:active {
border: 1px solid #444;
color: #444;
}
.squared-caps {
color: #f2f2f2;
font-size: 12px;
padding: 2px 8px;
text-transform: uppercase;
font-weight: bold;
}
.header-bar {
float: left;
}

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

@ -96,7 +96,7 @@ DOCUMENTATION :: END
<div class="bar" style="width: ${a['progress_percent']}%">${a['progress_percent']}%</div>
</div>
</div>
<div class="dashboard-activity-metadata-platform" id="platform-${a['session_key']}">
<div class="dashboard-activity-metadata-platform" data-toggle="tooltip" data-placement="right" title data-title="${a['player']}" id="platform-${a['session_key']}">
</div>
<div class="dashboard-activity-metadata-user">
% if a['user_id']:
@ -207,6 +207,10 @@ DOCUMENTATION :: END
$('.dashboard-activity-poster-info-bar', this).slideUp('fast');
});
// Tooltips
$('.dashboard-activity-metadata-platform').each(function() {
$(this).tooltip();
});
</script>
% else:
<div class="text-muted">Nothing is currently being watched.</div><br>

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

@ -23,7 +23,7 @@ DOCUMENTATION :: END
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h4>Edit user <strong>${data['user']}</strong></h4>
<h4 class="modal-title">Edit user <strong>${data['user']}</strong></h4>
</div>
<div class="modal-body" id="modal-text">
<fieldset>
@ -46,7 +46,7 @@ DOCUMENTATION :: END
</div>
<div class="modal-footer">
<div>
<input type="button" id="save_user_name" class="squared squared-primary" value="Save">
<input type="button" id="save_user_name" class="btn btn-bright" value="Save">
<span id="edit-user-status-message"></span>
</div>
</div>

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

@ -13,7 +13,7 @@
<div class="header-bar">
<span><i class="fa fa-history"></i> History</span>
</div>
<div class="colvis-button-bar hidden-phone">
<div class="colvis-button-bar hidden-xs">
</div>
</div>
<div class='table-card-back'>
@ -58,7 +58,7 @@
}
}
history_table = $('#history_table').DataTable(history_table_options);
var colvis = new $.fn.dataTable.ColVis(history_table);
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
$(colvis.button()).appendTo('div.colvis-button-bar');
});

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

@ -254,7 +254,7 @@ DOCUMENTATION :: END
history_table = $('#history_table').DataTable(history_table_options);
history_table.column(4).visible(false);
var colvis = new $.fn.dataTable.ColVis(history_table);
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
$(colvis.button()).appendTo('div.colvis-button-bar');
});
</script>
@ -272,7 +272,7 @@ DOCUMENTATION :: END
}
}
history_table = $('#history_table').DataTable(history_table_options);
var colvis = new $.fn.dataTable.ColVis(history_table);
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
$(colvis.button()).appendTo('div.colvis-button-bar');
});
</script>

10
data/interfaces/default/js/dataTables.colVis.js
View file

@ -255,7 +255,7 @@ ColVis.prototype = {
this.dom.button = $( '<button />', {
'class': !this.s.dt.bJUI ?
"ColVis_Button ColVis_MasterButton" :
this.s.buttonClass :
"ColVis_Button ColVis_MasterButton ui-button ui-state-default"
} )
.append( '<span>'+this.s.buttonText+'</span>' )
@ -923,6 +923,14 @@ ColVis.defaults = {
*/
buttonText: 'Show / hide columns',
/**
* Class name used for the button
* @property buttonClass
* @type string
* @default ColVis_Button ColVis_MasterButton
*/
buttonClass: 'ColVis_Button ColVis_MasterButton',
/**
* List of columns (integers) which should be excluded from the list
* @property aiExclude

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

@ -21,7 +21,7 @@ from plexpy import helpers
<span><i class="fa fa-book"></i> Logs</span>
</div>
<div class="button-bar">
<button class="squared" id="clear-logs"><i class="fa fa-trash-o"></i> Clear log</button>
<button class="btn btn-dark" id="clear-logs"><i class="fa fa-trash-o"></i> Clear log</button>
</div>
</div>
<div class='table-card-back'>

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

@ -3,7 +3,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h4 id="notification-config-modal-header">Set Config</h4>
<h4 class="modal-title" id="notification-config-modal-header">Set Config</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
@ -35,7 +35,7 @@
</div>
</div>
<div class="modal-footer">
<input type="button" id="save-notification-item" class="squared squared-primary" value="Save">
<input type="button" id="save-notification-item" class="btn btn-bright" value="Save">
</div>
</div>
</div>

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

@ -2,7 +2,7 @@
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h4>Import PlexWatch Database</h4>
<h4 class="modal-title">Import PlexWatch Database</h4>
</div>
<div class="modal-body" id="modal-text">
<div class="form-group">
@ -39,7 +39,7 @@
<div class="modal-footer">
<div>
<span id="status-message"></span>
<input type="button" id="import_db" class="squared squared-primary" value="Import">
<input type="button" id="import_db" class="btn btn-bright" value="Import">
</div>
</div>
</div>

44
data/interfaces/default/settings.html
View file

@ -19,10 +19,10 @@ available_notification_agents = notifiers.available_notification_agents()
</div>
<div class="button-bar">
% if config['check_github']:
<button id="menu_link_update_check" class="squared"><i class="fa fa-arrow-circle-up"></i> Check for Updates</button>
<button id="menu_link_update_check" class="btn btn-dark"><i class="fa fa-arrow-circle-up"></i> Check for Updates</button>
% endif
<button id="menu_link_restart" class="squared"><i class="fa fa-refresh"></i> Restart</button>
<button id="menu_link_shutdown" class="squared"><i class="fa fa-power-off"></i> Shut Down</button>
<button id="menu_link_restart" class="btn btn-dark"><i class="fa fa-refresh"></i> Restart</button>
<button id="menu_link_shutdown" class="btn btn-dark"><i class="fa fa-power-off"></i> Shut Down</button>
</div>
</div>
</div>
@ -79,7 +79,7 @@ available_notification_agents = notifiers.available_notification_agents()
</div>
<p class="help-block">Set your preferred time format. <a href="javascript:void(0)" data-target="#dateTimeOptionsModal" data-toggle="modal">Click here</a> to see the parameter list.</p>
</div>
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-2">
<div class="padded-header">
@ -127,7 +127,7 @@ available_notification_agents = notifiers.available_notification_agents()
</div>
</div>
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-3">
@ -179,7 +179,7 @@ available_notification_agents = notifiers.available_notification_agents()
<p class="help-block">Current API key: <strong><br/>${config['api_key']}</strong></p>
</div>
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-4">
@ -219,7 +219,7 @@ available_notification_agents = notifiers.available_notification_agents()
</div>
<input type="hidden" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}">
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-5">
@ -230,10 +230,14 @@ available_notification_agents = notifiers.available_notification_agents()
<label for="pms_token">PMS Token</label>
<div class="row">
<div class="col-xs-6">
<input type="text" class="form-control" id="pms_token" name="pms_token" value="${config['pms_token']}" size="30" data-parsley-trigger="change" required>
<div class="input-group">
<input type="text" class="form-control" id="pms_token" name="pms_token" value="${config['pms_token']}" data-parsley-trigger="change" required>
<span class="input-group-btn">
<button class="btn btn-form" type="button" data-toggle="modal" data-target="#pms-auth-modal">Fetch Token</button>
</span>
</div>
</div>
</div>
<a href="#pms-auth-modal" data-toggle="modal">&nbspFetch Token</a>
<p class="help-block">Token for Plex.tv authentication.</p>
</div>
@ -256,7 +260,7 @@ available_notification_agents = notifiers.available_notification_agents()
<p class="help-block">Refresh the user list when PlexPy starts.</p>
</div>
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-6">
<div class="padded-header">
@ -290,7 +294,7 @@ available_notification_agents = notifiers.available_notification_agents()
</div>
<p class="help-block"><a href="javascript:void(0)" id="toggle-plexwatch-import-modal" data-target="#plexwatch-import-modal" data-toggle="modal">Click here to Import an existing Plexwatch database.</a></p>
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-7">
@ -345,7 +349,7 @@ available_notification_agents = notifiers.available_notification_agents()
</p>
</div>
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-8">
@ -443,7 +447,7 @@ available_notification_agents = notifiers.available_notification_agents()
</li>
</ul>
<input type="button" class="squared squared-primary save-button" value="Save" data-success="Changes saved successfully">
<input type="button" class="btn btn-bright save-button" value="Save" data-success="Changes saved successfully">
</div>
<div role="tabpanel" class="tab-pane" id="tabs-9">
@ -485,7 +489,7 @@ available_notification_agents = notifiers.available_notification_agents()
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
<i class="fa fa-remove"></i>
</button>
<h4>Date &amp; Time Format Options</h4>
<h4 class="modal-title">Date &amp; Time Format Options</h4>
</div>
<div class="modal-body">
<table>
@ -609,7 +613,7 @@ available_notification_agents = notifiers.available_notification_agents()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
class="fa fa-remove"></i></button>
<h4>Fetch Plex.tv Token</h4>
<h4 class="modal-title">Fetch Plex.tv Token</h4>
</div>
<div class="modal-body" id="modal-text">
<div>
@ -638,10 +642,10 @@ available_notification_agents = notifiers.available_notification_agents()
</div>
</div>
<div class="modal-footer">
<div class="">
<input type="button" id="get-pms-auth-token" class="squared squared-primary" value="Fetch Token">
<span id="pms-token-status"></span>
<div style="float: left;">
<strong><span id="pms-token-status"></span></strong>
</div>
<input type="button" id="get-pms-auth-token" class="btn btn-bright" value="Fetch Token">
</div>
</div>
</div>
@ -654,7 +658,7 @@ available_notification_agents = notifiers.available_notification_agents()
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i
class="fa fa-remove"></i></button>
<h4>Notification string substitutions</h4>
<h4 class="modal-title">Notification string substitutions</h4>
</div>
<div class="modal-body">
<div>
@ -752,7 +756,7 @@ available_notification_agents = notifiers.available_notification_agents()
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h4>Notification exclusion tags</h4>
<h4 class="modal-title">Notification exclusion tags</h4>
</div>
<div class="modal-body">
<div>

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

@ -12,7 +12,7 @@
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h4>${message}</h4>
<h4 class="modal-title">${message}</h4>
</div>
<div class="modal-body" id="modal-text">
<div align="center">

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

@ -58,7 +58,7 @@
}
sync_table = $('#sync_table').DataTable(sync_table_options);
var colvis = new $.fn.dataTable.ColVis( sync_table );
var colvis = new $.fn.dataTable.ColVis( sync_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' } );
$( colvis.button() ).appendTo('div.colvis-button-bar');
});
</script>

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

@ -131,7 +131,7 @@ from plexpy import helpers
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="fa fa-remove"></i></button>
<h4 id="myModalLabel">IP Address: <strong><span id="modal_header_ip_address"></span></strong></h4>
<h4 class="modal-title" id="myModalLabel">IP Address: <strong><span id="modal_header_ip_address"></span></strong></h4>
</div>
<div class="modal-body" id="modal-text">
<div class="col-md-6">
@ -305,7 +305,7 @@ from plexpy import helpers
history_table = $('#history_table').DataTable(history_table_options);
history_table.column(1).visible(false);
var colvis = new $.fn.dataTable.ColVis(history_table);
var colvis = new $.fn.dataTable.ColVis(history_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' });
$(colvis.button()).appendTo('#button-bar-history');
});
@ -336,7 +336,7 @@ from plexpy import helpers
sync_table = $('#sync_table').DataTable(sync_table_options);
history_table.column(1).visible(false);
var colvis_sync = new $.fn.dataTable.ColVis( sync_table );
var colvis_sync = new $.fn.dataTable.ColVis( sync_table, { buttonText: 'Select columns', buttonClass: 'btn btn-dark' } );
$( colvis_sync.button() ).appendTo('#button-bar-sync');
});

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

@ -12,7 +12,7 @@
<span><i class="fa fa-group"></i> Active Users</span>
</div>
<div class="button-bar">
<button class="squared" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button>
<button class="btn btn-dark" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button>
</div>
</div>
<div class='table-card-back'>

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

@ -75,7 +75,7 @@ from plexpy import version
</div>
<input type="hidden" class="form-control pms-settings" id="pms_valid" data-validate="validatePMSip" value="">
<input type="hidden" class="form-control pms-settings" id="pms_identifier" name="pms_identifier" value="${config['pms_identifier']}">
<a class="squared" id="verify-plex-server" href="#" role="button">Verify</a><span style="margin-left: 10px; display: none;" id="pms-verify-status"></span>
<a class="btn btn-dark" id="verify-plex-server" href="#" role="button">Verify</a><span style="margin-left: 10px; display: none;" id="pms-verify-status"></span>
</div>
<div class="wizard-card" data-cardname="card3">
@ -98,7 +98,7 @@ from plexpy import version
</div>
</div>
<input type="hidden" class="form-control pms-auth" name="pms_token" id="pms_token" value="${config['pms_token']}" data-validate="validatePMStoken">
<a class="squared" id="pms-authenticate" href="#" role="button">Authenticate</a><span style="margin-left: 10px; display: none;" id="pms-token-status"></span>
<a class="btn btn-dark" id="pms-authenticate" href="#" role="button">Authenticate</a><span style="margin-left: 10px; display: none;" id="pms-token-status"></span>
</div>
<div class="wizard-card" data-cardname="card4">
<h3>Monitoring</h3>