add pre-saint-gervais (#30504)

This commit is contained in:
Frédéric Péters 2019-03-21 16:48:15 +01:00
parent 5b212f3806
commit e6430e7587
13 changed files with 864 additions and 0 deletions

View File

@ -0,0 +1,668 @@
@font-face {
font-family: "Font Awesome 5 Brands";
src: url("https://cdn.publidata.io/_next/static/fonts/fa-brands-400.woff") format("woff"),
url("https://cdn.publidata.io/_next/static/fonts/fa-brands-400.ttf") format("truetype");
font-style: normal;
font-weight: normal;
}
@mixin publidata_font($family, $qualifier, $weight) {
@font-face {
font-family: $family;
src: url("https://cdn.publidata.io/_next/static/fonts/#{$family}#{$qualifier}.woff") format("woff"),
url("https://cdn.publidata.io/_next/static/fonts/#{$family}#{$qualifier}.ttf") format("truetype");
font-style: normal;
font-weight: $weight;
}
}
@include publidata_font("MaisonNeue", "-Book", 400);
@include publidata_font("MaisonNeue", "-Medium", 500);
@include publidata_font("MaisonNeue", "-Bold", 700);
@include publidata_font("GTWalsheimPro", "Medium", 500);
@include publidata_font("GTWalsheimPro", "Bold", 700);
@include publidata_font("icomoon", "", normal);
%title {
@extend %title;
text-align: left;
@media screen and (max-width: $nav-mobile-limit) {
}
font-weight: bold;
}
%bigtitle {
@extend %title;
position: relative;
&::before {
content: "";
display: inline-block;
position: relative;
top: -4px;
height: 18px;
width: 18px;
background: $primary-color;
margin-right: 10px;
}
font-size: 50px;
@media screen and (max-width: $nav-mobile-limit) {
font-size: 40px;
&::before {
content: none;
}
text-align: center;
}
}
%button {
@extend %button;
text-transform: uppercase;
font-size: 15px;
font-weight: bold;
}
body {
background: white;
}
header {
position: fixed;
z-index: 1000;
width: 100%;
@media screen and (max-width: $nav-mobile-limit) {
left: 60px; // for burger menu
width: calc(100% - 60px);
}
}
#nav-wrapper {
position: fixed;
z-index: 900;
width: 100%;
top: 48px;
}
.has-picture div#page div#main-content-wrapper {
margin-top: 0px;
}
div#page div#main-content-wrapper {
margin-top: 130px;
@media screen and (max-width: $nav-mobile-limit) {
margin-top: 80px;
}
}
#header-wrapper {
background: black;
color: white;
height: 48px;
text-transform: uppercase;
@media screen and (max-width: $nav-mobile-limit) {
background: transparent;
}
#header {
padding-right: 0;
}
#top {
position: absolute;
top: 0;
left: 0;
a {
display: block;
width: 120px;
height: 120px;
background: url(img/logo.png) top left no-repeat;
text-indent: -10000px;
}
@media screen and (max-width: $nav-mobile-limit) {
h1 {
padding-left: calc(50vw - 30px - 60px);
}
a {
width: 60px;
height: 60px;
background-size: 60px;
}
}
}
#header-nav {
text-align: right;
line-height: 48px;
a {
display: inline-block;
font-weight: bold;
font-size: 14px;
height: 48px;
color: #e8e8e8;
&:hover {
color: white;
}
&::before {
font-family: icomoon;
color: $turquoise;
margin-left: 10px;
padding: 0 8px;
}
&#around, &#agenda, &#contact {
border-left: 1px solid #202020;
margin-left: 15px;
}
&#around::before { content: "\e93e"; }
&#agenda::before { content: "\e901"; }
&#contact::before { content: "\e91f"; }
&.login::before,
&.logout::before {
color: white;
content: "\e94d";
margin-left: 0px;
}
&.login,
&.logout {
margin-left: 10px;
background: $turquoise;
padding-right: 20px;
}
&.social {
&::before {
color: inherit;
font-family: "Font Awesome 5 Brands";
}
&:hover {
color: $turquoise;
}
}
}
@media screen and (max-width: $nav-mobile-limit) {
a {
display: none;
&.login,
&.logout {
display: inline-block;
text-indent: -10000px;
&::before {
color: $turquoise;
}
}
}
}
}
}
div.gru-nav > ul {
display: flex;
justify-content: space-between;
height: 72px;
margin-top: 0;
margin-bottom: 1rem;
margin-left: 120px; // logo overflowing
@media screen and (max-width: $nav-mobile-limit) {
margin-left: 0;
box-shadow: none;
}
padding-left: 10px;
font-family: "GTWalsheimPro", sans-serif;
font-weight: bold;
font-size: 19px;
> li a {
padding-top: 7px;
padding-bottom: 7px;
}
ul {
li a {
font-size: 15px;
padding-top: 0;
padding-bottom: 0;
}
}
}
body.scrolled div.gru-nav > ul {
background: white;
box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
}
@media screen and (max-width: $nav-mobile-limit) {
div#nav {
margin-top: 5px;
}
#nav-wrapper {
background: white;
margin-top: 0;
top: 0;
}
div.gru-nav .gru-nav-button + ul {
margin-top: 4px;
border-top: 1px solid #f1f1f1;
padding-left: 0;
li {
position: relative;
span::after {
content: "";
position: absolute;
right: 1rem;
color: $pink;
}
span.badge::after {
content: none;
}
}
}
div.gru-nav .gru-nav-button.toggled + ul {
height: calc(100vh - 60px - #{$nav-mobile-bottom-bar-height});
}
#header-wrapper #header-nav a.login,
#header-wrapper #header-nav a.logout {
background: transparent;
overflow: hidden;
&::before {
height: 60px;
text-indent: 0;
text-align: center;
width: 60px;
line-height: 60px;
display: block;
position: absolute;
top: 0;
right: 0;
font-size: 24px;
color: $turquoise;
}
}
}
body.has-picture nav::after {
background-size: $width;
position: static;
margin-top: 160px;
margin-bottom: 20px;
@media screen and (max-width: $nav-mobile-limit) {
margin-top: 60px;
}
}
a.pk-button.inverted {
background: white;
color: $pink;
}
div#footer {
max-width: 1300px;
top: 130px;
padding-top: 30px;
font-size: 16px;
a.pk-button.inverted {
border: 2px solid white;
color: white;
background: $pink;
}
h3 {
margin-bottom: 1rem;
}
ul {
margin: 1ex 0.5rem;
padding: 0;
list-style: none;
li {
margin: 1ex 0;
padding: 0;
}
}
a {
color: white;
}
address {
font-style: normal;
padding-bottom: 10px;
a {
text-decoration: underline;
}
}
}
div#form-page {
position: relative;
div#gauche {
clear: none;
float: none;
width: 420px;
position: absolute;
top: 0;
left: 0;
@media screen and (max-width: $nav-mobile-limit) {
width: auto;
position: static;
margin-bottom: 1rem;
}
}
&.with-sidebar {
padding-left: 460px;
@media screen and (max-width: $nav-mobile-limit) {
padding-left: 0;
}
}
div#rub_service {
clear: none;
float: none;
width: auto;
padding-top: 0;
form {
padding-top: 0;
}
}
#title-section {
padding-top: 1rem;
@media screen and (max-width: $nav-mobile-limit) {
padding-top: 0;
}
h1 {
@extend %bigtitle;
}
}
}
div#tracking-code {
margin-top: 1rem;
box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
h3 {
&::before {
content: none;
}
}
h3, a {
font-size: 20px;
display: inline-block;
padding: 0.6rem;
}
a {
float: right;
}
}
#side div#steps {
@media screen and (max-width: $nav-mobile-limit) {
box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
}
ol {
li {
@media screen and (max-width: $nav-mobile-limit) {
display: none;
}
box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
background: white;
position: relative;
border-radius: 5px;
span.marker {
position: absolute;
top: 0;
left: 0;
display: block;
background: $turquoise;
color: white;
font-size: 100%;
display: inline-block;
width: 60px;
height: 60px;
line-height: 60px;
text-align: center;
font-weight: bold;
border-radius: 5px 0 0 5px;
@media screen and (max-width: $nav-mobile-limit) {
width: 20px;
}
}
span.label {
padding-top: 10px;
padding-left: 60px;
display: inline-block;
white-space: pre;
max-width: 80%;
overflow: hidden;
text-overflow: ellipsis;
@media screen and (max-width: $nav-mobile-limit) {
padding-top: 25px;
padding-left: 50px;
font-size: 80%;
font-weight: bold;
}
}
min-height: 60px;
box-sizing: border-box;
border: none;
&.current {
background: $turquoise;
color: white;
@media screen and (max-width: $nav-mobile-limit) {
display: block;
color: black;
background: white;
}
}
}
}
}
form p label,
div.widget div.title label {
text-align: left;
text-transform: uppercase;
font-size: 80%;
color: #54505d;
font-weight: bold;
}
input, input[type="text"], input[type="email"], input[type="password"], input[type="url"], input[type="tel"], input[type="number"], input[type="search"], input[type="file"], input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"], textarea, select {
padding: 1.2ex 0.7em 1.2ex 0.7em;
}
#login-pre {
text-align: center;
max-width: 60ex;
margin: 0 auto;
h2 {
font-size: 40px;
color: black;
}
+ div#login-page div.block {
width: auto;
max-width: 40ex;
margin: 0 auto;
float: none;
border: none;
text-align: center;
&.block-password {
label,
input {
text-align: left;
width: 100%;
}
label {
text-transform: uppercase;
color: #5b5864;
font-size: 80%;
}
button {
margin: 0 1rem;
}
}
&.block-fc {
box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
}
.fc-explanation-text,
.login-actions {
font-size: 14px;
color: #4b5259;
}
}
}
div.a2-block {
margin-top: 0;
}
#registration-pre {
text-align: center;
max-width: 60ex;
margin: 0 auto;
h1, h2 {
margin-top: 20px;
text-align: center;
font-size: 40px;
color: black;
}
+ form,
+ div.registration_frontend {
width: auto;
max-width: 40ex;
margin: 0 auto;
float: none;
border: none;
text-align: center;
margin-bottom: 2rem;
span.helptext {
text-align: left;
}
}
}
#registration-complete {
text-align: center;
max-width: 60ex;
margin: 5rem auto;
h1, h2 {
margin-top: 20px;
text-align: center;
font-size: 40px;
color: black;
}
@media screen and (max-width: $nav-mobile-limit) {
margin-top: 1rem;
}
}
#pwa-navigation {
text-transform: uppercase;
a {
background-position: 50% 10px;
background-size: 20px;
padding-top: 32px;
span {
font-size: 11px;
}
span.badge {
position: absolute;
top: 5px;
background: $pink;
}
}
@media screen and (min-width: $nav-mobile-limit - 1px) {
box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
display: block;
top: 200px;
height: auto;
bottom: auto;
right: 0;
width: 80px;
ul {
padding: 1rem 0;
flex-direction: column;
a {
filter: grayscale(100%);
&.selected,
&:hover {
filter: none;
}
}
}
}
}
span#environment-label {
font-size: 10px;
}
form.quixote div.buttons {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.submit-button {
order: 1;
width: 49%;
}
.cancel-button {
order: 2;
width: 49%;
button {
color: $pink;
background: white;
}
}
.previous-button {
order: 0;
width: 49%;
}
.previous-button + .cancel-button {
width: 100%;
}
div.content {
display: block;
button {
width: 100%;
}
}
}
a.social {
&::before {
font-family: "Font Awesome 5 Brands";
margin-left: 0px;
color: inherit;
padding-right: 8px;
}
&#facebook::before { content: "\f39e"; }
&#twitter::before { content: "\f099"; }
&#instagram::before { content: "\f16d"; }
&#youtube::before { content: "\f167"; }
}
div.cell {
&.shadow {
box-shadow: 0 5px 35px -5px rgba(4, 11, 65, 0.15);
border-radius: 5px;
}
&.foldable > div > h2:first-child::after {
content: "\f106"; // angle-up
background: $pink;
color: white;
border-radius: 100%;
font-weight: normal;
font-size: 16px;
height: 20px;
width: 20px;
text-align: center;
line-height: 16px;
}
&.foldable.folded > div > h2:first-child::after {
line-height: 20px;
}
}
.cell.trackingcodeinputcell {
button {
width: 100%;
background: white;
color: $pink;
border: 2px solid $pink;
}
}

View File

@ -0,0 +1,40 @@
$pink: #c71036;
$turquoise: #16b19b;
$primary-color: $pink;
$width: 1164px;
$font-size: 20px;
$font-color: #6f7a83;
$font-family: MaisonNeue, sans-serif;
$border-radius: 0;
$link-color: $pink;
$nav-background: white;
$nav-item-selected-background: transparent;
$nav-item-selected-color: black;
$nav-item-hover-background: $turquoise;
$nav-item-hover-color: white;
$nav-submenu-color: #333;
$nav-button-background: white;
$nav-button-color: black;
$nav-border-color: #e7e7e7;
$nav-mobile-menu-background: white;
$nav-mobile-bottom-bar-item-hover-background: white;
$nav-mobile-bottom-bar-item-hover-color: $pink;
$nav-mobile-bottom-bar-item-selected-background: white;
$nav-mobile-bottom-bar-item-selected-color: $pink;
$footer-background: $pink;
$button-background: $pink;
$widget-border: 1px solid #767f8b;
$widget-border-radius: 5px;
$button-border: 2px solid $pink;
$button-border-radius: 20px;
$cell-border: 1px solid transparent;

View File

@ -0,0 +1,8 @@
{
"label": "Pré-Saint-Gervais",
"variables": {
"include_top_links": false,
"pwa_display": "standalone",
"theme_color": "#ffffff"
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 85 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 21 KiB

View File

@ -0,0 +1,5 @@
@charset "UTF-8";
@import 'vars';
@import '../includes/publik';
@import 'custom';

View File

@ -0,0 +1,11 @@
{% extends "../../authentic2/login.html" %}
{% block login-pre %}
<div id="login-pre">
<h2>Connectez-vous<br>à votre plateforme de service</h2>
<p>
Entrez vos coordonnées ci-dessous et simplifiez-vous la vie pour toutes vos
démarches en ligne.
</p>
</div>
{% endblock %}

View File

@ -0,0 +1,12 @@
{% extends "../../combo/page_template.html" %}
{% load combo %}
{% block psg-mon-espace %}
{% skeleton_extra_placeholder psg-user-info %}
{% if user.is_authenticated %}
<a class="logout" href="{% url 'auth_logout' %}">Quitter mon espace</a>
{% else %}
<a class="login" href="{% url 'auth_login' %}">Connexion à mon espace</a>
{% endif %}
{% end_skeleton_extra_placeholder %}
{% endblock %}

View File

@ -0,0 +1,19 @@
{% extends "authentic2/base-page.html" %}
{% load i18n %}
{% block content %}
<div id="registration-complete">
<h1>Merci d'avoir créé votre compte !</h1>
<p>Un message de confirmation a été envoyé à {{request.session.registered_email}}</p>
{% url "auth_homepage" as homepage_url %}
<p>
Cherchez le message dans votre boîte de réception et suivez les
instructions qu'il contient pour continuer la création
de votre compte.
</p>
<p><a class="pk-button" href="{{ homepage_url }}">Reprendre ma visite</a></p>
</div>
{% endblock %}

View File

@ -0,0 +1,15 @@
{% extends "authentic2/base-page.html" %}
{% load i18n %}
{% block content %}
<div id="registration-pre">
<h1>Créez-vous un compte et bénéficiez de tous les services en ligne de votre ville.</h1>
<p>Entrez vos coordonnées ci-dessous et simplifiez-vous la vie
pour toutes vos démarches en ligne.</p>
</div>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button class="submit-button">{% trans 'Submit' %}</button>
</form>
{% endblock %}

View File

@ -0,0 +1,31 @@
{% extends "authentic2/base-page.html" %}
{% load i18n %}
{% block form-title %}
<div id="registration-pre">
<h2>Créez-vous un compte et bénéficiez de tous les services en ligne de votre ville.</h2>
</div>
{% endblock %}
{% block content %}
<div class="registration_frontend">
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<div class="buttons">
<button class="submit-button">{% trans 'Submit' %}</button>
</div>
</form>
</div>
{% for id, block in frontends.items %}
{% if id != "password" %}
<div class="registration_frontend">
{{ block.content|safe }}
</div>
{% endif %}
{% endfor %}
{% endblock %}

View File

@ -0,0 +1,16 @@
{% extends "../../theme.html" %}
{% load static %}
{% block header-top %}
<div id="header-nav">
<a href="{{facebook_url}}" class="social" id="facebook"></a>
<a href="{{twitter_url}}" class="social" id="twitter"></a>
<a href="{{instagram_url}}" class="social" id="instagram"></a>
<a href="{{youtube_url}}" class="social" id="youtube"></a>
<a href="{{autour_de_moi_url}}" id="around">Autour de moi</a>
<a href="{{agenda_url}}" id="agenda">Agenda</a>
<a href="{{contact_url}}" id="contact">Contact</a>
{% block psg-mon-espace %}
{% endblock %}
</div>
{% endblock %}

View File

@ -0,0 +1,39 @@
{% extends theme_base %}
{% load static %}
{% block extra-top-head %}
{{script|safe}}
<script src="{% static 'dataview.js' %}"></script>
{% endblock %}
{% block extra-body-class %}
{{ block.super }}
{% if global_context.form %}
{% if global_context.category_slug %}formdef-category-{{global_context.category_slug}}{% endif %}
formdef-{{global_context.form.slug}}
{% endif %}
{% endblock %}
{% block placeholder-content %}
{% block content %}
<div id="form-page" class="{% if gauche %}with-sidebar{% endif %}">
{% if title %}
<div id="title-section">
<h1>{{ title }}</h1>
</div>
{% endif %}
{% if gauche %}
<div id="gauche">
{{ gauche|safe }}
</div>
{% endif %}
<div id="{{bigdiv|default:'rub_service'}}">
{% block body %}
{{ body|safe }}
{% endblock %}
</div>
</div>
{% endblock %}
{% endblock %}