Skip to content

Commit bf2ce5d

Browse files
yinanazhouyinanazhou
authored
Merge pull request #234 from DDMAL/mobile-fit
Implement responsive design
2 parents ae22a47 + 26ac8fb commit bf2ce5d

File tree

12 files changed

+445
-399
lines changed

12 files changed

+445
-399
lines changed

‎web-app/django/VIM/templates/base.html

Lines changed: 82 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -28,71 +28,96 @@
2828
<body>
2929
<header class="p-3 sticky-top align-content-center">
3030
<div class="container">
31-
<div class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
32-
<ul class="nav nav-underline col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
33-
<li class="nav-item">
34-
<a href="{% url "main:home" %}"
35-
class="nav-link nav-home px-2 notranslate">
36-
<img src="{% static "assets/images/logo.svg" %}" alt="vim icon" />
37-
UMIL
38-
</a>
39-
</li>
40-
<li class="nav-item">
41-
<a href="{% url "main:home" %}"
42-
class="nav-link px-2 text-decoration-none {% if active_tab == 'home' %}active{% endif %}">Home</a>
43-
</li>
44-
<li class="nav-item">
45-
<a href="{% url "instrument-list" %}"
46-
class="nav-link px-2 text-decoration-none {% if active_tab == 'instruments' %}active{% endif %}">Instruments</a>
47-
</li>
48-
<li class="nav-item">
49-
<a href="{% url "main:about" %}"
50-
class="nav-link px-2 text-decoration-none {% if active_tab == 'about' %}active{% endif %}">About</a>
51-
</li>
52-
</ul>
53-
{% comment %} <form class="col-12 col-lg-auto mb-3 mb-lg-0 me-lg-3" role="search">
54-
<input type="search" class="form-control search-input" placeholder="Search..." aria-label="Search" />
55-
</form> {% endcomment %}
56-
<div class="text-end d-flex">
57-
{% if user.is_authenticated %}
58-
<div class="dropdown me-2">
59-
<button class="btn dropdown-toggle login-btn"
60-
type="button"
61-
data-bs-toggle="dropdown"
62-
aria-expanded="false">{{ user.username }}</button>
63-
<ul class="dropdown-menu umil-dropdown-menu"
64-
aria-labelledby="userDropdown">
65-
<li>
66-
<a class="dropdown-item umil-dropdown-item"
67-
href="{% url 'main:change_password' %}">Change Password</a>
68-
</li>
69-
<li>
70-
<a class="dropdown-item umil-dropdown-item"
71-
href="{% url 'main:logout' %}">Log out</a>
72-
</li>
73-
</ul>
74-
</div>
75-
{% else %}
76-
<a href="{% url 'main:login' %}">
77-
<button type="button" class="btn me-2 login-btn">Login</button>
78-
</a>
79-
{% endif %}
80-
<div id="google_translate_element"
81-
class="d-flex align-items-center position-relative"
82-
data-bs-toggle="tooltip"
83-
data-bs-title="Web Page Language"
84-
aria-label="Web Page Language"
85-
aria-pressed="true"></div>
31+
<nav class="navbar navbar-expand-lg">
32+
<!-- Brand/Logo - always visible -->
33+
<a class="navbar-brand nav-home notranslate"
34+
href="{% url "main:home" %}">
35+
<img src="{% static "assets/images/logo.svg" %}" alt="umil icon" />
36+
UMIL
37+
</a>
38+
<!-- Hamburger toggle button - only visible on mobile -->
39+
<button class="navbar-toggler"
40+
type="button"
41+
data-bs-toggle="collapse"
42+
data-bs-target="#navbarMenu"
43+
aria-controls="navbarMenu"
44+
aria-expanded="false"
45+
aria-label="Toggle navigation">
46+
<span class="navbar-toggler-icon"></span>
47+
</button>
48+
<!-- Collapsible content -->
49+
<div class="collapse navbar-collapse" id="navbarMenu">
50+
<ul class="navbar-nav me-lg-auto mx-auto mx-lg-0 text-center text-lg-start">
51+
<li class="nav-item">
52+
<a href="{% url "main:home" %}"
53+
class="nav-link {% if active_tab == 'home' %}active{% endif %}">Home</a>
54+
</li>
55+
<li class="nav-item">
56+
<a href="{% url "instrument-list" %}"
57+
class="nav-link {% if active_tab == 'instruments' %}active{% endif %}">Instruments</a>
58+
</li>
59+
<li class="nav-item">
60+
<a href="{% url "main:about" %}"
61+
class="nav-link {% if active_tab == 'about' %}active{% endif %}">About</a>
62+
</li>
63+
</ul>
64+
<!-- Right side content (user menu + translate) -->
65+
<div class="d-flex align-items-center justify-content-center justify-content-lg-end">
66+
{% if user.is_authenticated %}
67+
<div class="dropdown me-2">
68+
<button class="btn dropdown-toggle login-btn"
69+
type="button"
70+
data-bs-toggle="dropdown"
71+
aria-expanded="false">
72+
<svg xmlns="http://www.w3.org/2000/svg"
73+
viewBox="0 0 448 512"
74+
fill="currentColor"
75+
width="20"
76+
height="20"
77+
aria-label="user icon">
78+
<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" />
79+
</svg>
80+
</button>
81+
<ul class="dropdown-menu umil-dropdown-menu"
82+
aria-labelledby="userDropdown">
83+
<li>
84+
<p class="dropdown-item mb-0 umil-dropdown-item disabled">
85+
{{ user.username }}
86+
</p>
87+
</li>
88+
<hr class="dropdown-divider" />
89+
<li>
90+
<a class="dropdown-item umil-dropdown-item"
91+
href="{% url 'main:change_password' %}">Change Password</a>
92+
</li>
93+
<li>
94+
<a class="dropdown-item umil-dropdown-item"
95+
href="{% url 'main:logout' %}">Log out</a>
96+
</li>
97+
</ul>
98+
</div>
99+
{% else %}
100+
<a href="{% url 'main:login' %}">
101+
<button type="button" class="btn me-2 login-btn">Login</button>
102+
</a>
103+
{% endif %}
104+
<div id="google_translate_element"
105+
class="d-flex align-items-center position-relative btn"
106+
data-bs-toggle="tooltip"
107+
data-bs-title="Web Page Language"
108+
aria-label="Web Page Language"
109+
aria-pressed="true"></div>
110+
</div>
86111
</div>
87-
</div>
112+
</nav>
88113
</div>
89114
</header>
90115
<main>
91116
{% block content %}
92117
{% endblock content %}
93118

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

0 commit comments

Comments
 (0)