diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 87feaeeedfe..f9e823f70ed 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -117,6 +117,11 @@ visibility: hidden; } + &.editable-champ-checkbox .updated-at { + // les champs editable-champ-checkbox ont un rendu de type flex + margin-left: auto; + } + &:hover .updated-at, .updated-at.highlighted { visibility: visible; @@ -217,21 +222,32 @@ .fr-label + .fr-hint-text > *, .fr-fieldset__legend + .fr-hint-text > * { // la description d'un champ peut contenir du markup (markdown->html), - // on herite donc la fontsize/margin/padding du fr-hint-text + // on herite donc la taille de police, la couleur et l'interlignage de fr-hint-text + // on réinitialise les marges des éléments font-size: inherit; line-height: inherit; - margin: inherit; - padding: inherit; + color: inherit; + margin: 0; + padding: 0; } - .fr-label + .fr-hint-text { - // les messages d'aide se trouvant juste après un label prennent le même style que ceux se trouvant dans un label - margin-top: .25rem; + .fr-fieldset .fr-hint-text ul { + margin-left: 0.75rem; } + .fr-fieldset .fr-hint-text ol { + margin-left: 1.25rem; + } + + .fr-hint-text + .fr-input { - // les champs se trouvant juste après un message d'aide prennent le même syle que ceux se trouvant juste après un label - margin-top: .5rem; + // les champs se trouvant juste après un message d'aide ont le même espacement que ceux se trouvant juste après un label + margin-top: 0.5rem; + } + + .fr-fieldset__legend .fr-hint-text { + // les messages d'aide se trouvant dans une légende ont le même espacement que ceux se trouvant dans un label + margin-top: 0.25rem; } input[type=password], @@ -395,10 +411,6 @@ } } - .editable-champ-titre_identite { // scss-lint:disable SelectorFormat - margin-bottom: 2 * $default-padding; - } - .cnaf-inputs, .dgfip-inputs, .pole-emploi-inputs, diff --git a/app/components/editable_champ/champ_label_component/champ_label_component.html.haml b/app/components/editable_champ/champ_label_component/champ_label_component.html.haml index a14397a52ac..e887c833885 100644 --- a/app/components/editable_champ/champ_label_component/champ_label_component.html.haml +++ b/app/components/editable_champ/champ_label_component/champ_label_component.html.haml @@ -6,9 +6,6 @@ - if @champ.description.present? .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true) - elsif @champ.legend_label? - %legend.fr-fieldset__legend.fr-text--regular{ id: @champ.labelledby_id }= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at + %legend.fr-fieldset__legend.fr-text--regular.fr-pb-1w{ id: @champ.labelledby_id }= render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at - if @champ.description.present? - .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true) -- elsif @champ.single_checkbox? - - if @champ.description.present? - .fr-hint-text{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true) + .fr-hint-text.fr-mt-n1w.fr-mb-1w.fr-pl-1w.width-100{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true) diff --git a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml index 509759e058a..82867893c2e 100644 --- a/app/components/editable_champ/checkbox_component/checkbox_component.html.haml +++ b/app/components/editable_champ/checkbox_component/checkbox_component.html.haml @@ -1,8 +1,9 @@ -.fr-checkbox-group +.fr-input-group = @form.check_box :value, - { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: "#{@champ.describedby_id} #{@champ.error_id}" }, class: class_names('required' => @champ.required?)}, + { required: @champ.required?, id: @champ.input_id, checked: @champ.true?, aria: { describedby: "#{@champ.describedby_id} #{@champ.error_id}" } }, 'true', 'false' %label.fr-label{ for: @champ.input_id, id: @champ.labelledby_id } - %span - = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at + = render EditableChamp::ChampLabelContentComponent.new form: @form, champ: @champ, seen_at: @seen_at + - if @champ.description.present? + .fr-hint-text.fr-mt-1v.fr-ml-4w{ id: @champ.describedby_id }= render SimpleFormatComponent.new(@champ.description, allow_a: true) diff --git a/app/components/editable_champ/repetition_component/repetition_component.html.haml b/app/components/editable_champ/repetition_component/repetition_component.html.haml index 620f5194b24..d3862515ce3 100644 --- a/app/components/editable_champ/repetition_component/repetition_component.html.haml +++ b/app/components/editable_champ/repetition_component/repetition_component.html.haml @@ -1,7 +1,7 @@ %fieldset %legend.fr-h5{ legend_params }= @champ.libelle - if @champ.description.present? - .notice{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true) + .notice.fr-mt-n2w{ notice_params }= render SimpleFormatComponent.new(@champ.description, allow_a: true) .repetition{ id: dom_id(@champ, :rows), class: class_names('utils-repetition-required' => @champ.mandatory?) } diff --git a/app/javascript/components/ComboBox.tsx b/app/javascript/components/ComboBox.tsx index d4384325505..7fe18b80b21 100644 --- a/app/javascript/components/ComboBox.tsx +++ b/app/javascript/components/ComboBox.tsx @@ -50,11 +50,15 @@ export function ComboBox({ className={`fr-ds-combobox ${className ?? ''}`} shouldFocusWrap={true} > - {label ? : null} - {description ? ( - - {description} - + {label ? ( + ) : null}
diff --git a/app/javascript/components/MapEditor/components/AddressInput.tsx b/app/javascript/components/MapEditor/components/AddressInput.tsx index 8f250adc6bf..f204ca39dd7 100644 --- a/app/javascript/components/MapEditor/components/AddressInput.tsx +++ b/app/javascript/components/MapEditor/components/AddressInput.tsx @@ -15,22 +15,21 @@ export function AddressInput({ translations: Record; }) { return ( -
- { - if (item && item.data) { - fire(document, 'map:zoom', { - featureCollection, - feature: item.data - }); - } - }} - /> -
+ { + if (item && item.data) { + fire(document, 'map:zoom', { + featureCollection, + feature: item.data + }); + } + }} + /> ); }