Skip to content

Commit

Permalink
add a close button to the nav menu on narrow screens
Browse files Browse the repository at this point in the history 
fixes #1076

This also removes some of the custom styling from the hamburger button,
so it looks like other buttons.

The close button and the hamburger button should be the same size and
appear in the same place.
  • Loading branch information
@christianp
christianp committed Feb 9, 2024
1 parent e9012f8 commit 86a6308
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 66 deletions.
69 changes: 19 additions & 50 deletions themes/default/files/resources/bootstrap/css/bootstrap.css
View file
Expand Up @@ -3592,7 +3592,6 @@ tbody.collapse.in {
.dropdown-menu > .active > a:focus {
color: #ffffff;
text-decoration: none;
outline: 0;
background-color: #337ab7;
}
.dropdown-menu > .disabled > a,
Expand All @@ -3611,9 +3610,6 @@ tbody.collapse.in {
.open > .dropdown-menu {
display: block;
}
.open > a {
outline: 0;
}
.dropdown-menu-right {
left: auto;
right: 0;
Expand Down Expand Up @@ -3734,10 +3730,6 @@ tbody.collapse.in {
border-bottom-left-radius: 0;
border-top-left-radius: 0;
}
.btn-group .dropdown-toggle:active,
.btn-group.open .dropdown-toggle {
outline: 0;
}
.btn-group > .btn + .dropdown-toggle {
padding-left: 8px;
padding-right: 8px;
Expand Down Expand Up @@ -4191,7 +4183,7 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
position: relative;
min-height: 50px;
margin-bottom: calc(2 * var(--spacing));
border: 1px solid transparent;
border-bottom: 1px solid transparent;
}
@media (min-width: 768px) {
.navbar {
Expand Down Expand Up @@ -4315,30 +4307,23 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
}
}
.navbar-toggle {
position: relative;
float: right;
margin-right: 15px;
padding: 9px 10px;
margin-top: 8px;
margin-bottom: 8px;
background-color: transparent;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
}
.navbar-toggle:focus {
outline: 0;
}
.navbar-toggle .icon-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
}
.navbar-toggle .icon-bar + .icon-bar {
color: #888888;
font-size: 1.5em;
width: 2em;
height: 2em;
text-align: center;
}
.navbar-toggle .hamburger-bar {
display: block;
width: 22px;
height: 2px;
border-radius: 1px;
margin: 0 auto;
}
.navbar-toggle .hamburger-bar + .hamburger-bar {
margin-top: 4px;
}
@media (min-width: 768px) {
@media (min-width: 992px) {
.navbar-toggle {
display: none;
}
Expand Down Expand Up @@ -4552,15 +4537,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
color: #cccccc;
background-color: transparent;
}
.navbar-default .navbar-toggle {
border-color: #dddddd;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
background-color: #dddddd;
}
.navbar-default .navbar-toggle .icon-bar {
.navbar-default .navbar-toggle .hamburger-bar {
background-color: #888888;
background-color: currentColor;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
Expand Down Expand Up @@ -4651,14 +4630,7 @@ fieldset[disabled] .navbar-default .btn-link:focus {
color: #444444;
background-color: transparent;
}
.navbar-inverse .navbar-toggle {
border-color: #333333;
}
.navbar-inverse .navbar-toggle:hover,
.navbar-inverse .navbar-toggle:focus {
background-color: #333333;
}
.navbar-inverse .navbar-toggle .icon-bar {
.navbar-inverse .navbar-toggle .hamburger-bar {
background-color: #ffffff;
background-color: var(--background-colour);
}
Expand Down Expand Up @@ -5878,7 +5850,6 @@ button.close {
left: 0;
z-index: 1050;
-webkit-overflow-scrolling: touch;
outline: 0;
}
.modal.fade .modal-dialog {
-webkit-transform: translate(0, -25%);
Expand Down Expand Up @@ -5923,7 +5894,6 @@ button.close {
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(var(--opposite-background-colour), 0.5);
background-clip: padding-box;
outline: 0;
}
.modal-backdrop {
position: fixed;
Expand Down Expand Up @@ -6360,7 +6330,6 @@ button.close {
}
.carousel-control:hover,
.carousel-control:focus {
outline: 0;
color: #ffffff;
text-decoration: none;
opacity: 0.9;
Expand Down
30 changes: 22 additions & 8 deletions themes/default/files/resources/exam.css
View file
Expand Up @@ -153,10 +153,6 @@ img, object[type*="image"] {
display: block;
}

.hamburger .navbar-toggle {
background: #f5f5f5;
}

.hamburger .nav > li {
display: inline-block;
}
Expand Down Expand Up @@ -233,7 +229,7 @@ body.navigate-menu.show-nav #everything {
grid-gap: 0;
}
body.navigate-menu.show-nav #everything > #topNav {
display: block;
display: flex;
}

#everything > main > #questionContainer,
Expand All @@ -252,6 +248,7 @@ body.navigate-menu.show-nav #everything > #topNav {

#topNav .nav {
text-align: left;
flex-grow: 1;
}

.navmenu {
Expand All @@ -260,14 +257,25 @@ body.navigate-menu.show-nav #everything > #topNav {
overflow-y: auto;
border-width: 0 1px 0 0;
}

.navmenu-header {
display: grid;
grid-template: "brand close" "name close" max-content / 1fr min-content;
gap: var(--spacing);
padding: 0;
grid-auto-flow: column;
align-items: start;
justify-items: start;
}

.navmenu-nav {
margin-bottom: 0;
}
.navmenu-brand {
display: block;
font-size: 1em;
padding: 0 var(--spacing);
margin: var(--spacing) 0;
padding: 0;
margin: 0;
}
.navmenu-default {
background-color: #a2d1f0;
Expand Down Expand Up @@ -309,7 +317,11 @@ body.navigate-menu.show-nav #everything > #topNav {
display: none;
}
body.show-nav:not(.show-sidebar) #everything > #topNav {
display: block;
display: flex;
}

body.show-nav .navmenu {
border-width: 0;
}
}

Expand Down Expand Up @@ -352,6 +364,7 @@ body.navigate-menu.show-nav #everything > #topNav {

#navMenu .logo {
max-width: 100%;
padding: var(--spacing) 0 0 var(--spacing);
}

body:not(.show-sidebar) #navMenu #hideNavMenuBtn {
Expand Down Expand Up @@ -574,6 +587,7 @@ input.jme {
font-weight: bold;
max-height: 5em;
overflow-y: auto;
padding: 0 0 var(--spacing) var(--spacing)
}

#exam-progress {
Expand Down
2 changes: 2 additions & 0 deletions themes/default/templates/modals.html
View file
Expand Up @@ -80,7 +80,9 @@ <h4 id="style-modal-title" data-localise="control.style options"></h4>
<div class="col-sm-6" id="text-size-preview" data-localise="modal.style.text size preview"></div>
</div>
</form>

{% if options.accessibility_statement_url %}
<hr/>
<p class="help-block"><a href="{{options.accessibility_statement_url}}" target="_blank" data-localise="accessibility statement"></a></p>
{% endif %}
</div>
Expand Down
26 changes: 18 additions & 8 deletions themes/default/templates/nav-sequence.html
View file
Expand Up @@ -3,11 +3,21 @@

<div id="navMenu-wrapper">

<div class="navmenu-header clearfix">
<div class="navmenu-header">
<div class="navmenu-brand">
{% include "logo.html" %}
</div>
<h1 class="exam-name navmenu-brand" data-bind="text: exam.settings.name, typeset: exam.settings.name"></h1>
<button type="button" class="navbar-toggle btn btn-default" data-toggle="navMenu">
<span aria-hidden="true">×</span>
<span class="sr-only" data-localise="control.toggle navigation menu"></span>
</button>
<!--
<button class="btn btn-default" id="hide-nav-menu" data-bind="click: hideNavMenu">
<span aria-hidden="true">x</span>
<span class="sr-only" data-localise="control.toggle navigation menu"></span>
</button>
-->
</div>

<!-- ko if: numQuestions() > 1 -->
Expand Down Expand Up @@ -74,13 +84,6 @@ <h2 data-bind="text: name, typeset: name"></h2>

<!-- top menu shown on narrow screens -->
<div id="topNav" class="hamburger navbar navbar-default question-nav">
<button type="button" class="navbar-toggle" data-toggle="navMenu">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="sr-only" data-localise="control.toggle navigation menu"></span>
</button>

<ul class="nav">
<!-- ko if: numQuestions() > 1 -->
<li class="prev"><button type="button" class="btn navbar-btn btn-primary" data-bind="click: reverse, attr: {disabled: !canReverse()}"><span class="sr-only" data-localise="control.previous"></span>&larr;</button></li>
Expand All @@ -97,4 +100,11 @@ <h2 data-bind="text: name, typeset: name"></h2>
<span class="time" data-bind="text: displayTime"></span>
</li>
</ul>

<button type="button" class="navbar-toggle btn btn-default" data-toggle="navMenu">
<span class="hamburger-bar"></span>
<span class="hamburger-bar"></span>
<span class="hamburger-bar"></span>
<span class="sr-only" data-localise="control.toggle navigation menu"></span>
</button>
</div>

0 comments on commit 86a6308

Please sign in to comment.