From 1a8eccbb35c9d35fd7d036f38945fa79e2513a70 Mon Sep 17 00:00:00 2001 From: Alex Tselegidis Date: Fri, 20 May 2016 09:08:41 +0200 Subject: [PATCH] Refactored the backend-page css components. --- src/application/views/backend/customers.php | 4 +- src/assets/css/backend.css | 124 ++++++++++---------- src/assets/js/backend_customers.js | 36 +++--- src/assets/js/backend_customers_helper.js | 38 +++--- 4 files changed, 99 insertions(+), 103 deletions(-) diff --git a/src/application/views/backend/customers.php b/src/application/views/backend/customers.php index 55998f38..09fd829e 100644 --- a/src/application/views/backend/customers.php +++ b/src/application/views/backend/customers.php @@ -28,7 +28,7 @@ }); -
+
@@ -47,7 +47,7 @@
-
+
diff --git a/src/assets/css/backend.css b/src/assets/css/backend.css index 472f5225..7f485fc3 100644 --- a/src/assets/css/backend.css +++ b/src/assets/css/backend.css @@ -189,6 +189,61 @@ body .jspTrack { background: #EBEBEB; } + +/* BACKEND COMPONENTS + -------------------------------------------------------------------- */ + +.backend-page .filter-records { + margin: 15px 0px 15px 15px; + width: 350px; +} + +.backend-page .filter-records form { + height: 35px; + padding-top: 5px +} + +.backend-page .filter-records form .key { + margin-right: 15px; + float: left; +} + +.backend-page .filter-records .results { + overflow-y: auto; + max-height: 650px; + outline: none; +} + +.backend-page .filter-records .results .entry { + padding: 10px 7px; +} + +.backend-page .filter-records .results .entry:hover:not(.selected) { + background-color: #F3F3F3; + cursor: pointer; +} + +.backend-page .filter-records .results .entry.selected { + background-color: #F4F4F4; + border-right: 5px solid #35B66F; +} + +.backend-page .filter-records .results hr { + margin: 5px 0; +} + +.record-details { + margin: 15px 0 15px 15px; + max-width: 710px; +} + +.record-details input, +.record-details textarea { + background-color: white; + cursor: default; +} + + /* BACKEND CALENDAR PAGE -------------------------------------------------------------------- */ #calendar-page #calendar-toolbar { @@ -329,61 +384,9 @@ body .form-horizontal .controls { margin-left: 158px; } -/* BACKEND COMPONENTS - -------------------------------------------------------------------- */ -.filter-records form { - height: 35px; - padding-top: 5px -} - -.filter-records form .key { - margin-right: 15px; - float: left; -} - /* BACKEND CUSTOMERS PAGE -------------------------------------------------------------------- */ -#customers-page h2 { - color: #525252; -} - -#customers-page #filter-customers { - margin: 15px 0px 15px 15px; - width: 350px; -} - -#customers-page .filter-records .results { - overflow-y: auto; - max-height: 650px; - outline: none; -} - -#customers-page #filter-customers .results .customer-row { - padding: 10px 7px; -} - -#customers-page #filter-customers .results .customer-row:hover:not(.selected-row) { - background-color: #F3F3F3; - cursor: pointer; -} - -#customers-page #filter-customers .results hr { - margin: 5px 0; -} - -#customers-page .details { - margin: 15px 0 15px 15px; - max-width: 710px; -} - -#customers-page .details .btn-toolbar { - margin-top: 0px; -} - -#customers-page .details div.span5 { - margin-left: 0; -} #customers-page #customer-appointments { height: 370px; @@ -399,11 +402,15 @@ body .form-horizontal .controls { border-right: none; } -#customers-page #customer-appointments .appointment-row:hover:not(.selected-row) { +#customers-page #customer-appointments .appointment-row:hover:not(.selected) { background-color: #F3F3F3; cursor: pointer; } +#customers-page #customer-appointments .appointment-row.selected { + background-color: #F4F4F4; +} + #customers-page #appointment-details { width: 330px; } @@ -414,17 +421,6 @@ body .form-horizontal .controls { border-bottom: 4px solid #EEE; } -#customers-page .details input, -#customers-page .details textarea { - background-color: white; - cursor: default; -} - -#customers-page .selected-row { - background-color: #F4F4F4; - border-right: 5px solid #35B66F; -} - /* BACKEND SERVICES PAGE -------------------------------------------------------------------- */ diff --git a/src/assets/js/backend_customers.js b/src/assets/js/backend_customers.js index b9021aa7..7cd9d64a 100644 --- a/src/assets/js/backend_customers.js +++ b/src/assets/js/backend_customers.js @@ -32,33 +32,33 @@ */ var helper = {}; - /** - * This method initializes the backend customers page. If you use this namespace - * in a different page do not use this method. - * - * @param {Boolean} defaultEventHandlers Optional (false), whether to bind the default - * event handlers or not. - */ - exports.initialize = function(defaultEventHandlers) { - if (defaultEventHandlers == undefined) defaultEventHandlers = false; + /** + * This method initializes the backend customers page. If you use this namespace + * in a different page do not use this method. + * + * @param {Boolean} defaultEventHandlers Optional (false), whether to bind the default + * event handlers or not. + */ + exports.initialize = function(defaultEventHandlers) { + defaultEventHandlers = defaultEventHandlers || false; - helper = new CustomersHelper(); - helper.resetForm(); - helper.filter(''); + helper = new CustomersHelper(); + helper.resetForm(); + helper.filter(''); $('#filter-customers .results').jScrollPane(); $('#customer-appointments').jScrollPane(); - if (defaultEventHandlers) { + if (defaultEventHandlers) { _bindEventHandlers(); - } - }; + } + }; /** * Default event handlers declaration for backend customers page. */ - function _bindEventHandlers() { - helper.bindEventHandlers(); - } + function _bindEventHandlers() { + helper.bindEventHandlers(); + } })(window.BackendCustomers); diff --git a/src/assets/js/backend_customers_helper.js b/src/assets/js/backend_customers_helper.js index 4086e077..83f76a89 100644 --- a/src/assets/js/backend_customers_helper.js +++ b/src/assets/js/backend_customers_helper.js @@ -35,7 +35,7 @@ */ $('#filter-customers form').submit(function(event) { var key = $('#filter-customers .key').val(); - $('#filter-customers .selected-row').removeClass('selected-row'); + $('#filter-customers .selected').removeClass('selected'); instance.resetForm(); instance.filter(key); return false; @@ -51,11 +51,11 @@ }); /** - * Event: Customer Row "Click" + * Event: Filter Entry "Click" * * Display the customer data of the selected row. */ - $(document).on('click', '.customer-row', function() { + $(document).on('click', '.entry', function() { if ($('#filter-customers .filter').prop('disabled')) { return; // Do nothing when user edits a customer record. } @@ -70,8 +70,8 @@ }); instance.display(customer); - $('#filter-customers .selected-row').removeClass('selected-row'); - $(this).addClass('selected-row'); + $('#filter-customers .selected').removeClass('selected'); + $(this).addClass('selected'); $('#edit-customer, #delete-customer').prop('disabled', false); }); @@ -81,10 +81,10 @@ * Display appointment data of the selected row. */ $(document).on('click', '.appointment-row', function() { - $('#customer-appointments .selected-row').removeClass('selected-row'); - $(this).addClass('selected-row'); + $('#customer-appointments .selected').removeClass('selected'); + $(this).addClass('selected'); - var customerId = $('#filter-customers .selected-row').attr('data-id'), + var customerId = $('#filter-customers .selected').attr('data-id'), appointmentId = $(this).attr('data-id'), appointment = {}; @@ -110,7 +110,7 @@ instance.resetForm(); $('#add-edit-delete-group').hide(); $('#save-cancel-group').show(); - $('.details').find('input, textarea').prop('readonly', false); + $('.record-details').find('input, textarea').prop('readonly', false); $('#filter-customers button').prop('disabled', true); $('#filter-customers .results').css('color', '#AAA'); @@ -120,7 +120,7 @@ * Event: Edit Customer Button "Click" */ $('#edit-customer').click(function() { - $('.details').find('input, textarea').prop('readonly', false); + $('.record-details').find('input, textarea').prop('readonly', false); $('#add-edit-delete-group').hide(); $('#save-cancel-group').show(); @@ -273,8 +273,8 @@ * Bring the customer form back to its initial state. */ CustomersHelper.prototype.resetForm = function() { - $('.details').find('input, textarea').val(''); - $('.details').find('input, textarea').prop('readonly', true); + $('.record-details').find('input, textarea').val(''); + $('.record-details').find('input, textarea').prop('readonly', true); $('#customer-appointments').html(''); $('#appointment-details').html(''); @@ -282,11 +282,11 @@ $('#add-edit-delete-group').show(); $('#save-cancel-group').hide(); - $('.details .required').css('border', ''); - $('.details #form-message').hide(); + $('.record-details .required').css('border', ''); + $('.record-details #form-message').hide(); $('#filter-customers button').prop('disabled', false); - $('#filter-customers .selected-row').removeClass('selected-row'); + $('#filter-customers .selected').removeClass('selected'); $('#filter-customers .results').css('color', ''); }; @@ -381,7 +381,7 @@ ? info + ', ' + customer.phone_number : info; var html = - '
' + + '
' + '' + name + '
' + @@ -403,11 +403,11 @@ CustomersHelper.prototype.select = function(id, display) { display = display || false - $('#filter-customers .selected-row').removeClass('selected-row'); + $('#filter-customers .selected').removeClass('selected'); - $('#filter-customers .customer-row').each(function() { + $('#filter-customers .entry').each(function() { if ($(this).attr('data-id') == id) { - $(this).addClass('selected-row'); + $(this).addClass('selected'); return false; } });