Styling improvements for the backend customers page.

This commit is contained in:
alext 2017-09-23 01:27:07 +02:00
parent 71c1bf38ff
commit 17fd69cce6
3 changed files with 32 additions and 28 deletions

View File

@ -25,8 +25,11 @@
<div id="customers-page" class="container-fluid backend-page">
<div class="row">
<div id="filter-customers" class="filter-records column col-xs-12 col-sm-5">
<form class="input-append">
<input class="key" type="text" />
<form>
<div class="form-group">
<input class="key" type="text">
</div>
<div class="btn-group">
<button class="filter btn btn-default btn-sm" type="submit" title="<?= lang('filter') ?>">
<span class="glyphicon glyphicon-search"></span>
@ -44,26 +47,26 @@
<div class="record-details col-xs-12 col-sm-7">
<div class="btn-toolbar">
<div id="add-edit-delete-group" class="btn-group">
<?php if ($privileges[PRIV_CUSTOMERS]['add'] == TRUE) { ?>
<?php if ($privileges[PRIV_CUSTOMERS]['add'] === TRUE): ?>
<button id="add-customer" class="btn btn-primary">
<span class="glyphicon glyphicon-plus"></span>
<?= lang('add') ?>
</button>
<?php } ?>
<?php endif ?>
<?php if ($privileges[PRIV_CUSTOMERS]['edit'] == TRUE) { ?>
<?php if ($privileges[PRIV_CUSTOMERS]['edit'] === TRUE): ?>
<button id="edit-customer" class="btn btn-default" disabled="disabled">
<span class="glyphicon glyphicon-pencil"></span>
<?= lang('edit') ?>
</button>
<?php }?>
<?php endif ?>
<?php if ($privileges[PRIV_CUSTOMERS]['delete'] == TRUE) { ?>
<?php if ($privileges[PRIV_CUSTOMERS]['delete'] === TRUE): ?>
<button id="delete-customer" class="btn btn-default" disabled="disabled">
<span class="glyphicon glyphicon-remove"></span>
<?= lang('delete') ?>
</button>
<?php } ?>
<?php endif ?>
</div>
<div id="save-cancel-group" class="btn-group" style="display:none;">
@ -78,46 +81,47 @@
</div>
</div>
<input id="customer-id" type="hidden" />
<input id="customer-id" type="hidden">
<div class="row">
<div class="col-md-6" style="margin-left: 0;">
<div class="col-xs-12 col-sm-6" style="margin-left: 0;">
<h3><?= lang('details') ?></h3>
<div id="form-message" class="alert" style="display:none;"></div>
<div class="form-group">
<label for="first-name"><?= lang('first_name') ?> *</label>
<input type="text" id="first-name" class="form-control required" />
<input type="text" id="first-name" class="form-control required">
</div>
<div class="form-group">
<label for="last-name"><?= lang('last_name') ?> *</label>
<input type="text" id="last-name" class="form-control required" />
<input type="text" id="last-name" class="form-control required">
</div>
<div class="form-group">
<label for="email"><?= lang('email') ?> *</label>
<input type="text" id="email" class="form-control required" />
<input type="text" id="email" class="form-control required">
</div>
<div class="form-group">
<label for="phone-number"><?= lang('phone_number') ?> *</label>
<input type="text" id="phone-number" class="form-control required" />
<input type="text" id="phone-number" class="form-control required">
</div>
<div class="form-group">
<label for="address"><?= lang('address') ?></label>
<input type="text" id="address" class="form-control" />
<input type="text" id="address" class="form-control">
</div>
<div class="form-group">
<label for="city"><?= lang('city') ?></label>
<input type="text" id="city" class="form-control" />
<input type="text" id="city" class="form-control">
</div>
<div class="form-group">
<label for="zip-code"><?= lang('zip_code') ?></label>
<input type="text" id="zip-code" class="form-control" />
<input type="text" id="zip-code" class="form-control">
</div>
<div class="form-group">
@ -125,14 +129,15 @@
<textarea id="notes" rows="4" class="form-control"></textarea>
</div>
<center><em id="form-message" class="text-error">
<?= lang('fields_are_required') ?></em></center>
<p class="text-center">
<em id="form-message" class="text-danger"><?= lang('fields_are_required') ?></em>
</p>
</div>
<div class="col-md-5">
<div class="col-xs-12 col-sm-6">
<h3><?= lang('appointments') ?></h3>
<div id="customer-appointments"></div>
<div id="appointment-details"></div>
<div id="customer-appointments" class="well"></div>
<div id="appointment-details" class="well hidden"></div>
</div>
</div>
</div>

View File

@ -489,7 +489,6 @@ body .form-horizontal .controls {
height: 370px;
max-width: 330px;
width: 100%;
border: 4px solid #E2E2E2;
margin-bottom: 20px;
overflow-y: auto;
outline: none;
@ -497,7 +496,7 @@ body .form-horizontal .controls {
#customers-page #customer-appointments .appointment-row {
padding: 7px;
border-bottom: 4px solid #E2E2E2;
border-bottom: 1px solid #E2E2E2;
border-right: none;
}
@ -513,12 +512,12 @@ body .form-horizontal .controls {
#customers-page #appointment-details {
max-width: 330px;
margin-bottom: 20px;
padding: 0;
}
#customers-page #appointment-details div {
padding: 10px;
background: #F8F8F8;
border-bottom: 4px solid #EEE;
}

View File

@ -281,8 +281,8 @@
$('.record-details').find('input, textarea').val('');
$('.record-details').find('input, textarea').prop('readonly', true);
$('#customer-appointments').html('');
$('#appointment-details').html('');
$('#customer-appointments').empty();
$('#appointment-details').toggleClass('hidden', true).empty();
$('#edit-customer, #delete-customer').prop('disabled', true);
$('#add-edit-delete-group').show();
$('#save-cancel-group').hide();
@ -444,7 +444,7 @@
start + ' - ' + end + '<br>' +
'</div>';
$('#appointment-details').html(html);
$('#appointment-details').html(html).removeClass('hidden');
};
window.CustomersHelper = CustomersHelper;