ViMaSter/hackertours-theme
Watch
0
0
Fork
You've already forked hackertours-theme
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add the mobile menu directly in baseof template instead of via js. Translate menu terms.

Browse source
This commit is contained in:
Fredrik Jonsson 2017-07-25 11:18:16 +02:00
commit 8dfb9c8763
8 changed files with 72 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

6
i18n/en.toml
View file

@ -1,6 +1,12 @@
[menu_title]
other = "Main menu"
[menu_home]
other = "Home"
[menu_mobile]
other = "Menu"
[pager_next]
other = "Next"

7
i18n/sv.toml
View file

@ -1,6 +1,12 @@
[menu_title]
other = "Huvudmeny"
[menu_home]
other = "Hem"
[menu_mobile]
other = "Meny"
[pager_next]
other = "Nästa"
@ -15,4 +21,3 @@ other = "Sök"
[search_title]
other = "Ange de villkor du vill söka efter."

6
layouts/_default/baseof.html
View file

@ -33,7 +33,11 @@
</footer>
</div>
<div class="mobile-nav-wrapper hidden">
<div class="mobile-nav-cover"></div>
<a href="#navigation" class="mobile-nav-toggle" aria-haspopup="true" role="button">{{ i18n "menu_mobile" }}</a>
<div class="mobile-nav-sheet"></div>
</div>
{{ partial "scripts.html" . -}}
{{ partialCached "scripts_cache.html" . -}}
</body>

2
layouts/partials/menu.html
View file

@ -1,7 +1,7 @@
{{ $currentSection := .Section }}
{{ $currentID := .UniqueID }}
<nav class="main-menu layout__navigation layout__full" role="navigation">
<h2 class="visually-hidden">Main menu</h2>
<h2 class="visually-hidden">{{ i18n "menu_title" }}</h2>
<ul class="navbar">
<li><a class="{{ if .IsHome }}active{{ end }}" href="/">{{ i18n "menu_home" }}</a></li>
{{ range after 1 (where .Site.Pages "Section" "") -}}

77
sass/_zen.scss
View file

@ -11,6 +11,35 @@ pre {
@include margin(.75 0);
}
/* Page */
body {
background-color: color(backdrop);
}
.page {
background-color: color(body-bg);
}
.header {
padding-top: $zen-gutters / 2;
@include respond-to(s) {
padding-top: $zen-gutters;
}
}
.footer {
@include margin-top(1.5);
@include padding(.5 0);
text-align: center;
border-top: 2px solid color(brand);
p {
margin: 0;
}
}
/* Apply smaller text to blocks, footer etc. */
th,
@ -172,20 +201,6 @@ figcaption {
}
}
/* Page */
body {
background-color: color(backdrop);
}
.page {
background-color: color(body-bg);
}
.header {
padding-top: $zen-gutters;
}
/* Navigation */
.main-menu {
@ -223,17 +238,6 @@ body {
text-decoration: none;
}
.footer {
@include margin-top(1.5);
@include padding(.5 0);
text-align: center;
border-top: 2px solid color(brand);
p {
margin: 0;
}
}
/* Messages */
.message {
@ -312,9 +316,9 @@ body {
}
}
/* Mobil menu */
/* Mobile menu */
.js-nav-wrapper {
.mobile-nav-wrapper {
position: fixed;
right: 0;
top: 0;
@ -325,7 +329,7 @@ body {
pointer-events: none;
}
.js-nav-cover {
.mobile-nav-cover {
position: absolute;
width: 100vw;
height: 100vh;
@ -338,16 +342,19 @@ body {
}
}
.js-nav-toggle {
.mobile-nav-toggle {
@include typeface(headings);
display: block;
position: absolute;
top: $zen-gutters / 2;
right: $zen-gutters + $zen-gutters / 2 + $zen-gutters / 4;
padding: 3px ($zen-gutters + $zen-gutters / 4 + 4px) 2px 4px;
z-index: 12;
text-decoration: none;
font-weight: bold;
line-height: 1;
border: 1px solid color(border);
border-radius: 3px;
pointer-events: auto;
.js-nav-open & {
@ -369,7 +376,7 @@ body {
}
}
.js-nav-sheet {
.mobile-nav-sheet {
position: relative;
background-color: color(header-bg);
width: 90vw;
@ -380,7 +387,7 @@ body {
.js-nav-open & {
pointer-events: auto;
box-shadow: -10px 0 10px -10px color('nearblack');
box-shadow: -10px 0 10px -10px color(nearblack);
transform: translateX(10vw);
}
@ -402,10 +409,10 @@ body {
}
}
.js-nav-cover,
.js-nav-toggle,
.js-nav-toggle::after,
.js-nav-sheet {
.mobile-nav-cover,
.mobile-nav-toggle,
.mobile-nav-toggle::after,
.mobile-nav-sheet {
transition: all 130ms ease-in;
.js-nav-open & {

3
sass/init/_variables.scss
View file

@ -102,7 +102,8 @@ $typefaces: (
);
// Output a horizontal grid to help with debugging typography.
$typey-debug: false;
$typey-debug: true;
$with-wireframes: true;
// The length unit in which to output font size and margin values.
// Supported values: px, em, rem.

2
static/css/styles.css
View file

File diff suppressed because one or more lines are too long

18
static/js/script.js
View file

@ -10,21 +10,21 @@
// Add a js class to the html-tag when JavsScript is active.
$('html').addClass('js');
// Activate the SlickNav menu for small screens.
// Activate the mobil menu for small screens.
if (window.matchMedia) {
var mq = window.matchMedia('(max-width: 666px)');
if (mq.matches) {
// Create the nav toggle button and the nav sheet.
$('.page').after('<div class="js-nav-wrapper"><div class="js-nav-cover"></div><a href="#navigation" class="js-nav-toggle" aria-haspopup="true" role="button">Menu</a><div class="js-nav-sheet"></div></div>');
// Show mobile menu.
$('.mobile-nav-wrapper').removeClass('hidden');
// Populate the nav sheet.
$('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation layout__full hidden hidden').addClass('js-main-menu').appendTo('.js-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
$('.header__region').addClass('hidden').clone().removeClass('header__region region hidden').addClass('js-region').appendTo('.js-nav-sheet');
// Populate the mobile nav sheet.
$('.main-menu').addClass('hidden').clone().removeClass('main-menu layout__navigation layout__full hidden hidden').addClass('js-main-menu').appendTo('.mobile-nav-sheet').find('.navbar').removeClass('navbar').addClass('js-navbar');
$('.header__region').addClass('hidden').clone().removeClass('header__region region hidden').addClass('js-region').appendTo('.mobile-nav-sheet');
// Toggle the nav sheet.
$('.js-nav-cover, .js-nav-toggle').on('click toushstart', function (e) {
// Toggle the mobile nav sheet.
$('.mobile-nav-cover, .mobile-nav-toggle').on('click toushstart', function (e) {
e.preventDefault();
$('.js-nav-wrapper').toggleClass('js-nav-open');
$('.mobile-nav-wrapper').toggleClass('js-nav-open');
});
}