fix(sidebar): fix sidebar not working, remove unused classes, close #2

This commit is contained in:
Romain J 2020-06-19 01:36:29 +02:00
parent 0fb14fff16
commit 10b0e0c37a
6 changed files with 38 additions and 18 deletions

View file

@ -6,13 +6,11 @@
<div class="uk-flex uk-flex-middle top-wrap-height">
<div class="uk-container uk-flex-auto uk-position-relative uk-margin-medium-top">
<div class="uk-grid" data-uk-grid="masonry: true">
<div class="uk-width-1"
data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
<div class="uk-width-1">
<h1 class="uk-margin-remove-bottom uk-text-bold">{% trans 'À propos' %}</h1>
</div>
<div class="uk-width-1 uk-margin"
data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
<div class="uk-width-1 uk-margin">
<!-- attention, indentation pourrie en dessous, raison : flemme de scroll horizontalement -->
{% blocktrans %}
<p>GnousEU est une communauté de passionnés du libre ayant débuté en février 2017 sur la plateforme Discord.

View file

@ -6,12 +6,11 @@
<div class="uk-flex uk-flex-middle top-wrap-height">
<div class="uk-container uk-flex-auto uk-position-relative uk-margin-medium-top">
<div class="uk-grid" data-uk-grid="masonry: true">
<div class="uk-width-1-2@s"
data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
<div class="uk-width-1-2@s">
<h1 class="uk-margin-remove-bottom uk-text-bold">GnousEU</h1>
<p class="uk-margin-remove-bottom subtitle-text uk-text-bold">{% trans "Communauté francophone de passionnés du libre depuis 2017." %}</p>
</div>
<div data-uk-scrollspy="cls: uk-animation-fade" class="uk-width-expand">
<div class="uk-width-expand">
<img
src="{% static 'images/illustrations/services.svg' %}"
alt="Image">

View file

@ -9,6 +9,8 @@ Don't judge me
{#<script src="{% static 'javascripts/uikit/uikit.min.js' %}"></script>#}
{#<script src="{% static 'javascripts/uikit/uikit-icons.min.js' %}"></script>#}
<!-- theme -->
<script>
window.theme = document.querySelector('input[name=theme]');
theme.checked = document.documentElement.getAttribute('data-theme') === 'dark';
@ -33,6 +35,7 @@ Don't judge me
})
</script>
<!-- cookie banner -->
<script>
cookies = document.cookie.split('; ');
banner_cookie = document.cookie.split('; ').filter(e => e.startsWith('cookie-banner='))[0];
@ -48,6 +51,21 @@ Don't judge me
}
</script>
<!-- sidebar -->
<script>
offcanvas_nav = document.getElementById("offcanvas-nav");
trigger = document.querySelector("a.uk-navbar-toggle")
trigger.addEventListener("click", e => {
offcanvas_nav.classList.add("uk-offcanvas", "uk-offcanvas-overlay", "uk-open")
})
offcanvas_nav.querySelector("button.uk-close").addEventListener("click", e => {
offcanvas_nav.classList.remove("uk-offcanvas-overlay", "uk-open")
})
</script>
<!-- save theme -->
<script>
theme_session = window.sessionStorage.getItem('theme')
if (theme_session !== null) {

View file

@ -58,9 +58,12 @@
</form>
</div>
<a class="uk-navbar-toggle uk-navbar-item uk-hidden@s"
data-uk-toggle data-uk-navbar-toggle-icon data-turbolinks="false"
href="#offcanvas-nav">
<a class="uk-navbar-toggle uk-navbar-item uk-hidden@s">
<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="navbar-toggle-icon">
<rect y="9" width="20" height="2"></rect>
<rect y="3" width="20" height="2"></rect>
<rect y="15" width="20" height="2"></rect>
</svg>
</a>
</div>
</nav>

View file

@ -1,9 +1,14 @@
{% load static %}
{% load i18n %}
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true;" class="uk-offcanvas">
<div id="offcanvas-nav" data-uk-offcanvas="flip: true; overlay: true;" class="uk-offcanvas" style="display: block">
<div class="uk-offcanvas-bar uk-offcanvas-bar-animation uk-offcanvas-slide">
<button class="uk-offcanvas-close uk-close uk-icon" type="button" data-uk-close=""></button>
<button class="uk-offcanvas-close uk-icon uk-close" type="button">
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" data-svg="close-icon">
<line fill="none" stroke="#000" stroke-width="1.1" x1="1" y1="1" x2="13" y2="13"></line>
<line fill="none" stroke="#000" stroke-width="1.1" x1="13" y1="1" x2="1" y2="13"></line>
</svg>
</button>
<ul class="uk-nav uk-nav-default">
<li>

View file

@ -6,8 +6,7 @@
<div class="uk-flex uk-flex-middle top-wrap-height">
<div class="uk-container uk-flex-auto uk-position-relative uk-margin-medium-top">
<div class="uk-grid" data-uk-grid="masonry: true">
<div class="uk-width-1"
data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
<div class="uk-width-1">
<h1 class="uk-heading-line uk-margin-remove-bottom uk-text-bold uk-text-center">
<span>{% trans 'Donnez à GnousEU' %}</span>
</h1>
@ -19,8 +18,7 @@
</div>
</div>
<div class="uk-width-1 uk-margin-large-top"
data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
<div class="uk-width-1 uk-margin-large-top">
<h2 class="uk-heading-line uk-margin-remove-bottom uk-text-bold uk-text-center">
<span>{% trans 'Vous souhaitez nous donner du materiel ?' %}</span>
</h2>
@ -31,8 +29,7 @@
</p>
</div>
<div class="uk-width-1 uk-margin-large-top"
data-uk-scrollspy="cls: uk-animation-slide-left-medium; target: > *; delay: 100">
<div class="uk-width-1 uk-margin-large-top">
<h2 class="uk-heading-line uk-margin-remove-bottom uk-text-bold uk-text-center">
<span>{% trans 'Vous êtes fournisseur de services ?' %}</span>
</h2>