Skip to content

Commit 0e2a16e

Browse files
JelteFJelteF
committed
Improve navbar for medium width windows
1 parent 0caf554 commit 0e2a16e

File tree

2 files changed

+86
-36
lines changed

2 files changed

+86
-36
lines changed

‎media/commitfest/css/commitfest.css‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -142,3 +142,51 @@ a:hover .badge {
142142
float: none;
143143
margin-left: 0.5rem;
144144
}
145+
146+
/* Prevent navbar button text from wrapping */
147+
.navbar .btn {
148+
white-space: nowrap;
149+
}
150+
151+
.navbar .nav-link {
152+
white-space: nowrap;
153+
}
154+
155+
/* Responsive navbar layout */
156+
.navbar-content-wrapper {
157+
display: flex;
158+
flex-direction: column;
159+
width: 100%;
160+
}
161+
162+
/* At medium screens and up, arrange navbar items horizontally */
163+
@media (min-width: 992px) {
164+
.navbar-content-wrapper {
165+
flex-direction: row;
166+
align-items: center;
167+
}
168+
169+
.navbar-actions {
170+
margin-left: auto;
171+
}
172+
}
173+
174+
/* Between medium and large screens, stack actions below nav items */
175+
@media (min-width: 992px) and (max-width: 1099px) {
176+
.navbar-content-wrapper {
177+
flex-direction: column;
178+
align-items: flex-start;
179+
}
180+
181+
.navbar-nav {
182+
margin-bottom: 0.5rem;
183+
}
184+
185+
.navbar-actions {
186+
margin-left: 0;
187+
}
188+
189+
.navbar-actions .form-control {
190+
width: 200px !important;
191+
}
192+
}

‎pgcommitfest/commitfest/templates/base.html‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -14,51 +14,53 @@
1414
</head>
1515
<body>
1616
<!-- Main Navigation -->
17-
<nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-3">
17+
<nav class="navbar navbar-expand-sm navbar-dark bg-dark mb-3">
1818
<div class="container-fluid">
1919
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#mainNavbar" aria-controls="mainNavbar" aria-expanded="false" aria-label="Toggle navigation">
2020
<span class="navbar-toggler-icon"></span>
2121
</button>
2222
<div class="collapse navbar-collapse" id="mainNavbar">
23-
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
24-
<li class="nav-item">
25-
<a class="nav-link{% if request.resolver_match.url_name == 'home' or request.path == '/' %} active{% endif %}" href="/">Home</a>
26-
</li>
27-
{% if current_cf %}
23+
<div class="navbar-content-wrapper">
24+
<ul class="navbar-nav me-auto mb-2 mb-sm-0">
2825
<li class="nav-item">
29-
<a class="nav-link{% if '/new/' in request.path %} active{% endif %}" href="/{{current_cf.id}}/new/">New Patch</a>
26+
<a class="nav-link{% if request.resolver_match.url_name == 'home' or request.path == '/' %} active{% endif %}" href="/">Home</a>
3027
</li>
31-
{% endif %}
32-
{% if current_cf %}
28+
{% if current_cf %}
29+
<li class="nav-item">
30+
<a class="nav-link{% if '/new/' in request.path %} active{% endif %}" href="/{{current_cf.id}}/new/">New Patch</a>
31+
</li>
32+
{% endif %}
33+
{% if current_cf %}
34+
<li class="nav-item">
35+
<a class="nav-link{% if cf and cf.is_in_progress %} active{% endif %}" href="/current/">Current CF</a>
36+
</li>
37+
{% endif %}
3338
<li class="nav-item">
34-
<a class="nav-link{% if cf and cf.is_in_progress %} active{% endif %}" href="/current/">Current CF</a>
39+
<a class="nav-link{% if cf and cf.is_open_regular %} active{% endif %}" href="/open/">Open CF</a>
3540
</li>
36-
{% endif %}
37-
<li class="nav-item">
38-
<a class="nav-link{% if cf and cf.is_open_regular %} active{% endif %}" href="/open/">Open CF</a>
39-
</li>
40-
<li class="nav-item">
41-
<a class="nav-link{% if cf and cf.is_open_draft %} active{% endif %}" href="/draft/">Draft CF</a>
42-
</li>
43-
<li class="nav-item dropdown">
44-
<a class="nav-link dropdown-toggle{% if '/activity/' in request.path or '/commitfest_history/' in request.path %} active{% endif %}" href="#" id="moreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
45-
More
46-
</a>
47-
<ul class="dropdown-menu" aria-labelledby="moreDropdown">
48-
<li><a class="dropdown-item" href="/activity/">Activity Log</a></li>
49-
<li><a class="dropdown-item" href="/commitfest_history/">All CommitFests</a></li>
50-
</ul>
51-
</li>
52-
<li class="nav-item">
53-
<a class="nav-link{% if '/help/' in request.path %} active{% endif %}" href="/help/">Help</a>
54-
</li>
55-
</ul>
56-
<div class="d-flex gap-2 align-items-center">
57-
<form method="GET" action="/search/" class="d-flex gap-1">
58-
<input type="text" class="form-control" name="searchterm" placeholder="Email Message-ID or keywords" style="width: 250px;">
59-
<button type="submit" class="btn btn-outline-light">Search</button>
60-
</form>
61-
<a class="btn btn-primary" href="https://github.com/postgres/pgcommitfest" target="_blank"><img class="github-logo" src="/media/commitfest/github-mark.svg"/> Contribute on GitHub</a>
41+
<li class="nav-item">
42+
<a class="nav-link{% if cf and cf.is_open_draft %} active{% endif %}" href="/draft/">Draft CF</a>
43+
</li>
44+
<li class="nav-item dropdown">
45+
<a class="nav-link dropdown-toggle{% if '/activity/' in request.path or '/commitfest_history/' in request.path %} active{% endif %}" href="#" id="moreDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
46+
More
47+
</a>
48+
<ul class="dropdown-menu" aria-labelledby="moreDropdown">
49+
<li><a class="dropdown-item" href="/activity/">Activity Log</a></li>
50+
<li><a class="dropdown-item" href="/commitfest_history/">All CommitFests</a></li>
51+
</ul>
52+
</li>
53+
<li class="nav-item">
54+
<a class="nav-link{% if '/help/' in request.path %} active{% endif %}" href="/help/">Help</a>
55+
</li>
56+
</ul>
57+
<div class="navbar-actions d-flex gap-2 align-items-center">
58+
<form method="GET" action="/search/" class="d-flex gap-1">
59+
<input type="text" class="form-control" name="searchterm" placeholder="Email Message-ID or keywords" style="width: 250px;">
60+
<button type="submit" class="btn btn-outline-light">Search</button>
61+
</form>
62+
<a class="btn btn-primary" href="https://github.com/postgres/pgcommitfest" target="_blank"><img class="github-logo" src="/media/commitfest/github-mark.svg"/> Contribute</a>
63+
</div>
6264
</div>
6365
</div>
6466
</div>

0 commit comments

Comments
 (0)