montpellier-2023: new theme (#79825)
gitea/publik-base-theme/pipeline/head This commit looks good Details

This commit is contained in:
Thomas Jund 2023-07-20 14:54:36 +02:00 committed by Serghei Mihai
parent fa6f25317f
commit 1d52489df8
10 changed files with 843 additions and 0 deletions

View File

@ -0,0 +1,599 @@
//
// Layout
//
html {
--add-main-padding: .5rem;
--core-main-padding: 0.7rem;
--main-margin: 0.7rem;
@media ($min-desktop-viewport) {
--add-main-padding: #{$columns-gutter};
--core-main-padding: 0;
}
@media ($max-mobile-viewport) {
font-size: 93.75%;
}
}
//
// typo
//
h1, .h1 {
font-size: $fz-1;
font-weight: 700;
line-height: 1;
}
h2, .h2 {
font-size: $title-font-size;
font-weight: $title-weight;
text-transform: $title-transform;
}
h3, .h3 {
font-size: $fz-3;
font-weight: 500;
}
.pwa-label {
font-size: $fz-xsmall;
text-transform: uppercase;
line-height: 1.2;
}
body {
background: url(img/bgd-solid.jpg) no-repeat;
background-size: 100% auto;
}
//
// Graphic
//
.shadow {
--shadow: 12px 12px var(--shadow-color, #{$blue});
border: 1px solid $gray-light;
box-shadow: var(--shadow);
border-radius: $cell-border-radius;
&.cell {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 22px;
}
}
//
// BUTTONS
//
%button {
text-transform: uppercase;
font-size: $fz-xsmall;
font-weight: 700;
line-height: 1;
box-shadow: none;
&:hover {
box-shadow: none;
}
}
%cancel-button {
--color: #{$gray};
--background: white;
--hover-color: black;
--hover-background: white;
font-weight: 500;
border-color: transparent;
&:hover {
border-color: $gray-light;
}
}
%gray-button {
@extend %button;
--background: #{$gray-light};
--hover-color: white;
--hover-background: black;
font-weight: 500;
border-color: $gray-light;
&:hover {
border-color: black;
}
}
//
// HEADER
//
div#header,
div#nav {
max-width: none;
padding: 0;
}
div#header {
@media ($min-desktop-viewport) {
padding-top: 3rem;
}
}
#top {
display: flex;
@media ($min-desktop-viewport) {
justify-content: flex-end;
}
}
#logo {
line-height: 0;
// logo mobile
@media ($max-mobile-viewport) {
padding-left: 0;
flex: 0 0 50%;
height: 120px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
clip-path: polygon(0 0, 100% 0, 90% 90%, 0 100%);
&.has-logo a::before {
background-image: url(/assets/header:logo-mobile);
margin-right: 0;
height: 65px;
width: 50px;
}
}
}
.site-nav,
#toplinks {
position: static;
@media ($min-desktop-viewport) {
display: flex;
align-items: center;
padding: 0 1rem;
}
@media ($min-desktop-viewport) {
background-color: white;
}
}
#toplinks {
@media ($max-mobile-viewport) {
flex: 0 0 50%;
display: flex;
justify-content: center;
align-items: flex-end;
}
}
.toplinks {
&--list {
font-size: $fz-xsmall;
text-transform: uppercase;
font-weight: 600;
color: white;
// icon
&::before {
content: "";
display: inline-block;
background: url(img/user.svg) no-repeat;
background-size: contain;
}
a {
color: white;
text-decoration: none;
&:hover {
text-decoration: underline;
}
}
.account-link {
text-transform: none;
}
}
@media ($max-mobile-viewport) {
&--list {
display: flex;
flex-direction: column;
align-items: center;
}
// icon
&--list::before {
background-image: url(img/user-mobile.svg);
width: 4em;
height: 4em;
border-radius: 50%;
background-color: white;
border: .75em solid;
}
&--list-item {
margin-top: .5em;
text-align: center;
}
}
@media ($min-desktop-viewport) {
&--list {
background-color: $blue;
border-radius: $button-border-radius;
padding: 1em;
white-space: nowrap;
// icon
&::before {
width: 1.8em;
height: 1.8em;
vertical-align: -0.5em;
}
}
// separator
&--list-item:first-child::after {
content: " | ";
}
}
}
div.gru-nav {
// move button to right bottom
.gru-nav-button {
top: auto;
left: auto;
bottom: 36px;
right: 0.7rem;
border: 12px solid transparent;
border-radius: 50%;
&.toggled {
background-color: $nav-button-background;
}
&:after {
content: "Menu";
@extend .pwa-label;
position: absolute;
color: $font-color;
top: calc(100% + 19px);
left: 0;
width: 100%;
text-align: center;
}
}
:not(.toggled) {
.icon-bar-2 {
width: 53%;
}
.icon-bar-3 {
width: 40%;
}
}
}
.theme-plateforme-title {
text-align: left;
color: white;
margin: 1em calc(var(--add-main-padding) + var(--core-main-padding));
margin-bottom: 1.5em;
@media ($min-desktop-viewport) {
text-align: center;
margin-top: 1.5em;
}
}
//
// MAIN
//
div#main-content {
position: relative;
background-color: white;
padding: var(--add-main-padding);
padding-top: 0;
border-radius: 10px;
margin: 0 var(--main-margin);
@media (max-width: $very-small-limit) {
padding-left: 0;
padding-right: 0;
}
}
.theme-page-title--wrapper {
position: relative;
--square-size: 2.6em;
display: inline-block;
padding-left: 0;
border: 1px solid #000;
background-color: white;
margin-left: calc(var(--square-size) / 2);
transform: translateY(-1.4em);
&::before {
content: "";
display: inline-block;
width: var(--square-size);
height: var(--square-size);
background-color: $blue;
position: absolute;
top: calc(-0.5 * var(--square-size));
left: calc(-0.5 * var(--square-size));
}
h1 {
font-size: 1rem;
margin: 0;
padding: 1em;
padding-left: calc(.75em + var(--square-size) / 2);
display: inline-block;
@media ($min-desktop-viewport) {
font-size: $fz-3;
}
}
}
//
// CELLS
//
// Custom classes
.shadow-blue {
.gru-content &.cell {
@extend .shadow;
}
}
.shadow-green {
.gru-content &.cell {
@extend .shadow;
--shadow-color: #{$green};
}
}
.tracking-code-input-cell {
@extend .shadow-green;
}
// Json cell montpellier_reporting_links
// wcs image list
.reporting-categories,
.reporting-links {
.content {
margin-top: 0.2rem;
@extend .fx-grid;
--grid-gutter: 3rem;
@media ($min-grid-desktop-viewport) {
--nb-cols: 2;
}
}
.item-with-image {
box-sizing: border-box;
margin-right: 0;
margin-bottom: var(--grid-gutter);
padding: 1.5rem Max(1.5rem, 3.5%);
display: grid;
grid-template-columns: 30% 1fr;
grid-gap: 2rem;
grid-template-areas:
"picture label";
align-items: center;
position: relative;
z-index: 0;
&--label {
justify-self: start;
&::after {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: -1;
@extend .shadow;
}
}
&--picture {
width: 100%;
height: 150px;
}
&--input {
display: none;
}
// hover
&:hover {
cursor: pointer;
.item-with-image--label::after {
border: 5px solid var(--shadow-color);
}
}
// active
&--input:checked ~ .item-with-image--label::after,
&:active .item-with-image--label::after {
box-shadow: var(--shadow);
border-color: var(--shadow-color);
background-color: var(--shadow-color);
}
}
}
.reporting-links {
--shadow-color: #{$green};
}
.reporting-categories {
--shadow-color: #{$yellow};
}
.reporting-categories .item-with-image--label,
.reporting-link--title {
@extend .h2;
margin-bottom: 0.3em;
@media ($max-mobile-viewport) {
font-size: $fz-3;
}
}
.reporting-link--description {
margin-top: 0;
}
.reporting-link.item-with-image {
color: inherit;
text-decoration: none;
padding: 1.5rem Max(1.5rem, 8%);
}
//
// WCS
//
.form-content--sidebox {
margin-top: 0;
}
.form-content--sidebox #side {
@media ($max-mobile-viewport) {
align-items: center;
}
@media ($min-desktop-viewport) {
text-align: right;
}
}
// Steps
.wcs-steps--list {
justify-content: center;
}
@media ($mq-min--wcs-steps-horizontal-layout) {
.wcs-steps {
font-size: 1rem;
}
.wcs-step {
position: relative;
flex-basis: 8rem;
&.last {
flex-basis: auto;
}
}
.wcs-step--marker {
font-size: $fz-2;
border: 1px solid $blue;
}
.wcs-step--label {
display: block !important;
font-weight: bold;
text-align: center;
font-size: $fz-xsmall;
left: -1.6rem;
top: calc(100% + .5em);
width: 6rem;
}
}
// wcs tracking code
.form-content--sidebox #tracking-code {
background-color: $green;
color: black;
padding: 0.5rem 0.625rem;
@media ($max-mobile-viewport) {
order: 0;
}
.tracking-code-part {
font-size: $fz-4;
h3 {
display: inline-block;
padding: 0;
background-color: transparent;
font-size: inherit;
font-weight: inherit;
&::after {
content: " : "
}
}
a {
padding: 0;
font-size: inherit;
font-weight: inherit;
}
}
&.has-discard-button {
background-color: transparent;
padding: 0;
}
.form-discard-draft {
margin: 0;
}
}
//
// FORM
//
div#rub_service form {
padding: 0;
}
label {
display: block;
font-weight: 600;
margin-bottom: .5em;
}
@if ($field-on-error-style == custom) {
.widget-with-error {
input, textarea, select {
border-color: $error-color;
color: $error-color;
}
div.error {
color: $error-color;
font-weight: 500;
}
}
}
// widgets
.form-content--body {
h3 {
@extend .h2;
}
h4 {
@extend .h3;
}
// custom comment widget
.comment-field.categories-breadcrumb {
color: $blue;
text-transform: uppercase;
> *:last-child {
margin-bottom: 0;
}
}
// test to enlarge native radio & checkbox
input[type="checkbox"],
input[type="radio"] {
transform: scale(1.4);
transform-origin: left;
}
}
.previous-button button {
@extend %gray-button;
}
//
// NOTiFiCATiONS
//
.errornotice,
.warningnotice,
.successnotice,
.infonotice {
font-weight: 500;
border-radius: $cell-border-radius;
}
.warningnotice {
color: $font-color;
a:not(.pk-button) {
color: inherit;
}
}
//
// PWA NAV
//
.pwa-navigation {
box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.15);
div > ul {
padding-right: calc(#{$nav-menu-side} + var(--main-margin));
li a {
@extend .pwa-label;
padding-top: 52px;
background-size: 40px auto;
}
}
}
//
// FOOTER
//
#footer {
padding-left: var(--main-margin);
padding-right: var(--main-margin);
%cell-links-list {
font-size: $fz-small;
& > li:not(:last-child) {
border-bottom: none;
}
& > li > a {
padding: 0.33em 0;
&:hover {
color: $cell-entry-hover-color;
background-color: transparent;
text-decoration: underline;
}
}
}
h2, %title {
text-transform: none;
}
}

View File

@ -0,0 +1,100 @@
// colors
$blue: #0356F2;
$green: #51EDC6;
$yellow: #FFE600;
$gray-dark: #353535;
$gray: #555;
$gray-light: #DCDCDC;
// Typo
$base-font: 16;
$fz-1: 50em / $base-font;
$fz-2: 20em / $base-font;
$fz-3: 18em / $base-font;
$fz-4: 17em / $base-font;
$fz-small: 13rem / $base-font;
$fz-xsmall: 12rem / $base-font;
// Core vars
$width: 1600em / $base-font;
$mobile-limit: 64em;
$very-small-limit: 35em;
$columns-gutter: 80em / $base-font;
$primary-color: $blue;
$body-background: $blue;
$font-color: $gray-dark;
$font-family: 'MintGrotesk', sans-serif;
$font-size: 100% / ( 16 / $base-font );
$font-size-small: $fz-small;
$font-size-xsmall: $fz-xsmall;
$primary-color: $blue;
$link-color: $primary-color;
$error-color: #FF0000;
$link-decoration: underline;
$toplinks-style: none;
$header-logo-size: 83px 102px;
$nav-background: transparent;
$nav-border-color: none;
$nav-font-weight: 600;
$nav-font-size: $fz-small;
$nav-item-transform: uppercase;
$nav-active-color: $blue;
$nav-item-selected-background: transparent;
$nav-item-selected-color: $nav-active-color;
$responsive-menu: left-to-right;
$nav-button-background: $green;
$nav-button-color: $blue;
$nav-menu-side: 70px;
$nav-mobile-bottom-bar-height: 80px;
$title-font-size: $fz-2;
$title-weight: 600;
$title-transform: uppercase;
$cell-border: none;
$cell-border-radius: 10px;
$button-border-radius: 5px;
$button-background: $green;
$button-color: black;
$button-border: 3px solid $green;
$button-hover-background: white;
$form-sidebar-position: top;
// $wcs-steps-spacing: 6rem;
$wcs-step-color: $font-color;
$wcs-step-border-bottom: none;
$wcs-step-marker-color: $blue;
$wcs-step-current-marker-color: white;
$wcs-step-marker-background: white;
$wcs-step-current-marker-background: $blue;
$wcs-step-marker-type: disc tied;
$wcs-step-marker-tie-color: $blue;
$wcs-step-marker-tie-width: 1px;
$wcs-steps-small-layout-limit: $mobile-limit;
$form-accent-color: $green;
$form-background: white;
$form-title-style: none;
$widget-unique-checkbox-position: left;
$widget-padding: 0.8rem 1.6rem;
$widget-border: 2px solid $gray-light;
$widget-focus-color: $blue;
$widget-focus-border: 2px solid $widget-focus-color;
$field-on-error-style: custom;
$buttons-order: cancel, previous, submit;
$buttons-alignment: center;
$notification_error_color: $error-color;
$notification_warning_color: $yellow;
$notification_success_color: $green;
$notification_info_color: $blue;
$footer-background: $blue;
$footer-link-color: white;

View File

@ -0,0 +1,47 @@
{
"label": "Montpellier (2023)",
"variables": {
"theme_color": "#0356F2",
"email_header_asset": "emails:logo"
},
"settings": {
"combo": {
"COMBO_ASSET_SLOTS.update": {
"header:logo": { "label": "Têtière : logo" },
"header:logo-mobile": { "label": "Têtière : logo mobile" },
"emails:logo": {"label": "Emails : logo"}
},
"JSON_CELL_TYPES.update" : {
"montpellier_reporting_links" : {
"name" : "Liste de liens signalements",
"url" : "{{eservices_url}}api/cards/{{cards_id}}/list/{{list_filter}}?full=on",
"form": [
{
"varname": "cell_title",
"type": "string",
"label": "Titre de la cellule"
},
{
"varname": "cell_desc",
"type": "text",
"label": "Description de la cellule",
"required": false
},
{
"varname": "cards_id",
"type": "string",
"label": "Identifiant modèle de fiche",
"required": true
},
{
"varname": "list_filter",
"type": "string",
"label": "Vues personnalisées",
"required": true
}
]
}
}
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 534 KiB

View File

@ -0,0 +1,5 @@
<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="26" height="25" fill="white"/>
<path d="M12.4853 12.5997C13.865 12.5997 15.1881 12.0466 16.1637 11.062C17.1393 10.0775 17.6874 8.74217 17.6874 7.34982C17.6874 5.95748 17.1393 4.62216 16.1637 3.63762C15.1881 2.65308 13.865 2.09998 12.4853 2.09998C11.1056 2.09998 9.78244 2.65308 8.80686 3.63762C7.83128 4.62216 7.2832 5.95748 7.2832 7.34982C7.2832 8.74217 7.83128 10.0775 8.80686 11.062C9.78244 12.0466 11.1056 12.5997 12.4853 12.5997V12.5997Z" stroke="#0356F2" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M22.306 23.0412C22.306 19.0099 18.1352 15.7495 13.0002 15.7495C7.86517 15.7495 3.69434 19.0099 3.69434 23.0412" stroke="#4FDCB9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 847 B

View File

@ -0,0 +1,4 @@
<svg width="23" height="23" viewBox="0 0 23 23" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.3333 11.4667C12.5857 11.4667 13.7868 10.9692 14.6724 10.0836C15.558 9.198 16.0555 7.99688 16.0555 6.74447C16.0555 5.49206 15.558 4.29094 14.6724 3.40535C13.7868 2.51977 12.5857 2.02225 11.3333 2.02225C10.0809 2.02225 8.87978 2.51977 7.99419 3.40535C7.1086 4.29094 6.61108 5.49206 6.61108 6.74447C6.61108 7.99688 7.1086 9.198 7.99419 10.0836C8.87978 10.9692 10.0809 11.4667 11.3333 11.4667V11.4667Z" stroke="#4FDCB9" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M19.4461 20.9111C19.4461 17.2561 15.81 14.3 11.3334 14.3C6.85669 14.3 3.22058 17.2561 3.22058 20.9111" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 791 B

View File

@ -0,0 +1,27 @@
@charset "UTF-8";
@mixin MintGrotesk-font($type, $weight, $style) {
@font-face {
font-family: 'MintGrotesk';
src: url('https://servicenumerique.montpellier.fr/files/font/MintGrotesk/woff/MintGrotesk-#{$type}.woff') format('woff');
font-weight: $weight;
font-style: $style;
}
}
@mixin MintGrotesk-font-pair($type, $weight) {
@include MintGrotesk-font($type, $weight, normal);
@include MintGrotesk-font('#{$type}italic', $weight, italic);
}
@include MintGrotesk-font-pair('Thin', 100);
@include MintGrotesk-font-pair('Light', 300);
@include MintGrotesk-font-pair('Regular', 400);
@include MintGrotesk-font-pair('Medium', 500);
@include MintGrotesk-font-pair('Bold', 600);
@include MintGrotesk-font-pair('ExtraBold', 700);
@include MintGrotesk-font-pair('Black', 800);
@include MintGrotesk-font-pair('Heavy', 900);
@import 'vars';
@import '../includes/publik';
@import 'custom';

View File

@ -0,0 +1,26 @@
<h2 class="cell--title">
{{parameters.cell_title}}
</h2>
<div class="cell--body">
<p>
{{parameters.cell_desc}}
</p>
<div class="reporting-links">
<ul class="content">
{% for fiche in json.data %}
<li class="reporting-links--item">
<a href="{{ fiche.fields.url }}" class="reporting-link item-with-image">
{% if fiche.fields.image %}
<img class="reporting-link--picture item-with-image--picture" loading="lazy" src="{% make_public_url url=fiche.fields.image.url %}" alt="" />
{% endif %}
<div class="item-with-image--label">
<h3 class="reporting-link--title">{{ fiche.fields.libelle }}</h3>
<p class="reporting-link--description">{{ fiche.fields.description }}</p>
</div>
</a>
</li>
{% endfor %}
</ul>
</div>
</div>

View File

@ -0,0 +1,31 @@
{% extends 'theme.html' %}
{% load static %}
{# move nav inside header-content block and add theme-title #}
{% block header-content %}
{% block nav %}{% endblock %}
{{ block.super }}
{% endblock %}
{% block header-post %}
<div class="page-width">
<h1 class="theme-plateforme-title">
{% firstof plateforme_title 'Montpellier au quotidien' %}
</h1>
</div>
{% endblock %}
{% block after-header %}
{% endblock %}
{# page title #}
{% block content-pre %}
<header class="theme-page-title--wrapper">
{% skeleton_extra_placeholder default-page-title %}
{% firstof custom_page_title page.title view.title title as theme_page_title %}
{% if theme_page_title %}
<h1 class="theme-page-title">
{% block default-page-title-content %}{{ theme_page_title }}{% endblock %}
</h1>
{% endif %}
{% end_skeleton_extra_placeholder %}
</header>
{% endblock %}

View File

@ -0,0 +1,4 @@
{% extends "wcs/base.html" %}
{# remove default title (added via theme.html) #}
{% block wcs-form-title %}{% endblock %}