Skip to content

Commit

Permalink
add additional styling to search
Browse files Browse the repository at this point in the history
  • Loading branch information
“OMosimege” committed Jul 30, 2024
1 parent e0872fe commit 2d8ce2e
Show file tree
Hide file tree
Showing 4 changed files with 126 additions and 17 deletions.
3 changes: 3 additions & 0 deletions app/general/filters.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
Expand All @@ -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)
Expand Down
92 changes: 89 additions & 3 deletions app/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -141,6 +144,7 @@ html {
display: flex;
justify-content: center;
margin-top: 20px;
overflow-x: auto; /* Allow horizontal scrolling */
}
.pagination {
display: flex;
Expand All @@ -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;
Expand All @@ -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);
Expand Down Expand Up @@ -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);
Expand All @@ -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 {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -670,7 +756,7 @@ html {
display: flex;
font-size: 0.875rem;
}
.filter-form {
.filter-form
{
display: flex;
}
}
44 changes: 31 additions & 13 deletions app/templates/app/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,22 +124,40 @@ <h5 class="card-title mt-2">{% trans "Search a term" %}</h5>
<!-- Start of search results -->
<div class="container">
{% for result in search_results %}
<div>
<h2><a href="{% url result.view result.id %}">{{ result.heading }}</a></h2>
<p>{{ result.description | truncatewords:10 }}</p>

<div class="project-row">
<div class="project-left-col">
<h3>
<a class="project-name" href="{% url result.view result.id %}">
{{ result.heading }}
</a>
</h3>
<div class="card-text-project">
<a href="{{ result.associated_url }}" target="_blank" class="project-url" title="External link">
{{ result.associated_url }}
</a>
</div>
<!-- <h2><a href="{% url result.view result.id %}">{{ result.heading }}</a></h2> -->
<div class="card-text-description">
{{ result.description|truncatewords:20 }} <a href="{% url result.view result.id %}">{% trans "Read more" %}</a>
</div>
<!-- <p>{{ result.description | truncatewords:10 }}</p> -->
<p>
<span class="mr-5"><b>{% trans "Excerpt:" %}</b></span>
<span>{{ result.search_headline|safe }}</span>
</p>
<p>
<span><i>{{ result.rank }}</i></span>
</p>
</div>
<div class="project-right-col">
<p>
{% if result.logo_url %}
<img src="/media/{{ result.logo_url }}" alt="{{ result.name }} logo"
class="project-logo">
{% endif %}
</p>
<p>
<span><i>{{ result.rank }}</i></span>
</p>
</div>
</div>
{% endfor %}
</div>
Expand All @@ -150,25 +168,25 @@ <h2><a href="{% url result.view result.id %}">{{ result.heading }}</a></h2>
<hr>
<div class="pagination-wrapper">
<ul class="pagination">
{% if page_obj.has_previous %}
{% if documents.has_previous %}
<li class="page-item"><a class="page-link" href="?{{ url_params }}&page=1">&laquo; {% trans "First" %}</a></li>
<li class="page-item"><a class="page-link" href="?{{ url_params }}&page={{ page_obj.previous_page_number }}">&lsaquo; {% trans "Previous" %}</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#">&laquo; {% trans "First" %}</a></li>
<li class="page-item disabled"><a class="page-link" href="#">&lsaquo; {% trans "Previous" %}</a></li>
{% endif %}

{% for num in page_obj.paginator.page_range %}
{% if page_obj.number == num %}
{% for num in documents.paginator.page_range %}
{% if documents.number == num %}
<li class="page-item active"><a class="page-link" href="#">{{ num }}</a></li>
{% elif num > page_obj.number|add:-3 and num < page_obj.number|add:3 %}
{% elif num > documents.number|add:-3 and num < documents.number|add:3 %}
<li class="page-item"><a class="page-link" href="?{{ url_params }}&page={{ num }}">{{ num }}</a></li>
{% endif %}
{% endfor %}

{% if page_obj.has_next %}
<li class="page-item"><a class="page-link" href="?{{ url_params }}&page={{ page_obj.next_page_number }}">{% trans "Next" %} &rsaquo;</a></li>
<li class="page-item"><a class="page-link" href="?{{ url_params }}&page={{ page_obj.paginator.num_pages }}">{% trans "Last" %} &raquo;</a></li>
{% if documents.has_next %}
<li class="page-item"><a class="page-link" href="?{{ url_params }}&page={{ documents.next_page_number }}">{% trans "Next" %} &rsaquo;</a></li>
<li class="page-item"><a class="page-link" href="?{{ url_params }}&page={{ documents.paginator.num_pages }}">{% trans "Last" %} &raquo;</a></li>
{% else %}
<li class="page-item disabled"><a class="page-link" href="#">{% trans "Next" %} &rsaquo;</a></li>
<li class="page-item disabled"><a class="page-link" href="#">{% trans "Last" %} &raquo;</a></li>
Expand Down
4 changes: 3 additions & 1 deletion app/templates/base.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,8 @@
<div class="language-toggle">
<form action="{% url 'set_language' %}" method="post">
{% csrf_token %}
<select class=form-select-sm name="language">
<label for="language-select">{% trans "Select Language:" %}</label>
<select class=form-select-sm name="language" id="language-select">
{% get_current_language as LANGUAGE_CODE %}
{% get_available_languages as LANGUAGES %}
{% for lang in LANGUAGES %}
Expand All @@ -111,6 +112,7 @@
<input class="btn btn-language btn-sm" type="submit" value="{% trans 'Change language' %}">
</form>
</div>

</div>
</footer>
<!-- * app footer -->
Expand Down

0 comments on commit 2d8ce2e

Please sign in to comment.