From 44823ddd321bac8ee6078273897e9842a610471a Mon Sep 17 00:00:00 2001 From: Colin Darie Date: Mon, 11 Jul 2022 11:42:59 +0200 Subject: [PATCH] style(champs): reduce width of small inputs MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Closes #7427 Cf #7387 Quelques considérations : - l'attribut `size` ne correspond pas exactement au nombre de caractères qui peut être saisi (à moins d'utiliser une font monospace). On doit donc utiliser une valeur légèrement supérieure pour être sûr que les combinaisons navigateurs/police/taille soient suffisantes. - on essaye d'harmoniser un peu les largeurs possibles, donc on utilise un size=20 qui correspond bien à plusieurs champs concernés - délicat d'harmoniser avec max-width car les champs de type number & date ajoutent des outils/icones à droite de l'input J'en ai profité pour définir de vrais placeholders pour les champs de type number. --- app/assets/stylesheets/forms.scss | 52 +++++++++++++++---- app/assets/stylesheets/utils.scss | 16 ++++++ .../editable_champs/_decimal_number.html.haml | 2 +- .../editable_champs/_dossier_link.html.haml | 3 +- .../dossiers/editable_champs/_iban.html.haml | 4 +- .../editable_champs/_integer_number.html.haml | 2 +- .../dossiers/editable_champs/_siret.html.haml | 4 +- 7 files changed, 68 insertions(+), 15 deletions(-) diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index c7ee7aebd..e93178860 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -238,14 +238,50 @@ input[type=number], input[type=tel], textarea { - width: 100%; + @media (max-width: $two-columns-breakpoint) { + width: 100%; + } + + // don't set 100% width when width-* classes or size attribute are applied + @media (min-width: $two-columns-breakpoint) { + &:not([class^='width-']):not([size]) { + width: 100%; + } + } } - input[type=email], - input[type=password], - input[type=number], - input[type=tel], { - max-width: 500px; + @media (min-width: $two-columns-breakpoint) { + input[type=email], + input[type=password], + input[type=number], + input[type=tel] { + max-width: 500px; + } + } + + input[type=date] { + max-width: 180px; + } + + // override default site width/max-width for editable-champ form (Usager form) + .editable-champ { + @media (min-width: $two-columns-breakpoint) { + input { + max-width: none; + + &:not([size]) { + &[type='date'], + &[type='tel'], + &[type='number'] { + width: 33.33%; + } + + &[type='email'] { + width: 66.67%; + } + } + } + } } input[type=checkbox], @@ -262,10 +298,6 @@ margin-bottom: $default-fields-spacer; } - input[type=date] { - max-width: 180px; - } - select { // hack found here: https://stackoverflow.com/questions/1895476/how-to-style-a-select-dropdown-with-css-only-without-javascript -webkit-appearance: none; diff --git a/app/assets/stylesheets/utils.scss b/app/assets/stylesheets/utils.scss index 9d28cdced..7b6b685e2 100644 --- a/app/assets/stylesheets/utils.scss +++ b/app/assets/stylesheets/utils.scss @@ -77,6 +77,22 @@ .width-33 { width: 33.33%; + + @media (min-width: $two-columns-breakpoint) { + &-desktop { + width: 33.33%; + } + } +} + +.width-66 { + width: 66.67%; + + @media (min-width: $two-columns-breakpoint) { + &-desktop { + width: 66.67%; + } + } } // who known diff --git a/app/views/shared/dossiers/editable_champs/_decimal_number.html.haml b/app/views/shared/dossiers/editable_champs/_decimal_number.html.haml index 34a27270f..b06b2e29e 100644 --- a/app/views/shared/dossiers/editable_champs/_decimal_number.html.haml +++ b/app/views/shared/dossiers/editable_champs/_decimal_number.html.haml @@ -2,5 +2,5 @@ id: champ.input_id, aria: { describedby: champ.describedby_id }, step: :any, - placeholder: champ.libelle, + placeholder: "3.14", required: champ.mandatory? diff --git a/app/views/shared/dossiers/editable_champs/_dossier_link.html.haml b/app/views/shared/dossiers/editable_champs/_dossier_link.html.haml index 4e0ad4832..dbfd33ca9 100644 --- a/app/views/shared/dossiers/editable_champs/_dossier_link.html.haml +++ b/app/views/shared/dossiers/editable_champs/_dossier_link.html.haml @@ -5,7 +5,8 @@ placeholder: "Numéro de dossier", autocomplete: 'off', required: champ.mandatory?, - data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(champ.id) } + data: { controller: 'turbo-input', turbo_input_url_value: champs_dossier_link_path(champ.id) }, + size: 20 .help-block{ id: dom_id(champ, :help_block) } = render partial: 'shared/champs/dossier_link/help_block', locals: { id: champ.value } diff --git a/app/views/shared/dossiers/editable_champs/_iban.html.haml b/app/views/shared/dossiers/editable_champs/_iban.html.haml index d0ef51222..5697ed9e2 100644 --- a/app/views/shared/dossiers/editable_champs/_iban.html.haml +++ b/app/views/shared/dossiers/editable_champs/_iban.html.haml @@ -3,4 +3,6 @@ placeholder: t(".placeholder"), required: champ.mandatory?, aria: { describedby: champ.describedby_id }, - data: { controller: 'iban-input'} + data: { controller: 'iban-input'}, + class: "width-66-desktop", + maxlength: 34 + 9 # count space separator of 4 digits-groups diff --git a/app/views/shared/dossiers/editable_champs/_integer_number.html.haml b/app/views/shared/dossiers/editable_champs/_integer_number.html.haml index 97b45497b..43417e1f4 100644 --- a/app/views/shared/dossiers/editable_champs/_integer_number.html.haml +++ b/app/views/shared/dossiers/editable_champs/_integer_number.html.haml @@ -1,5 +1,5 @@ = form.number_field :value, id: champ.input_id, aria: { describedby: champ.describedby_id }, - placeholder: champ.libelle, + placeholder: 5, required: champ.mandatory? diff --git a/app/views/shared/dossiers/editable_champs/_siret.html.haml b/app/views/shared/dossiers/editable_champs/_siret.html.haml index 7e8e39fee..488e13f46 100644 --- a/app/views/shared/dossiers/editable_champs/_siret.html.haml +++ b/app/views/shared/dossiers/editable_champs/_siret.html.haml @@ -5,7 +5,9 @@ data: { controller: 'turbo-input', turbo_input_url_value: champs_siret_path(champ.id) }, required: champ.mandatory?, pattern: "[0-9]{14}", - title: t(".title") + title: t(".title"), + class: "width-33-desktop", + maxlength: 14 .spinner.right.hidden .siret-info{ id: dom_id(champ, :siret_info) } - if champ.etablissement.present?