Mindiell/afpy.org
1
0
Fork 0
forked from AFPy/afpy.org
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add toggle on mobile menu and enhance menu style

Browse Source
This commit is contained in:
Alexandra Janin 2018-10-04 15:08:24 +02:00
parent db9a87239d
commit 0bacdcf91e
3 changed files with 80 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
sass/style.sass
View File

@ -98,36 +98,53 @@ header
order: 1
padding: 0 1em
.wrapper
width: 100%
max-width: 1200px
margin: 0 auto
box-sizing: border-box
.menu
display: flex
flex-direction: column
flex-direction: row
justify-content: flex-start
align-items: flex-start
align-items: center
padding: 0 1em
min-height: 70px
@media screen and (min-width: 640px)
flex-direction: row
justify-content: center
align-items: center
// Footer navigation
&--footer
background: $header
box-sizing: border-box
margin-top: 2em
order: 4
&__toggle
order: 2
text-align: right
align-self: flex-start
padding-top: 1em
@media screen and (min-width: 840px)
display: none
&__checkbox
display: none
&:checked + .menu__list
max-height: 84px
overflow: hidden
// ul element
&__list
flex: 1 1 100%
display: flex
flex-direction: column
list-style: none
margin: 0
padding: 0
width: 100%
max-height: 1000px
transition: max-height .3s
@media screen and (min-width: 640px)
@media screen and (min-width: 840px)
flex-direction: row
justify-content: center
align-items: center
@ -136,20 +153,27 @@ header
color: $text
display: block
font-weight: 600
padding: 1em
text-decoration: none
.active a
color: $action-secondary
&__item
padding: 1em 0
font-size: .8em
text-transform: uppercase
white-space: nowrap
@media screen and (min-width: 840px)
padding: 1em
&--brand
flex: 1 1 100%
padding-left: 0
.brand
flex: 1 1 100%
display: flex
flex-direction: row
justify-content: center
align-items: center
font-size: 1.5em
img
@ -181,11 +205,6 @@ footer
list-style: none
padding: 0
a
color: inherit
text-decoration: inherit
padding: 1em
h1
color: $action-secondary
font-weight: 300

51
static/css/style.sass.css
View File

@ -85,31 +85,47 @@ header {
order: 1;
padding: 0 1em; }
.wrapper {
width: 100%;
max-width: 1200px;
margin: 0 auto;
box-sizing: border-box; }
.menu {
display: flex;
flex-direction: column;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start;
align-items: center;
padding: 0 1em;
min-height: 70px; }
@media screen and (min-width: 640px) {
.menu {
flex-direction: row;
justify-content: center;
align-items: center; } }
.menu--footer {
background: #1d1e23;
box-sizing: border-box;
margin-top: 2em;
order: 4; }
.menu__toggle {
order: 2;
text-align: right;
align-self: flex-start;
padding-top: 1em; }
@media screen and (min-width: 840px) {
.menu__toggle {
display: none; } }
.menu__checkbox {
display: none; }
.menu__checkbox:checked + .menu__list {
max-height: 84px;
overflow: hidden; }
.menu__list {
flex: 1 1 100%;
display: flex;
flex-direction: column;
list-style: none;
margin: 0;
padding: 0;
width: 100%; }
@media screen and (min-width: 640px) {
max-height: 1000px;
transition: max-height .3s; }
@media screen and (min-width: 840px) {
.menu__list {
flex-direction: row;
justify-content: center;
@ -118,17 +134,24 @@ header {
color: #eaeaea;
display: block;
font-weight: 600;
padding: 1em;
text-decoration: none; }
.menu__list .active a {
color: #ffcd05; }
.menu__item {
padding: 1em 0;
font-size: .8em;
text-transform: uppercase; }
text-transform: uppercase;
white-space: nowrap; }
@media screen and (min-width: 840px) {
.menu__item {
padding: 1em; } }
.menu__item--brand {
flex: 1 1 100%;
padding-left: 0; }
.menu__item .brand {
flex: 1 1 100%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
font-size: 1.5em; }
.menu__item .brand img {
@ -158,10 +181,6 @@ footer ul {
justify-content: center;
list-style: none;
padding: 0; }
footer ul a {
color: inherit;
text-decoration: inherit;
padding: 1em; }
h1 {
color: #ffcd05;

14
templates/_layout.jinja2
View File

@ -10,9 +10,11 @@
</head>
<body id="{{ body_id }}">
<header>
{% block header %}{% endblock header %}
<div class="wrapper">
{% block header %}{% endblock header %}
</div>
</header>
<nav class="menu menu--main">
<nav class="wrapper menu menu--main">
{% set navigation_bar = [
(url_for('index'), 'index', 'Accueil'),
(url_for('rest', name='a-propos'), 'a-propos', 'Qui sommes-nous ?'),
@ -22,8 +24,10 @@
(url_for('pages', name='discussion'), 'discussion', 'Discussion'),
(url_for('pages', name='adhesions'), 'adhesions', 'Adhésions')
] -%}
<label for="toggle" class="menu__toggle">Menu</label>
<input class="menu__checkbox" type="checkbox" name="toggle" id="toggle" checked>
<ul class="menu__list">
<li class="menu__item">
<li class="menu__item menu__item--brand">
<a class="brand" href="{{ url_for('index') }}">
<img src="{{ url_for('static', filename='images/logo.svg') }}" title="Logo afpy" />
<span>AFPy</span>
@ -38,11 +42,11 @@
<main>
{% block main %}{% endblock main %}
</main>
<footer class="menu menu--footer">
<footer class="wrapper menu menu--footer">
{% set navigation_bar = [
(url_for('rest', name='contact'), 'Contact'),
(url_for('rest', name='charte'), 'Charte'),
(url_for('rest', name='legal'), 'Offres \'Mentions légales'),
(url_for('rest', name='legal'), 'Mentions légales'),
(url_for('rest', name='rss'), 'Flux RSS'),
('https://twitter.com/asso_python_fr', 'Twitter'),
(url_for('admin', name='actualites'), 'Admin actualités'),