mirror of
https://github.com/offen/website.git
synced 2024-12-24 13:50:22 +01:00
Merge pull request #165 from offen/development
rewrite menu in vanilla js, improve no-js experience
This commit is contained in:
commit
a43697e773
@ -702,9 +702,13 @@ nav ul li ul li a {
|
||||
overflow: hidden;
|
||||
transition: all .6s;
|
||||
}
|
||||
.nav-list.active {
|
||||
body.no-js .nav-list {
|
||||
transition: none;
|
||||
}
|
||||
.nav-list.active, body.no-js .nav-list {
|
||||
height: 280px;
|
||||
}
|
||||
|
||||
.nav-mobile {
|
||||
display: block;
|
||||
}
|
||||
|
@ -1,13 +1,10 @@
|
||||
new window.Vue({ // eslint-disable-line no-new
|
||||
el: 'body.index .icon',
|
||||
data: {
|
||||
progress: 0
|
||||
},
|
||||
mounted: function () {
|
||||
var self = this
|
||||
window.addEventListener('scroll', function () {
|
||||
var scrollTop = parseInt(window.document.documentElement.scrollTop, 10)
|
||||
self.progress = Math.min(scrollTop / 100, 1)
|
||||
})
|
||||
;(function () {
|
||||
var icon = document.querySelector('body.index .icon')
|
||||
if (!icon) {
|
||||
return
|
||||
}
|
||||
})
|
||||
window.addEventListener('scroll', function () {
|
||||
var scrollTop = parseInt(window.document.documentElement.scrollTop, 10)
|
||||
icon.style.opacity = Math.min(scrollTop / 100, 1)
|
||||
})
|
||||
})()
|
||||
|
@ -1,11 +1,11 @@
|
||||
new window.Vue({ // eslint-disable-line no-new
|
||||
el: '#navigation',
|
||||
data: {
|
||||
active: false
|
||||
},
|
||||
methods: {
|
||||
toggle: function () {
|
||||
this.active = !this.active
|
||||
}
|
||||
;(function () {
|
||||
var toggle = document.querySelector('#nav-toggle')
|
||||
if (!toggle) {
|
||||
return
|
||||
}
|
||||
})
|
||||
toggle.addEventListener('click', function () {
|
||||
toggle.classList.toggle('active')
|
||||
var navList = document.querySelector('#navigation .nav-list')
|
||||
navList && navList.classList.toggle('active')
|
||||
})
|
||||
})()
|
||||
|
6
homepage/theme/static/scripts/vue.min.js
vendored
6
homepage/theme/static/scripts/vue.min.js
vendored
File diff suppressed because one or more lines are too long
@ -6,7 +6,7 @@
|
||||
{% block title %}{{ title }}{% endblock %}
|
||||
</title>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-eval' *.offen.dev; frame-src 'self' *.offen.dev; style-src 'self' 'unsafe-inline'">
|
||||
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self' 'unsafe-inline' *.offen.dev; frame-src 'self' *.offen.dev; style-src 'self' 'unsafe-inline'">
|
||||
<meta name="referrer" content="origin">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5">
|
||||
@ -36,12 +36,15 @@
|
||||
<link rel="alternate" type="application/atom+xml" title="Atom" href="/feeds/all.atom.xml">
|
||||
</head>
|
||||
{% endblock %}
|
||||
<body class="{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid">
|
||||
<body class="{{ template }} f5 rubik lh-copy cclr-fnt-black-mid cclr-bg-black-mid no-js">
|
||||
<script>
|
||||
document.body.classList.remove('no-js')
|
||||
</script>
|
||||
<div class="cclr-bg-white-dark">
|
||||
<div class="menu w-100 cclr-bg-yellow-mid">
|
||||
<section class="nav-bar">
|
||||
<div class="nav-container">
|
||||
<div class="icon flex" v-bind:style="{ opacity: progress }">
|
||||
<div class="icon flex">
|
||||
<a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
|
||||
<header>
|
||||
<a class="link dim" href="/"><p class="fLogo normal ma0 ml2 white">Offen</p></a>
|
||||
@ -50,11 +53,11 @@
|
||||
{% if not funnel %}
|
||||
<nav id="navigation">
|
||||
<div class="nav-mobile">
|
||||
<span id="nav-toggle" v-on:click="toggle" v-bind:class="{ active: active }">
|
||||
<span id="nav-toggle">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
<ul class="nav-list" v-bind:class="{ active: active }">
|
||||
<ul class="nav-list">
|
||||
{% if not index %}
|
||||
<li>
|
||||
<a class="b link dim cclr-fnt-black-mid" href="/">Summary</a>
|
||||
@ -327,7 +330,7 @@
|
||||
</footer>
|
||||
</div>
|
||||
{% block scripts %}
|
||||
{% assets filters="rjsmin", output="scripts/packed.js", "scripts/vue.min.js", "scripts/menu.js", "scripts/fade.js" %}
|
||||
{% assets filters="rjsmin", output="scripts/packed.js", "scripts/menu.js", "scripts/fade.js" %}
|
||||
<script src="/{{ ASSET_URL }}"></script>
|
||||
{% endassets %}
|
||||
{% endblock %}
|
||||
|
Loading…
Reference in New Issue
Block a user