Skip to content

Commit

Permalink
Add template, view, and responsive styling to document list page
Browse files Browse the repository at this point in the history
  • Loading branch information
“OMosimege” committed Jul 23, 2024
1 parent c21b077 commit 48a1f7d
Show file tree
Hide file tree
Showing 5 changed files with 268 additions and 66 deletions.
78 changes: 69 additions & 9 deletions app/app/views.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,22 @@ def get_logo(project):
return logo


def get_languages(languages):
if languages.count() < 4:
languages_data = ", ".join(sorted(language.name for language in languages))
else:
languages_data = _("Multilingual")
return languages_data


def get_subjects(subjects):
if subjects.count() < 4:
subjects_data = ", ".join(sorted([subject.name for subject in subjects]))
else:
subjects_data = _("Multiple subjects")
return subjects_data


def projects(request):
template = "app/projects.html"

Expand Down Expand Up @@ -79,15 +95,8 @@ def projects(request):
project_subjects = project.subjects.all()
project_languages = project.languages.all()

if project_languages.count() < 4:
languages_data = ", ".join(sorted(language.name for language in project_languages))
else:
languages_data = _("Multilingual")

if project_subjects.count() < 4:
subjects_data = ", ".join(sorted([subject.name for subject in project_subjects]))
else:
subjects_data = _("Multiple subjects")
languages_data = get_languages(project_languages)
subjects_data = get_subjects(project_subjects)

logo = get_logo(project)

Expand Down Expand Up @@ -161,8 +170,59 @@ def institution_detail(request, institution_id):
def documents(request):
template = "app/documents.html"

subject_id = request.GET.get("subject")
language_id = request.GET.get("language")
institution_id = request.GET.get("institution")

documents = (
DocumentFile.objects.select_related("institution")
.prefetch_related("subjects", "languages")
.order_by("title")
)

if subject_id:
documents = documents.filter(subjects__id=subject_id)
if language_id:
documents = documents.filter(languages__id=language_id)
if institution_id:
documents = documents.filter(institution__id=institution_id)

paginator = Paginator(documents, 10)

page_number = request.GET.get("page")
page_obj = paginator.get_page(page_number)

subjects = Subject.objects.order_by("name")
languages = Language.objects.order_by("name")
institutions = Institution.objects.order_by("name")

document_data = []
for document in page_obj:
document_subjects = document.subjects.all()
document_languages = document.languages.all()

languages_data = get_languages(document_languages)
subjects_data = get_subjects(document_subjects)

document_data.append(
{
"document": document,
"subjects": subjects_data,
"languages": languages_data,
"institution_name": document.institution.name,
"description": document.description,
"url": document.url,
"category": document.document_type,
}
)

context = {
"current_page": "documents",
"page_obj": page_obj,
"documents": document_data,
"subjects": subjects,
"languages": languages,
"institutions": institutions,
}
return render(request, template_name=template, context=context)

Expand Down
62 changes: 53 additions & 9 deletions app/static/css/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -133,6 +133,41 @@ html {
background-color: var(--primary-fg);
border-color: var(--primary-fg);
}
.pagination-wrapper {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination {
display: flex;
list-style: none;
padding: 0;
border: 1px solid #000;
border-radius: 5px;
}
.pagination .page-item {
margin: 0;
border-left: 1px solid #000;
}
.pagination .page-item:first-child {
border-left: none;
}
.pagination .page-link {
padding: 5px 10px;
text-decoration: none;
color: var(--text-color);
}
.pagination .page-item.active .page-link {
background-color: var(--primary);
color: var(--primary-fg);
}
.pagination .page-item.disabled .page-link {
color: #6c757d;
}
.button-spacing {
margin-right: 10px;
}

/*Home page*/
.content-card {
border-color: var(--primary-red);
Expand Down Expand Up @@ -343,6 +378,10 @@ html {
.project-date-row {
font-size: 0.875rem;
}
.gap-2 > * {
margin-right: 0.5rem;
margin-bottom: 0.5rem;
}

/*Accounts*/
.user-account-body {
Expand Down Expand Up @@ -403,6 +442,13 @@ html {
padding-right: 20px;
margin-right: 10px;
}
.form-group.col-md-4 {
flex: 0 0 100%;
max-width: 100%;
}
.gap-2 > * {
margin-right: 0;
}
}

/*small devices (tablets, 600px and up) */
Expand Down Expand Up @@ -436,6 +482,13 @@ html {
.content-card {
font-size: smaller;
}
.form-group.col-md-4 {
flex: 0 0 100%;
max-width: 100%;
}
.gap-2 > * {
margin-right: 0;
}
}

/*Medium screens (tablets, between 768px and 1001px)*/
Expand Down Expand Up @@ -611,12 +664,3 @@ html {
display: flex;
}
}

/*Search Css*/
.checkbox-container {
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 */
}
107 changes: 106 additions & 1 deletion app/templates/app/documents.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,110 @@
{% load i18n %}

{% block content %}
<div class="filter-class">
<form method="GET" action="">
<div class="d-flex flex-wrap gap-2">
<div class="form-group flex-fill mb-2">
<label for="subject">{% trans "Subject" %}</label>
<select id="subject" name="subject" class="form-control">
<option value="">{% trans "All Subjects" %}</option>
{% for subject in subjects %}
<option value="{{ subject.id }}" {% if request.GET.subject == subject.id|stringformat:"s" %}selected{% endif %}>{{ subject.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group flex-fill mb-2">
<label for="language">{% trans "Language" %}</label>
<select id="language" name="language" class="form-control">
<option value="">{% trans "All Languages" %}</option>
{% for language in languages %}
<option value="{{ language.id }}" {% if request.GET.language == language.id|stringformat:"s" %}selected{% endif %}>{{ language.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group flex-fill mb-2">
<label for="institution">{% trans "Institution" %}</label>
<select id="institution" name="institution" class="form-control">
<option value="">{% trans "All Institutions" %}</option>
{% for institution in institutions %}
<option value="{{ institution.id }}" {% if request.GET.institution == institution.id|stringformat:"s" %}selected{% endif %}>{{ institution.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="d-flex flex-wrap">
<button type="submit" class="btn btn-primary mt-2 button-spacing">{% trans "Filter" %}</button>
<a href="{% url 'documents' %}" class="btn btn-secondary mt-2 button-spacing">{% trans "Reset" %}</a>
</div>
</form>
</div>

{% endblock content%}
<br />

<div class="project-list">
{% for document in documents %}
<div class="project-border">
<div class="row">
<h3>
{{ document.document.title }}
</h3>
<div class="card-text-project">
<a href="{{ document.document.url }}" target="_blank" class="project-url" title="External link">
{{ document.document.url }}
</a>
</div>
<div class="card-text-project project-text">
{{ document.institution_name }}
</div>
</div>
<div class="project-body">
<div class="card-text-description">
{{ document.description|truncatewords:30 }} <a href="{% url 'document_detail' document.document.id %}">{% trans "Read more" %}</a>
</div>
<div class="card-text-project">
{% if document.languages %}
<span class="icon-text"><i class="project-icon bi-vector-pen"></i></span>
<span class="icon-text">{{ document.languages }}</span>
{% endif %}
</div>
<div class="card-text-project">
{% if document.subjects %}
<span class="icon-text"><i class="project-icon bi-book"></i></span>
<span class="icon-text">{{ document.subjects }}</span>
{% endif %}
</div>
</div>
</div>

<br />
{% endfor %}
</div>

<div class="pagination-wrapper">
<ul class="pagination">
{% if page_obj.has_previous %}
<li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page=1">&laquo; {% trans "First" %}</a></li>
<li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}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 %}
<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 %}
<li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page={{ num }}">{{ num }}</a></li>
{% endif %}
{% endfor %}

{% if page_obj.has_next %}
<li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page={{ page_obj.next_page_number }}">{% trans "Next" %} &rsaquo;</a></li>
<li class="page-item"><a class="page-link" href="?{% if request.GET.subject %}subject={{ request.GET.subject }}&{% endif %}{% if request.GET.language %}language={{ request.GET.language }}&{% endif %}{% if request.GET.institution %}institution={{ request.GET.institution }}&{% endif %}page={{ page_obj.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>
{% endif %}
</ul>
</div>
{% endblock content %}
81 changes: 34 additions & 47 deletions app/templates/app/projects.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,53 +4,40 @@

{% block content %}
<div class="filter-class">
<form class="filter-form">

<div class="filter-label">
<label>{% trans "Filter:" %}</label>
</div>

<div class="form-group">
<label for="subject_select">{% trans "Subject" %}</label>
<select name="subject" class="form-control form-control-lg" id="subject_select">
<option value="">{% trans "All subjects" %}</option>
{% for subject in subjects %}
<option value="{{ subject.id }}" {% if request.GET.subject == subject.id|stringformat:"s" %}selected{% endif %}>
{{ subject.name }}
</option>
{% endfor %}
</select>
</div>

<div class="form-group">
<label for="language_select">{% trans "Language" %}</label>
<select name="language" class="form-control form-control-lg" id="language_select">
<option value="">{% trans "All languages" %}</option>
{% for language in languages %}
<option value="{{ language.id }}" {% if request.GET.language == language.id|stringformat:"s" %}selected{% endif %}>
{{ language.name }}
</option>
{% endfor %}
</select>
</div>

<div class="form-group">
<label for="institution_select">{% trans "Institution" %}</label>
<select name="institution" class="form-control form-control-lg" id="institution_select">
<option value="">{% trans "All institutions" %}</option>
{% for institution in institutions %}
<option value="{{ institution.id }}" {% if request.GET.institution == institution.id|stringformat:"s" %}selected{% endif %}>
{{ institution.name }}
</option>
{% endfor %}
</select>
</div>

<div class="button-group">
<input class="btn btn-apply" type="submit" value="{% trans 'Apply' %}">
<a href="{% url 'projects' %}" class="btn btn-reset">{% trans 'Reset' %}</a>
</div>

<form method="GET" action="">
<div class="d-flex flex-wrap gap-2">
<div class="form-group flex-fill mb-2">
<label for="subject">{% trans "Subject" %}</label>
<select id="subject" name="subject" class="form-control">
<option value="">{% trans "All Subjects" %}</option>
{% for subject in subjects %}
<option value="{{ subject.id }}">{{ subject.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group flex-fill mb-2">
<label for="language">{% trans "Language" %}</label>
<select id="language" name="language" class="form-control">
<option value="">{% trans "All Languages" %}</option>
{% for language in languages %}
<option value="{{ language.id }}">{{ language.name }}</option>
{% endfor %}
</select>
</div>
<div class="form-group flex-fill mb-2">
<label for="institution">{% trans "Institution" %}</label>
<select id="institution" name="institution" class="form-control">
<option value="">{% trans "All Institutions" %}</option>
{% for institution in institutions %}
<option value="{{ institution.id }}">{{ institution.name }}</option>
{% endfor %}
</select>
</div>
</div>
<div class="d-flex flex-wrap">
<button type="submit" class="btn btn-primary mt-2 button-spacing">{% trans "Filter" %}</button>
<a href="{% url 'projects' %}" class="btn btn-secondary mt-2 button-spacing">{% trans "Reset" %}</a>
</div>
</form>
</div>

Expand Down
Loading

0 comments on commit 48a1f7d

Please sign in to comment.