Update style (following 6bad191)

demarches-simplifiees · Oct 28, 2024 · 128efd0 · 128efd0
1 parent 6ab55c4
commit 128efd0
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 43 deletions.
diff --git 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,23 +222,34 @@
   .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: .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
+    // 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: .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: .25rem;
+  }
+
   input[type=password],
   select:not(.fr-select) {
     display: block;
@@ -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
@@ -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
@@ -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
@@ -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
@@ -50,11 +50,15 @@ export function ComboBox({
       className={`fr-ds-combobox ${className ?? ''}`}
       shouldFocusWrap={true}
     >
-      {label ? <Label className="fr-label">{label}</Label> : null}
-      {description ? (
-        <Text slot="description" className="fr-hint-text">
-          {description}
-        </Text>
+      {label ? (
+        <Label className="fr-label">
+          {label}
+          {description ? (
+            <Text slot="description" className="fr-hint-text fr-mb-1w">
+              {description}
+            </Text>
+          ) : null}
+        </Label>
       ) : null}
       <div className="fr-ds-combobox__input" style={{ position: 'relative' }}>
         <Input className="fr-select fr-autocomplete" ref={inputRef} />

diff --git 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<string, string>;
 }) {
   return (
-    <div style={{ marginBottom: '10px' }}>
-      <RemoteComboBox
-        minimumInputLength={2}
-        id={champId}
-        loader={source}
-        label={translations.address_input_label}
-        description={translations.address_input_description}
-        onChange={(item) => {
-          if (item && item.data) {
-            fire(document, 'map:zoom', {
-              featureCollection,
-              feature: item.data
-            });
-          }
-        }}
-      />
-    </div>
+    <RemoteComboBox
+      minimumInputLength={2}
+      id={champId}
+      className="fr-input-group"
+      loader={source}
+      label={translations.address_input_label}
+      description={translations.address_input_description}
+      onChange={(item) => {
+        if (item && item.data) {
+          fire(document, 'map:zoom', {
+            featureCollection,
+            feature: item.data
+          });
+        }
+      }}
+    />
   );
 }