Responsive design refactoring for the backend/users page.

This commit is contained in:
Alex Tselegidis 2016-07-14 21:08:36 +02:00
parent e3eba5cd8a
commit 05ac409c0f
2 changed files with 37 additions and 19 deletions

View file

@ -60,7 +60,7 @@
?> ?>
<div id="admins" class="tab-content"> <div id="admins" class="tab-content">
<div class="row"> <div class="row">
<div id="filter-admins" class="filter-records column col-md-4"> <div id="filter-admins" class="filter-records column col-xs-12 col-sm-5">
<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">
@ -77,7 +77,7 @@
<div class="results"></div> <div class="results"></div>
</div> </div>
<div class="details column col-md-7"> <div class="details column col-xs-12 col-sm-7">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="add-edit-delete-group btn-group"> <div class="add-edit-delete-group btn-group">
<button id="add-admin" class="btn btn-primary"> <button id="add-admin" class="btn btn-primary">
@ -112,7 +112,7 @@
<input type="hidden" id="admin-id" class="record-id" /> <input type="hidden" id="admin-id" class="record-id" />
<div class=""> <div class="row">
<div class="admin-details col-md-6"> <div class="admin-details col-md-6">
<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>
@ -201,7 +201,7 @@
?> ?>
<div id="providers" class="tab-content" style="display:none;"> <div id="providers" class="tab-content" style="display:none;">
<div class="row"> <div class="row">
<div id="filter-providers" class="filter-records column col-md-7"> <div id="filter-providers" class="filter-records column col-xs-12 col-sm-5">
<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">
@ -218,7 +218,7 @@
<div class="results"></div> <div class="results"></div>
</div> </div>
<div class="details column col-md-7"> <div class="details column col-xs-12 col-sm-7">
<div class="pull-left"> <div class="pull-left">
<div class="add-edit-delete-group btn-group"> <div class="add-edit-delete-group btn-group">
<button id="add-provider" class="btn btn-primary"> <button id="add-provider" class="btn btn-primary">
@ -262,7 +262,7 @@
<input type="hidden" id="provider-id" class="record-id" /> <input type="hidden" id="provider-id" class="record-id" />
<div> <div class="row">
<div class="provider-details col-md-6"> <div class="provider-details col-md-6">
<div class="form-group"> <div class="form-group">
<label for="provider-first-name"><?php echo $this->lang->line('first_name'); ?> *</label> <label for="provider-first-name"><?php echo $this->lang->line('first_name'); ?> *</label>
@ -475,7 +475,7 @@
?> ?>
<div id="secretaries" class="tab-content" style="display:none;"> <div id="secretaries" class="tab-content" style="display:none;">
<div class="row"> <div class="row">
<div id="filter-secretaries" class="filter-records column col-md-4"> <div id="filter-secretaries" class="filter-records column col-xs-12 col-sm-5">
<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">
@ -492,7 +492,7 @@
<div class="results"></div> <div class="results"></div>
</div> </div>
<div class="details column col-md-7"> <div class="details column col-xs-12 col-sm-7">
<div class="btn-toolbar"> <div class="btn-toolbar">
<div class="add-edit-delete-group btn-group"> <div class="add-edit-delete-group btn-group">
<button id="add-secretary" class="btn btn-primary"> <button id="add-secretary" class="btn btn-primary">
@ -527,7 +527,7 @@
<input type="hidden" id="secretary-id" class="record-id" /> <input type="hidden" id="secretary-id" class="record-id" />
<div class=""> <div class="row">
<div class="secretary-details col-md-6"> <div class="secretary-details col-md-6">
<div class="form-group"> <div class="form-group">
<label for="secretary-first-name"><?php echo $this->lang->line('first_name');?> *</label> <label for="secretary-first-name"><?php echo $this->lang->line('first_name');?> *</label>

View file

@ -201,6 +201,7 @@ body .jspTrack {
.backend-page .filter-records { .backend-page .filter-records {
max-width: 350px; max-width: 350px;
margin-bottom: 20px;
} }
.backend-page .filter-records form { .backend-page .filter-records form {
@ -239,6 +240,7 @@ body .jspTrack {
.record-details { .record-details {
max-width: 800px; max-width: 800px;
margin-bottom: 20px;
} }
.record-details input, .record-details input,
@ -455,6 +457,7 @@ body .form-horizontal .controls {
#services-page .filter-records { #services-page .filter-records {
max-width: 350px; max-width: 350px;
margin-bottom: 20px;
} }
#services-page .filter-records .results { #services-page .filter-records .results {
@ -525,6 +528,7 @@ body .form-horizontal .controls {
#services-page .details { #services-page .details {
max-width: 450px; max-width: 450px;
margin-bottom: 20px;
} }
/* BACKEND USERS PAGE /* BACKEND USERS PAGE
@ -533,14 +537,9 @@ body .form-horizontal .controls {
color: #525252; color: #525252;
} }
#users-page .tab-content {
margin: 15px;
}
#users-page .nav { #users-page .nav {
margin: 15px;
background-color: #F4F4F4; background-color: #F4F4F4;
border-radius: 4px; margin-bottom: 15px;
} }
#users-page .nav li { #users-page .nav li {
@ -548,7 +547,8 @@ body .form-horizontal .controls {
} }
#users-page .filter-records { #users-page .filter-records {
width: 380px; max-width: 380px;
margin-bottom: 20px;
} }
#users-page .filter-records .results { #users-page .filter-records .results {
@ -592,10 +592,12 @@ body .form-horizontal .controls {
#users-page #secretary-providers, #users-page #secretary-providers,
#users-page #provider-services { #users-page #provider-services {
border: 4px solid #ccc; border: 4px solid #ccc;
width: 315px; max-width: 315px;
width: 100%;
height: 387px; height: 387px;
overflow-y: scroll; overflow-y: scroll;
padding: 7px; padding: 7px;
margin-bottom: 20px;
} }
#users-page #providers .switch-view { #users-page #providers .switch-view {
@ -656,11 +658,12 @@ body .form-horizontal .controls {
} }
#users-page .details { #users-page .details {
max-width: 700px; max-width: 800px;
margin-bottom: 20px;
} }
#users-page .working-plan td input[type="text"] { #users-page .working-plan td input[type="text"] {
width: 85px; width: 55px;
margin: 10px 0; margin: 10px 0;
} }
@ -825,4 +828,19 @@ body .form-horizontal .controls {
#calendar-page #calendar-filter select { #calendar-page #calendar-filter select {
min-width: auto; min-width: auto;
} }
#users-page #providers .switch-view {
margin: 20px 0;
}
#users-page #providers .switch-view strong {
display: block;
width: 100%;
text-align: center;
margin: 16px 0;
}
#users-page #providers .switch-view div {
width: 48%;
}
} }