maket/MaketRandevu
1
1
Fork 0
Code Issues 15 Pull requests Projects Releases 4 Packages Wiki Activity

Refactored the backend-page css components.

Browse source
This commit is contained in:
Alex Tselegidis 2016-05-20 09:08:41 +02:00
parent 060d4c9826
commit 1a8eccbb35
4 changed files with 99 additions and 103 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/application/views/backend/customers.php
View file

@ -28,7 +28,7 @@
}); });
</script> </script>
<div id="customers-page" class="container-fluid"> <div id="customers-page" class="container-fluid backend-page">
<div class="row"> <div class="row">
<div id="filter-customers" class="filter-records column col-md-4"> <div id="filter-customers" class="filter-records column col-md-4">
<form class="input-append"> <form class="input-append">
@ -47,7 +47,7 @@
<div class="results"></div> <div class="results"></div>
</div> </div>
<div class="details col-md-7 row"> <div class="record-details col-md-7 row">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div id="add-edit-delete-group" class="btn-group"> <div id="add-edit-delete-group" class="btn-group">
<?php if ($privileges[PRIV_CUSTOMERS]['add'] == TRUE) { ?> <?php if ($privileges[PRIV_CUSTOMERS]['add'] == TRUE) { ?>

124
src/assets/css/backend.css
View file

@ -189,6 +189,61 @@ body .jspTrack {
background: #EBEBEB; 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 /* BACKEND CALENDAR PAGE
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */
#calendar-page #calendar-toolbar { #calendar-page #calendar-toolbar {
@ -329,61 +384,9 @@ body .form-horizontal .controls {
margin-left: 158px; 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 /* 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 { #customers-page #customer-appointments {
height: 370px; height: 370px;
@ -399,11 +402,15 @@ body .form-horizontal .controls {
border-right: none; 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; background-color: #F3F3F3;
cursor: pointer; cursor: pointer;
} }
#customers-page #customer-appointments .appointment-row.selected {
background-color: #F4F4F4;
}
#customers-page #appointment-details { #customers-page #appointment-details {
width: 330px; width: 330px;
} }
@ -414,17 +421,6 @@ body .form-horizontal .controls {
border-bottom: 4px solid #EEE; 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 /* BACKEND SERVICES PAGE
-------------------------------------------------------------------- */ -------------------------------------------------------------------- */

36
src/assets/js/backend_customers.js
View file

@ -32,33 +32,33 @@
*/ */
var helper = {}; var helper = {};
/** /**
* This method initializes the backend customers page. If you use this namespace * This method initializes the backend customers page. If you use this namespace
* in a different page do not use this method. * in a different page do not use this method.
* *
* @param {Boolean} defaultEventHandlers Optional (false), whether to bind the default * @param {Boolean} defaultEventHandlers Optional (false), whether to bind the default
* event handlers or not. * event handlers or not.
*/ */
exports.initialize = function(defaultEventHandlers) { exports.initialize = function(defaultEventHandlers) {
if (defaultEventHandlers == undefined) defaultEventHandlers = false; defaultEventHandlers = defaultEventHandlers || false;
helper = new CustomersHelper(); helper = new CustomersHelper();
helper.resetForm(); helper.resetForm();
helper.filter(''); helper.filter('');
$('#filter-customers .results').jScrollPane(); $('#filter-customers .results').jScrollPane();
$('#customer-appointments').jScrollPane(); $('#customer-appointments').jScrollPane();
if (defaultEventHandlers) { if (defaultEventHandlers) {
_bindEventHandlers(); _bindEventHandlers();
} }
}; };
/** /**
* Default event handlers declaration for backend customers page. * Default event handlers declaration for backend customers page.
*/ */
function _bindEventHandlers() { function _bindEventHandlers() {
helper.bindEventHandlers(); helper.bindEventHandlers();
} }
})(window.BackendCustomers); })(window.BackendCustomers);

38
src/assets/js/backend_customers_helper.js
View file

@ -35,7 +35,7 @@
*/ */
$('#filter-customers form').submit(function(event) { $('#filter-customers form').submit(function(event) {
var key = $('#filter-customers .key').val(); var key = $('#filter-customers .key').val();
$('#filter-customers .selected-row').removeClass('selected-row'); $('#filter-customers .selected').removeClass('selected');
instance.resetForm(); instance.resetForm();
instance.filter(key); instance.filter(key);
return false; return false;
@ -51,11 +51,11 @@
}); });
/** /**
* Event: Customer Row "Click" * Event: Filter Entry "Click"
* *
* Display the customer data of the selected row. * 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')) { if ($('#filter-customers .filter').prop('disabled')) {
return; // Do nothing when user edits a customer record. return; // Do nothing when user edits a customer record.
} }
@ -70,8 +70,8 @@
}); });
instance.display(customer); instance.display(customer);
$('#filter-customers .selected-row').removeClass('selected-row'); $('#filter-customers .selected').removeClass('selected');
$(this).addClass('selected-row'); $(this).addClass('selected');
$('#edit-customer, #delete-customer').prop('disabled', false); $('#edit-customer, #delete-customer').prop('disabled', false);
}); });
@ -81,10 +81,10 @@
* Display appointment data of the selected row. * Display appointment data of the selected row.
*/ */
$(document).on('click', '.appointment-row', function() { $(document).on('click', '.appointment-row', function() {
$('#customer-appointments .selected-row').removeClass('selected-row'); $('#customer-appointments .selected').removeClass('selected');
$(this).addClass('selected-row'); $(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'), appointmentId = $(this).attr('data-id'),
appointment = {}; appointment = {};
@ -110,7 +110,7 @@
instance.resetForm(); instance.resetForm();
$('#add-edit-delete-group').hide(); $('#add-edit-delete-group').hide();
$('#save-cancel-group').show(); $('#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 button').prop('disabled', true);
$('#filter-customers .results').css('color', '#AAA'); $('#filter-customers .results').css('color', '#AAA');
@ -120,7 +120,7 @@
* Event: Edit Customer Button "Click" * Event: Edit Customer Button "Click"
*/ */
$('#edit-customer').click(function() { $('#edit-customer').click(function() {
$('.details').find('input, textarea').prop('readonly', false); $('.record-details').find('input, textarea').prop('readonly', false);
$('#add-edit-delete-group').hide(); $('#add-edit-delete-group').hide();
$('#save-cancel-group').show(); $('#save-cancel-group').show();
@ -273,8 +273,8 @@
* Bring the customer form back to its initial state. * Bring the customer form back to its initial state.
*/ */
CustomersHelper.prototype.resetForm = function() { CustomersHelper.prototype.resetForm = function() {
$('.details').find('input, textarea').val(''); $('.record-details').find('input, textarea').val('');
$('.details').find('input, textarea').prop('readonly', true); $('.record-details').find('input, textarea').prop('readonly', true);
$('#customer-appointments').html(''); $('#customer-appointments').html('');
$('#appointment-details').html(''); $('#appointment-details').html('');
@ -282,11 +282,11 @@
$('#add-edit-delete-group').show(); $('#add-edit-delete-group').show();
$('#save-cancel-group').hide(); $('#save-cancel-group').hide();
$('.details .required').css('border', ''); $('.record-details .required').css('border', '');
$('.details #form-message').hide(); $('.record-details #form-message').hide();
$('#filter-customers button').prop('disabled', false); $('#filter-customers button').prop('disabled', false);
$('#filter-customers .selected-row').removeClass('selected-row'); $('#filter-customers .selected').removeClass('selected');
$('#filter-customers .results').css('color', ''); $('#filter-customers .results').css('color', '');
}; };
@ -381,7 +381,7 @@
? info + ', ' + customer.phone_number : info; ? info + ', ' + customer.phone_number : info;
var html = var html =
'<div class="customer-row" data-id="' + customer.id + '">' + '<div class="entry" data-id="' + customer.id + '">' +
'<strong>' + '<strong>' +
name + name +
'</strong><br>' + '</strong><br>' +
@ -403,11 +403,11 @@
CustomersHelper.prototype.select = function(id, display) { CustomersHelper.prototype.select = function(id, display) {
display = display || false 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) { if ($(this).attr('data-id') == id) {
$(this).addClass('selected-row'); $(this).addClass('selected');
return false; return false;
} }
}); });