Add search page template and styling

add styling for mobile and desktop screen responsiveness
SADiLaR · Jul 30, 2024 · 82c7efb · 82c7efb
1 parent 54e282e
commit 82c7efb
Show file tree

Hide file tree

Showing 4 changed files with 345 additions and 110 deletions.
diff --git a/app/general/filters.py b/app/general/filters.py
@@ -56,6 +56,7 @@ def filter_queryset(self, queryset):
             "search_headline",
             "view",
             "logo_url",
+            "associated_url",
         )
 
         # In the queries below, any differences between models must be fixed
@@ -68,6 +69,7 @@ def filter_queryset(self, queryset):
                 heading=F("name"),
                 view=Value("project_detail"),
                 logo_url=F("logo"),
+                associated_url=F("url"),
                 search_headline=SearchHeadline("description", query, max_words=15, min_words=10),
                 rank=SearchRank(project_search_vector, query, normalization=16),
                 search=project_search_vector,
@@ -86,6 +88,7 @@ def filter_queryset(self, queryset):
             heading=F("title"),
             view=Value("document_detail"),
             logo_url=Value(""),
+            associated_url=F("url"),
             rank=search_rank,
             search_headline=search_headline,
         ).values(*fields)

diff --git a/app/static/css/styles.css b/app/static/css/styles.css
@@ -21,6 +21,11 @@ html {
     min-height: 100%;
 }
 
+input[type="checkbox"] {
+  width: 1.5em;
+  height: 1.5em;
+}
+
 .content {
     overflow: hidden;
     padding-bottom: 130px;
@@ -78,6 +83,9 @@ html {
     background-color: var(--primary);
     border-color: var(--primary);
 }
+.btn-secondary{
+    margin-top:20px;
+}
 .btn-outline-primary{
     margin-top:20px;
     background: #2D4481;
@@ -141,6 +149,7 @@ html {
     display: flex;
     justify-content: center;
     margin-top: 20px;
+    overflow-x: auto;
 }
 .pagination {
     display: flex;
@@ -151,7 +160,7 @@ html {
 }
 .pagination .page-item {
     margin: 0;
-    border-left: 1px solid #000;
+    background-color: var(--primary);
 }
 .pagination .page-item:first-child {
     border-left: none;
@@ -160,6 +169,7 @@ html {
     padding: 5px 10px;
     text-decoration: none;
     color: var(--text-color);
+    height: 100%;
 }
 .pagination .page-item.active .page-link {
     background-color: var(--primary);
@@ -397,6 +407,48 @@ html {
     max-width: 500px;
 }
 
+/*Search page*/
+.filter-label {
+  font-weight: bold;
+}
+.filter-checkbox {
+    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;
+}
+
+.checkbox-label {
+    display: inline-block;
+    vertical-align: top;
+    word-break: break-word;
+    width: calc(100% - 25px);
+}
+
+.checkbox-container {
+    max-height: 90px;
+    overflow-y: auto;
+    -webkit-overflow-scrolling: touch;
+    border: 1px solid;
+    box-sizing: border-box;
+    border-radius: 0.3rem;
+    border-color: #ccc;
+    padding: 1rem;
+}
+
+/* Ensures checkboxes are styled properly */
+.checkbox-container input[type="checkbox"] {
+    margin-right: 10px;
+    cursor: pointer;
+}
+
+
 /*Error pages*/
 .body-card {
     border-color: var(--primary-red);
@@ -422,6 +474,14 @@ html {
     .section {
       padding-right: 30px;
     }
+    .pagination .page-link {
+        padding: 5px;
+        font-size: 12px;
+    }
+
+    .pagination-wrapper {
+        padding: 0 10px;
+    }
 
     /*Institutions page*/
     .uni-card {
@@ -467,6 +527,14 @@ html {
     .section {
       padding-right: 20px;
     }
+    .pagination .page-link {
+        padding: 5px;
+        font-size: 12px;
+    }
+
+    .pagination-wrapper {
+        padding: 0 10px;
+    }
 
     /*Institutions page*/
     .all-cards {
@@ -564,6 +632,8 @@ html {
         width: 70%;
         flex: 1;
         min-width: 200px;
+        overflow: hidden;
+        padding-right: 15px;
     }
     .project-right-col {
         width: 30%;
@@ -670,7 +740,7 @@ html {
     display: flex;
     font-size: 0.875rem;
   }
-  .filter-form {
+  .filter-form
+  {
       display: flex;
   }
-}