Skip to content

Implement responsive design #234

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

Merged
merged 11 commits into from
Jun 19, 2025
Merged

Implement responsive design #234

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
bcbaf62
style: make navbar hamburger on mobile devices
yinanazhou Jun 11, 2025
07bcedf
style: stack footer logos on mobile devices
yinanazhou Jun 12, 2025
7d235a1
style: make home page content responsive
yinanazhou Jun 12, 2025
04930a4
style: align instrument page columns on mobile devices
yinanazhou Jun 12, 2025
03ab92d
style: make login page responsive on mobile devices
yinanazhou Jun 12, 2025
324a08a
fix: sync button text on home page
yinanazhou Jun 12, 2025
b08df6b
style: responsive design for registration page
yinanazhou Jun 13, 2025
59d7dd0
style: responsive design for change password page
yinanazhou Jun 13, 2025
cdbca4f
refactor: split registration template into two columns
yinanazhou Jun 13, 2025
85e53de
style: fit login button content on mobile devices
yinanazhou Jun 13, 2025
26ac8fb
chore: remove unused code
yinanazhou Jun 19, 2025
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
139 changes: 82 additions & 57 deletions web-app/django/VIM/templates/base.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,71 +28,96 @@
<body>
<header class="p-3 sticky-top align-content-center">
<div class="container">
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
<ul class="nav nav-underline col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
<li class="nav-item">
<a href="{% url "main:home" %}"
class="nav-link nav-home px-2 notranslate">
<img src="{% static "assets/images/logo.svg" %}" alt="vim icon" />
UMIL
</a>
</li>
<li class="nav-item">
<a href="{% url "main:home" %}"
class="nav-link px-2 text-decoration-none {% if active_tab == 'home' %}active{% endif %}">Home</a>
</li>
<li class="nav-item">
<a href="{% url "instrument-list" %}"
class="nav-link px-2 text-decoration-none {% if active_tab == 'instruments' %}active{% endif %}">Instruments</a>
</li>
<li class="nav-item">
<a href="{% url "main:about" %}"
class="nav-link px-2 text-decoration-none {% if active_tab == 'about' %}active{% endif %}">About</a>
</li>
</ul>
{% comment %} <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
<input type="search" class="form-control search-input" placeholder="Search..." aria-label="Search" />
</form> {% endcomment %}
<div class="text-end d-flex">
{% if user.is_authenticated %}
<div class="dropdown me-2">
<button class="btn dropdown-toggle login-btn"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">{{ user.username }}</button>
<ul class="dropdown-menu umil-dropdown-menu"
aria-labelledby="userDropdown">
<li>
<a class="dropdown-item umil-dropdown-item"
href="{% url 'main:change_password' %}">Change Password</a>
</li>
<li>
<a class="dropdown-item umil-dropdown-item"
href="{% url 'main:logout' %}">Log out</a>
</li>
</ul>
</div>
{% else %}
<a href="{% url 'main:login' %}">
<button type="button" class="btn me-2 login-btn">Login</button>
</a>
{% endif %}
<div id="google_translate_element"
class="d-flex align-items-center position-relative"
data-bs-toggle="tooltip"
data-bs-title="Web Page Language"
aria-label="Web Page Language"
aria-pressed="true"></div>
<nav class="navbar navbar-expand-lg">
<!-- Brand/Logo - always visible -->
<a class="navbar-brand nav-home notranslate"
href="{% url "main:home" %}">
<img src="{% static "assets/images/logo.svg" %}" alt="umil icon" />
UMIL
</a>
<!-- Hamburger toggle button - only visible on mobile -->
<button class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarMenu"
aria-controls="navbarMenu"
aria-expanded="false"
aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- Collapsible content -->
<div class="collapse navbar-collapse" id="navbarMenu">
<ul class="navbar-nav me-lg-auto mx-auto mx-lg-0 text-center text-lg-start">
<li class="nav-item">
<a href="{% url "main:home" %}"
class="nav-link {% if active_tab == 'home' %}active{% endif %}">Home</a>
</li>
<li class="nav-item">
<a href="{% url "instrument-list" %}"
class="nav-link {% if active_tab == 'instruments' %}active{% endif %}">Instruments</a>
</li>
<li class="nav-item">
<a href="{% url "main:about" %}"
class="nav-link {% if active_tab == 'about' %}active{% endif %}">About</a>
</li>
</ul>
<!-- Right side content (user menu + translate) -->
<div class="d-flex align-items-center justify-content-center justify-content-lg-end">
{% if user.is_authenticated %}
<div class="dropdown me-2">
<button class="btn dropdown-toggle login-btn"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512"
fill="currentColor"
width="20"
height="20"
aria-label="user icon">
<path d="M304 128a80 80 0 1 0 -160 0 80 80 0 1 0 160 0zM96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM49.3 464l349.5 0c-8.9-63.3-63.3-112-129-112l-91.4 0c-65.7 0-120.1 48.7-129 112zM0 482.3C0 383.8 79.8 304 178.3 304l91.4 0C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7L29.7 512C13.3 512 0 498.7 0 482.3z" />
</svg>
</button>
<ul class="dropdown-menu umil-dropdown-menu"
aria-labelledby="userDropdown">
<li>
<p class="dropdown-item mb-0 umil-dropdown-item disabled">
{{ user.username }}
</p>
</li>
<hr class="dropdown-divider" />
<li>
<a class="dropdown-item umil-dropdown-item"
href="{% url 'main:change_password' %}">Change Password</a>
</li>
<li>
<a class="dropdown-item umil-dropdown-item"
href="{% url 'main:logout' %}">Log out</a>
</li>
</ul>
</div>
{% else %}
<a href="{% url 'main:login' %}">
<button type="button" class="btn me-2 login-btn">Login</button>
</a>
{% endif %}
<div id="google_translate_element"
class="d-flex align-items-center position-relative btn"
data-bs-toggle="tooltip"
data-bs-title="Web Page Language"
aria-label="Web Page Language"
aria-pressed="true"></div>
</div>
</div>
</div>
</nav>
</div>
</header>
<main>
{% block content %}
{% endblock content %}

</main>
<footer class="d-flex justify-content-center align-items-center py-1 border-top">
<footer class="d-flex flex-column flex-md-row justify-content-center align-items-center py-1 border-top">
<a href="https://ddmal.music.mcgill.ca/"
class="my-1 mx-3 link-body-emphasis text-decoration-none">
<img src="{% static "assets/images/lab-logo.png" %}" alt="ddmal logo" />
Expand Down
Loading