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,6 +86,7 @@
<input id="customer-id" type="hidden" />
<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>
@ -141,4 +142,5 @@
</div>
</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 {