From 05ac409c0ff4b67a05f40fde392116d1f9650ee7 Mon Sep 17 00:00:00 2001
From: Alex Tselegidis <alextselegidis@gmail.com>
Date: Thu, 14 Jul 2016 21:08:36 +0200
Subject: [PATCH] Responsive design refactoring for the backend/users page.

---
 src/application/views/backend/users.php | 18 ++++++------
 src/assets/css/backend.css              | 38 ++++++++++++++++++-------
 2 files changed, 37 insertions(+), 19 deletions(-)

diff --git a/src/application/views/backend/users.php b/src/application/views/backend/users.php
index b0c5a1fb..180b1016 100644
--- a/src/application/views/backend/users.php
+++ b/src/application/views/backend/users.php
@@ -60,7 +60,7 @@
     ?>
     <div id="admins" class="tab-content">
         <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">
                     <input class="key" type="text" />
                     <div class="btn-group">
@@ -77,7 +77,7 @@
                 <div class="results"></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="add-edit-delete-group btn-group">
                         <button id="add-admin" class="btn btn-primary">
@@ -112,7 +112,7 @@
 
                 <input type="hidden" id="admin-id" class="record-id" />
 
-                <div class="">
+                <div class="row">
                     <div class="admin-details col-md-6">
                         <div class="form-group">
                             <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 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">
                     <input class="key" type="text" />
                     <div class="btn-group">
@@ -218,7 +218,7 @@
                 <div class="results"></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="add-edit-delete-group btn-group">
                         <button id="add-provider" class="btn btn-primary">
@@ -262,7 +262,7 @@
 
                     <input type="hidden" id="provider-id" class="record-id" />
 
-                    <div>
+                    <div class="row">
                         <div class="provider-details col-md-6">
                             <div class="form-group">
                                 <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 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">
                     <input class="key" type="text" />
                     <div class="btn-group">
@@ -492,7 +492,7 @@
                 <div class="results"></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="add-edit-delete-group btn-group">
                         <button id="add-secretary" class="btn btn-primary">
@@ -527,7 +527,7 @@
 
                 <input type="hidden" id="secretary-id" class="record-id" />
 
-                <div class="">
+                <div class="row">
                     <div class="secretary-details col-md-6">
                         <div class="form-group">
                             <label for="secretary-first-name"><?php echo $this->lang->line('first_name');?> *</label>
diff --git a/src/assets/css/backend.css b/src/assets/css/backend.css
index 1d84da7e..bda14764 100644
--- a/src/assets/css/backend.css
+++ b/src/assets/css/backend.css
@@ -201,6 +201,7 @@ body .jspTrack {
 
 .backend-page .filter-records {
     max-width: 350px;
+    margin-bottom: 20px;
 }
 
 .backend-page .filter-records form {
@@ -239,6 +240,7 @@ body .jspTrack {
 
 .record-details {
     max-width: 800px;
+    margin-bottom: 20px;
 }
 
 .record-details input,
@@ -455,6 +457,7 @@ body .form-horizontal .controls {
 
 #services-page .filter-records {
     max-width: 350px;
+    margin-bottom: 20px;
 }
 
 #services-page .filter-records .results {
@@ -525,6 +528,7 @@ body .form-horizontal .controls {
 
 #services-page .details {
     max-width:  450px;
+    margin-bottom: 20px;
 }
 
 /* BACKEND USERS PAGE
@@ -533,14 +537,9 @@ body .form-horizontal .controls {
     color: #525252;
 }
 
-#users-page .tab-content {
-    margin: 15px;
-}
-
 #users-page .nav {
-    margin: 15px;
     background-color: #F4F4F4;
-    border-radius: 4px;
+    margin-bottom: 15px;
 }
 
 #users-page .nav li {
@@ -548,7 +547,8 @@ body .form-horizontal .controls {
 }
 
 #users-page .filter-records {
-    width: 380px;
+    max-width: 380px;
+    margin-bottom: 20px;
 }
 
 #users-page .filter-records .results {
@@ -592,10 +592,12 @@ body .form-horizontal .controls {
 #users-page #secretary-providers,
 #users-page #provider-services {
     border: 4px solid #ccc;
-    width: 315px;
+    max-width: 315px;
+    width: 100%;
     height: 387px;
     overflow-y: scroll;
     padding: 7px;
+    margin-bottom: 20px;
 }
 
 #users-page #providers .switch-view {
@@ -656,11 +658,12 @@ body .form-horizontal .controls {
 }
 
 #users-page .details {
-    max-width: 700px;
+    max-width: 800px;
+    margin-bottom: 20px;
 }
 
 #users-page .working-plan td input[type="text"] {
-    width: 85px;
+    width: 55px;
     margin: 10px 0;
 }
 
@@ -825,4 +828,19 @@ body .form-horizontal .controls {
     #calendar-page #calendar-filter select {
         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%;
+    }
 }