use dropdown to hide filter form

This commit is contained in:
Lisa Durand 2023-05-02 19:07:53 +02:00
parent 6113c0b75e
commit 530d36b6df
4 changed files with 50 additions and 27 deletions

View file

@ -39,9 +39,11 @@ input[type="radio"] {
}
// scss-lint:enable DuplicateProperty
// remove additional calendar icon on date input already handle by navigator
.fr-input[type="date"] {
background-image: none;
// remove additional calendar icon on date input already handle by Firefox navigator
@-moz-document url-prefix() {
.fr-input[type="date"] {
background-image: none;
}
}
// remove pointer cursor on textarea
@ -71,3 +73,15 @@ fieldset {
color: $light-red;
box-shadow: 0px 0px 0px 1px $light-red;
}
// on utilise le dropdown de sélecteur de langue pour un autre usage donc on veut retirer l'icone
.fr-translate .fr-translate__btn.custom-fr-translate-no-icon::before {
display: none;
}
// on veut ferrer à droite le dropdown de sélecteur de langue
@media (min-width: 62em) {
.fr-nav__item.custom-fr-translate-flex-end {
align-items: flex-end;
}
}

View file

@ -6,3 +6,5 @@ en:
button:
apply_filters: Apply filters
reset_filters: Reset filters
select_filters: Select a filter
filter_title: Filter

View file

@ -6,3 +6,5 @@ fr:
button:
apply_filters: Appliquer les filtres
reset_filters: Réinitialiser les filtres
select_filters: Sélectionner un filtre
filter_title: Filtrer

View file

@ -1,28 +1,33 @@
= form_with(url: dossiers_path(), method: :get ) do |f|
= f.hidden_field :statut, value: @statut
.fr-grid-row.fr-grid-row--gutters
.fr-col-12.fr-col-md-6
%fieldset#checkboxes-inline.fr-fieldset{ "aria-labelledby" => "checkboxes-inline-legend checkboxes-inline-messages" }
%legend.fr-fieldset__legend--regular.fr-fieldset__legend
= t('.legend.states')
= f.collection_check_boxes :states, states_collection(@statut), :to_s, :to_s, include_hidden: false do |b|
.fr-fieldset__element.fr-fieldset__element--inline
.fr-checkbox-group.fr-ml-2w.fr-py-1w
= b.check_box(checked: filter.states_filtered?(b.value))
= b.label(class: 'fr-label') { dossier_display_state(b.text) }
.fr-grid-row
.fr-col
%nav.fr-translate.fr-nav{ role: "filter" }
.fr-nav__item.custom-fr-translate-flex-end
%button.fr-translate__btn.translate-no-icon.fr-btn.fr-btn--tertiary.custom-fr-translate-no-icon{ "aria-controls" => "filters", "aria-expanded" => "false", title: t('.button.select_filters') }
= t('.button.filter_title')
#filters.fr-collapse.fr-translate__menu.fr-menu
%ul.fr-menu__list.fr-p-3w
= form_with(url: dossiers_path(), method: :get ) do |f|
= f.hidden_field :statut, value: @statut
.fr-col-12.fr-col-md-3
.fr-input-group
= f.label 'from_created_at_date', t('.legend.created_at'), class: 'fr-label'
= f.date_field 'from_created_at_date', value: @filter.from_created_at_date, class: 'fr-input'
%fieldset#checkboxes.fr-fieldset{ "aria-labelledby" => "checkboxes-legend checkboxes-messages" }
%legend#checkboxes-legend.fr-fieldset__legend--regular.fr-fieldset__legend
= t('.legend.states')
= f.collection_check_boxes :states, states_collection(@statut), :to_s, :to_s, include_hidden: false do |b|
.fr-fieldset__element
.fr-checkbox-group.fr-ml-2w.fr-py-1w
= b.check_box(checked: filter.states_filtered?(b.value))
= b.label(class: 'fr-label') { dossier_display_state(b.text) }
.fr-col-12.fr-col-md-3
.fr-input-group
= f.label 'from_depose_at_date', t('.legend.depose_at'), class: 'fr-label'
= f.date_field 'from_depose_at_date', value: @filter.from_depose_at_date, class: 'fr-input'
.fr-mb-2w
= f.submit t('.button.apply_filters'), class: 'fr-btn fr-btn--sm'
= link_to t('.button.reset_filters'), dossiers_path(statut: @statut), class: 'fr-btn fr-btn--sm fr-btn--tertiary-no-outline'
.fr-input-group
= f.label 'from_created_at_date', t('.legend.created_at'), class: 'fr-label'
= f.date_field 'from_created_at_date', value: @filter.from_created_at_date, class: 'fr-input'
%hr
.fr-input-group
= f.label 'from_depose_at_date', t('.legend.depose_at'), class: 'fr-label'
= f.date_field 'from_depose_at_date', value: @filter.from_depose_at_date, class: 'fr-input'
.fr-my-2w
= f.submit t('.button.apply_filters'), class: 'fr-btn fr-btn--sm'
= link_to t('.button.reset_filters'), dossiers_path(statut: @statut), class: 'fr-btn fr-btn--sm fr-btn--tertiary-no-outline'