Flatten datatable headers and restyled Manage Users screen

This commit is contained in:
Albert Santoni 2015-08-12 10:53:14 -04:00
parent c9f9bed2d6
commit f63ce23c9f
6 changed files with 69 additions and 49 deletions

View File

@ -5,7 +5,7 @@
<div id="users_wrapper" class="dataTables_wrapper"> <div id="users_wrapper" class="dataTables_wrapper">
<div class="button-holder"> <div class="button-holder">
<button type="button" id="add_user_button" name="search_add_group" class="ui-button ui-widget ui-state-default ui-button-text-icon-primary"> <button type="button" id="add_user_button" name="search_add_group" class="ui-button ui-widget ui-button-text-icon-primary btn">
<span class="ui-icon ui-icon-plusthick"></span> <span class="ui-icon ui-icon-plusthick"></span>
<span class="ui-button-text"><?php echo _("New User")?></span> <span class="ui-button-text"><?php echo _("New User")?></span>
</button> </button>

View File

@ -665,22 +665,6 @@ th.library_checkbox {
text-align: center !important; text-align: center !important;
} }
.datatable tr td { /*, .datatable tr th {*/
line-height: 28px;
font-size: 14px;
padding: 5px;
}
.datatable tr[class*='selected'] td,
.datatable tr.sb-now-playing td {
color: #000;
}
.datatable tr, .datatable td,
.dataTable tr, .dataTable td
{
border: none;
}
/* This is so dragged items show up above the layout */ /* This is so dragged items show up above the layout */

View File

@ -58,11 +58,6 @@
word-wrap: break-word; word-wrap: break-word;
} }
#library_display th,
#library_display td,
.paginationControl {
font-size: 13px;
}
#library_content .ui-tabs-panel { #library_content .ui-tabs-panel {
padding-top:16px; padding-top:16px;

View File

@ -136,10 +136,8 @@
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default { .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
border: 1px solid #5b5b5b; border:0px solid #5b5b5b;
background-color: #6e6e6e; background-color: #6e6e6e;
background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e));
color: #ffffff; color: #ffffff;
} }
.ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited { .ui-state-default a, .ui-state-default a:link, .ui-state-default a:visited {

View File

@ -841,10 +841,6 @@ dl.inline-list dd {
} }
/*----Data Table----*/ /*----Data Table----*/
.datatable tr th.ui-state-default {
border: 1px solid #CCC;
border-width: 0 0 0 1px !important;
}
.datatable { .datatable {
border-color: #5b5b5b; border-color: #5b5b5b;
border-style: solid; border-style: solid;
@ -854,12 +850,18 @@ dl.inline-list dd {
.datatable th { .datatable th {
text-align: left; text-align: left;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
font-size: 14px;
line-height: 28px;
border: 0px;
background: #575757;
} }
.datatable tr td, .datatable tr th { .datatable tr td, .datatable tr th {
font-size: 13px;
padding: 5px 5px; padding: 5px 5px;
color: #CCC; line-height: 28px;
font-size: 14px;
color: #ccc;
} }
.datatable tr, .datatable td, .datatable tr, .datatable td,
@ -869,6 +871,7 @@ dl.inline-list dd {
border-spacing: 0; border-spacing: 0;
} }
.odd { .odd {
background-color: #282828; background-color: #282828;
} }
@ -879,6 +882,20 @@ dl.inline-list dd {
.datatable tr .selected td { .datatable tr .selected td {
background-color: #abcfe2; background-color: #abcfe2;
} }
.selected.even {
background-color: rgba(240, 109, 53, 1);
}
.selected.odd {
background-color: rgba(255, 136, 56, 1);
}
.datatable tr[class*='selected'] td,
.datatable tr.sb-now-playing td {
color: #000;
}
/* /*
.datatable tr.odd.selected td { .datatable tr.odd.selected td {
background-color: #c5deeb; background-color: #c5deeb;
@ -913,8 +930,8 @@ dl.inline-list dd {
.DataTables_sort_wrapper .ui-icon { .DataTables_sort_wrapper .ui-icon {
display: block; display: block;
float: left; float: right;
margin: 0 3px 0 -2px; margin: 5px 5px 5px 5px;
} }
.dataTables_type { .dataTables_type {
float:right; float:right;
@ -1011,11 +1028,7 @@ table.dataTable span.DataTables_sort_icon {
} }
table.dataTable th.ui-state-default { table.dataTable th.ui-state-default {
background: -moz-linear-gradient(top, #b2b2b2 0, #a2a2a2 100%); color: #eee;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #b2b2b2), color-stop(100%, #a2a2a2));
background: linear-gradient(top, #b2b2b2 0, #a2a2a2 100%);
border: 1px solid #8F8F8F;
color: #363636;
} }
.ColVis.TableTools .ui-button { .ColVis.TableTools .ui-button {
@ -1643,10 +1656,10 @@ h2#scheduled_playlist_name span {
} }
.simple-formblock dt { .simple-formblock dt {
clear: left; clear: left;
color: #666666; color: #CDCDCD;
float: left; float: left;
font-size: 1.2em; font-size: 1.2em;
font-weight: bold; font-weight: normal;
margin: 0; margin: 0;
min-width: 90px; min-width: 90px;
padding: 4px 0; padding: 4px 0;
@ -1746,25 +1759,44 @@ button, input {
margin-bottom:0; margin-bottom:0;
} }
#user_details
{
visibility: hidden;
}
.user-management { .user-management {
width:910px; width:910px;
/*width:380px;*/ height: 410px;
} }
.user-management-expanded { .user-management-expanded {
width:910px; width:910px;
} }
.user-data { .user-data {
float:left; float:right;
width:420px; width:420px;
margin-left:10px; margin-left:10px;
/*display:none;*/
} }
.user-list-wrapper { .user-list-wrapper {
float:left; float:left;
width:480px; width:480px;
position: absolute;
height: 373px;
/*margin-right:10px;*/ /*margin-right:10px;*/
} }
#users_datatable {
border: 0px;
}
#users_datatable_wrapper > div.fg-toolbar.ui-toolbar.ui-widget-header.ui-corner-bl.ui-corner-br.ui-helper-clearfix
{
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
.user-management div.user-list-wrapper .ui-widget-header:first-child { .user-management div.user-list-wrapper .ui-widget-header:first-child {
background: none repeat scroll 0 0 transparent; background: none repeat scroll 0 0 transparent;
border-width: 0 0 1px; border-width: 0 0 1px;
@ -1795,7 +1827,6 @@ button, input {
.user-list-wrapper .button-holder { .user-list-wrapper .button-holder {
padding:0; padding:0;
text-align:right;
height:37px; height:37px;
} }
.user-list-wrapper .button-holder .ui-button { .user-list-wrapper .button-holder .ui-button {
@ -2797,8 +2828,6 @@ thead tr th {
padding: 5px 5px; padding: 5px 5px;
border-color:#CCCCCC; border-color:#CCCCCC;
background-color: #6e6e6e; background-color: #6e6e6e;
background: -moz-linear-gradient(top, #868686 0, #6e6e6e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #868686), color-stop(100%, #6e6e6e));
border-style: solid; border-style: solid;
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
} }

View File

@ -39,7 +39,8 @@ function populateForm(entries){
function rowClickCallback(row_id){ function rowClickCallback(row_id){
$.ajax({ url: baseUrl+'User/get-user-data/id/'+ row_id +'/format/json', dataType:"json", success:function(data){ $.ajax({ url: baseUrl+'User/get-user-data/id/'+ row_id +'/format/json', dataType:"json", success:function(data){
populateForm(data.entries); populateForm(data.entries);
}}); $("#user_details").css("visibility", "visible");
}});
} }
function removeUserCallback(row_id, nRow){ function removeUserCallback(row_id, nRow){
@ -193,12 +194,25 @@ $(document).ready(function() {
return $('#user-type-'+$(this).val()).attr('user-rights'); return $('#user-type-'+$(this).val()).attr('user-rights');
} }
}); });
var table = $("#users_datable");//.DataTable();
$('.datatable tbody').on( 'click', 'tr', function () {
$(this).parent().find('tr.selected').removeClass('selected');
$(this).addClass('selected');
} );
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
$('#type').tipsy('show'); $('#type').tipsy('show');
var newUser = {login:"", first_name:"", last_name:"", type:"G", id:""}; var newUser = {login:"", first_name:"", last_name:"", type:"G", id:""};
$('#add_user_button').live('click', function(){populateForm(newUser);}); $('#add_user_button').live('click', function(){
populateForm(newUser);
$("#user_details").css("visibility", "visible");
});
$('#save_user').live('click', function(){ $('#save_user').live('click', function(){
var data = $('#user_form').serialize(); var data = $('#user_form').serialize();