chore(attestation): publish button on sticky header
This commit is contained in:
Colin Darie
parent
11d29f5574
commit
151b3f83ed
7 changed files with 69 additions and 36 deletions
|
|
@ -623,40 +623,10 @@ textarea::placeholder {
|
|||
color: $dark-grey;
|
||||
}
|
||||
|
||||
@media (max-width: 62em) {
|
||||
|
||||
.padded-fixed-footer {
|
||||
padding-top: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
|
||||
.padded-fixed-footer {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-fr-theme="dark"] .fixed-footer {
|
||||
border-top: 2px solid var(--background-action-low-blue-france-hover);
|
||||
background-color: var(--background-action-low-blue-france);
|
||||
}
|
||||
|
||||
.mandatory {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
||||
.fixed-footer {
|
||||
border-top: 2px solid $blue-france-500;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-top: $default-padding;
|
||||
background-color: $white;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.fr-menu__list {
|
||||
padding: $default-spacer;
|
||||
overflow-y: auto;
|
||||
|
|
|
|||
49
app/assets/stylesheets/sticky.scss
Normal file
49
app/assets/stylesheets/sticky.scss
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@import "constants";
|
||||
|
||||
.fixed-footer {
|
||||
border-top: 2px solid var(--border-plain-blue-france);
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding-top: $default-padding;
|
||||
background-color: var(--background-default-grey);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media (max-width: 62em) {
|
||||
.padded-fixed-footer {
|
||||
padding-top: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 62em) {
|
||||
.padded-fixed-footer {
|
||||
padding-top: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
[data-fr-theme="dark"] .fixed-footer {
|
||||
background-color: var(--background-action-low-blue-france);
|
||||
}
|
||||
|
||||
.sticky-header {
|
||||
padding-top: $default-padding;
|
||||
padding-bottom: $default-padding;
|
||||
|
||||
&-container {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 800;
|
||||
}
|
||||
|
||||
&-warning {
|
||||
background-color: var(--background-contrast-warning);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -11,8 +11,3 @@
|
|||
%p.fr-hint-text Cette attestation est actuellement délivrée aux usagers.
|
||||
|
||||
%span#autosave-notice
|
||||
|
||||
- if procedure.feature_enabled?(:attestation_v2) && attestation_template.draft?
|
||||
%button.fr-btn.fr-ml-2w{ name: field_name(:attestation_template, :state), value: "published",
|
||||
data: { 'disable-with': "Publication en cours…", controller: 'autosave-submit' } }
|
||||
Publier
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.sticky-header.sticky-header-warning
|
||||
.fr-container
|
||||
%p.flex.justify-between.align-center.fr-text-default--warning
|
||||
%span
|
||||
= dsfr_icon("fr-icon-warning-fill fr-mr-1v")
|
||||
Les modifications effectuées ne seront appliquées qu’une fois que vous aurez publié cette version de l’attestation.
|
||||
%span
|
||||
%button.fr-btn.fr-ml-2w{ form: "attestation-template", name: field_name(:attestation_template, :state), value: "published",
|
||||
data: { 'disable-with': "Publication en cours…", controller: 'autosave-submit' } }
|
||||
Publier l’attestation
|
||||
|
|
@ -4,7 +4,8 @@
|
|||
['Attestation']] }
|
||||
|
||||
= render NestedForms::FormOwnerComponent.new
|
||||
= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure), html: { multipart: true },
|
||||
= form_for @attestation_template, url: admin_procedure_attestation_template_v2_path(@procedure),
|
||||
html: { multipart: true , id: "attestation-template" },
|
||||
data: { turbo: 'true',
|
||||
controller: 'autosubmit attestation',
|
||||
autosubmit_debounce_delay_value: 1000,
|
||||
|
|
@ -118,6 +119,10 @@
|
|||
L’aperçu est mis à jour automatiquement après chaque modification.
|
||||
Pour générer un aperçu fidèle avec tous les champs et les dates, créez-vous un dossier et acceptez-le : l’aperçu l’utilisera.
|
||||
|
||||
- if @procedure.feature_enabled?(:attestation_v2) && @attestation_template.draft?
|
||||
- content_for(:sticky_header) do
|
||||
= render partial: "sticky_header"
|
||||
|
||||
.padded-fixed-footer
|
||||
.fixed-footer#fixed_footer
|
||||
= render partial: "fixed_footer", locals: { procedure: @procedure, attestation_template: @attestation_template }
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
- if @attestation_template.previously_new_record? || @attestation_template.state_changed?
|
||||
= turbo_stream.update "fixed_footer", render(partial: "fixed_footer", locals: { procedure: @procedure, attestation_template: @attestation_template })
|
||||
= turbo_stream.update "sticky-header", render(partial: "sticky_header")
|
||||
|
||||
= turbo_stream.show 'autosave-notice'
|
||||
= turbo_stream.replace 'autosave-notice', render(partial: 'administrateurs/autosave_notice', locals: { success: !@attestation_template.changed? })
|
||||
|
|
|
|||
|
|
@ -45,6 +45,9 @@
|
|||
#beta
|
||||
Env Test
|
||||
|
||||
#sticky-header.sticky-header-container
|
||||
= content_for(:sticky_header)
|
||||
|
||||
= render partial: "layouts/header"
|
||||
%main#contenu{ role: :main }
|
||||
= render partial: "layouts/flash_messages"
|
||||
|
|
|
|||
Loading…
Reference in a new issue