Refactored CSS with common backend rules for services page.

This commit is contained in:
Alex Tselegidis 2016-07-15 21:09:38 +02:00
parent 362aaf0498
commit fe215e8be6
5 changed files with 39 additions and 89 deletions

View file

@ -27,7 +27,7 @@
}); });
</script> </script>
<div id="services-page" class="container-fluid"> <div id="services-page" class="container-fluid backend-page">
<ul class="nav nav-tabs"> <ul class="nav nav-tabs">
<li role="presentation" class="services-tab tab active"><a><?php echo $this->lang->line('services'); ?></a></li> <li role="presentation" class="services-tab tab active"><a><?php echo $this->lang->line('services'); ?></a></li>
<li role="presentation" class="categories-tab tab"><a><?php echo $this->lang->line('categories'); ?></a></li> <li role="presentation" class="categories-tab tab"><a><?php echo $this->lang->line('categories'); ?></a></li>
@ -60,7 +60,7 @@
<div class="results"></div> <div class="results"></div>
</div> </div>
<div class="details column col-xs-12 col-sm-7"> <div class="record-details column col-xs-12 col-sm-7">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="add-edit-delete-group btn-group"> <div class="add-edit-delete-group btn-group">
<button id="add-service" class="btn btn-primary"> <button id="add-service" class="btn btn-primary">
@ -157,7 +157,7 @@
<div class="results"></div> <div class="results"></div>
</div> </div>
<div class="details col-xs-12 col-sm-7"> <div class="record-details col-xs-12 col-sm-7">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="add-edit-delete-group btn-group"> <div class="add-edit-delete-group btn-group">
<button id="add-category" class="btn btn-primary"> <button id="add-category" class="btn btn-primary">

View file

@ -249,6 +249,13 @@ body .jspTrack {
cursor: default; cursor: default;
} }
.record-details input:read-only,
.record-details select:disabled,
.record-details textarea:read-only {
opacity: 0.85;
box-shadow: none;
}
/* BACKEND CALENDAR PAGE /* BACKEND CALENDAR PAGE
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
@ -455,43 +462,14 @@ body .form-horizontal .controls {
cursor: pointer; cursor: pointer;
} }
#services-page .filter-records { #services-page .record-details .ui-spinner {
max-width: 350px;
margin-bottom: 20px;
}
#services-page .filter-records .results {
overflow-y: auto;
max-height: 650px;
outline: none;
}
#services-page .service-row {
padding: 10px 7px;
}
#services-page .service-row:hover:not(.selected-row) {
cursor: pointer;
background-color: #F3F3F3;
}
#services-page .selected-row {
background-color: #F4F4F4;
border-right: 5px solid #35B66F;
}
#services-page .filter-records .results hr {
margin: 5px 0;
}
#services-page .details .ui-spinner {
border: none; border: none;
margin-bottom: 10px; margin-bottom: 10px;
display: block; display: block;
color: #666; color: #666;
} }
#services-page .details .ui-state-disabled { #services-page .record-details .ui-state-disabled {
opacity: 1; opacity: 1;
} }
@ -499,38 +477,10 @@ body .form-horizontal .controls {
margin: 0px; margin: 0px;
} }
#services-page .details .ui-spinner a { #services-page .record-details .ui-spinner a {
cursor: pointer; cursor: pointer;
} }
#services-page .details input,
#services-page .details select,
#services-page .details textarea {
background-color: white;
cursor: pointer;
}
#services-page #categories .category-row {
padding: 10px 7px;
}
#services-page #categories .category-row:hover:not(.selected-row) {
background-color: #F3F3F3;
cursor: pointer;
}
.details input:read-only,
.details select:disabled,
.details textarea:read-only {
opacity: 0.85;
box-shadow: none;
}
#services-page .details {
max-width: 450px;
margin-bottom: 20px;
}
/* BACKEND USERS PAGE /* BACKEND USERS PAGE
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
#users-page h2 { #users-page h2 {

View file

@ -45,7 +45,7 @@
*/ */
$('#filter-categories form').submit(function() { $('#filter-categories form').submit(function() {
var key = $('#filter-categories .key').val(); var key = $('#filter-categories .key').val();
$('.selected-row').removeClass('selected-row'); $('.selected').removeClass('selected');
instance.resetForm(); instance.resetForm();
instance.filter(key); instance.filter(key);
return false; return false;
@ -72,8 +72,8 @@
}); });
instance.display(category); instance.display(category);
$('#filter-categories .selected-row').removeClass('selected-row'); $('#filter-categories .selected').removeClass('selected');
$(this).addClass('selected-row'); $(this).addClass('selected');
$('#edit-category, #delete-category').prop('disabled', false); $('#edit-category, #delete-category').prop('disabled', false);
}); });
@ -84,7 +84,7 @@
instance.resetForm(); instance.resetForm();
$('#categories .add-edit-delete-group').hide(); $('#categories .add-edit-delete-group').hide();
$('#categories .save-cancel-group').show(); $('#categories .save-cancel-group').show();
$('#categories .details').find('input, textarea').prop('readonly', false); $('#categories .record-details').find('input, textarea').prop('readonly', false);
$('#filter-categories button').prop('disabled', true); $('#filter-categories button').prop('disabled', true);
$('#filter-categories .results').css('color', '#AAA'); $('#filter-categories .results').css('color', '#AAA');
}); });
@ -95,7 +95,7 @@
$('#edit-category').click(function() { $('#edit-category').click(function() {
$('#categories .add-edit-delete-group').hide(); $('#categories .add-edit-delete-group').hide();
$('#categories .save-cancel-group').show(); $('#categories .save-cancel-group').show();
$('#categories .details').find('input, textarea').prop('readonly', false); $('#categories .record-details').find('input, textarea').prop('readonly', false);
$('#filter-categories button').prop('disabled', true); $('#filter-categories button').prop('disabled', true);
$('#filter-categories .results').css('color', '#AAA'); $('#filter-categories .results').css('color', '#AAA');
@ -259,7 +259,7 @@
* @param {Object} category Contains the category data. * @param {Object} category Contains the category data.
*/ */
CategoriesHelper.prototype.validate = function(category) { CategoriesHelper.prototype.validate = function(category) {
$('#categories .details').find('input, textarea').css('border', ''); $('#categories .record-details').find('input, textarea').css('border', '');
try { try {
var missingRequired = false; var missingRequired = false;
@ -287,11 +287,11 @@
CategoriesHelper.prototype.resetForm = function() { CategoriesHelper.prototype.resetForm = function() {
$('#categories .add-edit-delete-group').show(); $('#categories .add-edit-delete-group').show();
$('#categories .save-cancel-group').hide(); $('#categories .save-cancel-group').hide();
$('#categories .details').find('input, textarea').val(''); $('#categories .record-details').find('input, textarea').val('');
$('#categories .details').find('input, textarea').prop('readonly', true); $('#categories .record-details').find('input, textarea').prop('readonly', true);
$('#edit-category, #delete-category').prop('disabled', true); $('#edit-category, #delete-category').prop('disabled', true);
$('#filter-categories .selected-row').removeClass('selected-row'); $('#filter-categories .selected').removeClass('selected');
$('#filter-categories .results').css('color', ''); $('#filter-categories .results').css('color', '');
$('#filter-categories button').prop('disabled', false); $('#filter-categories button').prop('disabled', false);
}; };
@ -305,7 +305,7 @@
*/ */
CategoriesHelper.prototype.getFilterHtml = function(category) { CategoriesHelper.prototype.getFilterHtml = function(category) {
var html = var html =
'<div class="category-row" data-id="' + category.id + '">' + '<div class="category-row entry" data-id="' + category.id + '">' +
'<strong>' + category.name + '</strong>' + '<strong>' + category.name + '</strong>' +
'</div><hr>'; '</div><hr>';
@ -324,11 +324,11 @@
CategoriesHelper.prototype.select = function(id, display) { CategoriesHelper.prototype.select = function(id, display) {
display = display || false; display = display || false;
$('#filter-categories .selected-row').removeClass('selected-row'); $('#filter-categories .selected').removeClass('selected');
$('#filter-categories .category-row').each(function() { $('#filter-categories .category-row').each(function() {
if ($(this).attr('data-id') === id) { if ($(this).attr('data-id') === id) {
$(this).addClass('selected-row'); $(this).addClass('selected');
return false; return false;
} }
}); });

View file

@ -53,7 +53,7 @@ window.BackendServices = window.BackendServices || {};
}); });
// Instantiate helper object (service helper by default). // Instantiate helper object (service helper by default).
helper = new ServicesHelper(); helper = servicesHelper;
helper.resetForm(); helper.resetForm();
helper.filter(''); helper.filter('');

View file

@ -34,7 +34,7 @@
*/ */
$('#filter-services form').submit(function(event) { $('#filter-services form').submit(function(event) {
var key = $('#filter-services .key').val(); var key = $('#filter-services .key').val();
$('#filter-services .selected-row').removeClass('selected-row'); $('#filter-services .selected').removeClass('selected');
instance.resetForm(); instance.resetForm();
instance.filter(key); instance.filter(key);
return false; return false;
@ -70,8 +70,8 @@
}); });
instance.display(service); instance.display(service);
$('#filter-services .selected-row').removeClass('selected-row'); $('#filter-services .selected').removeClass('selected');
$(this).addClass('selected-row'); $(this).addClass('selected');
$('#edit-service, #delete-service').prop('disabled', false); $('#edit-service, #delete-service').prop('disabled', false);
}); });
@ -82,8 +82,8 @@
instance.resetForm(); instance.resetForm();
$('#services .add-edit-delete-group').hide(); $('#services .add-edit-delete-group').hide();
$('#services .save-cancel-group').show(); $('#services .save-cancel-group').show();
$('#services .details').find('input, textarea').prop('readonly', false); $('#services .record-details').find('input, textarea').prop('readonly', false);
$('#services .details').find('select').prop('disabled', false); $('#services .record-details').find('select').prop('disabled', false);
$('#service-duration').spinner('enable'); $('#service-duration').spinner('enable');
$('#filter-services button').prop('disabled', true); $('#filter-services button').prop('disabled', true);
@ -138,8 +138,8 @@
$('#edit-service').click(function() { $('#edit-service').click(function() {
$('#services .add-edit-delete-group').hide(); $('#services .add-edit-delete-group').hide();
$('#services .save-cancel-group').show(); $('#services .save-cancel-group').show();
$('#services .details').find('input, textarea').prop('readonly', false); $('#services .record-details').find('input, textarea').prop('readonly', false);
$('#services .details select').prop('disabled', false); $('#services .record-details select').prop('disabled', false);
$('#service-duration').spinner('enable'); $('#service-duration').spinner('enable');
$('#filter-services button').prop('disabled', true); $('#filter-services button').prop('disabled', true);
@ -251,16 +251,16 @@
* Resets the service tab form back to its initial state. * Resets the service tab form back to its initial state.
*/ */
ServicesHelper.prototype.resetForm = function() { ServicesHelper.prototype.resetForm = function() {
$('#services .details').find('input, textarea').val(''); $('#services .record-details').find('input, textarea').val('');
$('#service-category').val('null'); $('#service-category').val('null');
$('#services .add-edit-delete-group').show(); $('#services .add-edit-delete-group').show();
$('#services .save-cancel-group').hide(); $('#services .save-cancel-group').hide();
$('#edit-service, #delete-service').prop('disabled', true); $('#edit-service, #delete-service').prop('disabled', true);
$('#services .details').find('input, textarea').prop('readonly', true); $('#services .record-details').find('input, textarea').prop('readonly', true);
$('#service-category').prop('disabled', true); $('#service-category').prop('disabled', true);
$('#service-duration').spinner('disable'); $('#service-duration').spinner('disable');
$('#filter-services .selected-row').removeClass('selected-row'); $('#filter-services .selected').removeClass('selected');
$('#filter-services button').prop('disabled', false); $('#filter-services button').prop('disabled', false);
$('#filter-services .results').css('color', ''); $('#filter-services .results').css('color', '');
}; };
@ -335,7 +335,7 @@
*/ */
ServicesHelper.prototype.getFilterHtml = function(service) { ServicesHelper.prototype.getFilterHtml = function(service) {
var html = var html =
'<div class="service-row" data-id="' + service.id + '">' + '<div class="service-row entry" data-id="' + service.id + '">' +
'<strong>' + service.name + '</strong><br>' + '<strong>' + service.name + '</strong><br>' +
service.duration + ' min - ' + service.duration + ' min - ' +
service.price + ' ' + service.currency + '<br>' + service.price + ' ' + service.currency + '<br>' +
@ -354,11 +354,11 @@
ServicesHelper.prototype.select = function(id, display) { ServicesHelper.prototype.select = function(id, display) {
display = display || false; display = display || false;
$('#filter-services .selected-row').removeClass('selected-row'); $('#filter-services .selected').removeClass('selected');
$('#filter-services .service-row').each(function() { $('#filter-services .service-row').each(function() {
if ($(this).attr('data-id') === id) { if ($(this).attr('data-id') === id) {
$(this).addClass('selected-row'); $(this).addClass('selected');
return false; return false;
} }
}); });