diff --git a/static/nantes/_custom.scss b/static/nantes/_custom.scss index a127a345..e57e8c8b 100644 --- a/static/nantes/_custom.scss +++ b/static/nantes/_custom.scss @@ -531,6 +531,17 @@ body { padding-left: 0; } +.wcs-cards-cell { + h2 { + font-size: 1rem; + } + + a { + background-color: $gray-light; + border-radius: $border-radius; + } +} + div#rub_service { h3 { font-weight: bold; diff --git a/static/publik-famille-demo/_cells.scss b/static/publik-famille-demo/_cells.scss new file mode 100644 index 00000000..24f132b7 --- /dev/null +++ b/static/publik-famille-demo/_cells.scss @@ -0,0 +1,157 @@ +.cell + .pf-page-header--default { + display: none; +} + +.page-template-homepage .gru-content div.cell { + margin-top: 2rem; + padding-bottom: 2rem; + border-radius: 0; + + &:not(:last-child) { + border-bottom: 3px solid $orange; + } +} + +%pf-icon { + background: var(--pf-icon-picture) no-repeat bottom left; + background-size: contain; + content: var(--pf-icon-content); + display: flex; + align-items: start; + color: $orange; + font-family: 'FontAwesome'; +} + +// Links +%cell-links-list { + & > li { + margin: 0 1em; + } + & > li:not(.add-more-items) > a { + font-size: $fz-3; + padding-left: 0; + padding-right: 0; + display: flex; + align-items: center; + } + + li div.description { + padding: 0; + + p { + margin-left: 0; + } + } +} + +.add-more-items--button { + font-size: $fz-2; + color: $orange; +} + +// Notifications +div.cell.notifications-cell { + h2:first-child { + color: $orange; + font-size: $fz-3; + &:before { + content: '\f0f3'; + font-family: FontAwesome; + margin-right: 2rem; + } + } + + .links-list { + background: $orange; + border-radius: $border-radius; + + ul { + padding: 2rem 4rem; + > li { + border: none; + padding: 0.3rem 0; + + &:not(:last-child) { + border-bottom: 1px solid white; + } + + > a { + font-size: $font-size; + text-decoration: underline; + color: white; + } + + > div.description { + color: white; + } + } + + } + } +} + +// Tracking code +div.cell.tracking-code-input-cell { + h2:first-child { + font-size: $font-size; + text-transform: uppercase; + border-bottom: 1px solid $gray-dark; + border-radius: 0; + } +} + +// Carrousel +div.carrousel-content { + background: $green-light; + overflow: visible; + margin-top:150px; + + @media($min-desktop-viewport) { + &::before { + background-image: url('img/carrousel-banner.png'); + background-position:center; + background-repeat: no-repeat; + content: ""; + position: absolute; + height: 150px; + width: 100%; + top:-110px; + } + } + + @media($max-mobile-viewport) { + .carrousel-item-content { + text-align: center; + background: $green-light; + } + } + + input + div { + padding: 3rem; + div.carrousel-item { + &:after { + background-color: transparent; + } + color: black; + background-repeat: no-repeat; + background-size: 30%; + background-position-x: 10%; + padding: 1rem; + } + } +} + +// Custom classes +.errornotice, +.warningnotice, +.successnotice, +.infonotice { + border-radius: $border-radius; + padding-top: 1rem; + padding-bottom: 1rem; + padding-right: 1rem; + min-height: calc(#{$notification-icon-size} + 2rem); + &::before { + top: 1rem; + } +} diff --git a/static/publik-famille-demo/_custom.scss b/static/publik-famille-demo/_custom.scss new file mode 100644 index 00000000..4a784dde --- /dev/null +++ b/static/publik-famille-demo/_custom.scss @@ -0,0 +1,33 @@ +:root { + --pf-icon-content: ""; +} + +h1 { + font-size: $fz-1; + font-weight: 800; +} + +h2 { + font-size: $fz-2; + font-weight: 700; +} + +h3 { + font-size: $fz-3; + font-weight: 600; +} + +div#main-content { + margin-top: 6rem; + @media($max-mobile-viewport) { + margin-top: 1rem; + } +} + +%pf-field { + padding: 0.5rem; + font-size: $font-size; + background-color: $gray-light; + border-radius: $border-radius; +} + diff --git a/static/publik-famille-demo/_custom_classes.scss b/static/publik-famille-demo/_custom_classes.scss new file mode 100644 index 00000000..98b7b63a --- /dev/null +++ b/static/publik-famille-demo/_custom_classes.scss @@ -0,0 +1,112 @@ +.pf-cloud { + position: relative; + &::before { + background: url('img/cloud.svg'); + bottom: -120px; + content: ""; + height: 264px; + position: absolute; + right: 50px; + width: 342px; + z-index: -1; + } +} + +.gray-cell { + .gru-content &.cell { + background-color: $gray-light; + padding-bottom: 1rem; + } +} + +.green-cell { + .gru-content &.cell { + background-color: $green-light; + padding-bottom: 1rem; + } +} + +div.pf-icon-list { + ul > li:not(.add-more-items) > a { + background: url(img/bubble.svg); + background-position: bottom left; + background-repeat: no-repeat; + transition: background-position 0.2s ease-out; + + &::before { + @extend %pf-icon; + width: 35px; + height: 35px; + font-size: 35px; + margin-right: 1rem; + } + + &:hover { + background-position-x: 10px; + background-size: contain; + } + } +} + +div.card.pf-card-detail { + h2:first-child { + border-bottom: 2px solid $gray; + padding: 1rem 0; + border-radius: 0; + } + .label { + color: $gray-dark; + font-size: $fz-3; + font-weight: 700; + margin-bottom: 0.3rem; + margin-top: 0.3rem; + text-align: right; + } + .value { + @extend %pf-field; + margin-bottom: 0.3rem; + margin-top: 0.3rem; + } +} + +%icon-button { + &:not(.pf-big-button) { + div.links-list { + ul > li > a { + &::before { + @extend %pf-icon; + padding-right: 1rem; + } + } + } + } + + &.pf-big-button { + div.links-list { + ul > li > a { + border: 2px solid $orange; + padding: 0.3rem 1.5rem; + width: max-content; + color: $orange; + &::after { + @extend %pf-icon; + margin-left: 1rem; + font-size: 35px; + width: 35px; + height: 35px; + margin-bottom: 3px; + } + } + } + } +} + +.pf-icon-famille { + @extend %icon-button; + --pf-icon-picture: url('img/icon_famille.svg'); +} + +.pf-icon-add { + @extend %icon-button; + --pf-icon-content: '\f055'; +} diff --git a/static/publik-famille-demo/_header.scss b/static/publik-famille-demo/_header.scss new file mode 100644 index 00000000..4738996d --- /dev/null +++ b/static/publik-famille-demo/_header.scss @@ -0,0 +1,240 @@ +$desktop-gray-header-height: 90px; +$mobile-top-links-height: 2rem; + +body.has-header-background #header { + background-position-x: 30%; + background-size: contain; + @media($max-mobile-viewport) { + background-image: none; + } +} + +div#top { + display: flex; + flex-wrap: wrap; + align-items: center; + @media ($min-desktop-viewport) { + padding-right: $nav-menu-side * 1.5; + } + @media ($min-desktop-viewport) { + height: $desktop-gray-header-height; + } +} + +h1#logo.has-logo { + padding: 10px 0; + flex-grow: 1; +} + +#toplinks { + position: static; + display: flex; + align-items: center; + word-spacing: 1em; + + @media ($max-mobile-viewport) { + order: -1; + min-height: 2em; + flex: 1 0 100%; + max-width: none; + margin: 0 -0.7rem; + padding: 0 0.7rem; + } + + @media($min-desktop-viewport) { + height: $nav-menu-side; + padding: 0.5em 1.5em; + border-radius: $nav-menu-side / 2; + } + + a { + color: $orange-dark; + &:first-child { + font-weight: bold; + } + } +} + +.site-nav { + position: fixed; + width: 100%; + z-index: 102; +} + +.gru-nav-wrapper { + @extend .page-width; + position: relative; + @media ($max-mobile-viewport) { + max-width: none; + } +} +#nav { + margin: 0; + position: absolute; + width: $nav-menu-side; + height: $desktop-gray-header-height; + top: 0; + right: 0.7rem; + display: flex; + align-items: center; + justify-content: center; + transition: top 400ms; + @media ($max-mobile-viewport) { + body:not(.scrolled) & { + top: $mobile-top-links-height; + } + } +} +div.gru-nav { + .gru-nav-button { + position: relative; + display: block; + line-height: 0; + top: 0; + left: 0; + border-radius: 50%; + border: 6px solid transparent; + + + ul { + &::before { + content: none; + } + + display: flex; + flex-wrap: wrap; + left: auto; + right: 0; + transform: translateX(100%); + min-width: calc((100% - #{$width}) / 2 + 420px); + padding-top: 50px; + } + } +} + +.pf-menu-item { + &--image { + width: 160px; + height: 160px; + background: white; + border-radius: $border-radius; + padding: 1rem; + } + + &--title { + text-align: center; + } + + &:hover &--title { + text-decoration: underline; + } +} + +.pf-page-header { + &--default { + display: flex; + flex-wrap: wrap; + align-items: end; + + &::before { + background: url('img/cloud.svg'); + content: ""; + position: absolute; + height: 264px; + width: 342px; + top: -10px; + left: 50px; + z-index: -1; + + @media($max-mobile-viewport) { + top: 0; + left: 10px; + } + } + } + + &--title { + margin: 0; + @media($max-mobile-viewport) { + font-size: $fz-3; + } + } + + &--picture { + width: 100px; + margin-right: 1rem; + @media($max-mobile-viewport) { + width: 35px; + } + } + + &--description { + margin-top: 0.5rem; + flex-basis: 100%; + } +} + +body.page-template-homepage { + .site-header { + background: transparent; + } + + #header { + @media ($min-desktop-viewport) { + background: var(--page-picture); + background-repeat: no-repeat; + background-position-y: 50px; + background-size: 100%; + } + @media($min-desktop-viewport) { + height: 550px; + margin-bottom: -180px; + } + } + + #top { + align-items: flex-end; + @media ($min-desktop-viewport) { + height: auto; + flex-wrap: nowrap; + } + } + h1#logo.has-logo { + @media($max-mobile-viewport) { + text-align: center; + } + a::before { + width: 260px; + height: 150px; + @media($max-mobile-viewport) { + width: 200px; + height: 114px; + } + } + } + + #toplinks { + background: $gray-light; + @media ($min-desktop-viewport) { + position: absolute; + right: $nav-menu-side * 1.5; + top: ($desktop-gray-header-height - $nav-menu-side) / 2; + } + } + + .pf-header-description { + font-weight: bold; + text-align: center; + font-size: $fz-1; + flex: 1 1 auto; + + @media($max-mobile-viewport) { + padding: 1rem; + font-size: $fz-3; + } + + @media($min-desktop-viewport) { + flex: 1 1 50%; + padding-bottom: 10px; + } + } +} diff --git a/static/publik-famille-demo/_vars.scss b/static/publik-famille-demo/_vars.scss new file mode 100644 index 00000000..4fae4c15 --- /dev/null +++ b/static/publik-famille-demo/_vars.scss @@ -0,0 +1,112 @@ +// colors +$gray: #BFBFBF; +$gray-dark: #575757; +$gray-light: #F1F1F1; +$orange: #EC671F; +$orange-dark: #df5a13; +$orange-gray: #A88B7D; +$green: #6BD3AA; +$green-dark: #31a679; +$green-light: #A6E5CC; +$blue: #91D5FF; +$blue-dark: #183c88; +$red: #df1313; + +// typo +$base-font: 16; +$font-ratio: 1.333; +$fz-3: 1em * $font-ratio; +$fz-2: $fz-3 * $font-ratio; +$fz-1: $fz-2 * $font-ratio; +$fz-small: 1em / $font-ratio; + +// Core vars +$width: 1280em / $base-font; +$mobile-limit: 64em; +$very-small-limit: 35em; +$columns-gutter: 2rem; + +$font-size: 100% / ( 16 / $base-font ); +$font-color: $gray-dark; +$font-family: "source sans pro", sans-serif; + +$primary-color: $orange-dark; +$border-radius: 1rem; +$link-color: $primary-color; + +$header-full-width-background: true; +$header-background-color: $gray-light; +$header-logo-size: 105px 60px; + +$toplinks-style: none; +$toplinks-background: white; + +$nav-after-image: false; +$nav-mobile-limit: 20000px; +$pwa-nav-limit: 960px; +$nav-background: $orange; +$nav-color: white; +$nav-border-radius: 0; +$nav-active-color: white; +$nav-border-color: none; + +$nav-button-background: $orange; +$nav-button-color: white; + +$nav-mobile-menu-background: $orange; +$nav-border-radius: 100%; +$nav-mobile-menu-item-color: white; +$nav-mobile-menu-item-hover-background: $orange; +$nav-mobile-menu-item-hover-color: white; + +$responsive-menu: left-to-right; + +$title-background: transparent; +$title-color: $font-color; +$title-font-size: $fz-2; +$title-weight: 900; + +$cell-background: transparent; +$cell-border: none; +$cell-title-cover-border: false; +$cell-entry-border: 2px solid $gray; +$cell-entry-hover-color: $orange; +$cell-entry-hover-background: $cell-background; + +$cell-entry-color: $gray-dark; +$cell-entry-font-weight: 600; + +$carrousel-height: 40rem; +$carrousel-text-position: middle right; +$carrousel-navigation-color: black; +$carrousel-navigation-bullet-border: black; + +$button-background: $orange-dark; +$button-color: white; +$button-hover-background: $orange; +$cancel-button-style: "%inverted-button"; + +$error-color: $red; +$widget-unique-checkbox-position: left; + +$widget-background: $gray-light; +$widget-border: 1px solid $gray-light; +$widget-border-radius: $border-radius; +$widget-focus-border: 1px solid $orange; +$widget-padding: 0.625rem 1rem !default; +$widget-focus-box-shadow: none !default; + +$notification_error_color: $red; +$notification_warning_color: $orange_dark; +$notification_success_color: $green-light; +$notification_info_color: $gray-light; + +$wcs-step-color: $gray-dark; +$wcs-step-background: transparent !default; +$wcs-step-current-marker-background: url(img/bubble.svg); +$wcs-step-border-bottom: none; +$wcs-step-current-border-bottom: none; + +$footer-background: $gray-light; +$footer-full-width-background: false; +$footer-color: gray-dark; diff --git a/static/publik-famille-demo/_wcs.scss b/static/publik-famille-demo/_wcs.scss new file mode 100644 index 00000000..0b5d9004 --- /dev/null +++ b/static/publik-famille-demo/_wcs.scss @@ -0,0 +1,32 @@ +.wcs-step { + &.current & { + &--marker { + background-size: contain; + background-repeat: no-repeat; + } + } +} + +.form-content { + &--sidebox { + background: $gray-light; + padding: 1rem; + border-radius: $border-radius; + } +} + +div.cell.wcs-cards-cell { + h2:first-child { + font-size: $fz-3; + } + + div.list-of-cards { + ul > li { + border: none; + padding: 0.3rem 0; + > a { + @extend %pf-field; + } + } + } +} diff --git a/static/publik-famille-demo/config.json b/static/publik-famille-demo/config.json new file mode 100644 index 00000000..f4bca541 --- /dev/null +++ b/static/publik-famille-demo/config.json @@ -0,0 +1,17 @@ +{ + "label": "Publik Famille demo", + "variables": { + "pwa_display": "standalone", + "theme_color": "#EC671F", + "email_header_asset": "emails:logo" + }, + "settings": { + "combo": { + "COMBO_ASSET_SLOTS.update": { + "header:logo": { "label": "Têtière : logo" }, + "header:background": { "label": "Têtière : fond" }, + "emails:logo": {"label": "Emails : logo"} + } + } + } +} diff --git a/static/publik-famille-demo/img/bubble.svg b/static/publik-famille-demo/img/bubble.svg new file mode 100644 index 00000000..d2ca209b --- /dev/null +++ b/static/publik-famille-demo/img/bubble.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/publik-famille-demo/img/carrousel-banner.png b/static/publik-famille-demo/img/carrousel-banner.png new file mode 100644 index 00000000..0b3c40b5 Binary files /dev/null and b/static/publik-famille-demo/img/carrousel-banner.png differ diff --git a/static/publik-famille-demo/img/cloud.svg b/static/publik-famille-demo/img/cloud.svg new file mode 100644 index 00000000..f07be217 --- /dev/null +++ b/static/publik-famille-demo/img/cloud.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/publik-famille-demo/img/icon_demandes.svg b/static/publik-famille-demo/img/icon_demandes.svg new file mode 100644 index 00000000..73d4ff76 --- /dev/null +++ b/static/publik-famille-demo/img/icon_demandes.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/publik-famille-demo/img/icon_famille.svg b/static/publik-famille-demo/img/icon_famille.svg new file mode 100644 index 00000000..72b5c6cf --- /dev/null +++ b/static/publik-famille-demo/img/icon_famille.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/publik-famille-demo/img/icon_inscription.svg b/static/publik-famille-demo/img/icon_inscription.svg new file mode 100644 index 00000000..bbc92241 --- /dev/null +++ b/static/publik-famille-demo/img/icon_inscription.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/static/publik-famille-demo/style.scss b/static/publik-famille-demo/style.scss new file mode 100644 index 00000000..8663af01 --- /dev/null +++ b/static/publik-famille-demo/style.scss @@ -0,0 +1,10 @@ +@charset "UTF-8"; +@import '../includes/fonts/source-sans-pro'; + +@import 'vars'; +@import '../includes/publik'; +@import 'cells'; +@import 'custom'; +@import 'custom_classes'; +@import 'header'; +@import 'wcs'; diff --git a/templates/theme.html b/templates/theme.html index 8009e5f9..546dec88 100644 --- a/templates/theme.html +++ b/templates/theme.html @@ -18,7 +18,6 @@ {% if meta_keywords %} {% endif %} - {% block meta_icons %}{% endblock %} {% if theme_color %} diff --git a/templates/variants/publik-famille-demo/combo/cells/carrousel/menu-cell.html b/templates/variants/publik-famille-demo/combo/cells/carrousel/menu-cell.html new file mode 100644 index 00000000..412c69b8 --- /dev/null +++ b/templates/variants/publik-famille-demo/combo/cells/carrousel/menu-cell.html @@ -0,0 +1,8 @@ +{% extends "combo/cells/carrousel/menu-cell.html" %} + +{% block carrousel-item-content %} +{% for cell in menuitem.page.get_cells %} +{{cell.text|safe}} +{% endfor %} +{% endblock %} + diff --git a/templates/variants/publik-famille-demo/combo/link-list-cell.html b/templates/variants/publik-famille-demo/combo/link-list-cell.html new file mode 100644 index 00000000..3ab29891 --- /dev/null +++ b/templates/variants/publik-famille-demo/combo/link-list-cell.html @@ -0,0 +1,55 @@ +{% load i18n %} +{% block cell-content %} +{% load assets %} +{% spaceless %} + {% block cell-header %} + {% if title %}

{{ title }}

{% endif %} + {% include "combo/asset_picture_fragment.html" %} + {% endblock cell-header %} +
+ {% block cell-top-content %}{% endblock cell-top-content %} + + + {% if more_links %} + +
+ {% endspaceless %} +{% endblock %} diff --git a/templates/variants/publik-famille-demo/combo/menu.html b/templates/variants/publik-famille-demo/combo/menu.html new file mode 100644 index 00000000..5f44150e --- /dev/null +++ b/templates/variants/publik-famille-demo/combo/menu.html @@ -0,0 +1,23 @@ +{% load i18n %} +{% load assets %} + +{% if menuitems %} + +{% endif %} diff --git a/templates/variants/publik-famille-demo/combo/page_template.html b/templates/variants/publik-famille-demo/combo/page_template.html new file mode 100644 index 00000000..60117e4f --- /dev/null +++ b/templates/variants/publik-famille-demo/combo/page_template.html @@ -0,0 +1,18 @@ +{% extends "combo/page_template.html" %} + +{% block content-pre %} +
+
+ {% placeholder "page-header" name="Entête de la page"%} + {% if page.title %} +
+ {% if page.picture %} + + {% endif %} +

{{ page.title }}

+
{{ page.description }}
+
+ {% endif %} +
+
+{% endblock %} diff --git a/templates/variants/publik-famille-demo/combo/page_template_homepage.html b/templates/variants/publik-famille-demo/combo/page_template_homepage.html new file mode 100644 index 00000000..c79ce558 --- /dev/null +++ b/templates/variants/publik-famille-demo/combo/page_template_homepage.html @@ -0,0 +1,11 @@ +{% extends "combo/page_template_2cols.html" %} +{% load combo i18n %} + +{% block content-pre %} +{% endblock %} + +{% block header-content %} +
{{ page.description }}
+ {{ block.super }} +{% endblock %} + diff --git a/templates/variants/publik-famille-demo/includes/nav.html b/templates/variants/publik-famille-demo/includes/nav.html new file mode 100644 index 00000000..f5ecaae7 --- /dev/null +++ b/templates/variants/publik-famille-demo/includes/nav.html @@ -0,0 +1,5 @@ +{% extends "includes/nav.html" %} + +{% block menu %} + {% show_menu depth=1 ignore_visibility=True %} +{% endblock %}