offen/website
2
0
Fork 0
mirror of https://github.com/offen/website.git synced 2024-11-22 17:10:29 +01: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; overflow: hidden;
transition: all .6s; transition: all .6s;
} }
.nav-list.active { body.no-js .nav-list {
transition: none;
}
.nav-list.active, body.no-js .nav-list {
height: 280px; height: 280px;
} }
.nav-mobile { .nav-mobile {
display: block; display: block;
} }

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

@ -1,13 +1,10 @@
new window.Vue({ // eslint-disable-line no-new ;(function () {
el: 'body.index .icon', var icon = document.querySelector('body.index .icon')
data: { if (!icon) {
progress: 0 return
},
mounted: function () {
var self = this
window.addEventListener('scroll', function () {
var scrollTop = parseInt(window.document.documentElement.scrollTop, 10)
self.progress = Math.min(scrollTop / 100, 1)
})
} }
}) 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 ;(function () {
el: '#navigation', var toggle = document.querySelector('#nav-toggle')
data: { if (!toggle) {
active: false return
},
methods: {
toggle: function () {
this.active = !this.active
}
} }
}) 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 %} {% block title %}{{ title }}{% endblock %}
</title> </title>
<meta charset="UTF-8"> <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 name="referrer" content="origin">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5"> <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"> <link rel="alternate" type="application/atom+xml" title="Atom" href="/feeds/all.atom.xml">
</head> </head>
{% endblock %} {% 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="cclr-bg-white-dark">
<div class="menu w-100 cclr-bg-yellow-mid"> <div class="menu w-100 cclr-bg-yellow-mid">
<section class="nav-bar"> <section class="nav-bar">
<div class="nav-container"> <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> <a class="link dim" href="/"><img src="/theme/images/offen-icon-white.svg" alt="Offen logo" width="37" height="40" class="logo"></a>
<header> <header>
<a class="link dim" href="/"><p class="fLogo normal ma0 ml2 white">Offen</p></a> <a class="link dim" href="/"><p class="fLogo normal ma0 ml2 white">Offen</p></a>
@ -50,11 +53,11 @@
{% if not funnel %} {% if not funnel %}
<nav id="navigation"> <nav id="navigation">
<div class="nav-mobile"> <div class="nav-mobile">
<span id="nav-toggle" v-on:click="toggle" v-bind:class="{ active: active }"> <span id="nav-toggle">
<span></span> <span></span>
</span> </span>
</div> </div>
<ul class="nav-list" v-bind:class="{ active: active }"> <ul class="nav-list">
{% if not index %} {% if not index %}
<li> <li>
<a class="b link dim cclr-fnt-black-mid" href="/">Summary</a> <a class="b link dim cclr-fnt-black-mid" href="/">Summary</a>
@ -327,7 +330,7 @@
</footer> </footer>
</div> </div>
{% block scripts %} {% 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> <script src="/{{ ASSET_URL }}"></script>
{% endassets %} {% endassets %}
{% endblock %} {% endblock %}