From 2d8ce2e0d6b6e58878920d837cf44749e0d7863c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9COMosimege=E2=80=9D?= <“onalerona.mosimege@gmail.com”> Date: Tue, 30 Jul 2024 08:41:37 +0200 Subject: [PATCH] add additional styling to search --- app/general/filters.py | 3 ++ app/static/css/styles.css | 92 +++++++++++++++++++++++++++++++++-- app/templates/app/search.html | 44 ++++++++++++----- app/templates/base.html | 4 +- 4 files changed, 126 insertions(+), 17 deletions(-) diff --git a/app/general/filters.py b/app/general/filters.py index 12f670a4..0f87d0b2 100644 --- 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 index a14dfde2..d2036bff 100755 --- a/app/static/css/styles.css +++ b/app/static/css/styles.css @@ -78,6 +78,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 +144,7 @@ html { display: flex; justify-content: center; margin-top: 20px; + overflow-x: auto; /* Allow horizontal scrolling */ } .pagination { display: flex; @@ -151,7 +155,8 @@ html { } .pagination .page-item { margin: 0; - border-left: 1px solid #000; + /* border-left: 1px solid #000; */ + background-color: var(--primary); } .pagination .page-item:first-child { border-left: none; @@ -160,6 +165,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 +403,68 @@ html { max-width: 500px; } +/*Search page*/ +.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: #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 +490,15 @@ html { .section { padding-right: 30px; } + .pagination .page-link { + padding: 5px; /* Reduce padding */ + font-size: 12px; /* Reduce font size */ + /* height: 100%; */ + } + + .pagination-wrapper { + padding: 0 10px; /* Add padding to avoid horizontal scroll bar overlap */ + } /*Institutions page*/ .uni-card { @@ -467,6 +544,15 @@ html { .section { padding-right: 20px; } + .pagination .page-link { + padding: 5px; /* Reduce padding */ + font-size: 12px; /* Reduce font size */ + /* height: 100%; */ + } + + .pagination-wrapper { + padding: 0 10px; /* Add padding to avoid horizontal scroll bar overlap */ + } /*Institutions page*/ .all-cards { @@ -670,7 +756,7 @@ html { display: flex; font-size: 0.875rem; } - .filter-form { + .filter-form + { display: flex; } -} diff --git a/app/templates/app/search.html b/app/templates/app/search.html index d67d1ee9..a3f281ea 100644 --- a/app/templates/app/search.html +++ b/app/templates/app/search.html @@ -124,22 +124,40 @@
{% trans "Search a term" %}
{% for result in search_results %} -
-

{{ result.heading }}

-

{{ result.description | truncatewords:10 }}

+ +
+
+

+ + {{ result.heading }} + +

+
+ + {{ result.associated_url }} + +
+ +
+ {{ result.description|truncatewords:20 }} {% trans "Read more" %} +
+

{% trans "Excerpt:" %} {{ result.search_headline|safe }}

+

+ {{ result.rank }} +

+
+

{% if result.logo_url %} {% endif %}

-

- {{ result.rank }} -

+
{% endfor %}
@@ -150,7 +168,7 @@

{{ result.heading }}