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>
<div id="services-page" class="container-fluid">
<div id="services-page" class="container-fluid backend-page">
<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="categories-tab tab"><a><?php echo $this->lang->line('categories'); ?></a></li>
@ -60,7 +60,7 @@
<div class="results"></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="add-edit-delete-group btn-group">
<button id="add-service" class="btn btn-primary">
@ -157,7 +157,7 @@
<div class="results"></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="add-edit-delete-group btn-group">
<button id="add-category" class="btn btn-primary">

View file

@ -249,6 +249,13 @@ body .jspTrack {
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
-------------------------------------------------------------------- */
@ -455,43 +462,14 @@ body .form-horizontal .controls {
cursor: pointer;
}
#services-page .filter-records {
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 {
#services-page .record-details .ui-spinner {
border: none;
margin-bottom: 10px;
display: block;
color: #666;
}
#services-page .details .ui-state-disabled {
#services-page .record-details .ui-state-disabled {
opacity: 1;
}
@ -499,38 +477,10 @@ body .form-horizontal .controls {
margin: 0px;
}
#services-page .details .ui-spinner a {
#services-page .record-details .ui-spinner a {
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
-------------------------------------------------------------------- */
#users-page h2 {

View file

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

View file

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

View file

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