better mobile navbar complete
This commit is contained in:
parent
3155e374df
commit
71e457e19e
|
@ -293,7 +293,7 @@
|
|||
}
|
||||
|
||||
&--item {
|
||||
padding: 0.5rem 2.25rem !important;
|
||||
padding: 0.25rem 0.75rem;
|
||||
height: auto;
|
||||
margin: auto;
|
||||
min-width: 40px;
|
||||
|
@ -349,14 +349,6 @@
|
|||
height: $grid_navbar_height !important;
|
||||
position: relative;
|
||||
|
||||
@include themify($themes) {
|
||||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('link-hover');
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
@include flexbox();
|
||||
@include align-items(center);
|
||||
@include justify-content(center);
|
||||
|
@ -364,7 +356,7 @@
|
|||
color: themed('burger-menu-color');
|
||||
@include on-event {
|
||||
color: themed('navbar-title-hover-color');
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
background-color: themed('navbar-background-color');
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -487,12 +479,12 @@
|
|||
|
||||
&--item {
|
||||
height: $grid-navbar-height;
|
||||
padding: 0rem 0.75rem;
|
||||
|
||||
& > a {
|
||||
height: 100%;
|
||||
font-family: $title-font;
|
||||
font-size: 16.8px;
|
||||
font-size: 1rem;
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
text-decoration: none !important;
|
||||
|
||||
|
@ -507,6 +499,10 @@
|
|||
font-weight: bold;
|
||||
color: themed('navbar-title-active-color');
|
||||
}
|
||||
|
||||
@include on-event {
|
||||
background-color: themed('navbar-menu-hover-background-color');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -3,7 +3,7 @@
|
|||
|
||||
<head prefix="og: http://ogp.me/ns#">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<title>{{ block "title" . }}{{ .Title }} – {{ .Site.Title }}{{ end }}</title>
|
||||
{{ partial "head/scripts" . }}
|
||||
|
@ -20,8 +20,13 @@
|
|||
if (localTheme) {
|
||||
document.getElementById('root').className = 'theme__' + localTheme;
|
||||
}
|
||||
</script>
|
||||
|
||||
function resetHeight() {
|
||||
document.body.style.height = window.innerHeight + "px";
|
||||
}
|
||||
window.addEventListener("resize", resetHeight);
|
||||
resetHeight();
|
||||
</script>
|
||||
<div id="container">
|
||||
{{ partial "body/main-left" . }}
|
||||
<div class="wrapper" data-type="{{ .Type }}" data-kind="{{ .Kind }}">
|
||||
|
|
|
@ -80,10 +80,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
navCollapseBtn.classList.remove('is-active');
|
||||
}
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
||||
|
|
|
@ -85,10 +85,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
navCollapseBtn.classList.remove('is-active');
|
||||
}
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
||||
|
|
|
@ -80,10 +80,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
navCollapseBtn.classList.remove('is-active');
|
||||
}
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
document.getElementsByClassName('mobile-search')[0].classList.add('hide');
|
||||
|
|
|
@ -77,10 +77,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
navCollapseBtn.classList.remove('is-active');
|
||||
}
|
||||
if (document.getElementsByClassName('navbar__menu')[0]) {
|
||||
document.getElementsByClassName('navbar__menu')[0].classList.remove('is-active');
|
||||
|
|
|
@ -78,6 +78,7 @@
|
|||
}
|
||||
// ===============================================================
|
||||
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
// ===================== navbar collapse ======================
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
|
@ -90,9 +91,11 @@
|
|||
if (dataOpen === 'true') {
|
||||
navCollapse.setAttribute('data-open', 'false');
|
||||
navCollapse.style.maxHeight = 0;
|
||||
navCollapseBtn.classList.remove('is-active');
|
||||
} else {
|
||||
navCollapse.setAttribute('data-open', 'true');
|
||||
navCollapse.style.maxHeight = navCollapse.scrollHeight + "px";
|
||||
navCollapseBtn.classList.add('is-active');
|
||||
}
|
||||
}
|
||||
}) : null;
|
||||
|
|
|
@ -31,6 +31,14 @@
|
|||
elem.classList.add('half');
|
||||
elem.classList.remove('full');
|
||||
});
|
||||
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
navCollapseBtn.classList.remove('is-active');
|
||||
}
|
||||
},
|
||||
});
|
||||
// ===========================================================
|
||||
|
|
|
@ -59,6 +59,14 @@
|
|||
sectionElem.classList.remove(gridFull);
|
||||
sectionElem.classList.add(gridFull);
|
||||
}
|
||||
|
||||
var navCollapseBtn = document.querySelector('.navbar__burger');
|
||||
var navCollapse = document.getElementsByClassName('navbarm__collapse')[0];
|
||||
if (navCollapse) {
|
||||
navCollapse.setAttribute('data-open', false);
|
||||
navCollapse.style.maxHeight = 0;
|
||||
navCollapseBtn.classList.remove('is-active');
|
||||
}
|
||||
},
|
||||
setup: function () { },
|
||||
deferSetup: true,
|
||||
|
|
Loading…
Reference in New Issue