entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

general: add support for new PWA navigation (#29380)

This commit is contained in:
Frédéric Péters 2018-12-28 10:14:00 +01:00
parent 1f311c5842
commit ac6f90e310
14 changed files with 221 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
help/fr/misc-scss.page
View File

@ -272,14 +272,12 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
<td><p>Rendu de la navigation en mode mobile, <var>none</var> pour conserver
le rendu « desktop », <var>hamburger</var> pour placer la navigation dans un
menu « hamburger », <var>bottom-bar</var> pour placer la navigation dans une
barre en bas d'écran.</p></td>
barre en bas d'écran, <var>hidden</var> pour cacher la navigation.</p>
<p>Les paramètres supplémentaires pour le rendu <var>bottom-bar</var> sont
détaillés dans la section <link xref="#pwa">application mobile</link>.</p>
</td>
<td><p><var>hamburger</var></p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-height</code></p></td>
<td><p>Hauteur de la barre de navigation en mode mobile.</p></td>
<td><p><var>64px</var></p></td>
</tr>
</table>
</section>
@ -331,6 +329,66 @@ paramètre, la deuxième sa description et la troisième la valeur par défaut.
</table>
</section>
<section id="pwa">
<title>Application mobile (PWA)</title>
<p>
Ces paramètres contrôlent le rendu de la barre de navigation de bas
d'écran, présente en mode mobile quand <code>$nav-mobile-mode</code>
a pour valeur <var>bottom-bar</var>.
</p>
<table shade="rows">
<tr>
<td><p><code>$nav-mobile-bottom-bar-height</code></p></td>
<td><p>Hauteur de la barre de navigation en mode mobile.</p></td>
<td><p><var>64px</var></p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-background</code></p></td>
<td><p>Couleur du fond</p></td>
<td><p>white</p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-color</code></p></td>
<td><p>Couleur du texte</p></td>
<td><p><var>$nav-color</var></p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-item-hover-background</code></p></td>
<td><p>Couleur de fond d'un élément au survol</p></td>
<td><p><var>$nav-item-hover-background</var></p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-item-hover-color</code></p></td>
<td><p>Couleur du texte d'un élément au survol</p></td>
<td><p><var>$nav-item-hover-color</var></p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-item-selected-background</code></p></td>
<td><p>Couleur de fond de l'élément actif</p></td>
<td><p><var>$nav-item-selected-backgroud</var></p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-item-selected-color</code></p></td>
<td><p>Couleur du texte de l'élément actif</p></td>
<td><p><var>$nav-item-selected-backgroud</var></p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-badge-background</code></p></td>
<td><p>Couleur de fond du badge reprenant le nombre de notifications.</p></td>
<td><p>#ee2222 (rouge)</p></td>
</tr>
<tr>
<td><p><code>$nav-mobile-bottom-bar-badge-color</code></p></td>
<td><p>Couleur du texte du badge reprenant le nombre de notifications.</p></td>
<td><p>white</p></td>
</tr>
</table>
</section>
<section>
<title>Formulaires</title>

158
static/includes/_nav.scss
View File

@ -39,7 +39,16 @@ $responsive-menu: top-to-bottom !default; // or left-to-right
$nav-after-image: true !default;
$nav-after-image-height: 300px !default;
$nav-mobile-bottom-bar-height: 64px;
$nav-mobile-bottom-bar-height: 64px !default;
$nav-mobile-bottom-bar-background: white !default;
$nav-mobile-bottom-bar-color: $nav-color !default;
$nav-mobile-bottom-bar-item-hover-background: $nav-item-hover-background !default;
$nav-mobile-bottom-bar-item-hover-color: $nav-item-hover-color !default;
$nav-mobile-bottom-bar-item-selected-background: $nav-item-selected-background !default;
$nav-mobile-bottom-bar-item-selected-color: $nav-item-selected-color !default;
$nav-mobile-bottom-bar-badge-color: white !default;
$nav-mobile-bottom-bar-badge-background: #e22 !default;
@if $nav-full-width-background == true {
@ -329,66 +338,101 @@ div.menucell {
}
}
@if $nav-mobile-mode == bottom-bar {
.pwa-navigation {
display: none;
}
@media screen and (max-width: $nav-mobile-limit) {
div#header h1 {
padding-left: 0;
background-position: 0;
.pwa-navigation {
display: block;
}
nav {
background: white; // make sure it is opaque
height: $nav-mobile-bottom-bar-height;
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
#nav-wrapper {
padding: 0;
margin: 0;
}
div#nav ul {
margin-top: 0;
padding-top: 0;
display: flex;
li {
flex: 1;
position: relative;
margin-left: 0;
text-align: center;
&:hover a {
background: $nav-item-hover-background;
color: $nav-item-hover-color;
}
&.selected a {
background: $nav-item-selected-background;
color: $nav-item-selected-color;
}
a {
span {
overflow: hidden;
text-overflow: ellipsis;
}
width: 100%;
line-height: 0.8em;
padding: 0px 4px;
height: $nav-mobile-bottom-bar-height;
padding-top: $nav-mobile-bottom-bar-height / 2;
box-sizing: border-box;
border-bottom: 0;
span {
}
%pwa-bottom-bar {
background: $nav-mobile-bottom-bar-background;
height: $nav-mobile-bottom-bar-height;
position: fixed;
bottom: 0;
z-index: 1000;
width: 100%;
#nav-wrapper {
padding: 0;
margin: 0;
}
div > ul,
div#nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
li {
flex: 1;
position: relative;
margin-left: 0;
text-align: center;
&:hover a {
background-color: $nav-mobile-bottom-bar-item-hover-background;
color: $nav-mobile-bottom-bar-item-hover-color;
}
&.selected a {
background-color: $nav-mobile-bottom-bar-item-selected-background;
color: $nav-mobile-bottom-bar-item-selected-color;
}
a {
@include vendor-prefix('transition', 'background 0.5s, color 0.5s');
background: transparent 50% 10px no-repeat;
color: $nav-mobile-bottom-bar-color;
display: block;
width: 100%;
line-height: 0.8em;
padding: 0px 4px;
height: $nav-mobile-bottom-bar-height;
padding-top: $nav-mobile-bottom-bar-height / 2;
box-sizing: border-box;
border-bottom: 0;
span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
height: $nav-mobile-bottom-bar-height / 2;
font-size: 10px;
span.badge { // notifications
display: block;
height: $nav-mobile-bottom-bar-height / 2;
font-size: 10px;
background: $nav-mobile-bottom-bar-badge-background;
color: $nav-mobile-bottom-bar-badge-color;
font-size: 80%;
position: absolute;
top: 10px;
left: calc(50% + 10px);
border-radius: 100%;
height: 16px;
line-height: 16px;
width: 16px;
}
}
&::before {
position: absolute;
background-position: 50% 2px;
width: 100%;
}
}
&::before {
position: absolute;
background-position: 50% 2px;
width: 100%;
}
}
}
}
.pwa-navigation {
@extend %pwa-bottom-bar;
}
@if $nav-mobile-mode == bottom-bar {
@media screen and (max-width: $nav-mobile-limit) {
nav {
@extend %pwa-bottom-bar;
}
div#header h1 { // cancel hamburger
padding-left: 0;
background-position: 0;
}
body.has-picture[data-picture] nav::after {
content: none;
}
@ -398,6 +442,14 @@ div.menucell {
}
}
@if $nav-mobile-mode == hidden {
@media screen and (max-width: $nav-mobile-limit) {
nav {
display: none;
}
}
}
@if $nav-after-image == true {
@supports (background-image: var(--page-picture)) {
body.has-picture nav::after {

35
static/metz-metropole/_custom.scss
View File

@ -65,32 +65,17 @@ div#header-wrapper {
margin-bottom: 0;
text-transform: uppercase;
}
@media screen and (max-width: $mobile-limit) {
background: $secondary-color;
div#nav.gru-nav > ul > li a {
color: white;
}
}
}
@media screen and (max-width: $mobile-limit) {
div#nav ul li {
background: url(img/Gradient_Quadri.png) 50% 25px no-repeat;
background-size: $nav-mobile-bottom-bar-height / 2;
a {
background: transparent 50% 10px no-repeat;
&:hover {
background-color: $primary-color;
}
}
&.menu-index a {
background-image: url(img/icon-home.png);
}
&.menu-mes-demarches a {
background-image: url(img/icon-form.png);
}
&.menu-mon-profil a {
background-image: url(img/icon-profile.png);
}
#pwa-navigation {
ul > li {
background: url(img/Gradient_Quadri.png) 50% 25px no-repeat;
background-size: $nav-mobile-bottom-bar-height / 2;
a {
text-transform: uppercase;
font-weight: bold;
background-position: 50% 10px;
background-repeat: no-repeat;
}
}
}

5
static/metz-metropole/_vars.scss
View File

@ -40,4 +40,7 @@ $widget-focus-background: white;
$widget-custom-radio-checkbox: true;
$widget-custom-radio-checkbox-color: $primary-color;
$nav-mobile-mode: bottom-bar;
$nav-mobile-mode: hidden;
$nav-mobile-bottom-bar-background: $secondary-color;
$nav-mobile-bottom-bar-color: white;
$nav-mobile-bottom-bar-item-hover-background: $primary-color;

BIN
static/metz-metropole/img/icon-form.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 343 B

BIN
static/metz-metropole/img/icon-home.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 341 B

BIN
static/metz-metropole/img/icon-profile.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 398 B

106
static/quimper/_custom.scss
View File

@ -36,89 +36,35 @@ div#header {
}
}
#dashboard-nav {
max-width: $width;
width: 100%;
top: 0;
right: 0;
margin: 0 auto;
position: relative;
@media screen and (max-width: $nav-mobile-limit) {
position: static;
}
ul {
position: absolute;
right: 0;
top: -100px;
background: white;
width: 380px;
@media screen and (max-width: $nav-mobile-limit) {
position: fixed;
z-index: 100;
width: 100%;
top: auto;
bottom: 0;
}
display: flex;
padding: 0;
margin: 0;
li {
flex: 1;
list-style: none;
padding: 0;
margin: 0;
text-align: center;
text-transform: uppercase;
#pwa-navigation {
text-transform: uppercase;
a {
background-position: 50% 10px;
background-size: 30px;
padding-top: $nav-mobile-bottom-bar-height / 1.5;
span {
font-size: 12px;
display: block;
&:nth-child(1) a {
background-image: url(img/moncompte.svg);
}
&:nth-child(2) a {
background-image: url(img/mesdemandes.svg);
}
&:nth-child(3) a {
background-image: url(img/alertes.svg);
}
}
}
@media screen and (min-width: $nav-mobile-limit - 1px) {
display: block;
max-width: $width;
margin: auto;
background: transparent;
position: relative;
height: auto;
> div {
width: 380px;
background: white;
position: absolute;
right: 0;
top: -48px - 100px; // $nav-height - $header-height
a {
&:hover {
background-color: $yellow;
}
color: $blue;
position: relative;
height: 100px;
box-sizing: border-box;
display: block;
background: 50% 30px no-repeat;
background-size: 30px;
padding-top: 15px;
@media screen and (max-width: $nav-mobile-limit) {
background-position: 50% 10px;
padding-top: 0px;
height: 60px;
}
> span {
display: block;
padding-top: 50px;
@media screen and (max-width: $nav-mobile-limit) {
padding-top: 40px;
}
}
span.badge { // notifications
display: block;
font-size: 80%;
position: absolute;
top: 35px;
@media screen and (max-width: $nav-mobile-limit) {
top: 10px;
}
left: calc(50% + 10px);
background: $orange;
border-radius: 100%;
color: white;
height: 16px;
line-height: 16px;
width: 16px;
background-position: 50% 30px;
padding-top: 70px;
span.badge {
top: 30px;
}
}
}

5
static/quimper/_vars.scss
View File

@ -30,6 +30,11 @@ $nav-menu-side: 60px;
$nav-mobile-menu-background: $blue;
$nav-mobile-menu-item-color: white;
$nav-mobile-bottom-bar-color: $blue;
$nav-mobile-bottom-bar-item-hover-background: $yellow;
$nav-mobile-bottom-bar-item-hover-color: $blue;
$nav-mobile-bottom-bar-badge-background: $orange;
$footer-background: transparent;
$footer-color: #333;

14
static/quimper/img/alertes.svg
View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 26.36 25" style="enable-background:new 0 0 26.36 25;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#0165BA;stroke-width:2;stroke-miterlimit:10;}
</style>
<g>
<path class="st0" d="M23.76,20.62H2.6c-0.88,0-1.6-0.72-1.6-1.6v-0.19c0-0.88,0.72-1.6,1.6-1.6h21.16c0.88,0,1.6,0.72,1.6,1.6v0.19
C25.35,19.9,24.63,20.62,23.76,20.62z"/>
<path class="st0" d="M3.03,17.24v-6.09C3.03,5.55,7.57,1,13.18,1s10.15,4.54,10.15,10.15v6.09"/>
<path class="st0" d="M16.56,20.62c0,1.87-1.51,3.38-3.38,3.38S9.8,22.49,9.8,20.62"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 836 B

10
static/quimper/img/mesdemandes.svg
View File

@ -1,10 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 28.68 25.25" style="enable-background:new 0 0 28.68 25.25;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#0165BA;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<path class="st0" d="M12.06,17.27v5.74l6.39-5.74h1.42c4.29,0,7.81-3.51,7.81-7.81V8.81c0-4.29-3.51-7.81-7.81-7.81H8.81
C4.52,1,1,4.51,1,8.81v0.65c0,4.29,3.51,7.81,7.81,7.81"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 674 B

12
static/quimper/img/moncompte.svg
View File

@ -1,12 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 23.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24.45 23" style="enable-background:new 0 0 24.45 23;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;stroke:#0165BA;stroke-width:2;stroke-linecap:round;stroke-miterlimit:10;}
</style>
<g>
<circle class="st0" cx="12.22" cy="7.88" r="6.88"/>
<path class="st0" d="M1,22c0-2.79,2.58-5.07,5.73-5.07h10.99c3.15,0,5.73,2.28,5.73,5.07"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 647 B

8
templates/combo/page_template.html
View File

@ -1,5 +1,5 @@
{% extends theme_base_filename %}
{% load static i18n combo gadjo %}
{% load static i18n combo gadjo pwa %}
{% block extra_top_head %}
{{ block.super }}
@ -49,6 +49,12 @@ page-{{ page.slug }} page-template-{{ page.template_name }} {% if pages %}sectio
{% placeholder "menu_right" %}
{% endblock %}
{% block before-main-content %}
{% if pwa_display == "standalone" or pwa_display == "fullscreen" %}
{% pwa_navigation %}
{% endif %}
{% endblock %}
{% block messages %}
{{ block.super }}
{% placeholder "messages" %}

9
templates/variants/quimper/combo/page_template.html
View File

@ -1,9 +0,0 @@
{% extends "../../combo/page_template.html" %}
{% load combo %}
{% block header-post %}
<div id="dashboard-nav">
{% get_page "ma-situation" as dashboard_root %}
{% show_menu current_page=dashboard_root level=-1 ignore_visibility=True %}
</div>
{% endblock %}