Skip to content

UI Refactor: Homepage, Dashboard, and Global Navbar (#302, #303) #364

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
mnietona wants to merge 18 commits into
base: main
Choose a base branch
from
Open

UI Refactor: Homepage, Dashboard, and Global Navbar (#302, #303) #364

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
e61549f
UI: Modernize landing page and add student initiative disclaimer (#302)
mnietona Mar 18, 2026
f6c3da4
UI: Harmonize login, navbar and syslogin with ULB branding (#302, #303)
mnietona Mar 18, 2026
79a18e0
style: add centralized CSS (style.css) and link it in base.html
mnietona Mar 18, 2026
a14d62b
ui: harmonize navbar and index with new ULB design
mnietona Mar 18, 2026
2c645c4
feat(ui): redesign student dashboard (grid layout, dynamic scroll, re…
mnietona Mar 18, 2026
70b37f0
style(ui): improve base layout responsiveness and fix sticky footer
mnietona Mar 19, 2026
eb06a54
style(ui): modernize dashboard and onboarding pages (fixes #302, #303)
mnietona Mar 19, 2026
f2ebf4c
style(ui): redesign moderation request flow for better UX
mnietona Mar 19, 2026
dcf0057
style: modernize base layout and noauth shell with Bootstrap 5
mnietona Mar 19, 2026
5f0b3c2
feat(ui): redesign dashboard with new favorites and recent docs cards
mnietona Mar 19, 2026
87ab94e
feat(catalog): improve finder UI and fix favorites redirection logic
mnietona Mar 19, 2026
ba8f74e
feat(ui): overhaul course details view and favorites management page
mnietona Mar 19, 2026
bbd92fa
style(www): refine navbar responsiveness and fix recent docs scroll l…
mnietona Mar 19, 2026
b259a79
feat(documents): modernize document viewer UI and noauth preview
mnietona Mar 19, 2026
52b0993
feat(documents): redesign file upload dropzone and bulk import UI
mnietona Mar 19, 2026
c7c71e3
feat(documents): improve document settings, reupload flow, and report…
mnietona Mar 19, 2026
74ae2d7
style(search): refine course autocomplete results and handle archived…
mnietona Mar 19, 2026
7c21641
style(ui): modernize base error template and update main routing
mnietona Mar 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
449 changes: 221 additions & 228 deletions catalog/templates/catalog/course.html
View file
Open in desktop

Large diffs are not rendered by default.

192 changes: 100 additions & 92 deletions catalog/templates/catalog/finder.html
View file
Open in desktop

Large diffs are not rendered by default.

100 changes: 94 additions & 6 deletions catalog/templates/catalog/my_courses.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,100 @@
{% extends "base.html" %}
{% load static %}

{% block title %}Liste des cours{% endblock %}
{% block title %}Mes cours suivis - DocHub{% endblock %}

{% block header %}
<div class="bg-ulb text-white py-4 shadow-sm mb-4" style="background-image: linear-gradient(rgba(0, 84, 154, 0.9), rgba(0, 84, 154, 0.95));">
<div class="container-xl d-flex align-items-center justify-content-between">
<div class="d-flex align-items-center gap-3">
<div class="bg-white rounded-circle shadow-sm d-flex align-items-center justify-content-center text-ulb flex-shrink-0" style="width: 50px; height: 50px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-bookmarks-fill" viewBox="0 0 16 16">
<path d="M2 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L7 13.101l-4.223 2.815A.5.5 0 0 1 2 15.5V4z"/>
<path d="M4.268 1A2 2 0 0 1 6 0h6a2 2 0 0 1 2 2v11.5a.5.5 0 0 1-.777.416L13 13.768V2a1 1 0 0 0-1-1H4.268z"/>
</svg>
</div>
<div>
<h1 class="fs-3 fw-bold mb-0">Mes abonnements</h1>
<p class="mb-0 text-white-50" style="font-size: 0.9rem;">Gère la liste des cours que tu suis pour ton tableau de bord.</p>
</div>
</div>

{% if request.user.courses_set.all %}
<div class="d-none d-md-block">
<a href="{% url 'catalog:unfollow_all_courses' %}" class="btn btn-outline-light btn-sm rounded-pill px-3 fw-medium">
Tout supprimer
</a>
</div>
{% endif %}
</div>
</div>
{% endblock header %}

{% block content %}
{% if user.following_courses|length > 0 %}
<a href="{% url 'catalog:unfollow_all_courses' %}" class="button red hide-on-mobile" style="position: absolute;right: 2em;top: 3em;">
Me désabonner de tous les cours
</a>
{% endif %}
<div class="container-xl">

{% if request.user.courses_set.all %}
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-3 mb-5">
{% for course in request.user.courses_set.all %}
<div class="col">
<div class="card h-100 border-0 shadow-sm rounded-4 hover-scale-sm transition-all bg-white overflow-hidden">
<div class="card-body p-3 d-flex align-items-center gap-3">
<div class="bg-light text-ulb rounded-3 p-3 d-flex align-items-center justify-content-center" style="width: 50px; height: 50px;">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-folder2-open" viewBox="0 0 16 16">
<path d="M1 3.5A1.5 1.5 0 0 1 2.5 2h2.764c.958 0 1.76.56 2.311 1.184C7.985 3.648 8.48 4 9 4h4.5A1.5 1.5 0 0 1 15 5.5v5a.5.5 0 0 1-.5.5H1.5a.5.5 0 0 1-.5-.5v-5zm1 1v5h12v-5H2.5z"/>
<path d="M1 8.5A1.5 1.5 0 0 1 2.5 7h11A1.5 1.5 0 0 1 15 8.5v5a1.5 1.5 0 0 1-1.5 1.5h-11A1.5 1.5 0 0 1 1 13.5v-5z"/>
</svg>
</div>

<div class="flex-grow-1 overflow-hidden">
<a href="{% url 'catalog:course_show' course.slug %}" class="text-decoration-none text-dark">
<div class="text-truncate fw-bold mb-0" style="font-size: 0.95rem;">{{ course.name }}</div>
<small class="badge bg-ulb bg-opacity-10 fw-bold">{{ course.slug|upper }}</small>
</a>
</div>

<div class="flex-shrink-0">
<form method="POST" action="{% url 'catalog:leave_course' course.slug %}?next={% url 'catalog:my_courses' %}">
{% csrf_token %}
<button type="submit" class="btn btn-light rounded-circle text-danger p-2 shadow-sm border" title="Ne plus suivre">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash3-fill" viewBox="0 0 16 16">
<path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5Zm-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5ZM4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06Zm6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528ZM8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5Z"/>
</svg>
</button>
</form>
</div>
</div>
</div>
</div>
{% endfor %}
</div>

<div class="d-md-none text-center mb-5">
<a href="{% url 'catalog:unfollow_all_courses' %}" class="btn btn-outline-danger rounded-pill px-4">
Se désabonner de tous les cours
</a>
</div>

{% else %}
<div class="row justify-content-center py-5">
<div class="col-lg-6">
<div class="card border-0 shadow-sm rounded-4 text-center p-5 bg-white">
<div class="bg-light rounded-circle shadow-sm d-inline-flex align-items-center justify-content-center mb-4 mx-auto text-muted" style="width: 80px; height: 80px;">
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
<path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.565.565 0 0 0-.163-.505L1.71 6.745l4.052-.576a.525.525 0 0 0 .393-.288L8 2.223l1.847 3.658a.525.525 0 0 0 .393.288l4.052.575-2.906 2.77a.565.565 0 0 0-.163.506l.694 3.957-3.686-1.894a.503.503 0 0 0-.461 0z"/>
</svg>
</div>
<h3 class="fs-4 fw-bold text-dark mb-3">Tu ne suis aucun cours</h3>
<p class="text-muted mx-auto mb-4" style="max-width: 400px; line-height: 1.6;">
Ajoute des cours en favoris pour les retrouver plus vite et être notifié des nouveaux documents.
</p>
<a class="btn btn-ulb rounded-pill shadow-sm px-4 py-2 fw-medium" href="{% url 'catalog:finder_root' %}">
Explorer le catalogue
</a>
</div>
</div>
</div>
{% endif %}

</div>
{% endblock content %}
31 changes: 18 additions & 13 deletions catalog/templates/catalog/noauth/course.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,17 +9,22 @@
{% endblock opengraph %}

{% block preview %}
<h1 class="text-center">{{ course.slug|upper }}</h1>
<p>
Le cours de <strong>{{ course.name }} ({{ course.slug|upper }})</strong> contient
{{ documents.count }} documents
{% if threads.count > 2 %}
et {{ threads.count }} discussions.
{% endif %}
</p>
<p>
{% if followers_count > 1 %}
{{ followers_count }} personnes sont abonnées à ce cours.
{% endif %}
</p>
<div class="text-center">
<h1 class="h3 fw-bold mb-3">{{ course.slug|upper }}</h1>

<div class="alert alert-secondary border-0 bg-light p-3 mb-0" style="font-size: 0.95rem;">
<p class="mb-1">
Le cours de <strong>{{ course.name }} ({{ course.slug|upper }})</strong> contient
<strong>{{ documents.count }}</strong> document{{ documents.count|pluralize }}
{% if threads.count > 2 %}
et <strong>{{ threads.count }}</strong> discussions.
{% endif %}
</p>
{% if followers_count > 1 %}
<p class="mb-0 text-muted small">
{{ followers_count }} personnes sont abonnées à ce cours.
</p>
{% endif %}
</div>
</div>
{% endblock preview %}
1 change: 1 addition & 0 deletions catalog/urls.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,4 +15,5 @@
path("", catalog.views.finder_root, name="finder_root"),
path("f/", RedirectView.as_view(pattern_name="catalog:finder_root")),
path("f/<path:slugs>/", catalog.views.finder, name="finder"),
path("my/", catalog.views.my_courses, name="my_courses"),
]
2 changes: 1 addition & 1 deletion catalog/views.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,7 +106,7 @@ def my_courses(request):
@login_required
def unfollow_all_courses(request):
request.user.courses_set.clear()
return redirect("home")
return redirect("catalog:my_courses")


@dataclass
Expand Down
68 changes: 44 additions & 24 deletions documents/templates/documents/document_bulk.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,51 @@
{% extends "base.html" %}

{% block title %}Ré-uploader {{ document.name }}{% endblock %}
{% block title %}Import massif reçu - {{ course.slug|upper }}{% endblock %}

{% block content %}
<a href="{% url "catalog:course_show" course %}"
class="text-reset text-decoration-none d-flex align-items-center gap-1">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor"
class="bi bi-arrow-left hover-translate"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M15 8a.5.5 0 0 0-.5-.5H2.707l3.147-3.146a.5.5 0 1 0-.708-.708l-4 4a.5.5 0 0 0 0 .708l4 4a.5.5 0 0 0 .708-.708L2.707 8.5H14.5A.5.5 0 0 0 15 8z"/>
</svg>
<span class="hover-underline">{{ course.slug|upper }} {{ course.name }}</span>
</a>
<div class="alert alert-success mt-2 d-flex align-items-center gap-2" role="alert">
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor" class="bi bi-cloud-upload"
viewBox="0 0 16 16">
<path fill-rule="evenodd"
d="M4.406 1.342A5.53 5.53 0 0 1 8 0c2.69 0 4.923 2 5.166 4.579C14.758 4.804 16 6.137 16 7.773 16 9.569 14.502 11 12.687 11H10a.5.5 0 0 1 0-1h2.688C13.979 10 15 8.988 15 7.773c0-1.216-1.02-2.228-2.313-2.228h-.5v-.5C12.188 2.825 10.328 1 8 1a4.53 4.53 0 0 0-2.941 1.1c-.757.652-1.153 1.438-1.153 2.055v.448l-.445.049C2.064 4.805 1 5.952 1 7.318 1 8.785 2.23 10 3.781 10H6a.5.5 0 0 1 0 1H3.781C1.708 11 0 9.366 0 7.318c0-1.763 1.266-3.223 2.942-3.593.143-.863.698-1.723 1.464-2.383z"/>
<path fill-rule="evenodd"
d="M7.646 4.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 5.707V14.5a.5.5 0 0 1-1 0V5.707L5.354 7.854a.5.5 0 1 1-.708-.708l3-3z"/>
</svg>
<div>
Merci ! Ton lien a bien été reçu par DocHub. Il se pourrait que les documents prennent plusieurs jours
avant d'apparaitre sur le cours.<br/> Tu recevras un email une fois que c'est le cas !
<div class="container-xl py-5">
<div class="row justify-content-center text-center">
<div class="col-lg-6 col-md-8">

<div class="mb-4">
<div class="bg-success bg-opacity-10 text-success rounded-circle d-inline-flex align-items-center justify-content-center p-4 shadow-sm" style="width: 96px; height: 96px;">
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" fill="currentColor" class="bi bi-cloud-check-fill" viewBox="0 0 16 16">
<path d="M8 2a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 6.095 0 7.555 0 9.318 0 11.366 1.708 13 3.781 13h8.906C14.502 13 16 11.57 16 9.773c0-1.636-1.242-2.969-2.834-3.194C12.923 3.999 10.69 2 8 2zm2.354 4.854-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 1 1 .708-.708L7 8.793l2.646-2.647a.5.5 0 0 1 .708.708z"/>
</svg>
</div>
</div>

<h1 class="h3 fw-bold text-dark mb-3">Lien reçu avec succès !</h1>

<div class="card border-0 shadow-sm rounded-4 mb-4 bg-white">
<div class="card-body p-4 text-muted" style="font-size: 0.95rem; line-height: 1.6;">
<p class="mb-3">
Un grand merci d'avoir partagé ces documents pour le cours <strong class="text-dark">{{ course.slug|upper }}</strong>.
</p>
<p class="mb-0">
Notre équipe va traiter ton lien manuellement. Étant donné le volume, <strong>il se peut que cela prenne quelques jours</strong> avant que les documents n'apparaissent dans le catalogue.
</p>
<hr class="my-3 opacity-10">
<p class="mb-0 small fw-medium text-success d-flex align-items-center justify-content-center gap-2">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-envelope-check-fill" viewBox="0 0 16 16">
<path d="M.05 3.555A2 2 0 0 1 2 2h12a2 2 0 0 1 1.95 1.555L8 8.414.05 3.555ZM0 4.697v7.104l5.803-3.558L0 4.697ZM6.761 8.83l-6.57 4.026A2 2 0 0 0 2 14h6.256A4.493 4.493 0 0 1 8 12.5a4.49 4.49 0 0 1 1.606-3.446l-.367-.225L8 9.586l-1.239-.757ZM16 4.697v4.974A4.491 4.491 0 0 0 12.5 8a4.49 4.49 0 0 0-1.965.45l-.338-.207L16 4.697Z"/>
<path d="M16 12.5a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Zm-1.993-1.679a.5.5 0 0 0-.686.172l-1.17 1.95-.547-.547a.5.5 0 0 0-.708.708l.774.773a.75.75 0 0 0 1.174-.144l1.335-2.226a.5.5 0 0 0-.172-.686Z"/>
</svg>
Tu recevras un e-mail de confirmation une fois le transfert terminé.
</p>
</div>
</div>

<div class="d-flex flex-column flex-sm-row justify-content-center gap-3">
<a class="btn btn-ulb rounded-pill px-4 py-2 fw-bold shadow-sm" href="{% url 'catalog:course_show' course.slug %}">
Retourner au cours
</a>
<a class="btn btn-light border rounded-pill px-4 py-2 fw-medium shadow-sm" href="{% url 'catalog:finder_root' %}">
Naviguer dans le catalogue
</a>
</div>

</div>
</div>
</div>

<a class="btn btn-primary" href="{% url "catalog:course_show" course %}">Retour au cours</a>
{% endblock content %}
Loading
Loading