Responsive design refactoring for the backend/customers page.

This commit is contained in:
Alex Tselegidis 2016-07-14 20:25:05 +02:00
parent 8ddc007ac6
commit e649119828
2 changed files with 63 additions and 56 deletions

View file

@ -30,7 +30,7 @@
<div id="customers-page" class="container-fluid backend-page">
<div class="row">
<div id="filter-customers" class="filter-records column col-md-4">
<div id="filter-customers" class="filter-records column col-xs-12 col-md-4">
<form class="input-append">
<input class="key" type="text" />
<div class="btn-group">
@ -47,7 +47,7 @@
<div class="results"></div>
</div>
<div class="record-details col-md-7 row">
<div class="record-details col-xs-12 col-md-7">
<div class="btn-toolbar">
<div id="add-edit-delete-group" class="btn-group">
<?php if ($privileges[PRIV_CUSTOMERS]['add'] == TRUE) { ?>
@ -86,58 +86,60 @@
<input id="customer-id" type="hidden" />
<div class="col-md-6" style="margin-left: 0;">
<h3><?php echo $this->lang->line('details'); ?></h3>
<div id="form-message" class="alert" style="display:none;"></div>
<div class="row">
<div class="col-md-6" style="margin-left: 0;">
<h3><?php echo $this->lang->line('details'); ?></h3>
<div id="form-message" class="alert" style="display:none;"></div>
<div class="form-group">
<label for="first-name"><?php echo $this->lang->line('first_name'); ?> *</label>
<input type="text" id="first-name" class="form-control required" />
<div class="form-group">
<label for="first-name"><?php echo $this->lang->line('first_name'); ?> *</label>
<input type="text" id="first-name" class="form-control required" />
</div>
<div class="form-group">
<label for="last-name"><?php echo $this->lang->line('last_name'); ?> *</label>
<input type="text" id="last-name" class="form-control required" />
</div>
<div class="form-group">
<label for="email"><?php echo $this->lang->line('email'); ?> *</label>
<input type="text" id="email" class="form-control required" />
</div>
<div class="form-group">
<label for="phone-number"><?php echo $this->lang->line('phone_number'); ?> *</label>
<input type="text" id="phone-number" class="form-control required" />
</div>
<div class="form-group">
<label for="address"><?php echo $this->lang->line('address'); ?></label>
<input type="text" id="address" class="form-control" />
</div>
<div class="form-group">
<label for="city"><?php echo $this->lang->line('city'); ?></label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group">
<label for="zip-code"><?php echo $this->lang->line('zip_code'); ?></label>
<input type="text" id="zip-code" class="form-control" />
</div>
<div class="form-group">
<label for="notes"><?php echo $this->lang->line('notes'); ?></label>
<textarea id="notes" rows="4" class="form-control"></textarea>
</div>
<center><em id="form-message" class="text-error">
<?php echo $this->lang->line('fields_are_required'); ?></em></center>
</div>
<div class="form-group">
<label for="last-name"><?php echo $this->lang->line('last_name'); ?> *</label>
<input type="text" id="last-name" class="form-control required" />
<div class="col-md-5">
<h3><?php echo $this->lang->line('appointments'); ?></h3>
<div id="customer-appointments"></div>
<div id="appointment-details"></div>
</div>
<div class="form-group">
<label for="email"><?php echo $this->lang->line('email'); ?> *</label>
<input type="text" id="email" class="form-control required" />
</div>
<div class="form-group">
<label for="phone-number"><?php echo $this->lang->line('phone_number'); ?> *</label>
<input type="text" id="phone-number" class="form-control required" />
</div>
<div class="form-group">
<label for="address"><?php echo $this->lang->line('address'); ?></label>
<input type="text" id="address" class="form-control" />
</div>
<div class="form-group">
<label for="city"><?php echo $this->lang->line('city'); ?></label>
<input type="text" id="city" class="form-control" />
</div>
<div class="form-group">
<label for="zip-code"><?php echo $this->lang->line('zip_code'); ?></label>
<input type="text" id="zip-code" class="form-control" />
</div>
<div class="form-group">
<label for="notes"><?php echo $this->lang->line('notes'); ?></label>
<textarea id="notes" rows="4" class="form-control"></textarea>
</div>
<center><em id="form-message" class="text-error">
<?php echo $this->lang->line('fields_are_required'); ?></em></center>
</div>
<div class="col-md-5">
<h3><?php echo $this->lang->line('appointments'); ?></h3>
<div id="customer-appointments"></div>
<div id="appointment-details"></div>
</div>
</div>
</div>

View file

@ -96,6 +96,10 @@ root {
font-weight: bold;
}
#notification {
margin-bottom: 15px;
}
#notification strong {
margin-right: 15px;
}
@ -196,8 +200,7 @@ body .jspTrack {
-------------------------------------------------------------------- */
.backend-page .filter-records {
margin: 15px 0px 15px 15px;
width: 350px;
max-width: 350px;
}
.backend-page .filter-records form {
@ -235,8 +238,7 @@ body .jspTrack {
}
.record-details {
margin: 15px 0 15px 15px;
max-width: 710px;
max-width: 800px;
}
.record-details input,
@ -401,10 +403,12 @@ body .form-horizontal .controls {
#customers-page #customer-appointments {
height: 370px;
width: 330px;
max-width: 330px;
width: 100%;
border: 4px solid #E2E2E2;
margin-bottom: 20px;
overflow-y: auto;
outline: none;
}
#customers-page #customer-appointments .appointment-row {
@ -423,7 +427,8 @@ body .form-horizontal .controls {
}
#customers-page #appointment-details {
width: 330px;
max-width: 330px;
margin-bottom: 20px;
}
#customers-page #appointment-details div {