Skip to content

Commit

Permalink
additional styling to search page
Browse files Browse the repository at this point in the history
  • Loading branch information
“OMosimege” committed Jul 17, 2024
1 parent 10bd420 commit 98571d8
Show file tree
Hide file tree
Showing 3 changed files with 165 additions and 83 deletions.
1 change: 1 addition & 0 deletions app/app/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
61 changes: 57 additions & 4 deletions app/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand Down
186 changes: 107 additions & 79 deletions app/templates/app/search.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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 -->

Expand Down Expand Up @@ -168,69 +187,76 @@ <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"
value="{{ request.GET.search|default_if_none:'' }}">
<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>
</div>
</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>
</div>
</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>
</div>
</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>
Expand All @@ -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>
Expand Down

0 comments on commit 98571d8

Please sign in to comment.