Add side scrolling datatables

This commit is contained in:
JonnyWong16 2016-05-14 10:46:26 -07:00
parent b47f542df7
commit 9e1c4b1a88
19 changed files with 137 additions and 93 deletions

View file

@ -1610,12 +1610,10 @@ a:hover .item-children-poster {
left: 12px;
}
.user-info-wrapper {
height: 113px;
}
.user-info-poster-face {
float: left;
margin-top: 15px;
margin-right: 15px;
margin: 15px 15px 15px 0;
background-size: cover;
background-position: center;
height: 80px;
@ -1630,13 +1628,11 @@ a:hover .item-children-poster {
.user-info-username {
font-size: 24px;
color: #fff;
position: relative;
top: 27px;
padding-top: 27px;
padding-left: 110px;
}
.user-info-nav {
position: relative;
top: 15px;
left: -5px;
margin-top: 15px;
}
.user-info-nav > .active > a {
color: #cc7b19;
@ -1651,6 +1647,7 @@ a:hover .item-children-poster {
}
.user-info-nav ul {
list-style: none;
padding: 0;
}
.user-info-nav li {
float: left;
@ -1780,8 +1777,7 @@ a:hover .item-children-poster {
}
.library-info-poster-face {
float: left;
margin-top: 15px;
margin-right: 15px;
margin: 15px 15px 15px 0;
background-size: cover;
background-position: center;
height: 80px;
@ -2930,3 +2926,7 @@ a.no-highlight:hover {
font-weight: 400;
cursor: pointer;
}
.datatable-wrap {
min-width: 150px;
max-width: 250px;
}

View file

@ -45,10 +45,10 @@
<input type="radio" name="media_type-filter" id="history-music" value="track" autocomplete="off"> Music
</label>
</div>
<div class="btn-group colvis-button-bar hidden-xs"></div>
<div class="btn-group colvis-button-bar"></div>
</div>
</div>
<div class='table-card-back'>
<div class="table-card-back">
<table class="display history_table" id="history_table" width="100%">
<thead>
<tr>

View file

@ -369,7 +369,7 @@ DOCUMENTATION :: END
</div>
% endif
% endif
<div class="btn-group colvis-button-bar hidden-xs"></div>
<div class="btn-group colvis-button-bar"></div>
</div>
</div>
<div class="table-card-back">

View file

@ -29,6 +29,7 @@ history_table_options = {
"pageLength": 25,
"order": [ 1, 'desc'],
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -75,7 +76,7 @@ history_table_options = {
}
},
"width": "9%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [3],
@ -97,7 +98,7 @@ history_table_options = {
}
},
"width": "8%",
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control-ip"
"className": "no-wrap modal-control-ip"
},
{
"targets": [4],
@ -108,7 +109,7 @@ history_table_options = {
}
},
"width": "10%",
"className": "no-wrap hidden-md hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [5],
@ -127,7 +128,7 @@ history_table_options = {
}
},
"width": "12%",
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control"
"className": "no-wrap modal-control"
},
{
"targets": [6],
@ -157,7 +158,8 @@ history_table_options = {
}
}
},
"width": "33%"
"width": "33%",
"className": "datatable-wrap"
},
{
"targets": [7],
@ -171,7 +173,7 @@ history_table_options = {
},
"searchable": false,
"width": "5%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [8],
@ -185,7 +187,7 @@ history_table_options = {
},
"searchable": false,
"width": "5%",
"className": "no-wrap hidden-md hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [9],
@ -199,7 +201,7 @@ history_table_options = {
},
"searchable": false,
"width": "5%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [10],
@ -213,7 +215,7 @@ history_table_options = {
},
"searchable": false,
"width": "5%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [11],
@ -229,7 +231,7 @@ history_table_options = {
},
"searchable": false,
"orderable": false,
"className": "no-wrap hidden-md hidden-sm hidden-xs",
"className": "no-wrap",
"width": "2%"
},
],

View file

@ -27,6 +27,7 @@ history_table_modal_options = {
"pageLength": 10,
"lengthChange": false,
"autoWidth": false,
"scrollX": true,
"order": [0, 'desc'],
"columnDefs": [
{
@ -72,7 +73,7 @@ history_table_modal_options = {
}
},
"width": "15%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [3],
@ -91,7 +92,7 @@ history_table_modal_options = {
}
},
"width": "25%",
"className": "no-wrap hidden-sm hidden-xs modal-control"
"className": "no-wrap modal-control"
},
{
"targets": [4],
@ -121,7 +122,8 @@ history_table_modal_options = {
}
}
},
"width": "40%"
"width": "40%",
"className": "datatable-wrap"
}
],
"drawCallback": function (settings) {

View file

@ -16,9 +16,10 @@ libraries_list_table_options = {
"serverSide": true,
"pageLength": 10,
"order": [ 2, 'asc'],
"autoWidth": true,
"stateSave": true,
"pagingType": "full_numbers",
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -80,7 +81,7 @@ libraries_list_table_options = {
}
},
"width": "10%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [4],
@ -92,7 +93,7 @@ libraries_list_table_options = {
},
"width": "10%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [5],
@ -104,7 +105,7 @@ libraries_list_table_options = {
},
"width": "10%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [6],
@ -116,7 +117,7 @@ libraries_list_table_options = {
},
"width": "10%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [7],
@ -130,7 +131,7 @@ libraries_list_table_options = {
},
"searchable": false,
"width": "10%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [8],
@ -182,7 +183,7 @@ libraries_list_table_options = {
}
},
"width": "18%",
"className": "hidden-sm hidden-xs"
"className": "datatable-wrap"
},
{
"targets": [9],
@ -193,7 +194,8 @@ libraries_list_table_options = {
}
},
"searchable": false,
"width": "7%"
"width": "7%",
"className": "no-wrap"
},
{
"targets": [10],
@ -204,7 +206,8 @@ libraries_list_table_options = {
}
},
"searchable": false,
"width": "10%"
"width": "10%",
"className": "no-wrap"
}
],

View file

@ -16,6 +16,7 @@ login_table_options = {
"pageLength": 10,
"order": [0, 'desc'],
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -45,7 +46,7 @@ login_table_options = {
},
"searchable": false,
"width": "10%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [2],

View file

@ -15,16 +15,18 @@ var log_table_options = {
"infoFiltered": "(filtered from _MAX_ total lines)",
"loadingRecords": '<i class="fa fa-refresh fa-spin"></i> Loading items...</div>'
},
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
"width": "15%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [1],
"width": "10%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [2],

View file

@ -30,6 +30,7 @@ media_info_table_options = {
"pageLength": 25,
"order": [ 1, 'asc'],
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -107,7 +108,8 @@ media_info_table_options = {
}
}
},
"width": "20%"
"width": "20%",
"className": "no-wrap",
},
{
"targets": [2],
@ -118,7 +120,7 @@ media_info_table_options = {
}
},
"width": "6%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [3],
@ -129,7 +131,7 @@ media_info_table_options = {
}
},
"width": "6%",
"className": "no-wrap hidden-md hidden-sm hidden-xs",
"className": "no-wrap",
"searchable": false
},
{
@ -141,7 +143,7 @@ media_info_table_options = {
}
},
"width": "8%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [5],
@ -152,7 +154,7 @@ media_info_table_options = {
}
},
"width": "8%",
"className": "no-wrap hidden-md hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [6],
@ -163,7 +165,7 @@ media_info_table_options = {
}
},
"width": "8%",
"className": "no-wrap hidden-md hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [7],
@ -174,7 +176,7 @@ media_info_table_options = {
}
},
"width": "8%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [8],
@ -185,7 +187,7 @@ media_info_table_options = {
}
},
"width": "8%",
"className": "no-wrap hidden-md hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [9],
@ -200,7 +202,7 @@ media_info_table_options = {
}
},
"width": "7%",
"className": "no-wrap hidden-md hidden-sm hidden-xs",
"className": "no-wrap",
"searchable": false
},
{
@ -213,7 +215,7 @@ media_info_table_options = {
}
},
"width": "7%",
"className": "no-wrap hidden-xs",
"className": "no-wrap",
"searchable": false
},
{
@ -225,7 +227,7 @@ media_info_table_options = {
}
},
"width": "5%",
"className": "no-wrap hidden-xs",
"className": "no-wrap",
"searchable": false
}
],

View file

@ -15,6 +15,8 @@ notification_log_table_options = {
"infoFiltered": "(filtered from _MAX_ total lines)",
"loadingRecords": '<i class="fa fa-refresh fa-spin"></i> Loading items...</div>'
},
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -25,7 +27,7 @@ notification_log_table_options = {
}
},
"width": "10%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [1],
@ -36,7 +38,7 @@ notification_log_table_options = {
}
},
"width": "7%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [2],
@ -46,7 +48,8 @@ notification_log_table_options = {
$(td).html(cellData);
}
},
"width": "5%"
"width": "5%",
"className": "no-wrap"
},
{
"targets": [3],

View file

@ -1,7 +1,7 @@
var plex_log_table_options = {
"destroy": true,
"serverSide": true,
"processing": false,
"serverSide": false,
"pagingType": "full_numbers",
"order": [ 0, 'desc'],
"pageLength": 50,
@ -15,20 +15,31 @@ var plex_log_table_options = {
"infoFiltered": "(filtered from _MAX_ total lines)",
"loadingRecords": '<i class="fa fa-refresh fa-spin"></i> Loading items...</div>'
},
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
"width": "15%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [1],
"width": "10%",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [2],
"width": "75%"
}
]
],
"drawCallback": function (settings) {
// Jump to top of page
//$('html,body').scrollTop(0);
$('#ajaxMsg').fadeOut();
},
"preDrawCallback": function(settings) {
var msg = "<i class='fa fa-refresh fa-spin'></i>&nbspFetching rows...";
showMsg(msg, false, false, 0)
}
}

View file

@ -14,6 +14,8 @@ sync_table_options = {
"infoFiltered": "(filtered from _MAX_ total lines)",
"loadingRecords": '<i class="fa fa-refresh fa-spin"></i> Loading items...</div>'
},
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -26,7 +28,7 @@ sync_table_options = {
$(td).html(cellData.toProperCase());
}
},
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [1],
@ -55,7 +57,8 @@ sync_table_options = {
$(td).html(cellData);
}
}
}
},
"className": "datatable-wrap"
},
{
"targets": [3],
@ -63,17 +66,17 @@ sync_table_options = {
"render": function ( data, type, full ) {
return data.toProperCase();
},
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [4],
"data": "platform",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [5],
"data": "device_name",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [6],
@ -86,22 +89,22 @@ sync_table_options = {
$(td).html('0MB');
}
},
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [7],
"data": "item_count",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [8],
"data": "item_complete_count",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [9],
"data": "item_downloaded_count",
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [10],
@ -113,7 +116,7 @@ sync_table_options = {
$(td).html('<span class="badge">0%</span>');
}
},
"className": "no-wrap hidden-sm hidden-xs"
"className": "no-wrap"
}
],
"drawCallback": function (settings) {

View file

@ -16,6 +16,7 @@ user_ip_table_options = {
"pageLength": 10,
"order": [ 0, 'desc'],
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -25,7 +26,7 @@ user_ip_table_options = {
},
"searchable": false,
"width": "15%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [1],
@ -58,7 +59,7 @@ user_ip_table_options = {
}
},
"width": "15%",
"className": "no-wrap hidden-md hidden-sm hidden-xs"
"className": "no-wrap"
},
{
"targets": [3],
@ -79,7 +80,7 @@ user_ip_table_options = {
}
},
"width": "15%",
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control"
"className": "no-wrap modal-control"
},
{
"targets": [4],
@ -112,13 +113,14 @@ user_ip_table_options = {
}
},
"width": "30%",
"className": "hidden-sm hidden-xs"
"className": "datatable-wrap"
},
{
"targets": [5],
"data":"play_count",
"searchable": false,
"width": "10%"
"width": "10%",
"className": "no-wrap"
}
],
"drawCallback": function (settings) {

View file

@ -33,9 +33,10 @@ users_list_table_options = {
"serverSide": true,
"pageLength": 10,
"order": [ 2, 'asc'],
"autoWidth": true,
"stateSave": true,
"pagingType": "full_numbers",
"autoWidth": false,
"scrollX": true,
"columnDefs": [
{
"targets": [0],
@ -97,7 +98,7 @@ users_list_table_options = {
},
"searchable": false,
"width": "10%",
"className": "no-wrap hidden-xs"
"className": "no-wrap"
},
{
"targets": [4],
@ -118,7 +119,7 @@ users_list_table_options = {
}
},
"width": "10%",
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control-ip"
"className": "no-wrap modal-control-ip"
},
{
"targets": [5],
@ -131,7 +132,7 @@ users_list_table_options = {
}
},
"width": "10%",
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control"
"className": "no-wrap modal-control"
},
{
"targets": [6],
@ -152,7 +153,7 @@ users_list_table_options = {
}
},
"width": "15%",
"className": "no-wrap hidden-md hidden-sm hidden-xs modal-control"
"className": "no-wrap modal-control"
},
{
"targets": [7],
@ -185,7 +186,7 @@ users_list_table_options = {
}
},
"width": "23%",
"className": "hidden-sm hidden-xs"
"className": "datatable-wrap"
},
{
"targets": [8],
@ -196,7 +197,8 @@ users_list_table_options = {
}
},
"searchable": false,
"width": "7%"
"width": "7%",
"className": "no-wrap"
},
{
"targets": [9],
@ -207,7 +209,8 @@ users_list_table_options = {
}
},
"searchable": false,
"width": "10%"
"width": "10%",
"className": "no-wrap"
}
],

View file

@ -41,7 +41,7 @@
</div>
% endif
% endif
<div class="btn-group colvis-button-bar hidden-xs"></div>
<div class="btn-group colvis-button-bar"></div>
</div>
</div>
<div class='table-card-back'>

View file

@ -190,7 +190,7 @@ DOCUMENTATION :: END
</button>&nbsp;
</div>
% endif
<div class="btn-group colvis-button-bar hidden-xs" id="button-bar-history"></div>
<div class="btn-group colvis-button-bar" id="button-bar-history"></div>
</div>
</div>
<div class="table-card-back">
@ -253,7 +253,7 @@ DOCUMENTATION :: END
% endif
</div>
% endif
<div class="btn-group colvis-button-bar hidden-xs" id="button-bar-media-info"></div>
<div class="btn-group colvis-button-bar" id="button-bar-media-info"></div>
</div>
</div>
<div class="table-card-back">
@ -602,6 +602,11 @@ DOCUMENTATION :: END
$("#recently-added-page-right").removeClass("disabled");
}
});
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$(".dataTables_scrollHeadInner").css("width","100%");
$("table.display").css("width","100%");
});
});
</script>
% endif

View file

@ -19,7 +19,7 @@
<span><i class="fa fa-cloud-download"></i> Synced Items</span>
</div>
<div class="button-bar">
<div class="btn-group colvis-button-bar hidden-xs"></div>
<div class="btn-group colvis-button-bar"></div>
</div>
</div>
<div class='table-card-back'>

View file

@ -61,7 +61,7 @@ DOCUMENTATION :: END
% endif
</div>
<div class="user-info-nav">
<ul class="user-info-nav">
<ul class="">
<li class="active"><a href="#profile" data-toggle="tab">Profile</a></li>
<li><a id="ip-tab-btn" href="#userAddresses" data-toggle="tab">IP Addresses</a></li>
<li><a id="history-tab-btn" href="#userHistory" data-toggle="tab">History</a></li>
@ -203,7 +203,7 @@ DOCUMENTATION :: END
<input type="radio" name="media_type-filter" id="history-music" value="track" autocomplete="off"> Music
</label>
</div>
<div class="btn-group colvis-button-bar hidden-xs" id="button-bar-history"></div>
<div class="btn-group colvis-button-bar" id="button-bar-history"></div>
</div>
</div>
<div class="table-card-back">
@ -244,7 +244,7 @@ DOCUMENTATION :: END
</span>
</div>
<div class="button-bar">
<div class="btn-group colvis-button-bar hidden-xs" id="button-bar-sync"></div>
<div class="btn-group colvis-button-bar" id="button-bar-sync"></div>
</div>
</div>
<div class="table-card-back">
@ -284,7 +284,7 @@ DOCUMENTATION :: END
</span>
</div>
<div class="button-bar">
<div class="btn-group colvis-button-bar hidden-xs" id="button-bar-login"></div>
<div class="btn-group colvis-button-bar" id="button-bar-login"></div>
</div>
</div>
<div class="table-card-back">
@ -595,6 +595,11 @@ DOCUMENTATION :: END
$("#recently-watched-page-right").removeClass("disabled");
}
});
$('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
$(".dataTables_scrollHeadInner").css("width","100%");
$("table.display").css("width","100%");
});
});
</script>
% endif

View file

@ -24,7 +24,7 @@
<button class="btn btn-dark refresh-users-button" id="refresh-users-list"><i class="fa fa-refresh"></i> Refresh users</button>
</div>
% endif
<div class="btn-group colvis-button-bar hidden-xs"></div>
<div class="btn-group colvis-button-bar"></div>
</div>
</div>
<div class='table-card-back'>