fix: fixed mobile view for facilities form

savannahghi · Aug 31, 2021 · 5a64d2c · 5a64d2c
1 parent 0c0408a
commit 5a64d2c
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 28 deletions.
diff --git a/fahari/static/css/project.css b/fahari/static/css/project.css
@@ -11436,3 +11436,14 @@ h3 {
   background-position: center;
   background-size: cover;
 }
+
+.center-form {
+  display: -webkit-box !important;
+  display: -ms-flexbox !important;
+  display: flex !important;
+  margin: auto !important;
+}
+
+.row.align-header {
+  display: grid !important;
+}
diff --git a/fahari/static/css/project.min.css b/fahari/static/css/project.min.css
diff --git a/fahari/static/sass/project.scss b/fahari/static/sass/project.scss
@@ -45,3 +45,12 @@ $red: #b94a48;
     background-position: center;
     background-size: cover;
 }
+
+.center-form {
+    display: flex !important;
+    margin: auto !important;
+}
+
+.row.align-header {
+    display: grid !important;
+}
diff --git a/fahari/templates/common/facility_form.html b/fahari/templates/common/facility_form.html
@@ -8,28 +8,30 @@
 <a href="{% url 'common:facilities' %}">&larr; Back</a>
 {% if perms.common.change_facility %}
     <div class="row">
-        <div class="col-xl-10 col-lg-12 col-md-9 col-sm-10">
-            <div class="card shadow my-2">
-                <div class="card-header">
-                    <div class="toolbar float-right">
-                        {% if object.pk %}
-                            {% if perms.common.delete_facility %}
-                                <a href="{% url 'common:facility_delete' object.pk %}" class="btn btn-danger btn-icon-split">
-                                    <span class="icon text-white-50">
-                                        <i class="fas fa-trash"></i>
-                                    </span>
-                                    <span class="text">Delete Facility</span>
-                                </a>
+        <div class="col-xl-10 col-lg-10 col-md-10 col-sm-12">
+
+            <div class="row align-header">
+                    <div class="card-header">
+                        <div class="toolbar float-right">
+                            {% if object.pk %}
+                                {% if perms.common.delete_facility %}
+                                    <a href="{% url 'common:facility_delete' object.pk %}" class="btn btn-danger btn-icon-split">
+                                        <span class="icon text-white-50">
+                                            <i class="fas fa-trash"></i>
+                                        </span>
+                                        <span class="text">Delete Facility</span>
+                                    </a>
+                                {% endif %}
                             {% endif %}
-                        {% endif %}
-                    </div>
-                </div>
-                <div class="card-body p-0">
-                    <div class="row">
-                        <div class="col-lg-2 d-none d-lg-block">
                         </div>
-                        <div class="col-lg-6">
-                            <div class="p-5">
+                    </div>
+
+
+
+                <div class="row d-block">
+                        <div class="col-lg-2"></div>
+                        <div class="col-lg-8 center-form">
+                            <div class="p-lg-5 p-xs-1 p-sm-1">
                                 <div class="text-left">
                                     <h1 class="h4 text-gray-900 mb-4">
                                         {% if object.pk %}
@@ -42,9 +44,7 @@ <h1 class="h4 text-gray-900 mb-4">
                                 {% crispy form %}
                             </div>
                         </div>
-                    </div>
                 </div>
-            </div>
         </div>
     </div>
 {% else %}

diff --git a/fahari/templates/fragments/atoms/sidebar_toggle.html b/fahari/templates/fragments/atoms/sidebar_toggle.html
@@ -1,5 +1,5 @@
 {% load static i18n compress%}
 
-<div class="text-center d-none d-md-inline text-danger">
+<div class="text-center d-none d-md-inline">
     <button class="rounded-circle border-0" id="sidebarToggle"></button>
 </div>
diff --git a/fahari/templates/pages/common/facilities.html b/fahari/templates/pages/common/facilities.html
@@ -17,11 +17,11 @@ <h1 class="h3 mb-4 text-gray-800">
             {% endif %}
         </div>
     </div>
-    <div class="card-body">
-        <div class="table-responsive">
+
+        <div class="table-responsive p-3">
             <table
                 id="facilities-list"
-                class="table table-striped table-hover table-sm"
+                class="table table-striped table-sm"
                 style="width:100%"
                 data-server-side="true"
                 data-state-save="true"
@@ -44,7 +44,7 @@ <h1 class="h3 mb-4 text-gray-800">
                 </thead>
             </table>
         </div>
-    </div>
+
 </div>
 {% endblock content %}
 {% block inline_javascript %}