Skip to content

Commit

Permalink
improve modal
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabienheureux
fabienheureux committed Nov 1, 2024
1 parent 5baea3a commit 48c6b3c
Show file tree
Hide file tree
Showing 5 changed files with 134 additions and 127 deletions.
38 changes: 27 additions & 11 deletions jinja2/qfdmo/_addresses_partials/filters/_modal.html
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,40 @@
<div class='fr-container
qfdmo-px-0
qfdmo-fixed qfdmo-z-50 qfdmo-top-auto qfdmo-left-0 qfdmo-right-0 qfdmo-mt-auto
qfdmo-hidden
qfdmo-h-[80vh] qfdmo-h-[80svh] {# Keep both values help keep support for vh in firefox #}
qfdmo-drop-shadow-[0_0_100px_rgba(0,0,0,0.5)]
qfdmo-inset-0 qfdmo-font-black qfdmo-bg-white
qfdmo-flex-col
data-[visible=true]:qfdmo-animate-in
data-[visible=true]:qfdmo-flex
data-[visible=true]:qfdmo-slide-in-from-bottom-15w
data-[visible=exit]:qfdmo-flex
qfdmo-flex qfdmo-flex-col
qfdmo-overflow-scroll
qfdmo-origin-bottom
qfdmo-drop-shadow-[0_0_100px_rgba(0,0,0,0.5)]
data-[visible=false]:qfdmo-hidden
data-[visible=true]:qfdmo-animate-modal-appear
data-[visible=exit]:qfdmo-animate-out
data-[visible=exit]:qfdmo-slide-out-to-bottom-full
data-[visible=exit]:qfdmo-fade-out
'
data-visible="false"
{% block wrapper_attrs %}
{% endblock wrapper_attrs %}
>
<div class="fr-container fr-container--fluid qfdmo-h-full">
{% block content %}
{% endblock content %}
<div class="fr-modal__header qfdmo-sticky qfdmo-top-0 qfdmo-z-10">
{% block modal_header %}
{% endblock modal_header %}
</div>

<div class="fr-modal__content fr-text--normal qfdmo-font-normal">
<h2 class="qfdmo-text-center fr-h4">
{% block modal_title %}
{% endblock modal_title %}
</h2>
<hr>

{% block modal_content %}
{% endblock modal_content %}
</div>

<div class="fr-modal__footer qfdmo-flex qfdmo-flex-col empty:qfdmo-hidden">
{% block modal_footer %}
{% endblock modal_footer %}
</div>

</div>
106 changes: 48 additions & 58 deletions jinja2/qfdmo/_addresses_partials/filters/panel_filters.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,68 +9,58 @@
tabindex="0"
{% endblock wrapper_attrs %}

{% block content %}
<div class="fr-modal__header">
<button
class="fr-btn fr-btn--close fr-btn--sm fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-close-line"
type="button"
data-action="click -> search-solution-form#toggleAdvancedFiltersWithoutSubmitButton"
>
Fermer
</button>
</div>
<div class="fr-modal__content fr-text--normal qfdmo-overflow-y-auto qfdmo-flex-grow qfdmo-font-normal">

{% block filters_title %}
<h4 class="fr-mt-3w qfdmo-text-center">
Filtres avancés
</h4>
{% endblock %}
<hr>
{% block modal_header %}
<button
class="fr-btn fr-btn--close fr-btn--sm fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-close-line"
type="button"
data-action="click -> search-solution-form#toggleAdvancedFiltersWithoutSubmitButton"
>
Fermer
</button>
{% endblock modal_header %}

{% block filters_content %}
{% with field=form.bonus, legend="Éligibles au bonus réparation" %}
{% include "qfdmo/_addresses_partials/filter/_panel_filters" %}
{% endwith %}
{% block modal_title %}Filtres avancés{% endblock modal_title %}

{% with field=form.ess, legend="Type d'enseigne ESS" %}
{% include "qfdmo/_addresses_partials/filter/_panel_filters" %}
{% endwith %}
{% block modal_content %}
{% with field=form.bonus, legend="Éligibles au bonus réparation" %}
{% include "qfdmo/_addresses_partials/filter/_panel_filters" %}
{% endwith %}

{% with field=form.label_reparacteur, legend="Enseignes labellisées Répar’Acteurs", icon="qfdmo/partials/label_reparacteur_icon.html" %}
{% include "qfdmo/_addresses_partials/filter/_panel_filters" %}
{% endwith %}
{% endblock %}
{% with field=form.ess, legend="Type d'enseigne ESS" %}
{% include "qfdmo/_addresses_partials/filter/_panel_filters" %}
{% endwith %}

{% with field=form.label_reparacteur, legend="Enseignes labellisées Répar’Acteurs", icon="qfdmo/partials/label_reparacteur_icon.html" %}
{% include "qfdmo/_addresses_partials/filter/_panel_filters" %}
{% endwith %}
{% endblock modal_content %}

</div>
<div class="fr-modal__footer qfdmo-flex qfdmo-flex-col">
<div
class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
data-search-solution-form-target="advancedFiltersSaveButton"
{% block modal_footer %}
<div
class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
data-search-solution-form-target="advancedFiltersSaveButton"
>
<button
class="fr-btn"
type="button"
data-action="click -> search-solution-form#toggleAdvancedFiltersWithoutSubmitButton"
>
<button
class="fr-btn"
type="button"
data-action="click -> search-solution-form#toggleAdvancedFiltersWithoutSubmitButton"
>
Enregistrer les filtres
</button>
</div>
<div
class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
data-search-solution-form-target="advancedFiltersSaveAndSubmitButton"
Enregistrer les filtres
</button>
</div>
<div
class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left"
data-search-solution-form-target="advancedFiltersSaveAndSubmitButton"
>
<button
class="fr-btn"
type="button"
data-action="click -> search-solution-form#advancedSubmit"
data-without-zone="false"
data-with-controls={{"false" if is_carte else "true"}}
data-toggle-advanced-filters="true"
>
<button
class="fr-btn"
type="button"
data-action="click -> search-solution-form#advancedSubmit"
data-without-zone="false"
data-with-controls={{"false" if is_carte else "true"}}
data-toggle-advanced-filters="true"
>
Appliquer
</button>
</div>
</div>
{% endblock content %}
Appliquer
</button>
</div>
{% endblock modal_footer %}
99 changes: 47 additions & 52 deletions jinja2/qfdmo/carte/modals/a_propos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,61 +5,56 @@
data-search-solution-form-target="aProposMainPanel"
{% endblock wrapper_attrs %}

{% block content %}
<div class="fr-modal__header">
<button
class="fr-btn fr-btn--close fr-btn--sm fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-close-line"
type="button"
data-action="click -> search-solution-form#toggleAPropos"
>
Fermer
</button>
</div>
<div class="fr-modal__content fr-text--normal qfdmo-overflow-y-auto qfdmo-flex-grow qfdmo-font-normal">
<h2 class="fr-h4 fr-mt-3w qfdmo-text-center">
À propos de La Carte
</h2>
<hr>
<div class="fr-card fr-enlarge-link fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a
href="https://longuevieauxobjets.ademe.fr/reutiliser-nos-outils/?mtm_campaign=widget"
target="_blank"
rel="noreferrer"
aria-label="Réutiliser La Carte - Nouvelle fenêtre"
>
Réutiliser La Carte
</a>
</h3>
<p class="fr-card__desc">
Et si vous ajoutiez cette carte à votre site ? Pour utiliser notre widget, c'est par ici !
</p>
</div>
{% block modal_header %}
<button
class="fr-btn fr-btn--close fr-btn--sm fr-btn--tertiary-no-outline fr-btn--icon-left fr-icon-close-line"
type="button"
data-action="click -> search-solution-form#toggleAPropos"
>
Fermer
</button>
{% endblock modal_header %}

{% block modal_title %}À propos de La Carte{% endblock modal_title %}

{% block modal_content %}
<div class="fr-card fr-enlarge-link fr-card--horizontal">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a
href="https://longuevieauxobjets.ademe.fr/reutiliser-nos-outils/?mtm_campaign=widget"
target="_blank"
rel="noreferrer"
aria-label="Réutiliser La Carte - Nouvelle fenêtre"
>
Réutiliser La Carte
</a>
</h3>
<p class="fr-card__desc">
Et si vous ajoutiez cette carte à votre site ? Pour utiliser notre widget, c'est par ici !
</p>
</div>
</div>
<div class="fr-card fr-enlarge-link fr-card--horizontal fr-mt-2w">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a
href="{{ url('qfdmo:feedback-form') }}"
target="_blank"
rel="noreferrer"
aria-label="Donnez votre avis - Nouvelle fenêtre"
>
Donner votre avis
</a>
</h3>
<p class="fr-card__desc">Cette carte doit-être la vôtre ! Si vous avez des idées pour l'améliorer, on vous écoute.</p>
</div>
</div>
<div class="fr-card fr-enlarge-link fr-card--horizontal fr-mt-2w">
<div class="fr-card__body">
<div class="fr-card__content">
<h3 class="fr-card__title">
<a
href="{{ url('qfdmo:feedback-form') }}"
target="_blank"
rel="noreferrer"
aria-label="Donnez votre avis - Nouvelle fenêtre"
>
Donner votre avis
</a>
</h3>
<p class="fr-card__desc">Cette carte doit-être la vôtre ! Si vous avez des idées pour l'améliorer, on vous écoute.</p>
</div>
</div>
</div>
<div class="fr-modal__footer qfdmo-flex qfdmo-flex-col">
<div class="qfdmo-flex qfdmo-justify-center">
{% include 'layout/_partials/header_logos.html' %}
</div>
<div class="qfdmo-flex">
{% include 'layout/_partials/header_logos.html' %}
</div>
{% endblock content %}
{% endblock modal_content %}
10 changes: 4 additions & 6 deletions jinja2/qfdmo/carte/modals/filters.html
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
{% extends 'qfdmo/_addresses_partials/filters/panel_filters.html' %}

{% block filters_title %}
<h4 class="fr-h4 fr-mt-3w qfdmo-text-center">
Filtres
</h4>
{% block modal_title %}
Filtres
{% endblock %}

{% block filters_content %}
{% block modal_content %}
<input
id="{{ form.direction.id_for_label}}"
name="{{ form.direction.html_name}}"
Expand All @@ -19,4 +17,4 @@ <h4 class="fr-h4 fr-mt-3w qfdmo-text-center">
{% include 'qfdmo/_addresses_partials/filters/_object_filter.html' %}
{% endwith %}
{% include 'qfdmo/_addresses_partials/filters/_labels_filters.html' %}
{% endblock %}
{% endblock modal_content %}
8 changes: 8 additions & 0 deletions tailwind.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,9 +197,17 @@ module.exports = {
"40%": { transform: "rotate(0deg) scale3d(0.9, 0.9, 1)" },
"100%": { transform: "rotate(0) scale3d(0.9, 0.9, 1) translateZ(0)" },
},
"modal-appear": {
"0%": { opacity: 0, transform: "translateY(0px) scale(0.98)" },
"50%": { opacity: 1 },
"100%": {
transform: "translateY(0px) scale(1)",
},
},
},
animation: {
wave: "wave 1.5s linear",
"modal-appear": "modal-appear 0.3s",
},
},
},
Expand Down

0 comments on commit 48c6b3c

Please sign in to comment.