mirror of
https://github.com/alextselegidis/easyappointments.git
synced 2024-11-22 16:02:54 +03:00
Responsive design refactoring for the backend/customers page.
This commit is contained in:
Alex Tselegidis
parent
8ddc007ac6
commit
e649119828
2 changed files with 63 additions and 56 deletions
|
|
@ -30,7 +30,7 @@
|
||||||
|
|
||||||
<div id="customers-page" class="container-fluid backend-page">
|
<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-xs-12 col-md-4">
|
||||||
<form class="input-append">
|
<form class="input-append">
|
||||||
<input class="key" type="text" />
|
<input class="key" type="text" />
|
||||||
<div class="btn-group">
|
<div class="btn-group">
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
<div class="results"></div>
|
<div class="results"></div>
|
||||||
</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 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) { ?>
|
||||||
|
|
@ -86,58 +86,60 @@
|
||||||
|
|
||||||
<input id="customer-id" type="hidden" />
|
<input id="customer-id" type="hidden" />
|
||||||
|
|
||||||
<div class="col-md-6" style="margin-left: 0;">
|
<div class="row">
|
||||||
<h3><?php echo $this->lang->line('details'); ?></h3>
|
<div class="col-md-6" style="margin-left: 0;">
|
||||||
<div id="form-message" class="alert" style="display:none;"></div>
|
<h3><?php echo $this->lang->line('details'); ?></h3>
|
||||||
|
<div id="form-message" class="alert" style="display:none;"></div>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="form-group">
|
||||||
<label for="first-name"><?php echo $this->lang->line('first_name'); ?> *</label>
|
<label for="first-name"><?php echo $this->lang->line('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"><?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>
|
||||||
|
|
||||||
<div class="form-group">
|
<div class="col-md-5">
|
||||||
<label for="last-name"><?php echo $this->lang->line('last_name'); ?> *</label>
|
<h3><?php echo $this->lang->line('appointments'); ?></h3>
|
||||||
<input type="text" id="last-name" class="form-control required" />
|
<div id="customer-appointments"></div>
|
||||||
|
<div id="appointment-details"></div>
|
||||||
</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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -96,6 +96,10 @@ root {
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#notification {
|
||||||
|
margin-bottom: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
#notification strong {
|
#notification strong {
|
||||||
margin-right: 15px;
|
margin-right: 15px;
|
||||||
}
|
}
|
||||||
|
|
@ -196,8 +200,7 @@ body .jspTrack {
|
||||||
-------------------------------------------------------------------- */
|
-------------------------------------------------------------------- */
|
||||||
|
|
||||||
.backend-page .filter-records {
|
.backend-page .filter-records {
|
||||||
margin: 15px 0px 15px 15px;
|
max-width: 350px;
|
||||||
width: 350px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.backend-page .filter-records form {
|
.backend-page .filter-records form {
|
||||||
|
|
@ -235,8 +238,7 @@ body .jspTrack {
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-details {
|
.record-details {
|
||||||
margin: 15px 0 15px 15px;
|
max-width: 800px;
|
||||||
max-width: 710px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.record-details input,
|
.record-details input,
|
||||||
|
|
@ -401,10 +403,12 @@ body .form-horizontal .controls {
|
||||||
|
|
||||||
#customers-page #customer-appointments {
|
#customers-page #customer-appointments {
|
||||||
height: 370px;
|
height: 370px;
|
||||||
width: 330px;
|
max-width: 330px;
|
||||||
|
width: 100%;
|
||||||
border: 4px solid #E2E2E2;
|
border: 4px solid #E2E2E2;
|
||||||
margin-bottom: 20px;
|
margin-bottom: 20px;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
outline: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customers-page #customer-appointments .appointment-row {
|
#customers-page #customer-appointments .appointment-row {
|
||||||
|
|
@ -423,7 +427,8 @@ body .form-horizontal .controls {
|
||||||
}
|
}
|
||||||
|
|
||||||
#customers-page #appointment-details {
|
#customers-page #appointment-details {
|
||||||
width: 330px;
|
max-width: 330px;
|
||||||
|
margin-bottom: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#customers-page #appointment-details div {
|
#customers-page #appointment-details div {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue