feat: Update navbar identifiers for better accessibility and mobile responsiveness

anatomy/templates/anatomy/base.html

@@ -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

@@ -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:
+    <div class="small text-body-secondary d-none d-lg-block mt-1">
-    {% if request.user.is_authenticated %}
+        Longs:
-        <a href="{% url 'longs:exam_list' %}">Exams</a> /
+        {% if request.user.is_authenticated %}
-        <a href="{% url 'longs:exam_create' %}" title="Create a new exam">Create Exam</a> /
+            <a href="{% url 'longs:exam_list' %}">Exams</a> /
-        <a href="{% url 'longs:question_view' %}">Cases</a> /
+            <a href="{% url 'longs:exam_create' %}" title="Create a new exam">Create Exam</a> /
-        <a href="{% url 'longs:series_view' %}">Series</a> /
+            <a href="{% url 'longs:question_view' %}">Cases</a> /
-        <a href="{% url 'longs:question_create' %}" title="Create a new long case">Create Case</a> /
+            <a href="{% url 'longs:series_view' %}">Series</a> /
-    {% endif %}
+            <a href="{% url 'longs:question_create' %}" title="Create a new long case">Create Case</a> /
-    {% if request.user.is_superuser %}
+        {% endif %}
-        / <a href="{% url 'longs:user_answer_table_view' %}" title="User answers">Answers</a>
+        {% if request.user.is_superuser %}
-    {% endif %}
+            / <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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -81,12 +81,43 @@
         <link rel="stylesheet" href="{% static 'css/forms.css' %}">
         <style>
 
-            .dropdown-menu {
+            :root {
-                background-color: rgb(28, 25, 25)
+                --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) {
-            @media (max-width: 991.98px) and (hover: none) and (pointer: coarse) {
+                .container,
-    /* Make navbar links larger and easier to tap */
+                .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;
+                    min-height: 44px;
-                    font-size: 1.05rem;
+                    display: flex;
-                    min-height: 44px; /* recommended minimum touch target */
+                    align-items: center;
-                    display: block;
+                    padding: .625rem .75rem;
-                    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;
                     margin: .125rem 0;
+                    border-radius: .375rem;
                 }
 
-    /* When the navbar is collapsed, render dropdown menus as static stacked blocks
+                .navbar-nav .dropdown-menu {
-         so nested items are easy to tap (prevents absolute-position overlap issues). */
-                .navbar-collapse .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;
                 }
 
-
+                .content table.table {
-                html, body {
+                    white-space: nowrap;
-                /* Slightly increase root font-size so rem-based components scale */
-                    font-size: 182%;
-                    line-height: 1.45;
                 }
 
-            /* Slightly larger headings for clear hierarchy */
+                .content .card[style*="min-width"] {
-                h1 { font-size: 1.8rem; }
+                    min-width: 0 !important;
-                h2 { font-size: 1.4rem; }
+                }
-                h3 { font-size: 1.15rem; }
 
-            /* Improve spacing for paragraphs and lists */
+                .content img,
-                p, li { font-size: 1rem; }
+                .content video,
-
+                .content iframe,
-            /* Make form controls and buttons a bit larger for touch */
+                .content svg {
-                .form-control, .btn { font-size: 1rem; padding: .6rem .75rem; }
+                    max-width: 100%;
+                }
 
             }