From 98571d89d7b5d64b5f8809e572efd8e029f36e9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9COMosimege=E2=80=9D?=
 <“onalerona.mosimege@gmail.com”>
Date: Wed, 17 Jul 2024 10:44:11 +0200
Subject: [PATCH] additional styling to search page

---
 app/app/views.py              |   1 +
 app/static/css/styles.css     |  61 ++++++++++-
 app/templates/app/search.html | 186 +++++++++++++++++++---------------
 3 files changed, 165 insertions(+), 83 deletions(-)

diff --git a/app/app/views.py b/app/app/views.py
index 9e0eb798..c0be002e 100644
--- a/app/app/views.py
+++ b/app/app/views.py
@@ -247,6 +247,7 @@ def search(request):
         page_obj = paginator.page(paginator.num_pages)
 
     context = {
+        "current_page": "search",
         "search_results": paginator.page(page_obj.number),
         "filter": f,
         "documents": page_obj,
diff --git a/app/static/css/styles.css b/app/static/css/styles.css
index 1cf81195..a0a83fbc 100755
--- a/app/static/css/styles.css
+++ b/app/static/css/styles.css
@@ -74,6 +74,9 @@ html {
     background-color: var(--primary);
     border-color: var(--primary);
 }
+.btn-secondary{
+    margin-top:20px;
+}
 .btn-outline-primary{
     margin-top:20px;
     background: #2D4481;
@@ -358,14 +361,64 @@ html {
 .filter-label {
   font-weight: bold;
 }
+/* .checkbox-container {
+    max-height: 130px;
+    overflow-y: auto;
+    border: 1px solid;
+    border-radius: 1rem;
+    border-color: var(--primary);
+    padding: 1rem;
+    margin: 0 auto;
+} */
+/* .checkbox-container input[type="checkbox"] {
+    cursor: pointer;
+    margin-top: 0;
+} */
+.filter-checkbox {
+    /* word-wrap: break-word;
+    display: flex;
+    align-items: center;
+    justify-content: left;
+    width: 100%;
+    padding: 20px; */
+
+    display: flex;
+    align-items: flex-start;
+    gap: 10px;
+}
+.single-checkbox {
+    display: inline-block;
+    vertical-align: top;
+    white-space: nowrap;
+    word-break: keep-all;
+    width: 20px; /* Set to the width of your checkbox */
+}
+
+.checkbox-label {
+    display: inline-block;
+    vertical-align: top;
+    word-break: break-word; /* will break words to prevent overflow */
+    width: calc(100% - 25px); /* This will take up remaining space, subtract width of checkbox and a margin */
+}
+
 .checkbox-container {
+    max-height: 90px; /* Adjust this value as needed */
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch; /* Enables smooth scrolling on iOS */
+    border: 1px solid; /* Optional: add a border */
+    box-sizing: border-box; /* Ensures padding and border are included in the height */
+    border-radius: 0.3rem;
+    border-color: var(--primary);
+    padding: 1rem;
+}
+
+/* Ensures checkboxes are styled properly */
+.checkbox-container input[type="checkbox"] {
+    margin-right: 10px;
     cursor: pointer;
-    max-height: 130px; /* Adjust based on your line-height and padding to show only 4 rows */
-    overflow-y: auto; /* Enable vertical scrollbar when content overflows */
-    border: 1px solid #ced4da; /* Bootstrap's form control border color */
-    border-radius: 0.25rem; /* Bootstrap's form control border radius */
 }
 
+
 /*Error pages*/
 .body-card {
     border-color: var(--primary-red);
diff --git a/app/templates/app/search.html b/app/templates/app/search.html
index ac04dfc2..39910841 100644
--- a/app/templates/app/search.html
+++ b/app/templates/app/search.html
@@ -10,73 +10,83 @@
                 <div class="row">
 
                   <!-- Content start for the first column -->
-                  <div class="col-md-2">
+                  <div class="col-md-4">
                     <!-- Start of side filters -->
                     <form method="get" class="container">
-                        <div class="row d-sm-none">
+                        <div class="d-none d-md-block">
 
-                                <div class="form-group">
-                                    <label for="id_subjects" class="filter-label mt-3">Institution</label>
-                                    <div class="checkbox-container">
-                                        {% for checkbox in filter.form.institution %}
-                                            <div class="form-check">
-                                                {{ checkbox.tag }}
-                                                <label class="form-check-label"
-                                                       for="{{ checkbox.id_for_label }}">
-                                                    {{ checkbox.choice_label }}
-                                                </label>
-                                            </div>
-                                        {% endfor %}
-                                    </div>
-                                </div>
+                          <div class="form-group">
+                            <label for="id_institution"
+                                  class="mt-3 mb-2 filter-label">Institution</label>
+                             <div class="checkbox-container">
+                                 {% for checkbox in filter.form.institution %}
+                                     <div>
+                                         <label for="{{ checkbox.id_for_label }}">
+                                         {{ checkbox.tag }}
+                                             {{ checkbox.choice_label }}
+                                         </label>
+                                         <br>
+                                     </div>
+                                 {% endfor %}
+                             </div>
+                          </div>
 
 
-                                <div class="form-group">
-                                    <label for="id_subjects" class="filter-label mt-3">Document Type</label>
-                                    <div class="checkbox-container">
-                                        {% for checkbox in filter.form.document_type %}
-                                            <div class="form-check">
-                                                {{ checkbox.tag }}
-                                                <label class="form-check-label" for="{{ checkbox.id_for_label }}">
-                                                    {{ checkbox.choice_label }}
-                                                </label>
-                                            </div>
-                                        {% endfor %}
-                                    </div>
-                                </div>
+                          <div class="form-group">
+                              <label for="id_document_type"
+                                      class="mt-3 mb-2 filter-label">Document Type</label>
+                               <div class="checkbox-container">
+                                   {% for checkbox in filter.form.document_type %}
+                                       <div>
+                                           <label for="{{ checkbox.id_for_label }}">
+                                           {{ checkbox.tag }}
+                                               {{ checkbox.choice_label }}
+                                           </label>
+                                           <br>
+                                       </div>
+                                   {% endfor %}
+                               </div>
+                          </div>
 
 
-                                <div class="form-group">
-                                    <label for="id_subjects" class="filter-label mt-3">Subjects</label>
-                                    <div class="checkbox-container">
-                                        {% for checkbox in filter.form.subjects %}
-                                            <div class="form-check">
-                                                {{ checkbox.tag }}
-                                                <label class="form-check-label" for="{{ checkbox.id_for_label }}">
-                                                    {{ checkbox.choice_label }}
-                                                </label>
-                                            </div>
-                                        {% endfor %}
-                                    </div>
-                                </div>
+                          <div class="form-group">
+                              <label for="id_subjects"
+                                     class="mt-3 mb-2 filter-label">Subjects</label>
+                               <div class="checkbox-container">
+                                   {% for checkbox in filter.form.subjects %}
+                                       <div>
+                                           <label for="{{ checkbox.id_for_label }}">
+                                           {{ checkbox.tag }}
+                                               {{ checkbox.choice_label }}
+                                           </label>
+                                           <br>
+                                       </div>
+                                   {% endfor %}
+                               </div>
+                          </div>
 
 
-                                <div class="form-group">
-                                    <label for="id_subjects"class="filter-label mt-3">Languages</label>
-                                    <div class="checkbox-container">
-                                        {% for checkbox in filter.form.languages %}
-                                            <div class="form-check">
-                                                {{ checkbox.tag }}
-                                                <label class="form-check-label" for="{{ checkbox.id_for_label }}">
-                                                    {{ checkbox.choice_label }}
-                                                </label>
-                                            </div>
-                                        {% endfor %}
-                                    </div>
-                                </div>
-                                <br>
-                                <input type="submit" class="btn btn-primary float-left"/>
-                                <br>
+                          <div class="form-group">
+                              <label for="id_languages"
+                                     class="mt-3 mb-2 filter-label">Languages</label>
+                               <div class="checkbox-container">
+                                   {% for checkbox in filter.form.languages %}
+                                       <div>
+                                           <label for="{{ checkbox.id_for_label }}">
+                                           {{ checkbox.tag }}
+                                               {{ checkbox.choice_label }}
+                                           </label>
+                                           <br>
+                                       </div>
+                                   {% endfor %}
+                               </div>
+                          </div>
+
+                          <br>
+                          <input type="submit" class="btn btn-primary float-left"/>
+                          <!-- <input type="reset" class="btn btn-secondary float-right" value="Clear"/> -->
+                          <a href="{% url 'search' %}" class="btn btn-secondary float-right">{% trans 'Reset' %}</a>
+                          <br>
                         </div>
 
                     </form>
@@ -90,13 +100,22 @@
                   <!-- Content start for the second column -->
                   <div class="col-md-8">
                     <!-- Start of search -->
-                    <h5 class="card-title mt-5">{% trans "Search a term" %}</h5>
                     <form method="get" class="container">
-                        <input type="search" name="{{ filter.form.search.name }}" placeholder="{% trans 'Search...' %}"
-                               class="form-control search-input"
-                               value="{{ request.GET.search|default_if_none:'' }}">
-                        <br>
-                        <input type="submit" class="btn btn-primary float-left"/>
+                        <div class="form-row align-items-center">
+                            <div class="col-auto">
+                                <h5 class="card-title mt-2">{% trans "Search a term" %}</h5>
+                            </div>
+                            <div class="col">
+                                <input type="search" name="{{ filter.form.search.name }}" placeholder="{% trans 'Search...' %}"
+                                       class="form-control search-input"
+                                       value="{{ request.GET.search|default_if_none:'' }}">
+                            </div>
+                            <div class="col-auto">
+                                <input type="submit" class="btn btn-primary"/>
+                                <!-- <input type="reset" class="btn btn-secondary float-right" value="Clear"/> -->
+                                <a href="{% url 'search' %}" class="btn btn-secondary float-right">{% trans 'Reset' %}</a>
+                            </div>
+                        </div>
                     </form>
                     <!-- End of search -->
 
@@ -168,7 +187,7 @@ <h5 class="card-title mt-5">{% trans "Search a term" %}</h5>
                     <!-- End of pagination -->
 
                     <!-- Start of bottom filters -->
-                    <div class="d-none d-md-block">
+                    <div class="d-sm-none">
                     <form method="get" class="container">
                         <input type="search" name="{{ filter.form.search.name }}" placeholder="{% trans 'Search...' %}"
                                class="form-control search-input"
@@ -176,16 +195,17 @@ <h5 class="card-title mt-5">{% trans "Search a term" %}</h5>
                         <br>
                         <div class="row">
                             <div class="col-md-3">
-                                <div class="form-group">
-                                    <label for="id_subjects">Institution</label>
+                                <div>
+                                  <label for="id_institution"
+                                        class="mt-3 mb-2 filter-label">Institution</label>
                                     <div class="checkbox-container">
                                         {% for checkbox in filter.form.institution %}
-                                            <div class="form-check">
+                                            <div>
+                                                <label for="{{ checkbox.id_for_label }}">
                                                 {{ checkbox.tag }}
-                                                <label class="form-check-label"
-                                                       for="{{ checkbox.id_for_label }}">
                                                     {{ checkbox.choice_label }}
                                                 </label>
+                                                <br>
                                             </div>
                                         {% endfor %}
                                     </div>
@@ -193,14 +213,16 @@ <h5 class="card-title mt-5">{% trans "Search a term" %}</h5>
                             </div>
                             <div class="col-md-3">
                                 <div class="form-group">
-                                    <label for="id_subjects">Document Type</label>
+                                  <label for="id_document_type"
+                                        class="mt-3 mb-2 filter-label">Document Type</label>
                                     <div class="checkbox-container">
                                         {% for checkbox in filter.form.document_type %}
-                                            <div class="form-check">
+                                            <div>
+                                                <label for="{{ checkbox.id_for_label }}">
                                                 {{ checkbox.tag }}
-                                                <label class="form-check-label" for="{{ checkbox.id_for_label }}">
                                                     {{ checkbox.choice_label }}
                                                 </label>
+                                                <br>
                                             </div>
                                         {% endfor %}
                                     </div>
@@ -208,14 +230,16 @@ <h5 class="card-title mt-5">{% trans "Search a term" %}</h5>
                             </div>
                             <div class="col-md-3">
                                 <div class="form-group">
-                                    <label for="id_subjects">Subjects</label>
+                                  <label for="id_subjects"
+                                        class="mt-3 mb-2 filter-label">Subjects</label>
                                     <div class="checkbox-container">
                                         {% for checkbox in filter.form.subjects %}
-                                            <div class="form-check">
+                                            <div>
+                                                <label for="{{ checkbox.id_for_label }}">
                                                 {{ checkbox.tag }}
-                                                <label class="form-check-label" for="{{ checkbox.id_for_label }}">
                                                     {{ checkbox.choice_label }}
                                                 </label>
+                                                <br>
                                             </div>
                                         {% endfor %}
                                     </div>
@@ -223,14 +247,16 @@ <h5 class="card-title mt-5">{% trans "Search a term" %}</h5>
                             </div>
                             <div class="col-md-3">
                                 <div class="form-group">
-                                    <label for="id_subjects">Languages</label>
+                                  <label for="id_languages"
+                                        class="mt-3 mb-2 filter-label">Languages</label>
                                     <div class="checkbox-container">
                                         {% for checkbox in filter.form.languages %}
-                                            <div class="form-check">
+                                            <div>
+                                                <label for="{{ checkbox.id_for_label }}">
                                                 {{ checkbox.tag }}
-                                                <label class="form-check-label" for="{{ checkbox.id_for_label }}">
                                                     {{ checkbox.choice_label }}
                                                 </label>
+                                                <br>
                                             </div>
                                         {% endfor %}
                                     </div>
@@ -239,6 +265,8 @@ <h5 class="card-title mt-5">{% trans "Search a term" %}</h5>
                         </div>
                         <br>
                         <input type="submit" class="btn btn-primary float-left"/>
+                        <!-- <input type="reset" class="btn btn-secondary float-right" value="Clear"/> -->
+                        <a href="{% url 'search' %}" class="btn btn-secondary float-right">{% trans 'Reset' %}</a>
                         <br>
                     </form>
                     </div>