Refactored CSS with common backend rules for services page.
This commit is contained in:
parent
362aaf0498
commit
fe215e8be6
5 changed files with 39 additions and 89 deletions
|
@ -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">
|
||||||
|
|
|
@ -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 {
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
|
@ -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('');
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
Loading…
Reference in a new issue