nick12
/
hmn
forked from hmn/hmn
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Make navigation mobile-friendly

This commit is contained in:
Ben Visness 2024-07-05 12:15:32 -05:00
parent 5f2df52e1d
commit 352a102a6a
6 changed files with 187 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
public/style.css
View File

@ -8290,6 +8290,7 @@ header {
background-color: var(--bg-header);
border-bottom-style: solid;
border-bottom-width: var(--border-header);
position: relative;
}
header .hmn-logo {
font-family: "MohaveHMN", sans-serif;
@ -8306,10 +8307,39 @@ header .avatar {
width: 1.8rem;
height: 1.8rem;
}
header .header-nav {
position: absolute;
top: calc(100% + 1px);
left: 0;
width: 100%;
background-color: var(--bg-header);
z-index: 100;
}
@media screen and (min-width: 35em) {
header .header-nav {
display: flex;
flex-direction: column;
position: static;
width: auto;
flex-direction: row;
align-items: center;
background-color: none;
}
}
header .header-nav > a,
header .header-nav > .root-item > a {
display: block;
padding: var(--spacing-3);
border-bottom: var(--border-header) solid var(--border-color);
}
header .header-nav > a:not(.db),
header .header-nav > .root-item > a:not(.db) {
display: block;
}
@media screen and (min-width: 35em) {
header .header-nav > a,
header .header-nav > .root-item > a {
border-bottom: none;
}
}
header .root-item {
position: relative;
@ -8317,22 +8347,33 @@ header .root-item {
header .submenu {
display: flex;
flex-direction: column;
position: absolute;
z-index: 100;
min-width: 8rem;
background-color: var(--bg-header);
border-style: solid;
border-width: var(--border-header);
border-top-width: 0;
top: 100%;
}
@media screen and (min-width: 35em) {
header .submenu {
position: absolute;
z-index: 100;
min-width: 8rem;
background-color: var(--bg-header);
border-style: solid;
border-width: var(--border-header);
border-top-width: 0;
top: 100%;
}
}
header .submenu > a {
padding: var(--spacing-2) var(--spacing-3);
padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
display: block;
white-space: nowrap;
z-index: 1;
border-bottom: var(--border-header) solid var(--border-color);
}
header .root-item:not(:hover):not(.clicked) > .submenu {
@media screen and (min-width: 35em) {
header .submenu > a {
padding: var(--spacing-2) var(--spacing-3);
border-bottom: none;
}
}
header .root-item:not(:hover):not(.clicked) .submenu {
display: none;
}
header .root-item.clicked .svgicon {

56
src/rawdata/scss/header.css
View File

@ -120,6 +120,7 @@ header {
background-color: var(--bg-header);
border-bottom-style: solid;
border-bottom-width: var(--border-header);
position: relative;
.hmn-logo {
font-family: 'MohaveHMN', sans-serif;
@ -141,11 +142,35 @@ header {
}
.header-nav {
position: absolute;
top: calc(100% + 1px);
left: 0;
width: 100%;
background-color: var(--bg-header);
z-index: 100;
@media screen and (min-width: 35em) {
display: flex;
flex-direction: column;
position: static;
width: auto;
flex-direction: row;
align-items: center;
background-color: none;
}
>a,
>.root-item>a {
display: block;
&:not(.db) {
display: block;
}
padding: var(--spacing-3);
border-bottom: var(--border-header) solid var(--border-color);
@media screen and (min-width: 35em) {
border-bottom: none;
}
}
}
@ -156,25 +181,34 @@ header {
.submenu {
display: flex;
flex-direction: column;
position: absolute;
z-index: 100;
min-width: 8rem;
background-color: var(--bg-header);
border-style: solid;
border-width: var(--border-header);
border-top-width: 0;
top: 100%;
@media screen and (min-width: 35em) {
position: absolute;
z-index: 100;
min-width: 8rem;
background-color: var(--bg-header);
border-style: solid;
border-width: var(--border-header);
border-top-width: 0;
top: 100%;
}
>a {
padding: var(--spacing-2) var(--spacing-3);
padding: var(--spacing-2) var(--spacing-3) var(--spacing-2) var(--spacing-4);
display: block;
white-space: nowrap;
z-index: 1;
border-bottom: var(--border-header) solid var(--border-color);
@media screen and (min-width: 35em) {
padding: var(--spacing-2) var(--spacing-3);
border-bottom: none;
}
}
}
.root-item {
&:not(:hover):not(.clicked)>.submenu {
&:not(:hover):not(.clicked) .submenu {
display: none;
}

5
src/templates/img/menu.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="16" height="16" viewBox="0 0 16 16" fill="currentColor" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1,0,0,1,-3,-4)">
<path d="M3,4L21,4L21,6L3,6L3,4ZM3,11L21,11L21,13L3,13L3,11ZM3,18L21,18L21,20L3,20L3,18Z" style="fill-rule:nonzero;"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 490 B

143
src/templates/src/include/header-2024.html
View File

@ -1,11 +1,11 @@
<header id="site-header" class="flex flex-row items-stretch link-normal">
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
Handmade
</a>
<div class="flex-grow-1 flex-shrink-1"></div>
<div class="header-nav flex flex-row items-center lh-solid f6">
<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
<a href="{{ .Header.JamsUrl }}">Jams</a>
<a href="{{ .Header.HMNHomepageUrl }}" class="hmn-logo flex-shrink-0">
Handmade
</a>
<div class="flex-grow-1 flex-shrink-1"></div>
<div class="header-nav lh-solid f6 dn" id="header_nav">
<a href="{{ .Header.ProjectIndexUrl }}">Projects</a>
<a href="{{ .Header.JamsUrl }}">Jams</a>
<div class="root-item">
<a aria-expanded="false" aria-controls="events-submenu" class="menu-dropdown-js" href="#">
Events <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
@ -17,7 +17,7 @@
</div>
<div class="root-item">
<a aria-expanded="false" aria-controls="resource-submenu" class="menu-dropdown-js" href="#">
Resources <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
Resources <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
</a>
<div class="submenu" id="resource-submenu">
<a href="{{ .Header.ForumsUrl }}">Forums</a>
@ -29,7 +29,7 @@
<a href="https://guide.handmadehero.org/hmcon/">HandmadeCon</a>
</div>
</div>
<div class="root-item">
<div class="root-item">
<a aria-expanded="false" aria-controls="about-submenu" class="menu-dropdown-js" href="#">
About <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
</a>
@ -38,67 +38,84 @@
<a href="{{ .Header.AboutUrl }}">About the Team</a>
</div>
</div>
</div>
<div class="root-item f6">
<a class="db {{ if .User }}pv2 ph3{{ else }}pa3{{ end }} lh-solid flex f6 {{ if not .User }}bl{{ end }}" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
<div class="root-item db dn-ns">
<a aria-expanded="false" aria-controls="profile-submenu" class="menu-dropdown-js" href="#">
User <div class="menu-chevron svgicon-lite">{{ svg "chevron-down" }}</div>
</a>
<div class="submenu" id="profile-submenu-mobile">
<a href="{{ .Header.UserProfileUrl }}">Profile</a>
<a href="{{ .Header.UserSettingsUrl }}">Settings</a>
</div>
</div>
<a class="db dn-ns" href="{{ .Header.LogoutUrl }}">Log Out</a>
</div>
<div class="root-item f6 {{ if not .User }}bl-ns{{ end }} flex items-stretch">
<a class="db pl3 pr2 pr3-ns lh-solid flex items-center" href="{{ or .Header.UserProfileUrl .LoginPageUrl }}">
{{ with .User }}
<img class="avatar avatar-user" src="{{ .AvatarUrl }}">
<img class="avatar avatar-user" src="{{ .AvatarUrl }}">
{{ else }}
Log In
Log In
{{ end }}
</a>
<a class="pl2 pr3 flex dn-ns items-center" href="#" id="mobile_menu">
{{ svg "menu" }}
</a>
{{ if .User }}
<div class="dn db-ns">
<div class="submenu right-0" id="profile-submenu">
<a href="{{ .Header.UserProfileUrl }}">Profile</a>
<a href="{{ .Header.UserSettingsUrl }}">Settings</a>
<a href="{{ .Header.LogoutUrl }}">Log Out</a>
</div>
</div>
{{ end }}
</div>
</header>
{{ if and .Header.BannerEvent (not .Header.SuppressBanners) }}
{{ with .Header.BannerEvent }}
{{ if eq .Slug "VJ2024" }}
<a
class="db tc pv2 link-normal c-white"
style="background: linear-gradient(to bottom right, #20dddd, #007178)"
href="{{ .Url }}"
>
<b>Visibility Jam.</b>
July 19-21, 2024.
{{ if gt .DaysUntilEnd 0 }}
{{ if eq .DaysUntilStart 0 }}
<b>Happening now.</b>
{{ else if eq .DaysUntilStart 1 }}
<b>Starting tomorrow.</b>
{{ else }}
<b>In {{ .DaysUntilStart }} days.</b>
{{ end }}
{{ else }}
<b>See the results.</b>
{{ end }}
</a>
{{ end }}
{{ end }}
{{ with .Header.BannerEvent }}
{{ if eq .Slug "VJ2024" }}
<a
class="db tc pv2 link-normal c-white"
style="background: linear-gradient(to bottom right, #20dddd, #007178)"
href="{{ .Url }}"
>
<b>Visibility Jam.</b>
July 19-21, 2024.
{{ if gt .DaysUntilEnd 0 }}
{{ if eq .DaysUntilStart 0 }}
<b>Happening now.</b>
{{ else if eq .DaysUntilStart 1 }}
<b>Starting tomorrow.</b>
{{ else }}
<b>In {{ .DaysUntilStart }} days.</b>
{{ end }}
{{ else }}
<b>See the results.</b>
{{ end }}
</a>
{{ end }}
{{ end }}
{{ end }}
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
const header = document.querySelector('#site-header');
const header = document.querySelector("#site-header");
const headerNav = document.querySelector("#header_nav");
const mobileMenuButton = document.querySelector("#mobile_menu");
// set up dropdown stuff for mobile / touch
{
const rootItems = header.querySelectorAll('.root-item');
function clearDropdowns() {
for (const item of rootItems) {
item.classList.remove('clicked');
}
}
function clickDropdown(el) {
header.classList.add('clicked');
if (el.classList.contains('clicked')) {
clearDropdowns();
} else {
@ -106,7 +123,7 @@
el.classList.add('clicked');
}
}
for (const item of rootItems) {
if (item.querySelector('.submenu')) {
item.addEventListener('click', e => {
@ -116,27 +133,33 @@
}
}
}
// dropdown accessiblity
{
const dropdowns = document.querySelectorAll('.menu-dropdown-js');
for(let i = 0; i < dropdowns.length; i++) {
const dropdowns = document.querySelectorAll('.menu-dropdown-js');
for(let i = 0; i < dropdowns.length; i++) {
let dropdown = dropdowns[i];
dropdown.addEventListener('click', e => {
e.preventDefault();
for(let j = 0; j < dropdowns.length; j++){
let each = dropdowns[j];
if(each != dropdown){
each.setAttribute("aria-expanded", false);
}
}
// getAttribute returns a string so we have to do it this way
var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false";
dropdown.setAttribute("aria-expanded", toSetTo);
console.log(dropdown);
});
}
e.preventDefault();
for(let j = 0; j < dropdowns.length; j++){
let each = dropdowns[j];
if(each != dropdown){
each.setAttribute("aria-expanded", false);
}
}
// getAttribute returns a string so we have to do it this way
var toSetTo = dropdown.getAttribute("aria-expanded") == "false" ? "true" : "false";
dropdown.setAttribute("aria-expanded", toSetTo);
console.log(dropdown);
});
}
}
mobileMenuButton.addEventListener("click", e => {
e.preventDefault();
e.stopPropagation();
headerNav.classList.toggle("dn");
});
});
</script>

2
src/templates/src/jams_index.html
View File

@ -18,7 +18,7 @@
<div class="jam-grid g3">
<a href="{{ .VJ2024Url }}">
<div class="overflow-hidden flex">
<img src="{{ static "visjam2024/2024VJTwitterCard.png" }}">
<img src="{{ static "visjam2024/TwitterCard.png" }}">
</div>
</a>
<a href="{{ .LJ2024Url }}">

2
src/templates/src/landing.html
View File

@ -85,7 +85,7 @@
<div class="flex justify-center pa3">
<div class="w-100 mw-site flex g3">
<!-- Sidebar -->
<div class="w5 flex flex-column g2 flex-shrink-0">
<div class="w5 dn flex-ns flex-column g2 flex-shrink-0">
{{ if .User }}
<div class="sidebar-card bg3 link-normal">
<div onclick="collapse(event)" class="pa3 flex justify-between items-center pointer">