feat: Update navbar identifiers for better accessibility and mobile responsiveness
This commit is contained in:
Ross
+115
-61
@@ -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%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user