lot retours thème alpes-maritimes-2022 (#72994) #104

Merged
tjund merged 8 commits from wip/72994-updates-alpes-maritimes into main 2023-01-09 14:52:21 +01:00
5 changed files with 62 additions and 48 deletions

View File

@ -727,6 +727,7 @@ div#footer {
@extend .page-title;
padding-left: 0.5rem;
padding-right: 0.5rem;
text-transform: none;
}
div.widget div.title {
font-weight: 700;
@ -787,6 +788,7 @@ span.required {
padding-left: 0;
text-transform: uppercase;
display: block !important;
border-bottom: none;
}
&--progress-bar {
@extend .h3;
@ -821,14 +823,17 @@ span.required {
transform: translateX(100%);
transition: transform 0.25s ease;
&-close {
@extend .h2;
float: right;
margin-bottom: 2rem;
@extend %title;
padding: 0;
border-bottom: none;
display: block;
text-align: right;
margin-bottom: 2em;
&-icon {
&::before {
@extend .h3;
color: black;
content: "\f00d";
color: $cyan;
content: "\00A0\f00d"; // x-cross
font-family: fontAwesome;
}
}
@ -850,11 +855,18 @@ span.required {
@if (str-index('#{$wcs-step-marker-type}', 'tied')) {
@include tied-vertical-steps();
}
.theme-steps--panel h2 {
@extend %title;
@extend .trapeze-title;
border-bottom: 0;
display: block;
padding-left: 0;
margin-bottom: 1em;
}
.wcs-steps {
font-size: 1em;
&--list {
font-family: $title-font-family;
clear: both;
}
}
.wcs-step {
@ -871,13 +883,14 @@ span.required {
}
&--label {
@extend .small;
font-weight: bold;
text-align: left;
width: auto;
order: 2;
margin-left: 0;
}
&--marker {
border: 1px solid $gray-dark;
border: 1px solid;
box-shadow: 0 0 0 0.5rem white;
}
&.current &--marker {

View File

@ -12,6 +12,7 @@ $brown: #B34000;
// typo
$ff-condensed: 'Roboto Condensed', sans-serif;
$base-font: 15;
$base-font-m: 13;
@ -80,7 +81,7 @@ $title-transform: uppercase;
$title-background: transparent;
$title-font-size: $fz-2;
$title-weight: 700;
$title-font-family: 'Roboto Condensed', sans-serif;
$title-font-family: $ff-condensed;
$cell-border: none;
$cell-title-cover-border: false;

View File

@ -1,16 +1,15 @@
{
"label": "Alpes-Maritimes (CD06) (2022)",
"variables": {
"theme_color": "#00A7BD",
"email_header_asset": "emails:logo",
"email_header_img": "img/logo.png",
"email_header_right_img": "img/logo-departement.png"
"theme_color": "#00A7BD"
},
"settings": {
"combo": {
"COMBO_ASSET_SLOTS.update": {
"header:logo": { "label": "Têtière : logo" },
"logo:feder": { "label": "Logo FEDER"},
"email:logo_left": { "label": "Emails : logo gauche"},
"email:logo_right": { "label": "Emails : logo droite"},
"social:dossiers:autonomie": {
"label": "Pictogramme dossier autonomie"
},

View File

@ -1,11 +1,11 @@
<table role="presentation" cellspacing="0" cellpadding="0" border="0" align="center" width="100%" style="max-width: 600px;">
<tr>
<td style="padding: 20px 0; text-align: left; font-family: sans-serif;">
{% if email_header_img %}<img style="max-width: 80%" alt="{% firstof global_title "Compte Citoyen" %}" src="{{portal_url}}static/{{css_variant}}/{{ email_header_img }}"/>{% endif %}
{% if email_header_img %}<img style="max-width: 80%" alt="{% firstof global_title "Compte Citoyen" %}" src="{{portal_url}}assets/email:logo_left"/>{% endif %}
</td>
{% if email_header_right_img %}
<td style="padding: 20px 0; text-align: right; font-family: sans-serif;">
<img style="max-width: 80%" src="{{portal_url}}static/{{css_variant}}/{{ email_header_right_img }}"/>
<img style="max-width: 80%" src="{{portal_url}}assets/email:logo_right"/>
</td>
{% endif %}
</tr>

View File

@ -1,41 +1,42 @@
{% extends "wcs/front/formdata_steps.html" %}
{% block steps-list %}
<div class="theme-steps">
{% for page_label in page_labels %}
{% if forloop.counter == current_page_no %}
<strong class="theme-steps--page-nb">Étape {{ forloop.counter }} sur {{ page_labels|length }}</strong>
<h2 class="theme-steps--title">
{{ page_label }}
</h2>
<div class="theme-steps--progress-bar" style="--gradient-stop: calc(1% * {{ forloop.counter }} * 100 / {{ page_labels|length }})"></div>
{% endif%}
{% endfor%}
<p class="theme-steps--voir-etapes togglable">
<span class="theme-steps--voir" aria-label="Voir"></span>
<a class="theme-steps--panel-open" role="button">Toutes les étapes</a>
</p>
<div class="theme-steps--panel" >
<a class="theme-steps--panel-close" role="button
">
FERMER
<span class="theme-steps--panel-close-icon"></span>
</a>
{{ block.super }}
{% if page_labels|length > 1 %}
<div class="theme-steps">
{% for page_label in page_labels %}
{% if forloop.counter == current_page_no %}
<strong class="theme-steps--page-nb">Étape {{ forloop.counter }} sur {{ page_labels|length }}</strong>
<h2 class="theme-steps--title">
{{ page_label }}
</h2>
<div class="theme-steps--progress-bar" style="--gradient-stop: calc(1% * {{ forloop.counter }} * 100 / {{ page_labels|length }})"></div>
{% endif%}
{% endfor%}
<p class="theme-steps--voir-etapes togglable">
<span class="theme-steps--voir" aria-label="Voir"></span>
<a class="theme-steps--panel-open" role="button">Toutes les étapes</a>
</p>
<div class="theme-steps--panel" >
<a class="theme-steps--panel-close" role="button">
FERMER
<span class="theme-steps--panel-close-icon"></span>
</a>
{{ block.super }}
</div>
<div class="theme-steps--panel-mask"></div>
</div>
<div class="theme-steps--panel-mask"></div>
</div>
<script>
const openStepsBtn = document.querySelector('.theme-steps--panel-open')
const closeStepsBtn = document.querySelector('.theme-steps--panel-close')
const stepsMask = document.querySelector('.theme-steps--panel-mask')
<script>
const openStepsBtn = document.querySelector('.theme-steps--panel-open')
const closeStepsBtn = document.querySelector('.theme-steps--panel-close')
const stepsMask = document.querySelector('.theme-steps--panel-mask')
closeStepsBtn.addEventListener('click', function(){
openStepsBtn.click()
});
stepsMask.addEventListener('click', function(){
openStepsBtn.click()
});
</script>
closeStepsBtn.addEventListener('click', function(){
openStepsBtn.click()
});
stepsMask.addEventListener('click', function(){
openStepsBtn.click()
});
</script>
{% endif %}
{% endblock%}