offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-10-18 12:10:25 +02:00
Code Issues Projects Releases Wiki Activity

rewrite menu in vanilla js, improve no-js experience

Browse Source
This commit is contained in:
Frederik Ring 2021-05-14 08:51:04 +02:00
parent 59628cc20a
commit 69b2dfbc47
5 changed files with 33 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
homepage/theme/static/css/fix.css
View File

@ -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;
}

21
homepage/theme/static/scripts/fade.js
View File

@ -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)
})
})()

20
homepage/theme/static/scripts/menu.js
View File

@ -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
View File

File diff suppressed because one or more lines are too long

15
homepage/theme/templates/base.html
View File

@ -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 %}