thonon-agglomeration-2021: new theme (#56244)
This commit is contained in:
parent
6a49f515da
commit
7c30ed57c3
|
|
@ -0,0 +1,596 @@
|
|||
@mixin fa-icon($utf) {
|
||||
content: "#{$utf}";
|
||||
font-family: FontAwesome;
|
||||
}
|
||||
|
||||
|
||||
$wrapper-gutter-mobile: 20px;
|
||||
$wrapper-gutter-desktop: $columns-gutter * 2;
|
||||
|
||||
@mixin fill-viewport($add-padding-right: 0, $add-padding-left: 0) {
|
||||
@media (min-width: $width + 1) {
|
||||
width: 100vw;
|
||||
margin-left: calc(-50vw + 50%);
|
||||
padding-right: calc(50vw - 50% + #{$add-padding-right});
|
||||
padding-left: calc(50vw - 50% + #{$add-padding-left});
|
||||
}
|
||||
}
|
||||
|
||||
.theme-wrapper {
|
||||
max-width: $width;
|
||||
width: 100%;
|
||||
margin: 0 auto;
|
||||
padding: $wrapper-gutter-mobile;
|
||||
@media ($max-mobile-viewport) {
|
||||
width: 800px;
|
||||
max-width: 100%;
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
padding: $columns-gutter $wrapper-gutter-desktop;
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
//
|
||||
// HEADER
|
||||
//
|
||||
.site-header {
|
||||
background-color: white;
|
||||
}
|
||||
div#header {
|
||||
@extend .theme-wrapper;
|
||||
|
||||
}
|
||||
#top {
|
||||
@media ($min-desktop-viewport) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
h1#logo {
|
||||
padding: 0;
|
||||
@media ($max-mobile-viewport) {
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
width: 150px;
|
||||
height: 45px;
|
||||
@media ($min-desktop-viewport) {
|
||||
width: 200px;
|
||||
height: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.header-desc {
|
||||
@media ($min-desktop-viewport) {
|
||||
flex: 1 1 auto;
|
||||
margin-left: $columns-gutter;
|
||||
}
|
||||
}
|
||||
.header-desc--yellow-bloc {
|
||||
background-color: $yellow;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
border-radius: $cell-border-radius;
|
||||
position: relative;
|
||||
font-size: $fz-h3;
|
||||
font-weight: 500;
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
@media ($min-desktop-viewport) {
|
||||
font-size: $fz-h2;
|
||||
margin: 0 auto;
|
||||
max-width: 660px;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border: 15px solid transparent;
|
||||
border-top-color: $yellow;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// toplinks
|
||||
.toplinks--wrapper {
|
||||
border-bottom: 1px solid #dcdce8;
|
||||
}
|
||||
#toplinks {
|
||||
// reset
|
||||
position: static;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
|
||||
max-width: $width;
|
||||
margin: 0 auto;
|
||||
padding: 0.5em 0;
|
||||
font-weight: 500;
|
||||
letter-spacing: 0.1em;
|
||||
text-align: right;
|
||||
font-size: $fz-small;
|
||||
|
||||
.sep {
|
||||
display: none;
|
||||
}
|
||||
|
||||
> span {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
a {
|
||||
padding: 0 $columns-gutter / 2;
|
||||
display: inline-block;
|
||||
color: $font-color;
|
||||
white-space: nowrap;
|
||||
&::after {
|
||||
color: darken($gray-light, 15%);
|
||||
}
|
||||
|
||||
&.login-link::after {
|
||||
@include fa-icon("\f2be");
|
||||
}
|
||||
&.registration::after {
|
||||
@include fa-icon(" \f196");
|
||||
font-size: 1.1em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
&.logout::after {
|
||||
@include fa-icon(" \f18e");
|
||||
font-size: 1.1em;
|
||||
}
|
||||
&.account-link {
|
||||
white-space: normal;
|
||||
font-size: $fz-small;
|
||||
line-height: 1.2rem;
|
||||
@media($min-desktop-viewport) {
|
||||
&::before {
|
||||
content: "Bienvenue";
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:first-child {
|
||||
border-right: 1px solid $gray-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// PWA NAV
|
||||
// nav inside sidebar
|
||||
//
|
||||
.pwa-navigation {
|
||||
left: 0;
|
||||
border-top: 1px solid $gray-light;
|
||||
div > ul {
|
||||
justify-content: space-between;
|
||||
|
||||
li {
|
||||
&:not(:first-child) {
|
||||
border: 1px solid $gray-light;
|
||||
border-width: 0 0 0 1px;
|
||||
}
|
||||
a {
|
||||
padding-top: 40px;
|
||||
padding-bottom: 5px;
|
||||
background-size: auto 25px;
|
||||
background-position: left 50% bottom 25px;
|
||||
span {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
line-height: .9;
|
||||
font-weight: 600;
|
||||
font-size: 0.7em;
|
||||
|
||||
span.badge {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
li:hover, li.selected {
|
||||
a {
|
||||
background-blend-mode: color-dodge;
|
||||
span span.badge {
|
||||
background-color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.sidebar--pwa-navigation {
|
||||
.pwa-navigation {
|
||||
@media ($min-desktop-viewport) {
|
||||
border-top: none;
|
||||
margin-bottom: $columns-gutter;
|
||||
display: block;
|
||||
position: static;
|
||||
|
||||
div > ul {
|
||||
flex-direction: column;
|
||||
|
||||
li {
|
||||
&:not(:first-child) {
|
||||
border-width: 1px 0 0 0;
|
||||
}
|
||||
a {
|
||||
background-size: 30px auto;
|
||||
background-position: left 10px center;
|
||||
padding: 1em;
|
||||
padding-left: 65px;
|
||||
span {
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 1rem;
|
||||
font-weight: 800;
|
||||
|
||||
span.badge {
|
||||
font-size: 0.7em;
|
||||
left: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// MAIN
|
||||
//
|
||||
|
||||
// top message
|
||||
.top-message--wrapper {
|
||||
background-color: $gray-message;
|
||||
@include fill-viewport();
|
||||
}
|
||||
.top-message {
|
||||
@extend .theme-wrapper;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.top-message--text-cell {
|
||||
& > div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&::before {
|
||||
@include fa-icon("\f05a");
|
||||
display: block;
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
color: darken($gray-message, 25);
|
||||
@media ($min-desktop-viewport) {
|
||||
flex: 0 0 $wrapper-gutter-desktop;
|
||||
}
|
||||
}
|
||||
picture {
|
||||
flex: 0 0 10em;
|
||||
line-height: 0;
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#columns-wrapper {
|
||||
@extend .theme-wrapper;
|
||||
max-width: 100%;
|
||||
#sidebar + & {
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-right: $columns-gutter;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
%sidebar {
|
||||
background-color: white;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding-left: $columns-gutter;
|
||||
}
|
||||
@media (min-width: $width + 1) {
|
||||
margin-right: calc(-50vw + #{$width/2});
|
||||
padding-right: calc(50vw - #{$width/2} + #{$wrapper-gutter-desktop});
|
||||
}
|
||||
}
|
||||
.gru-content #sidebar {
|
||||
@extend .theme-wrapper;
|
||||
@extend %sidebar;
|
||||
}
|
||||
|
||||
//
|
||||
// CELLS
|
||||
//
|
||||
|
||||
%title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
$cell-additional-padding : 10px;
|
||||
.gru-content div.cell {
|
||||
overflow: hidden;
|
||||
padding: $cell-additional-padding;
|
||||
padding-bottom: $cell-additional-padding * 2;
|
||||
margin-bottom: $wrapper-gutter-mobile;
|
||||
@media ($min-desktop-viewport) {
|
||||
margin-bottom: $columns-gutter;
|
||||
}
|
||||
|
||||
&.foldable.folded {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// links-lists
|
||||
.gru-content {
|
||||
div#rub_service div.category ul,
|
||||
div#services > ul > li > ul,
|
||||
div#account-management ul,
|
||||
div.links-list ul,
|
||||
div.menucell ul,
|
||||
div.wcsformcell,
|
||||
div.categoriescell ul,
|
||||
div.wcscurrentdraftscell ul,
|
||||
div.wcscurrentformscell ul {
|
||||
& > li > a {
|
||||
padding: 0.5rem 2rem 0.5rem 2.5rem;
|
||||
position: relative;
|
||||
&::before {
|
||||
@include fa-icon("\f0a9");
|
||||
color: $yellow;
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 1em;
|
||||
width: 1em;
|
||||
}
|
||||
&:hover {
|
||||
text-decoration: underline overline $yellow;
|
||||
}
|
||||
}
|
||||
li div.description {
|
||||
padding: 0 1rem 0 1.5rem;
|
||||
}
|
||||
// Redirection Rubrique link
|
||||
li.keyword-redirection-rubrique a {
|
||||
border: 1px solid $yellow;
|
||||
border-radius: 3px;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
background-color: $yellow-xlight;
|
||||
}
|
||||
&::before {
|
||||
color: black;
|
||||
background-color: $yellow;
|
||||
position: static;
|
||||
flex: 0 0 2rem;
|
||||
margin-right: 0.5rem;
|
||||
padding: .33em 0 .33em calc(1rem - 1px);
|
||||
align-self: stretch;
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// cell picture
|
||||
.gru-content div.link-list-cell.has-asset-picture,
|
||||
.gru-content div.wcsformsofcategorycell.has-asset-picture {
|
||||
picture img {
|
||||
margin: 10px auto;
|
||||
}
|
||||
}
|
||||
|
||||
// ".couleur-*" cell
|
||||
.colored-cell {
|
||||
.gru-content &.link-list-cell.has-asset-picture,
|
||||
.gru-content &.wcsformsofcategorycell.has-asset-picture{
|
||||
picture {
|
||||
border-radius: $cell-border-radius $cell-border-radius 0 0;
|
||||
}
|
||||
picture, h2:first-child {
|
||||
background-color: currentColor;
|
||||
margin : -#{$cell-additional-padding + extract-width($cell-border)};
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h2:first-child {
|
||||
color: white;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 5em;
|
||||
background: linear-gradient(to bottom, transparent, hsla(0, 0%, 0%, 0.5));
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
@each $color, $hexa in $cell-header-color {
|
||||
.couleur-#{$color} {
|
||||
.gru-content &.link-list-cell.has-asset-picture,
|
||||
.gru-content &.wcsformsofcategorycell.has-asset-picture {
|
||||
@extend .colored-cell;
|
||||
picture, h2:first-child {
|
||||
background-color: $hexa;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Gray cell
|
||||
.gray-cell {
|
||||
.gru-content &.cell {
|
||||
background-color: #e9e3e3;
|
||||
border: none;
|
||||
|
||||
p {
|
||||
font-size: $fz-small;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar .cell {
|
||||
@extend .gray-cell;
|
||||
}
|
||||
|
||||
//
|
||||
// FORMS
|
||||
//
|
||||
%button {
|
||||
&, &:hover {
|
||||
font-weight: 500;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
%button2 {
|
||||
@extend %button;
|
||||
background-color: white;
|
||||
&:hover {
|
||||
background-color: $yellow-xlight;
|
||||
}
|
||||
}
|
||||
%cancel-button {
|
||||
background-color: white;
|
||||
border-color: black;
|
||||
&:hover {
|
||||
background-color: $gray-xlight;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
//
|
||||
// WCS
|
||||
//
|
||||
div#rub_service {
|
||||
h2 {
|
||||
font-size: $fz-h1;
|
||||
text-align: left;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
h3 {
|
||||
font-size: $fz-h3;
|
||||
text-transform: uppercase;
|
||||
display: flex;
|
||||
&::after {
|
||||
content: "";
|
||||
height: 2px;
|
||||
background-color: $yellow;
|
||||
display: block;
|
||||
flex: 1;
|
||||
margin-left: .66em;
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.previous-button button {
|
||||
@extend %button2;
|
||||
}
|
||||
}
|
||||
div#gauche {
|
||||
background-color: white;
|
||||
@media ($min-desktop-viewport) {
|
||||
padding: $columns-gutter;
|
||||
width: 33%;
|
||||
+ div#rub_service {
|
||||
width: calc(66% - #{$columns-gutter});
|
||||
}
|
||||
}
|
||||
@media ($max-mobile-viewport) {
|
||||
width: auto;
|
||||
margin-left: -1 *$wrapper-gutter-mobile;
|
||||
margin-right: -1 * $wrapper-gutter-mobile;
|
||||
padding: $wrapper-gutter-mobile;
|
||||
}
|
||||
}
|
||||
div#tracking-code {
|
||||
background-color: #e9e3e3;
|
||||
border-radius: $cell-border-radius;
|
||||
padding: $cell-additional-padding;
|
||||
@media ($min-desktop-viewport) {
|
||||
text-align: center;
|
||||
margin-bottom: $columns-gutter;
|
||||
a {
|
||||
padding-left: 0;
|
||||
}
|
||||
button {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.wcs-step--marker {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
//
|
||||
// FOOTER
|
||||
//
|
||||
#footer-wrapper {
|
||||
margin-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
#footer {
|
||||
padding-top: 2rem;
|
||||
.pk-button {
|
||||
color: white;
|
||||
background-color: transparent;
|
||||
&:hover {
|
||||
background-color: black;
|
||||
}
|
||||
}
|
||||
.cell {
|
||||
&[class^="grid-"],
|
||||
&[class*=" grid-"] {
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
}
|
||||
.menu-cell {
|
||||
@include fill-viewport();
|
||||
background-color: black;
|
||||
clear: both;
|
||||
padding-top: 1rem;
|
||||
padding-bottom: 1rem;
|
||||
text-transform: uppercase;
|
||||
font-size: $fz-small;
|
||||
@media (max-width: $very-small-limit) {
|
||||
li {
|
||||
display: block;
|
||||
a {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
// Colors
|
||||
$yellow: #FCC400;
|
||||
$yellow-light: #ffd53f;
|
||||
$yellow-xlight: #fff7da;
|
||||
$gray-dark: #2A2A2E;
|
||||
$gray-light: #D4CAC8;
|
||||
$gray-xlight:#f6f4f5;
|
||||
$gray-message: #efeef4;
|
||||
$blue-dark: #253A8E;
|
||||
|
||||
$cell-header-color: (
|
||||
"rouge": #D8635C,
|
||||
"rose": #D1377A,
|
||||
"bleu-fonce": $blue-dark,
|
||||
"prune-fonce": #732066,
|
||||
"turquoise": #3185AD,
|
||||
"violet": #69599F,
|
||||
"bleu-clair": #79ADC2,
|
||||
"vert-fonce": #00965C,
|
||||
"magenta": #E50046,
|
||||
"jaune": $yellow,
|
||||
"vert-clair": #CFCD00,
|
||||
"prune-clair": #942581
|
||||
);
|
||||
|
||||
// Typo
|
||||
$raleway: Raleway, sans-serif;
|
||||
|
||||
$fz-h1: calc(36em / 16);
|
||||
$fz-h2: calc(24em / 16);
|
||||
$fz-h3: calc(18em / 16);
|
||||
$fz-small: 0.875em;
|
||||
|
||||
// Core vars
|
||||
$body-background: $gray-xlight;
|
||||
$font-color: $gray-dark;
|
||||
$font-family: $raleway;
|
||||
|
||||
$link-color: $blue-dark;
|
||||
$primary-color: $yellow;
|
||||
|
||||
$width: 1290px;
|
||||
$mobile-limit: 1180px;
|
||||
$columns-gutter: 30px;
|
||||
$sidebar-width: 30%;
|
||||
$sidebar-position: right;
|
||||
$sidebar-columns-gutter: 0;
|
||||
|
||||
$nav-mobile-bottom-bar-background: white;
|
||||
$nav-mobile-bottom-bar-color: $font-color;
|
||||
$nav-mobile-bottom-bar-item-hover-background: $yellow;
|
||||
$nav-mobile-bottom-bar-item-hover-color: $nav-mobile-bottom-bar-color;
|
||||
$nav-mobile-bottom-bar-item-selected-background: $nav-mobile-bottom-bar-item-hover-background;
|
||||
$nav-mobile-bottom-bar-item-selected-color: $nav-mobile-bottom-bar-item-hover-color;
|
||||
$nav-mobile-bottom-bar-badge-color: font-color;
|
||||
$nav-mobile-bottom-bar-badge-background: $yellow;
|
||||
|
||||
$title-background: transparent;
|
||||
$title-weight: bold;
|
||||
$title-font-size: $fz-h3;
|
||||
|
||||
$cell-border-radius: 12px;
|
||||
$cell-border: 1px solid $gray-light;
|
||||
$cell-title-cover-border: false;
|
||||
$cell-image-position: top;
|
||||
$cell-entry-border-color: transparent;
|
||||
$cell-entry-color: $font-color;
|
||||
$cell-entry-hover-color: black;
|
||||
$cell-entry-font-weight: 500;
|
||||
$cell-entry-hover-background: transparent;
|
||||
|
||||
$widget-unique-checkbox-position: left;
|
||||
$widget-border-radius: 5px;
|
||||
$widget-focus-border: 1px solid black;
|
||||
|
||||
$button-border-radius: 5px;
|
||||
$button-background: $yellow;
|
||||
$button-color: black;
|
||||
$button-border: 1px solid $yellow;
|
||||
$button-hover-background: $yellow-light;
|
||||
$button-focus-outline: 1px solid black;
|
||||
$buttons-order: cancel, previous, submit;
|
||||
|
||||
$form-sidebar-position: right;
|
||||
|
||||
$wcs-steps-spacing: 1rem;
|
||||
$wcs-step-color: $gray-dark;
|
||||
$wcs-step-current-color: black;
|
||||
$wcs-step-border-bottom: none;
|
||||
$wcs-step-marker-background: $gray-message;
|
||||
$wcs-step-current-marker-background: $yellow;
|
||||
$wcs-step-marker-type: disc tied;
|
||||
$wcs-step-marker-tie-color: $wcs-step-marker-background;
|
||||
$wcs-step-marker-tie-width: 2px;
|
||||
|
||||
$footer-background: $gray-dark;
|
||||
$footer-link-color: $yellow;
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"label": "Thonon Agglomération 2021",
|
||||
"variables": {
|
||||
"pwa_display": "standalone",
|
||||
"theme_color": "#FCC400",
|
||||
"email_header_asset": "emails:logo"
|
||||
},
|
||||
"settings": {
|
||||
"combo": {
|
||||
"COMBO_ASSET_SLOTS.update": {
|
||||
"header:logo": { "label": "Têtière : logo" },
|
||||
"emails:logo": {"label": "Emails : logo"}
|
||||
},
|
||||
"COMBO_CELL_ASSET_SLOTS.update" : {
|
||||
"data_textcell" : {
|
||||
"picture" : {
|
||||
"prefix" : "Image message"
|
||||
}
|
||||
}
|
||||
},
|
||||
"COMBO_CELL_TEMPLATES.update" : {
|
||||
"data_textcell" : {
|
||||
"page-message" : {
|
||||
"extra-css-classes" : "top-message--text-cell",
|
||||
"label" : "Message d'information",
|
||||
"template" : "combo/cells/page-message/text-cell.html"
|
||||
}
|
||||
},
|
||||
"data_linklistcell" : {
|
||||
"change-community" : {
|
||||
"extra-css-classes" : "choix-collectivite",
|
||||
"label" : "Changer de collectivité",
|
||||
"template" : "combo/cells/choix-collectivite/link-list-cell.html"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
@charset "UTF-8";
|
||||
@import '../includes/fonts/raleway';
|
||||
|
||||
@import 'vars';
|
||||
@import '../includes/publik';
|
||||
@import 'custom';
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
{% load assets %}
|
||||
{% block cell-content %}
|
||||
<h2 class="choix-collectivite--title">
|
||||
{{ title }}
|
||||
</h2>
|
||||
<div class="cell--body">
|
||||
<form id="choix-collectivite--form">
|
||||
<label class="choix-collectivite--label" for="choix-collectivite--select">
|
||||
Ma commune
|
||||
</label>
|
||||
<select id="choix-collectivite--select-{{ cell.id }}" class="choix-collectivite--select">
|
||||
<option value="">Sélectionnez</option>
|
||||
{% for link in links %}
|
||||
<option value="{{ link.url }}">{{ link.title }}</option>
|
||||
{% endfor %}
|
||||
</select>
|
||||
<p>
|
||||
Sélectionnez votre commune et découvrez ses services en ligne.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
<script>
|
||||
$(function() {
|
||||
$('#choix-collectivite--select-{{ cell.id }}').change(function(e){
|
||||
const link = this.options[this.selectedIndex].value;
|
||||
if (link) {
|
||||
window.location.href = link;
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{% load assets %}
|
||||
|
||||
{% include "combo/asset_picture_fragment.html" %}
|
||||
|
||||
<div class="cell--body">
|
||||
{{ text }}
|
||||
</div>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{% extends "combo/page_template.html" %}
|
||||
|
||||
{# remove nav #}
|
||||
{% block nav %}{% endblock %}
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
{% extends "combo/page_template_sidebar.html" %}
|
||||
{% load combo i18n pwa %}
|
||||
|
||||
{# move PWA nav inside sidebar #}
|
||||
{% block before-main-content %}
|
||||
{{ block.super }}
|
||||
{% endblock %}
|
||||
{% block sidebar %}
|
||||
<div id="sidebar">
|
||||
{% if pwa_display == "standalone" %}
|
||||
<div class="sidebar--pwa-navigation">
|
||||
{% pwa_navigation %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% trans "Sidebar" as name %}
|
||||
{% placeholder "sidebar" name=name %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
{% extends "theme.html" %}
|
||||
|
||||
{# Move user infos block & add header content #}
|
||||
{% block header-pre %}
|
||||
<div class="toplinks--wrapper">
|
||||
{% block top-links %}{% endblock %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
{% block header-content %}
|
||||
<div class="header-desc">
|
||||
<h2 class="header-desc--yellow-bloc">{{ header_title|safe }}</h2>
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{# Remove nav #}
|
||||
{% block nav %}{% endblock %}
|
||||
|
||||
{# Top message #}
|
||||
{% block content-pre %}
|
||||
<div class="top-message--wrapper">
|
||||
<div class="top-message">{% placeholder "top-message" name="Message d'information" %}</div>
|
||||
</div>
|
||||
{% endblock %}
|
||||
Loading…
Reference in New Issue