ross/penracourses
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: Update navbar identifiers for better accessibility and mobile responsiveness

Browse Source
This commit is contained in:
Ross
2026-05-11 13:25:28 +01:00
parent cf4cb32c5e
commit c7fd99f6f3
8 changed files with 198 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files
anatomy/templates/anatomy/base.html
+2 -2
View File
@@ -9,10 +9,10 @@
<nav class="navbar navbar-expand-lg navbar-dark submenu">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'anatomy:index' %}">Anatomy</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#anatomyNavbarNav" aria-controls="anatomyNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="anatomyNavbarNav">
<ul class="navbar-nav">
{% if request.user.is_authenticated %}
<li class="nav-item">
longs/templates/longs/base.html
+15 -13
View File
@@ -18,10 +18,10 @@
<nav class="navbar navbar-expand-lg navbar-dark submenu">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'longs:index' %}">Longs</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#longsNavbarNav" aria-controls="longsNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="longsNavbarNav">
<ul class="navbar-nav">
{% if request.user.is_authenticated %}
<li class="nav-item">
@@ -49,17 +49,19 @@
</div>
</div>
</nav>
Longs:
{% if request.user.is_authenticated %}
<a href="{% url 'longs:exam_list' %}">Exams</a> /
<a href="{% url 'longs:exam_create' %}" title="Create a new exam">Create Exam</a> /
<a href="{% url 'longs:question_view' %}">Cases</a> /
<a href="{% url 'longs:series_view' %}">Series</a> /
<a href="{% url 'longs:question_create' %}" title="Create a new long case">Create Case</a> /
{% endif %}
{% if request.user.is_superuser %}
/ <a href="{% url 'longs:user_answer_table_view' %}" title="User answers">Answers</a>
{% endif %}
<div class="small text-body-secondary d-none d-lg-block mt-1">
Longs:
{% if request.user.is_authenticated %}
<a href="{% url 'longs:exam_list' %}">Exams</a> /
<a href="{% url 'longs:exam_create' %}" title="Create a new exam">Create Exam</a> /
<a href="{% url 'longs:question_view' %}">Cases</a> /
<a href="{% url 'longs:series_view' %}">Series</a> /
<a href="{% url 'longs:question_create' %}" title="Create a new long case">Create Case</a> /
{% endif %}
{% if request.user.is_superuser %}
/ <a href="{% url 'longs:user_answer_table_view' %}" title="User answers">Answers</a>
{% endif %}
</div>
{% comment %} </br>
Questions by:
<span id="authors-link"><a href="{% url 'longs:author_list' %}">author</a></span> {% endcomment %}
physics/templates/physics/base.html
+2 -2
View File
@@ -8,10 +8,10 @@
<nav class="navbar navbar-expand-lg navbar-dark submenu">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'physics:index' %}">Physics</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#physicsNavbarNav" aria-controls="physicsNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="physicsNavbarNav">
<ul class="navbar-nav">
{% if request.user.is_authenticated %}
<li class="nav-item">
rad/static/css/widgets.css
+30
View File
@@ -318,6 +318,36 @@ p.url {
font-weight: bold;
}
@media (max-width: 767.98px) {
.selector,
.stacked {
width: 100%;
max-width: 100%;
}
.selector-available,
.selector-chosen,
.stacked .selector-available,
.stacked .selector-chosen {
width: 100%;
float: none;
}
.selector select,
.selector .selector-available input,
.stacked select,
.stacked .selector-available input {
width: 100%;
max-width: 100%;
}
.selector ul.selector-chooser,
.stacked ul.selector-chooser {
margin: .5rem auto;
float: none;
}
}
.url a {
font-weight: normal;
}
rapids/templates/rapids/base.html
+2 -2
View File
@@ -21,10 +21,10 @@
<nav class="navbar navbar-expand-lg navbar-dark submenu">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'rapids:index' %}">Rapids</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#rapidsNavbarNav" aria-controls="rapidsNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="rapidsNavbarNav">
<ul class="navbar-nav">
{% if request.user.is_authenticated %}
<li class="nav-item">
shorts/templates/shorts/base.html
+2 -2
View File
@@ -21,10 +21,10 @@
<nav class="navbar navbar-expand-lg navbar-dark submenu">
<div class="container-fluid">
<a class="navbar-brand" href="{% url 'shorts:index' %}">Shorts</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#shortsNavbarNav" aria-controls="shortsNavbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<div class="collapse navbar-collapse" id="shortsNavbarNav">
<ul class="navbar-nav">
{% if request.user.is_authenticated %}
<li class="nav-item">
static/css/widgets.css
+30
View File
@@ -318,6 +318,36 @@ p.url {
font-weight: bold;
}
@media (max-width: 767.98px) {
.selector,
.stacked {
width: 100%;
max-width: 100%;
}
.selector-available,
.selector-chosen,
.stacked .selector-available,
.stacked .selector-chosen {
width: 100%;
float: none;
}
.selector select,
.selector .selector-available input,
.stacked select,
.stacked .selector-available input {
width: 100%;
max-width: 100%;
}
.selector ul.selector-chooser,
.stacked ul.selector-chooser {
margin: .5rem auto;
float: none;
}
}
.url a {
font-weight: normal;
}
templates/base.html
+115 -61
View File
@@ -81,12 +81,43 @@
<link rel="stylesheet" href="{% static 'css/forms.css' %}">
<style>
.dropdown-menu {
background-color: rgb(28, 25, 25)
:root {
--penra-submenu-bg: rgba(13, 22, 35, 0.92);
--penra-submenu-border: rgba(173, 216, 230, 0.24);
}
body {
overflow-x: hidden;
}
.dropdown-menu {
background-color: rgb(28, 25, 25);
max-width: min(94vw, 30rem);
}
.dropdown-item {
color: lightblue;
white-space: normal;
}
.submenu {
background: var(--penra-submenu-bg);
border: 1px solid var(--penra-submenu-border);
border-radius: 0.5rem;
margin: 0.5rem 0 0.75rem;
}
.submenu .navbar-brand,
.submenu .nav-link {
color: #d3e9ff;
}
.submenu .nav-link:hover,
.submenu .nav-link:focus,
.submenu .nav-link.active {
color: #ffffff;
}
/* Allow the correct-answer badge to wrap if the text is long */
.correct-badge {
white-space: normal !important;
@@ -94,92 +125,115 @@
word-break: break-word;
max-width: 100%;
}
/* Reduce horizontal page margins on small screens for better use of space */
div.content.container {
max-width: 100%;
}
@media (max-width: 1210px) {
/* Narrow the default container padding */
.container,
.container-fluid {
padding-left: .5rem !important;
padding-right: .5rem !important;
}
/* Also tighten the main content wrapper specifically */
div.content.container {
padding-left: .5rem !important;
padding-right: .5rem !important;
max-width: 100% !important;
}
}
/* Improve navbar tap targets and mobile dropdown behaviour (touch devices only) */
@media (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
/* Make navbar links larger and easier to tap */
@media (max-width: 991.98px) {
.container,
.container-fluid {
padding-left: .75rem !important;
padding-right: .75rem !important;
}
div.content.container {
padding-left: .75rem !important;
padding-right: .75rem !important;
}
.navbar {
padding-top: .35rem;
padding-bottom: .35rem;
}
.navbar-toggler {
padding: .5rem .65rem;
border-color: rgba(255, 255, 255, 0.3);
}
.navbar-toggler .bi {
font-size: 1.2rem;
line-height: 1;
}
.navbar-collapse {
padding-top: .5rem;
}
.navbar-nav .nav-link {
padding: .75rem 1rem;
font-size: 1.05rem;
min-height: 44px; /* recommended minimum touch target */
display: block;
margin: .25rem 0;
border-radius: .375rem;
background-color: var(--bs-primary);
color: #fff !important;
text-align: center;
box-shadow: 0 1px 0 rgba(0,0,0,0.05) inset;
}
/* Make links look like outline buttons for secondary links */
.navbar-nav .nav-link.btn-outline {
background-color: transparent;
color: var(--bs-primary) !important;
border: 1px solid rgba(255,255,255,0.08);
}
/* Make dropdown items full-width and larger */
.navbar-nav .dropdown-menu .dropdown-item {
padding: .75rem 1rem;
font-size: 1.05rem;
background: transparent;
color: inherit;
border-radius: .25rem;
min-height: 44px;
display: flex;
align-items: center;
padding: .625rem .75rem;
margin: .125rem 0;
border-radius: .375rem;
}
/* When the navbar is collapsed, render dropdown menus as static stacked blocks
so nested items are easy to tap (prevents absolute-position overlap issues). */
.navbar-collapse .dropdown-menu {
.navbar-nav .dropdown-menu {
position: static !important;
float: none !important;
display: block !important;
width: 100% !important;
margin-top: .25rem;
}
/* Ensure dropdown toggles are full-width when collapsed */
.navbar-collapse .dropdown > .nav-link {
width: 100%;
text-align: left;
max-width: 100%;
margin: .25rem 0 .5rem;
}
.navbar-nav .dropdown-menu:not(.show) {
display: none !important;
}
.navbar-nav .dropdown-menu.show {
display: block !important;
}
.navbar-nav .dropdown-menu .dropdown-item {
padding: .625rem .75rem;
}
.submenu .nav-item.dropdown .nav-link.d-inline {
display: inline-flex !important;
}
.submenu .dropdown-toggle-split {
min-width: 2.5rem;
justify-content: center;
}
.content table {
display: block;
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
html, body {
/* Slightly increase root font-size so rem-based components scale */
font-size: 182%;
line-height: 1.45;
.content table.table {
white-space: nowrap;
}
/* Slightly larger headings for clear hierarchy */
h1 { font-size: 1.8rem; }
h2 { font-size: 1.4rem; }
h3 { font-size: 1.15rem; }
.content .card[style*="min-width"] {
min-width: 0 !important;
}
/* Improve spacing for paragraphs and lists */
p, li { font-size: 1rem; }
/* Make form controls and buttons a bit larger for touch */
.form-control, .btn { font-size: 1rem; padding: .6rem .75rem; }
.content img,
.content video,
.content iframe,
.content svg {
max-width: 100%;
}
}