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

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

@ -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
-------------------------------------------------------------------- */

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

@ -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);

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

@ -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 =
'<div class="customer-row" data-id="' + customer.id + '">' +
'<div class="entry" data-id="' + customer.id + '">' +
'<strong>' +
name +
'</strong><br>' +
@ -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;
}
});