From a8f85a4081475b34b1374f0d10d6a7a8b4d52abe Mon Sep 17 00:00:00 2001 From: Fabien Le Frapper Date: Wed, 13 Nov 2024 17:02:13 +0100 Subject: [PATCH] =?UTF-8?q?Redesign=20de=20la=20fiche=20d=C3=A9taill=C3=A9?= =?UTF-8?q?e=20(#968)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .parcelrc | 6 + .postcssrc | 3 +- .secrets.baseline | 10 +- Makefile | 15 + Procfile.dev | 2 +- core/context_processors.py | 1 + core/jinja2_handler.py | 53 +- core/settings.py | 26 +- core/urls.py | 30 + docs/Coding-guidelines | 3 + docs/Frontend.md | 78 + dsfr_hacks/__init__.py | 0 dsfr_hacks/colors.js | 406 ++++ dsfr_hacks/colors.py | 404 +++ dsfr_hacks/extract_dsfr_colors.py | 132 + dsfr_hacks/extract_used_colors.py | 24 + dsfr_hacks/extract_used_icons.py | 21 + dsfr_hacks/forms.py | 6 + dsfr_hacks/icons.js | 19 + dsfr_hacks/urls.py | 5 + dsfr_hacks/used_colors.js | 24 + dsfr_hacks/used_icons.js | 4 + dsfr_hacks/views.py | 26 + e2e_tests/accessibility.spec.ts | 13 +- e2e_tests/advanced_filters.spec.ts | 4 +- e2e_tests/iframe.spec.ts | 123 +- e2e_tests/search_update.spec.ts | 17 +- iframe_without_js.html | 2 +- .../core/test_display_as_iframe.py | 11 - integration_tests/qfdmo/test_acteur_detail.py | 122 + .../qfdmo/test_adresse_detail.py | 241 -- jinja2/dsfr_hacks/colors.html | 21 + jinja2/layout/base.html | 60 +- .../address_actions.html | 2 +- .../source_or_label_list.html | 17 - .../adresse_input_form.html | 4 +- .../_addresses_partials/filters/_modal.html | 40 +- .../filters/_object_filter.html | 6 +- .../filters/iframe_advanced_filters.html | 10 - .../filters/panel_filters.html | 96 +- .../iframe_footer_links.html | 2 +- jinja2/qfdmo/acteur.html | 24 + jinja2/qfdmo/acteur/_action.html | 23 + jinja2/qfdmo/acteur/_action_mailto.html | 3 + jinja2/qfdmo/acteur/_action_share.html | 78 + jinja2/qfdmo/acteur/_action_tel.html | 3 + jinja2/qfdmo/acteur/_actions.html | 24 + jinja2/qfdmo/acteur/_label.html | 24 + jinja2/qfdmo/acteur/_labels.html | 11 + jinja2/qfdmo/acteur/_labels/bonus.html | 3 + jinja2/qfdmo/acteur/_labels/generic.html | 3 + .../qfdmo/acteur/_labels/multiple_labels.html | 3 + jinja2/qfdmo/acteur/_tabs.html | 23 + jinja2/qfdmo/acteur/detail.html | 391 --- jinja2/qfdmo/acteur/tabs/_panel.html | 9 + jinja2/qfdmo/acteur/tabs/_section.html | 13 + jinja2/qfdmo/acteur/tabs/_separator.html | 1 + jinja2/qfdmo/acteur/tabs/_service_tag.html | 11 + jinja2/qfdmo/acteur/tabs/_tab.html | 11 + jinja2/qfdmo/acteur/tabs/about_panel.html | 45 + jinja2/qfdmo/acteur/tabs/labels_panel.html | 13 + .../qfdmo/acteur/tabs/sections/adresse.html | 34 + jinja2/qfdmo/acteur/tabs/sections/bonus.html | 25 + .../acteur/tabs/sections/description.html | 9 + .../exclusivite_de_reprisereparation.html | 11 + .../qfdmo/acteur/tabs/sections/horaires.html | 21 + jinja2/qfdmo/acteur/tabs/sections/meta.html | 33 + .../tabs/sections/services_disponibles.html | 42 + .../qfdmo/acteur/tabs/sections/telephone.html | 14 + .../acteur/tabs/sections/type_enseigne.html | 11 + jinja2/qfdmo/acteur/tabs/sources_panel.html | 13 + jinja2/qfdmo/adresse_detail.html | 11 - jinja2/qfdmo/carte.html | 30 + jinja2/qfdmo/carte/_a_propos.html | 65 - jinja2/qfdmo/carte/_digital_results.html | 36 + jinja2/qfdmo/carte/_header.html | 38 - jinja2/qfdmo/carte/_map.html | 238 -- jinja2/qfdmo/carte/_result.html | 4 - jinja2/qfdmo/carte/_search_in_zone.html | 12 + jinja2/qfdmo/carte/base.html | 51 - jinja2/qfdmo/carte/header.html | 40 + jinja2/qfdmo/carte/modals/a_propos.html | 60 + .../{_filters.html => modals/filters.html} | 12 +- jinja2/qfdmo/carte/panels/acteur_detail.html | 20 + jinja2/qfdmo/carte/panels/legend.html | 44 + .../legend_mobile.html} | 4 +- jinja2/qfdmo/carte/result.html | 30 - .../_iframe.html | 0 .../advanced.html | 5 +- .../base.html | 2 + jinja2/qfdmo/formulaire.html | 72 +- jinja2/qfdmo/formulaire/header.html | 18 + .../formulaire/modals/advanced_filters.html | 1 + .../search_form.html} | 23 +- .../update_search.html} | 14 +- .../partials/action_list_by_direction.html | 2 +- jinja2/qfdmo/partials/featureflip_inputs.html | 9 +- .../shared/disclaimers/adresse_missing.html | 21 + .../shared/disclaimers/loading_solutions.html | 9 + .../shared/disclaimers/no_local_solution.html | 8 + jinja2/qfdmo/shared/main.html | 111 + jinja2/qfdmo/shared/results.html | 62 + jinja2/qfdmo/shared/tag.html | 19 + jinja2/tests/iframe.html | 1 - package-lock.json | 2155 ++++++----------- package.json | 3 + parcel-transformers/dsfr.ts | 35 + parcel-transformers/remove-ie-hack.ts | 23 + qfdmo/admin/acteur.py | 2 +- qfdmo/api.py | 24 +- ...ur_claire_alter_action_couleur_and_more.py | 212 ++ qfdmo/migrations/0100_merge_20241107_1937.py | 13 + ...ma_source_code_0100_merge_20241107_1937.py | 13 + ...eur_alter_groupeaction_couleur_and_more.py | 1263 ++++++++++ qfdmo/models/acteur.py | 121 +- qfdmo/models/action.py | 80 +- qfdmo/urls.py | 11 +- qfdmo/views/adresses.py | 103 +- qfdmo/views/auth.py | 7 + qfdmo/views/configurator.py | 4 +- requirements.in | 1 + requirements.txt | 8 +- scripts/restore_prod_locally.sh | 7 + .../entrypoints/iframe_functions.ts | 2 +- static/to_compile/entrypoints/qfdmo.css | 213 +- static/to_compile/src/map_controller.ts | 21 +- .../src/search_solution_form_controller.ts | 122 +- static/to_compile/src/solution_map.ts | 57 +- .../to_compile/tests/iframe_functions.test.ts | 2 +- tailwind.config.js | 157 +- .../forms/widgets/groupe_action_label.html | 2 +- unit_tests/core/test_jinja2_handler.py | 56 +- unit_tests/qfdmo/test_acteur.py | 18 +- unit_tests/qfdmo/test_addresses_view.py | 48 +- 134 files changed, 5561 insertions(+), 3312 deletions(-) create mode 100644 .parcelrc create mode 100644 docs/Coding-guidelines create mode 100644 docs/Frontend.md create mode 100644 dsfr_hacks/__init__.py create mode 100644 dsfr_hacks/colors.js create mode 100644 dsfr_hacks/colors.py create mode 100644 dsfr_hacks/extract_dsfr_colors.py create mode 100644 dsfr_hacks/extract_used_colors.py create mode 100644 dsfr_hacks/extract_used_icons.py create mode 100644 dsfr_hacks/forms.py create mode 100644 dsfr_hacks/icons.js create mode 100644 dsfr_hacks/urls.py create mode 100644 dsfr_hacks/used_colors.js create mode 100644 dsfr_hacks/used_icons.js create mode 100644 dsfr_hacks/views.py create mode 100644 integration_tests/qfdmo/test_acteur_detail.py delete mode 100644 integration_tests/qfdmo/test_adresse_detail.py create mode 100644 jinja2/dsfr_hacks/colors.html delete mode 100644 jinja2/qfdmo/_address_card_partials/source_or_label_list.html delete mode 100644 jinja2/qfdmo/_addresses_partials/filters/iframe_advanced_filters.html create mode 100644 jinja2/qfdmo/acteur.html create mode 100644 jinja2/qfdmo/acteur/_action.html create mode 100644 jinja2/qfdmo/acteur/_action_mailto.html create mode 100644 jinja2/qfdmo/acteur/_action_share.html create mode 100644 jinja2/qfdmo/acteur/_action_tel.html create mode 100644 jinja2/qfdmo/acteur/_actions.html create mode 100644 jinja2/qfdmo/acteur/_label.html create mode 100644 jinja2/qfdmo/acteur/_labels.html create mode 100644 jinja2/qfdmo/acteur/_labels/bonus.html create mode 100644 jinja2/qfdmo/acteur/_labels/generic.html create mode 100644 jinja2/qfdmo/acteur/_labels/multiple_labels.html create mode 100644 jinja2/qfdmo/acteur/_tabs.html delete mode 100644 jinja2/qfdmo/acteur/detail.html create mode 100644 jinja2/qfdmo/acteur/tabs/_panel.html create mode 100644 jinja2/qfdmo/acteur/tabs/_section.html create mode 100644 jinja2/qfdmo/acteur/tabs/_separator.html create mode 100644 jinja2/qfdmo/acteur/tabs/_service_tag.html create mode 100644 jinja2/qfdmo/acteur/tabs/_tab.html create mode 100644 jinja2/qfdmo/acteur/tabs/about_panel.html create mode 100644 jinja2/qfdmo/acteur/tabs/labels_panel.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/adresse.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/bonus.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/description.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/exclusivite_de_reprisereparation.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/horaires.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/meta.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/services_disponibles.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/telephone.html create mode 100644 jinja2/qfdmo/acteur/tabs/sections/type_enseigne.html create mode 100644 jinja2/qfdmo/acteur/tabs/sources_panel.html delete mode 100644 jinja2/qfdmo/adresse_detail.html create mode 100644 jinja2/qfdmo/carte.html delete mode 100644 jinja2/qfdmo/carte/_a_propos.html create mode 100644 jinja2/qfdmo/carte/_digital_results.html delete mode 100644 jinja2/qfdmo/carte/_header.html delete mode 100644 jinja2/qfdmo/carte/_map.html delete mode 100644 jinja2/qfdmo/carte/_result.html create mode 100644 jinja2/qfdmo/carte/_search_in_zone.html delete mode 100644 jinja2/qfdmo/carte/base.html create mode 100644 jinja2/qfdmo/carte/header.html create mode 100644 jinja2/qfdmo/carte/modals/a_propos.html rename jinja2/qfdmo/carte/{_filters.html => modals/filters.html} (79%) create mode 100644 jinja2/qfdmo/carte/panels/acteur_detail.html create mode 100644 jinja2/qfdmo/carte/panels/legend.html rename jinja2/qfdmo/carte/{_legend.html => panels/legend_mobile.html} (96%) delete mode 100644 jinja2/qfdmo/carte/result.html rename jinja2/qfdmo/{iframe_configurator => configurator}/_iframe.html (100%) rename jinja2/qfdmo/{iframe_configurator => configurator}/advanced.html (97%) rename jinja2/qfdmo/{iframe_configurator => configurator}/base.html (98%) create mode 100644 jinja2/qfdmo/formulaire/header.html create mode 100644 jinja2/qfdmo/formulaire/modals/advanced_filters.html rename jinja2/qfdmo/{_addresses_partials/iframe_form.html => formulaire/search_form.html} (83%) rename jinja2/qfdmo/{_addresses_partials/iframe_back_to_form.html => formulaire/update_search.html} (78%) create mode 100644 jinja2/qfdmo/shared/disclaimers/adresse_missing.html create mode 100644 jinja2/qfdmo/shared/disclaimers/loading_solutions.html create mode 100644 jinja2/qfdmo/shared/disclaimers/no_local_solution.html create mode 100644 jinja2/qfdmo/shared/main.html create mode 100644 jinja2/qfdmo/shared/results.html create mode 100644 jinja2/qfdmo/shared/tag.html create mode 100644 parcel-transformers/dsfr.ts create mode 100644 parcel-transformers/remove-ie-hack.ts create mode 100644 qfdmo/migrations/0099_groupeaction_couleur_claire_alter_action_couleur_and_more.py create mode 100644 qfdmo/migrations/0100_merge_20241107_1937.py create mode 100644 qfdmo/migrations/0101_merge_0100_cma_source_code_0100_merge_20241107_1937.py create mode 100644 qfdmo/migrations/0102_alter_action_couleur_alter_groupeaction_couleur_and_more.py create mode 100644 qfdmo/views/auth.py create mode 100755 scripts/restore_prod_locally.sh diff --git a/.parcelrc b/.parcelrc new file mode 100644 index 000000000..076dfdeeb --- /dev/null +++ b/.parcelrc @@ -0,0 +1,6 @@ +{ + "extends": "@parcel/config-default", + "transformers": { + "node_modules/@gouvfr/dsfr/**/*.{js,css}": ["./parcel-transformers/remove-ie-hack", "...", "./parcel-transformers/dsfr"], + } +} diff --git a/.postcssrc b/.postcssrc index 21e771305..271ac0f86 100644 --- a/.postcssrc +++ b/.postcssrc @@ -1,5 +1,6 @@ { "plugins": { - "tailwindcss": true + "tailwindcss": true, + "postcss-nesting": true } } diff --git a/.secrets.baseline b/.secrets.baseline index 6ef1df644..d89574bdb 100644 --- a/.secrets.baseline +++ b/.secrets.baseline @@ -151,7 +151,7 @@ "filename": "core/settings.py", "hashed_secret": "1ee34e26aeaf89c64ecc2c85efe6a961b75a50e9", "is_verified": false, - "line_number": 203 + "line_number": 209 } ], "docker-compose.yml": [ @@ -178,7 +178,7 @@ "filename": "jinja2/layout/base.html", "hashed_secret": "057dece35d736a3ae1e710a9cba3f080bd101cde", "is_verified": false, - "line_number": 71 + "line_number": 78 } ], "static/to_compile/src/analytics.ts": [ @@ -187,14 +187,14 @@ "filename": "static/to_compile/src/analytics.ts", "hashed_secret": "d18c4e3c4c78b9cb093367ad31172846fe044e15", "is_verified": false, - "line_number": 9 + "line_number": 10 }, { "type": "Base64 High Entropy String", "filename": "static/to_compile/src/analytics.ts", "hashed_secret": "53206fbbe4b5f629cab678b33aca7ca33f144e2f", "is_verified": false, - "line_number": 14 + "line_number": 15 } ], "unit_tests/qfdmo/test_views.py": [ @@ -207,5 +207,5 @@ } ] }, - "generated_at": "2024-10-23T11:40:03Z" + "generated_at": "2024-11-13T09:55:29Z" } diff --git a/Makefile b/Makefile index 5e12107ef..93d6a2531 100644 --- a/Makefile +++ b/Makefile @@ -71,6 +71,10 @@ migrate: makemigrations: $(DJANGO_ADMIN) makemigrations +.PHONY: merge-migrations +merge-migrations: + $(DJANGO_ADMIN) makemigrations --merge + .PHONY: createcachetable createcachetable: @@ -84,6 +88,10 @@ createsuperuser: seed-database: $(DJANGO_ADMIN) loaddata categories actions acteur_services acteur_types +.PHONY: restore-prod +restore-prod: + ./scripts/restore_prod_locally.sh + .PHONY: clear-cache clear-cache: $(DJANGO_ADMIN) clear_cache --all @@ -116,3 +124,10 @@ js-test: test: @make unit-test @make e2e-test + +# DSFR +.PHONY: extract-dsfr +extract-dsfr: + $(PYTHON) ./dsfr_hacks/extract_dsfr_colors.py + $(PYTHON) ./dsfr_hacks/extract_used_colors.py + $(PYTHON) ./dsfr_hacks/extract_used_icons.py diff --git a/Procfile.dev b/Procfile.dev index efd581a94..61252cb24 100644 --- a/Procfile.dev +++ b/Procfile.dev @@ -1,3 +1,3 @@ services: docker compose --profile lvao up -web: .venv/bin/python manage.py runserver +web: .venv/bin/python manage.py runserver 0.0.0.0:8000 npm: npm run watch diff --git a/core/context_processors.py b/core/context_processors.py index ce3c647ef..50e56b09e 100644 --- a/core/context_processors.py +++ b/core/context_processors.py @@ -5,4 +5,5 @@ def environment(request): return { "ENVIRONMENT": settings.ENVIRONMENT, "DEBUG": settings.DEBUG, + "is_embedded": True, } diff --git a/core/jinja2_handler.py b/core/jinja2_handler.py index 70aa87ef9..178858dd4 100644 --- a/core/jinja2_handler.py +++ b/core/jinja2_handler.py @@ -12,19 +12,8 @@ from qfdmo.models.action import get_actions_by_direction -def is_embedded(request: HttpRequest) -> bool: - return "iframe" in request.GET or "carte" in request.GET - - -def is_carte(request: HttpRequest) -> bool: - return "carte" in request.GET - - -def is_iframe(request: HttpRequest) -> bool: - return "iframe" in request.GET - - def action_by_direction(request: HttpRequest, direction: str): + # TODO: refactor to not use a dict anymore requested_direction = get_direction(request) action_displayed = request.GET.get("action_displayed", "") actions_to_display = get_actions_by_direction()[direction] @@ -45,14 +34,6 @@ def action_by_direction(request: HttpRequest, direction: str): return [{**a, "active": True} for a in actions_to_display] -# TODO : should be deprecated and replaced by a value in context view -def display_infos_panel(adresse: DisplayedActeur) -> bool: - return ( - bool(adresse.horaires_description or adresse.display_postal_address()) - and not adresse.is_digital - ) - - # TODO : should be deprecated and replaced by a value in context view def display_exclusivite_reparation(acteur: DisplayedActeur) -> bool: return acteur.exclusivite_de_reprisereparation @@ -62,19 +43,22 @@ def hide_object_filter(request) -> bool: return bool(request.GET.get("sc_id")) -def distance_to_acteur(request, adresse): - long = request.GET.get("longitude") - lat = request.GET.get("latitude") - point = adresse.location +def distance_to_acteur(request, acteur): + longitude = request.GET.get("longitude") + latitude = request.GET.get("latitude") + location = acteur.location + + if not (longitude and latitude and location and not acteur.is_digital): + return "" - if long and lat and point and not adresse.is_digital: - dist = sqrt((point.y - float(lat)) ** 2 + (point.x - float(long)) ** 2) * 111320 - return ( - f"({str(round(dist/1000,1)).replace('.',',')} km)" - if dist >= 1000 - else f"({round(dist/10)*10} m)" - ) - return "" + distance_meters = ( + sqrt((location.y - float(latitude)) ** 2 + (location.x - float(longitude)) ** 2) + * 111320 + ) + if distance_meters >= 1000: + return f"({round(distance_meters / 1000, 1)} km)".replace(".", ",") + else: + return f"({round(distance_meters/10) * 10 } m)" def environment(**options): @@ -82,17 +66,12 @@ def environment(**options): env.globals.update( { "action_by_direction": action_by_direction, - "display_infos_panel": display_infos_panel, "hide_object_filter": hide_object_filter, "distance_to_acteur": distance_to_acteur, "display_exclusivite_reparation": display_exclusivite_reparation, - "is_embedded": is_embedded, - "is_iframe": is_iframe, - "is_carte": is_carte, "url": reverse, "static": static, "quote_plus": lambda u: quote_plus(u), - "ENVIRONMENT": settings.ENVIRONMENT, "AIRFLOW_WEBSERVER_REFRESHACTEUR_URL": ( settings.AIRFLOW_WEBSERVER_REFRESHACTEUR_URL ), diff --git a/core/settings.py b/core/settings.py index 636dde17e..342675299 100644 --- a/core/settings.py +++ b/core/settings.py @@ -42,6 +42,7 @@ "django.contrib.contenttypes", "django.contrib.sessions", "django.contrib.messages", + "django.contrib.sitemaps", "whitenoise.runserver_nostatic", "django.contrib.staticfiles", "django.contrib.gis", @@ -50,6 +51,7 @@ "widget_tweaks", "dsfr", "django.forms", + "colorfield", "core", "qfdmd", "qfdmo", @@ -155,28 +157,32 @@ ROOT_URLCONF = "core.urls" + +def context_processors(): + return [ + "django.template.context_processors.debug", + "django.template.context_processors.request", + "django.contrib.auth.context_processors.auth", + "django.contrib.messages.context_processors.messages", + "core.context_processors.environment", + "dsfr.context_processors.site_config", + ] + + TEMPLATES = [ { "BACKEND": "django.template.backends.jinja2.Jinja2", "DIRS": [BASE_DIR / "jinja2"], "OPTIONS": { "environment": "core.jinja2_handler.environment", + "context_processors": context_processors(), }, }, { "BACKEND": "django.template.backends.django.DjangoTemplates", "DIRS": [BASE_DIR / "templates"], "APP_DIRS": True, - "OPTIONS": { - "context_processors": [ - "django.template.context_processors.debug", - "django.template.context_processors.request", - "django.contrib.auth.context_processors.auth", - "django.contrib.messages.context_processors.messages", - "core.context_processors.environment", - "dsfr.context_processors.site_config", - ], - }, + "OPTIONS": {"context_processors": context_processors()}, }, ] diff --git a/core/urls.py b/core/urls.py index 6f2e5722f..8b1771349 100644 --- a/core/urls.py +++ b/core/urls.py @@ -17,15 +17,45 @@ from django.conf import settings from django.contrib import admin +from django.contrib.sitemaps import GenericSitemap +from django.contrib.sitemaps import views as sitemaps_views from django.urls import include, path +from qfdmo.models.acteur import DisplayedActeur + from .api import api +info_dict = { + "queryset": DisplayedActeur.objects.all(), + "date_field": "modifie_le", +} + + +class PaginatedSitemap(GenericSitemap): + limit = 500 + + +sitemaps = {"items": PaginatedSitemap(info_dict, priority=1.0)} + + urlpatterns = [ path("admin/", admin.site.urls), path("api/", api.urls), path("explorer/", include("explorer.urls")), + path( + "sitemap.xml", + sitemaps_views.index, + {"sitemaps": sitemaps}, + name="django.contrib.sitemaps.views.index", + ), + path( + "sitemap-
.xml", + sitemaps_views.sitemap, + {"sitemaps": sitemaps}, + name="django.contrib.sitemaps.views.sitemap", + ), path("", include(("qfdmo.urls", "qfdmo"), namespace="qfdmo")), + path("dsfr/", include(("dsfr_hacks.urls", "dsfr_hacks"), namespace="dsfr_hacks")), ] if settings.DEBUG: diff --git a/docs/Coding-guidelines b/docs/Coding-guidelines new file mode 100644 index 000000000..9106182a7 --- /dev/null +++ b/docs/Coding-guidelines @@ -0,0 +1,3 @@ +# Coding guidelines + +- Nommage (et [Swift API Guidelines](https://www.swift.org/documentation/api-design-guidelines/)) diff --git a/docs/Frontend.md b/docs/Frontend.md new file mode 100644 index 000000000..b2dce447f --- /dev/null +++ b/docs/Frontend.md @@ -0,0 +1,78 @@ +# Frontend et templating + +Le projet utilise le templating Django pour développer le frontend. + +- Jinja vs templating Django +- Parcel +- Tailwind +- Organisation et découpage des templates +- Utilisation des formulaires +- Django DSFR + +## Jinja et templating Django + +Le projet utilise Jinja et le templating Django. +:warning: **Ces deux approches cohabitent mais il est envisagé d'abandonner Jinja à terme.** +Quand bien même les templates continuent d'être placé dans le dossier `jinja2` afin de garantir une rétrocompatibilité, tous les futurs développement doivent s'efforcer de s'affranchir de Jinja. + +## Parcel + +[Parcel](https://parceljs.org) est utilisé pour compiler les fichiers statiques : CSS, JS notamment. +Les sources sont configurées dans le fichier package.json` + +### Transformers + +Le projet utilise des _transformers_, ceux-ci sont principalement utilisés pour assainir le DSFR aujourd'hui. + +### PostCSS + +Parcel embarque PostCSS, celui-ci est étendu dans le projet pour supporter Tailwind et le [_CSS nesting_](https://www.w3.org/TR/css-nesting-1/) + + +## Organisation et découpage des templates + +On considère que le découpage de templates peut avoir lieu dans plusieurs situations : +- Rendre un élément de design réutilisable (composant du DSFR, composant custom) +- Rendre un template moins lourd et le découper en petites unités fonctionnelles + +Un template de composant étant considéré comme réutilisable, il sera nommé `nom_du_composant.html` +Un fragment de template étant considéré local au template qu'il compose, il sera nommé `_nom_du_fragment.html` et placé dans un dossier portant le même nom que le template où il est utilisé. + +L'organisation précise des templates est laissée au jugement du développement, mais l'idée est de faire remonter à proprement parler au niveau le plus haut possible les fichiers de templates. +Par exemple, si on travaille sur le template de la fiche détaillée d'un acteur, qui utilise un composant tag, on peut retrouver l'arborescence suivante +``` +shared +- tag.html +acteur +- fiche.html +- fiche +- - presentation.html +- - _tags.html +``` + +Avec par exemple +```jinja +{# _tags.html #} + +{% for tag in tags %} + {% include "shared/tag.html" %} +{% endfor %} +``` + +Note : cette convention a été adoptée en cours de projet et il est possible qu'une partie des templates legacy ne la respecte pas encore. + +## Tailwind + +Le projet utilise Tailwind. +Les classes Tailwind sont préfixées de `qfdmo` afin de les *namespacer* par rapport aux autres dépendances utilisées (DSFR notamment). + +Afin de les rendre lisible, on tentera tant que possible de les grouper par usage sur une ligne. +Par exemple les classes relatives au style (bordure, couleur, taille de texte) pourront être distinguées de celles relative au positionnement. + +```html +
+``` diff --git a/dsfr_hacks/__init__.py b/dsfr_hacks/__init__.py new file mode 100644 index 000000000..e69de29bb diff --git a/dsfr_hacks/colors.js b/dsfr_hacks/colors.js new file mode 100644 index 000000000..299b910ae --- /dev/null +++ b/dsfr_hacks/colors.js @@ -0,0 +1,406 @@ +const colorVariables = { + 'grey-1000-50': '#fff', + 'grey-1000-50-hover': '#f6f6f6', + 'grey-1000-50-active': '#ededed', + 'grey-975-75': '#f6f6f6', + 'grey-975-75-hover': '#dfdfdf', + 'grey-975-75-active': '#cfcfcf', + 'grey-950-100': '#eee', + 'grey-950-100-hover': '#d2d2d2', + 'grey-950-100-active': '#c1c1c1', + 'grey-200-850': '#3a3a3a', + 'grey-200-850-hover': '#616161', + 'grey-200-850-active': '#777', + 'grey-925-125': '#e5e5e5', + 'grey-1000-75': '#fff', + 'grey-1000-75-hover': '#f6f6f6', + 'grey-1000-75-active': '#ededed', + 'grey-1000-100': '#fff', + 'grey-1000-100-hover': '#f6f6f6', + 'grey-1000-100-active': '#ededed', + 'grey-975-100': '#f6f6f6', + 'grey-975-100-hover': '#dfdfdf', + 'grey-975-100-active': '#cfcfcf', + 'grey-975-125': '#f6f6f6', + 'grey-975-125-hover': '#dfdfdf', + 'grey-975-125-active': '#cfcfcf', + 'grey-950-125': '#eee', + 'grey-950-125-hover': '#d2d2d2', + 'grey-950-125-active': '#c1c1c1', + 'grey-950-150': '#eee', + 'grey-950-150-hover': '#d2d2d2', + 'grey-950-150-active': '#c1c1c1', + 'grey-50-1000': '#161616', + 'grey-425-625': '#666', + 'grey-625-425': '#929292', + 'grey-0-1000': '#000', + 'grey-900-175': '#ddd', + 'blue-france-975-75': '#f5f5fe', + 'blue-france-975-75-hover': '#dcdcfc', + 'blue-france-975-75-active': '#cbcbfa', + 'blue-france-950-100': '#ececfe', + 'blue-france-950-100-hover': '#cecefc', + 'blue-france-950-100-active': '#bbbbfc', + 'blue-france-sun-113-625': '#000091', + 'blue-france-sun-113-625-hover': '#1212ff', + 'blue-france-sun-113-625-active': '#2323ff', + 'blue-france-925-125': '#e3e3fd', + 'blue-france-925-125-hover': '#c1c1fb', + 'blue-france-925-125-active': '#adadf9', + 'blue-france-975-sun-113': '#f5f5fe', + 'blue-france-main-525': '#6a6af4', + 'blue-france-850-200': '#cacafb', + 'red-marianne-975-75': '#fef4f4', + 'red-marianne-975-75-hover': '#fcd7d7', + 'red-marianne-975-75-active': '#fac4c4', + 'red-marianne-950-100': '#fee9e9', + 'red-marianne-950-100-hover': '#fdc5c5', + 'red-marianne-950-100-active': '#fcafaf', + 'red-marianne-425-625': '#c9191e', + 'red-marianne-425-625-hover': '#f93f42', + 'red-marianne-425-625-active': '#f95a5c', + 'red-marianne-925-125': '#fddede', + 'red-marianne-925-125-hover': '#fbb6b6', + 'red-marianne-925-125-active': '#fa9e9e', + 'red-marianne-main-472': '#e1000f', + 'red-marianne-850-200': '#fcbfbf', + 'info-950-100': '#e8edff', + 'info-950-100-hover': '#c2d1ff', + 'info-950-100-active': '#a9bfff', + 'info-425-625': '#0063cb', + 'info-425-625-hover': '#3b87ff', + 'info-425-625-active': '#6798ff', + 'info-975-75': '#f4f6ff', + 'success-950-100': '#b8fec9', + 'success-950-100-hover': '#46fd89', + 'success-950-100-active': '#34eb7b', + 'success-425-625': '#18753c', + 'success-425-625-hover': '#27a959', + 'success-425-625-active': '#2fc368', + 'success-975-75': '#dffee6', + 'warning-950-100': '#ffe9e6', + 'warning-950-100-hover': '#ffc6bd', + 'warning-950-100-active': '#ffb0a2', + 'warning-425-625': '#b34000', + 'warning-425-625-hover': '#ff6218', + 'warning-425-625-active': '#ff7a55', + 'warning-975-75': '#fff4f3', + 'error-950-100': '#ffe9e9', + 'error-950-100-hover': '#ffc5c5', + 'error-950-100-active': '#ffafaf', + 'error-425-625': '#ce0500', + 'error-425-625-hover': '#ff2725', + 'error-425-625-active': '#ff4140', + 'error-975-75': '#fff4f4', + 'green-tilleul-verveine-975-75': '#fef7da', + 'green-tilleul-verveine-975-75-hover': '#fce552', + 'green-tilleul-verveine-975-75-active': '#ebd54c', + 'green-tilleul-verveine-950-100': '#fceeac', + 'green-tilleul-verveine-950-100-hover': '#e8d45c', + 'green-tilleul-verveine-950-100-active': '#d4c254', + 'green-tilleul-verveine-sun-418-moon-817': '#66673d', + 'green-tilleul-verveine-sun-418-moon-817-hover': '#929359', + 'green-tilleul-verveine-sun-418-moon-817-active': '#a7a967', + 'green-tilleul-verveine-925-125': '#fbe769', + 'green-tilleul-verveine-925-125-hover': '#d7c655', + 'green-tilleul-verveine-925-125-active': '#c2b24c', + 'green-tilleul-verveine-main-707': '#b7a73f', + 'green-tilleul-verveine-850-200': '#e2cf58', + 'green-bourgeon-975-75': '#e6feda', + 'green-bourgeon-975-75-hover': '#a7fc62', + 'green-bourgeon-975-75-active': '#98ed4d', + 'green-bourgeon-950-100': '#c9fcac', + 'green-bourgeon-950-100-hover': '#9ae95d', + 'green-bourgeon-950-100-active': '#8dd555', + 'green-bourgeon-sun-425-moon-759': '#447049', + 'green-bourgeon-sun-425-moon-759-hover': '#639f6a', + 'green-bourgeon-sun-425-moon-759-active': '#72b77a', + 'green-bourgeon-925-125': '#a9fb68', + 'green-bourgeon-925-125-hover': '#8ed654', + 'green-bourgeon-925-125-active': '#7fc04b', + 'green-bourgeon-main-640': '#68a532', + 'green-bourgeon-850-200': '#95e257', + 'green-emeraude-975-75': '#e3fdeb', + 'green-emeraude-975-75-hover': '#94f9b9', + 'green-emeraude-975-75-active': '#6df1a3', + 'green-emeraude-950-100': '#c3fad5', + 'green-emeraude-950-100-hover': '#77eda5', + 'green-emeraude-950-100-active': '#6dd897', + 'green-emeraude-sun-425-moon-753': '#297254', + 'green-emeraude-sun-425-moon-753-hover': '#3ea47a', + 'green-emeraude-sun-425-moon-753-active': '#49bc8d', + 'green-emeraude-925-125': '#9ef9be', + 'green-emeraude-925-125-hover': '#69df97', + 'green-emeraude-925-125-active': '#5ec988', + 'green-emeraude-main-632': '#00a95f', + 'green-emeraude-850-200': '#6fe49d', + 'green-menthe-975-75': '#dffdf7', + 'green-menthe-975-75-hover': '#84f9e7', + 'green-menthe-975-75-active': '#70ebd8', + 'green-menthe-950-100': '#bafaee', + 'green-menthe-950-100-hover': '#79e7d5', + 'green-menthe-950-100-active': '#6fd3c3', + 'green-menthe-sun-373-moon-652': '#37635f', + 'green-menthe-sun-373-moon-652-hover': '#53918c', + 'green-menthe-sun-373-moon-652-active': '#62a9a2', + 'green-menthe-925-125': '#8bf8e7', + 'green-menthe-925-125-hover': '#6ed5c5', + 'green-menthe-925-125-active': '#62bfb1', + 'green-menthe-main-548': '#009081', + 'green-menthe-850-200': '#73e0cf', + 'green-archipel-975-75': '#e5fbfd', + 'green-archipel-975-75-hover': '#99f2f8', + 'green-archipel-975-75-active': '#73e9f0', + 'green-archipel-950-100': '#c7f6fc', + 'green-archipel-950-100-hover': '#64ecf8', + 'green-archipel-950-100-active': '#5bd8e3', + 'green-archipel-sun-391-moon-716': '#006a6f', + 'green-archipel-sun-391-moon-716-hover': '#009fa7', + 'green-archipel-sun-391-moon-716-active': '#00bbc3', + 'green-archipel-925-125': '#a6f2fa', + 'green-archipel-925-125-hover': '#62dbe5', + 'green-archipel-925-125-active': '#58c5cf', + 'green-archipel-main-557': '#009099', + 'green-archipel-850-200': '#60e0eb', + 'blue-ecume-975-75': '#f4f6fe', + 'blue-ecume-975-75-hover': '#d7dffb', + 'blue-ecume-975-75-active': '#c3cffa', + 'blue-ecume-950-100': '#e9edfe', + 'blue-ecume-950-100-hover': '#c5d0fc', + 'blue-ecume-950-100-active': '#adbffc', + 'blue-ecume-sun-247-moon-675': '#2f4077', + 'blue-ecume-sun-247-moon-675-hover': '#4e68bb', + 'blue-ecume-sun-247-moon-675-active': '#667dcf', + 'blue-ecume-925-125': '#dee5fd', + 'blue-ecume-925-125-hover': '#b4c5fb', + 'blue-ecume-925-125-active': '#99b3f9', + 'blue-ecume-main-400': '#465f9d', + 'blue-ecume-850-200': '#bfccfb', + 'blue-cumulus-975-75': '#f3f6fe', + 'blue-cumulus-975-75-hover': '#d3dffc', + 'blue-cumulus-975-75-active': '#bed0fa', + 'blue-cumulus-950-100': '#e6eefe', + 'blue-cumulus-950-100-hover': '#bcd3fc', + 'blue-cumulus-950-100-active': '#9fc3fc', + 'blue-cumulus-sun-368-moon-732': '#3558a2', + 'blue-cumulus-sun-368-moon-732-hover': '#5982e0', + 'blue-cumulus-sun-368-moon-732-active': '#7996e6', + 'blue-cumulus-925-125': '#dae6fd', + 'blue-cumulus-925-125-hover': '#a9c8fb', + 'blue-cumulus-925-125-active': '#8ab8f9', + 'blue-cumulus-main-526': '#417dc4', + 'blue-cumulus-850-200': '#b6cffb', + 'purple-glycine-975-75': '#fef3fd', + 'purple-glycine-975-75-hover': '#fcd4f8', + 'purple-glycine-975-75-active': '#fabff5', + 'purple-glycine-950-100': '#fee7fc', + 'purple-glycine-950-100-hover': '#fdc0f8', + 'purple-glycine-950-100-active': '#fca8f6', + 'purple-glycine-sun-319-moon-630': '#6e445a', + 'purple-glycine-sun-319-moon-630-hover': '#a66989', + 'purple-glycine-sun-319-moon-630-active': '#bb7f9e', + 'purple-glycine-925-125': '#fddbfa', + 'purple-glycine-925-125-hover': '#fbaff5', + 'purple-glycine-925-125-active': '#fa96f2', + 'purple-glycine-main-494': '#A558A0', + 'purple-glycine-850-200': '#fbb8f6', + 'pink-macaron-975-75': '#fef4f2', + 'pink-macaron-975-75-hover': '#fcd8d0', + 'pink-macaron-975-75-active': '#fac5b8', + 'pink-macaron-950-100': '#fee9e6', + 'pink-macaron-950-100-hover': '#fdc6bd', + 'pink-macaron-950-100-active': '#fcb0a2', + 'pink-macaron-sun-406-moon-833': '#8d533e', + 'pink-macaron-sun-406-moon-833-hover': '#ca795c', + 'pink-macaron-sun-406-moon-833-active': '#e08e73', + 'pink-macaron-925-125': '#fddfda', + 'pink-macaron-925-125-hover': '#fbb8ab', + 'pink-macaron-925-125-active': '#faa18d', + 'pink-macaron-main-689': '#e18b76', + 'pink-macaron-850-200': '#fcc0b4', + 'pink-tuile-975-75': '#fef4f3', + 'pink-tuile-975-75-hover': '#fcd7d3', + 'pink-tuile-975-75-active': '#fac4be', + 'pink-tuile-950-100': '#fee9e7', + 'pink-tuile-950-100-hover': '#fdc6c0', + 'pink-tuile-950-100-active': '#fcb0a7', + 'pink-tuile-sun-425-moon-750': '#a94645', + 'pink-tuile-sun-425-moon-750-hover': '#d5706f', + 'pink-tuile-sun-425-moon-750-active': '#da8a89', + 'pink-tuile-925-125': '#fddfdb', + 'pink-tuile-925-125-hover': '#fbb8ad', + 'pink-tuile-925-125-active': '#faa191', + 'pink-tuile-main-556': '#ce614a', + 'pink-tuile-850-200': '#fcbfb7', + 'yellow-tournesol-975-75': '#fef6e3', + 'yellow-tournesol-975-75-hover': '#fce086', + 'yellow-tournesol-975-75-active': '#f5d24b', + 'yellow-tournesol-950-100': '#feecc2', + 'yellow-tournesol-950-100-hover': '#fbd335', + 'yellow-tournesol-950-100-active': '#e6c130', + 'yellow-tournesol-sun-407-moon-922': '#716043', + 'yellow-tournesol-sun-407-moon-922-hover': '#a28a62', + 'yellow-tournesol-sun-407-moon-922-active': '#cab300', + 'yellow-tournesol-925-125': '#fde39c', + 'yellow-tournesol-925-125-hover': '#e9c53b', + 'yellow-tournesol-925-125-active': '#d3b235', + 'yellow-tournesol-main-731': '#c8aa39', + 'yellow-tournesol-850-200': '#efcb3a', + 'yellow-moutarde-975-75': '#fef5e8', + 'yellow-moutarde-975-75-hover': '#fcdca3', + 'yellow-moutarde-975-75-active': '#fbcd64', + 'yellow-moutarde-950-100': '#feebd0', + 'yellow-moutarde-950-100-hover': '#fdcd6d', + 'yellow-moutarde-950-100-active': '#f4be30', + 'yellow-moutarde-sun-348-moon-860': '#695240', + 'yellow-moutarde-sun-348-moon-860-hover': '#9b7b61', + 'yellow-moutarde-sun-348-moon-860-active': '#b58f72', + 'yellow-moutarde-925-125': '#fde2b5', + 'yellow-moutarde-925-125-hover': '#f6c43c', + 'yellow-moutarde-925-125-active': '#dfb135', + 'yellow-moutarde-main-679': '#c3992a', + 'yellow-moutarde-850-200': '#fcc63a', + 'orange-terre-battue-975-75': '#fef4f2', + 'orange-terre-battue-975-75-hover': '#fcd8d0', + 'orange-terre-battue-975-75-active': '#fac5b8', + 'orange-terre-battue-950-100': '#fee9e5', + 'orange-terre-battue-950-100-hover': '#fdc6ba', + 'orange-terre-battue-950-100-active': '#fcb09e', + 'orange-terre-battue-sun-370-moon-672': '#755348', + 'orange-terre-battue-sun-370-moon-672-hover': '#ab7b6b', + 'orange-terre-battue-sun-370-moon-672-active': '#c68f7d', + 'orange-terre-battue-925-125': '#fddfd8', + 'orange-terre-battue-925-125-hover': '#fbb8a5', + 'orange-terre-battue-925-125-active': '#faa184', + 'orange-terre-battue-main-645': '#E4794A', + 'orange-terre-battue-850-200': '#fcc0b0', + 'brown-cafe-creme-975-75': '#fbf6ed', + 'brown-cafe-creme-975-75-hover': '#f2deb6', + 'brown-cafe-creme-975-75-active': '#eacf91', + 'brown-cafe-creme-950-100': '#f7ecdb', + 'brown-cafe-creme-950-100-hover': '#edce94', + 'brown-cafe-creme-950-100-active': '#dabd84', + 'brown-cafe-creme-sun-383-moon-885': '#685c48', + 'brown-cafe-creme-sun-383-moon-885-hover': '#97866a', + 'brown-cafe-creme-sun-383-moon-885-active': '#ae9b7b', + 'brown-cafe-creme-925-125': '#f4e3c7', + 'brown-cafe-creme-925-125-hover': '#e1c386', + 'brown-cafe-creme-925-125-active': '#ccb078', + 'brown-cafe-creme-main-782': '#D1B781', + 'brown-cafe-creme-850-200': '#e7ca8e', + 'brown-caramel-975-75': '#fbf5f2', + 'brown-caramel-975-75-hover': '#f1dbcf', + 'brown-caramel-975-75-active': '#ecc9b5', + 'brown-caramel-950-100': '#f7ebe5', + 'brown-caramel-950-100-hover': '#eccbb9', + 'brown-caramel-950-100-active': '#e6b79a', + 'brown-caramel-sun-425-moon-901': '#845d48', + 'brown-caramel-sun-425-moon-901-hover': '#bb8568', + 'brown-caramel-sun-425-moon-901-active': '#d69978', + 'brown-caramel-925-125': '#f3e2d9', + 'brown-caramel-925-125-hover': '#e7bea6', + 'brown-caramel-925-125-active': '#e1a982', + 'brown-caramel-main-648': '#c08c65', + 'brown-caramel-850-200': '#eac7b2', + 'brown-opera-975-75': '#fbf5f2', + 'brown-opera-975-75-hover': '#f1dbcf', + 'brown-opera-975-75-active': '#ecc9b5', + 'brown-opera-950-100': '#f7ece4', + 'brown-opera-950-100-hover': '#eccdb3', + 'brown-opera-950-100-active': '#e6ba90', + 'brown-opera-sun-395-moon-820': '#745b47', + 'brown-opera-sun-395-moon-820-hover': '#a78468', + 'brown-opera-sun-395-moon-820-active': '#c09979', + 'brown-opera-925-125': '#f3e2d7', + 'brown-opera-925-125-hover': '#e7bfa0', + 'brown-opera-925-125-active': '#deaa7e', + 'brown-opera-main-680': '#bd987a', + 'brown-opera-850-200': '#eac7ad', + 'beige-gris-galet-975-75': '#f9f6f2', + 'beige-gris-galet-975-75-hover': '#eadecd', + 'beige-gris-galet-975-75-active': '#e1ceb1', + 'beige-gris-galet-950-100': '#f3ede5', + 'beige-gris-galet-950-100-hover': '#e1d0b5', + 'beige-gris-galet-950-100-active': '#d1bea2', + 'beige-gris-galet-sun-407-moon-821': '#6a6156', + 'beige-gris-galet-sun-407-moon-821-hover': '#988b7c', + 'beige-gris-galet-sun-407-moon-821-active': '#afa08f', + 'beige-gris-galet-925-125': '#eee4d9', + 'beige-gris-galet-925-125-hover': '#dbc3a4', + 'beige-gris-galet-925-125-active': '#c6b094', + 'beige-gris-galet-main-702': '#aea397', + 'beige-gris-galet-850-200': '#e0cab0', + 'shadow-color': '#00001229', + 'beige-gris-galet': '#AEA397', + 'blue-cumulus-sun-368-active': '#7996e6', + 'blue-cumulus-sun-368-hover': '#5982e0', + 'blue-cumulus-sun-368': '#3558A2', + 'blue-cumulus': '#417DC4', + 'blue-ecume-850-active': '#6b93f6', + 'blue-ecume-850-hover': '#8ba7f8', + 'blue-ecume-850': '#bfccfb', + 'blue-ecume': '#465F9D', + 'blue-france-850-hover': '#a1a1f8', + 'blue-france-850': '#cacafb', + 'blue-france-925-active': '#adadf9', + 'blue-france-925-hover': '#c1c1fb', + 'blue-france-925': '#e3e3fd', + 'blue-france-950-hover': '#cecefc', + 'blue-france-950': '#ececfe', + 'blue-france-975-hover': '#dcdcfc', + 'blue-france-975': '#f5f5fe', + 'blue-france-main-525-active': '#aeaef9', + 'blue-france-main-525-hover': '#9898f8', + 'blue-france-sun-113': '#000091', + 'blue-france': '#2323ff', + 'brown-cafe-creme-main-782-active': '#8b7954', + 'brown-cafe-creme-main-782-hover': '#a38e63', + 'brown-cafe-creme': '#D1B781', + 'brown-caramel': '#C08C65', + 'brown-opera': '#BD987A', + 'green-archipel': '#009099', + 'green-bourgeon-850-active': '#679e3b', + 'green-bourgeon-850-hover': '#77b645', + 'green-bourgeon-850': '#95e257', + 'green-bourgeon': '#68A532', + 'green-emeraude': '#00A95F', + 'green-menthe-850-active': '#4f9d91', + 'green-menthe-850-hover': '#5bb5a7', + 'green-menthe-850': '#73e0cf', + 'green-menthe-main-548-active': '#00e2cb', + 'green-menthe-main-548-hover': '#00c7b3', + 'green-menthe-sun-373-active': '#62a9a2', + 'green-menthe-sun-373-hover': '#53918c', + 'green-menthe-sun-373': '#37635f', + 'green-menthe': '#009081', + 'green-tilleul-verveine': '#B7A73F', + 'grey-50': '#161616', + 'grey-200': '#3a3a3a', + 'grey-425': '#666666', + 'grey-850': '#cecece', + 'grey-900': '#dddddd', + 'grey-925': '#e5e5e5', + 'grey-950': '#eeeeee', + 'grey-975': '#f6f6f6', + 'info-425': '#0063CB', + 'light-gray': '#e5e5e5', + 'orange-terre-battue-main-645-active': '#f4bfb1', + 'orange-terre-battue-main-645-hover': '#f1a892', + 'orange-terre-battue': '#E4794A', + 'pink-macaron': '#E18B76', + 'pink-tuile-850-active': '#fa7659', + 'pink-tuile-850-hover': '#fb907d', + 'pink-tuile-850': '#fcbfb7', + 'pink-tuile': '#CE614A', + 'purple-glycine-main-494-active': '#db9cd6', + 'purple-glycine-main-494-hover': '#d282cd', + 'purple-glycine': '#A558A0', + 'red-500': '#EB4444', + 'yellow-moutarde-850-active': '#b18a26', + 'yellow-moutarde-850-hover': '#cb9f2d', + 'yellow-moutarde-850': '#fcc63a', + 'yellow-moutarde': '#C3992A', + 'yellow-tournesol': '#cab300', +}; + +export default colorVariables; diff --git a/dsfr_hacks/colors.py b/dsfr_hacks/colors.py new file mode 100644 index 000000000..bda32751c --- /dev/null +++ b/dsfr_hacks/colors.py @@ -0,0 +1,404 @@ +DSFRColors = { + "grey-1000-50": "#fff", + "grey-1000-50-hover": "#f6f6f6", + "grey-1000-50-active": "#ededed", + "grey-975-75": "#f6f6f6", + "grey-975-75-hover": "#dfdfdf", + "grey-975-75-active": "#cfcfcf", + "grey-950-100": "#eee", + "grey-950-100-hover": "#d2d2d2", + "grey-950-100-active": "#c1c1c1", + "grey-200-850": "#3a3a3a", + "grey-200-850-hover": "#616161", + "grey-200-850-active": "#777", + "grey-925-125": "#e5e5e5", + "grey-1000-75": "#fff", + "grey-1000-75-hover": "#f6f6f6", + "grey-1000-75-active": "#ededed", + "grey-1000-100": "#fff", + "grey-1000-100-hover": "#f6f6f6", + "grey-1000-100-active": "#ededed", + "grey-975-100": "#f6f6f6", + "grey-975-100-hover": "#dfdfdf", + "grey-975-100-active": "#cfcfcf", + "grey-975-125": "#f6f6f6", + "grey-975-125-hover": "#dfdfdf", + "grey-975-125-active": "#cfcfcf", + "grey-950-125": "#eee", + "grey-950-125-hover": "#d2d2d2", + "grey-950-125-active": "#c1c1c1", + "grey-950-150": "#eee", + "grey-950-150-hover": "#d2d2d2", + "grey-950-150-active": "#c1c1c1", + "grey-50-1000": "#161616", + "grey-425-625": "#666", + "grey-625-425": "#929292", + "grey-0-1000": "#000", + "grey-900-175": "#ddd", + "blue-france-975-75": "#f5f5fe", + "blue-france-975-75-hover": "#dcdcfc", + "blue-france-975-75-active": "#cbcbfa", + "blue-france-950-100": "#ececfe", + "blue-france-950-100-hover": "#cecefc", + "blue-france-950-100-active": "#bbbbfc", + "blue-france-sun-113-625": "#000091", + "blue-france-sun-113-625-hover": "#1212ff", + "blue-france-sun-113-625-active": "#2323ff", + "blue-france-925-125": "#e3e3fd", + "blue-france-925-125-hover": "#c1c1fb", + "blue-france-925-125-active": "#adadf9", + "blue-france-975-sun-113": "#f5f5fe", + "blue-france-main-525": "#6a6af4", + "blue-france-850-200": "#cacafb", + "red-marianne-975-75": "#fef4f4", + "red-marianne-975-75-hover": "#fcd7d7", + "red-marianne-975-75-active": "#fac4c4", + "red-marianne-950-100": "#fee9e9", + "red-marianne-950-100-hover": "#fdc5c5", + "red-marianne-950-100-active": "#fcafaf", + "red-marianne-425-625": "#c9191e", + "red-marianne-425-625-hover": "#f93f42", + "red-marianne-425-625-active": "#f95a5c", + "red-marianne-925-125": "#fddede", + "red-marianne-925-125-hover": "#fbb6b6", + "red-marianne-925-125-active": "#fa9e9e", + "red-marianne-main-472": "#e1000f", + "red-marianne-850-200": "#fcbfbf", + "info-950-100": "#e8edff", + "info-950-100-hover": "#c2d1ff", + "info-950-100-active": "#a9bfff", + "info-425-625": "#0063cb", + "info-425-625-hover": "#3b87ff", + "info-425-625-active": "#6798ff", + "info-975-75": "#f4f6ff", + "success-950-100": "#b8fec9", + "success-950-100-hover": "#46fd89", + "success-950-100-active": "#34eb7b", + "success-425-625": "#18753c", + "success-425-625-hover": "#27a959", + "success-425-625-active": "#2fc368", + "success-975-75": "#dffee6", + "warning-950-100": "#ffe9e6", + "warning-950-100-hover": "#ffc6bd", + "warning-950-100-active": "#ffb0a2", + "warning-425-625": "#b34000", + "warning-425-625-hover": "#ff6218", + "warning-425-625-active": "#ff7a55", + "warning-975-75": "#fff4f3", + "error-950-100": "#ffe9e9", + "error-950-100-hover": "#ffc5c5", + "error-950-100-active": "#ffafaf", + "error-425-625": "#ce0500", + "error-425-625-hover": "#ff2725", + "error-425-625-active": "#ff4140", + "error-975-75": "#fff4f4", + "green-tilleul-verveine-975-75": "#fef7da", + "green-tilleul-verveine-975-75-hover": "#fce552", + "green-tilleul-verveine-975-75-active": "#ebd54c", + "green-tilleul-verveine-950-100": "#fceeac", + "green-tilleul-verveine-950-100-hover": "#e8d45c", + "green-tilleul-verveine-950-100-active": "#d4c254", + "green-tilleul-verveine-sun-418-moon-817": "#66673d", + "green-tilleul-verveine-sun-418-moon-817-hover": "#929359", + "green-tilleul-verveine-sun-418-moon-817-active": "#a7a967", + "green-tilleul-verveine-925-125": "#fbe769", + "green-tilleul-verveine-925-125-hover": "#d7c655", + "green-tilleul-verveine-925-125-active": "#c2b24c", + "green-tilleul-verveine-main-707": "#b7a73f", + "green-tilleul-verveine-850-200": "#e2cf58", + "green-bourgeon-975-75": "#e6feda", + "green-bourgeon-975-75-hover": "#a7fc62", + "green-bourgeon-975-75-active": "#98ed4d", + "green-bourgeon-950-100": "#c9fcac", + "green-bourgeon-950-100-hover": "#9ae95d", + "green-bourgeon-950-100-active": "#8dd555", + "green-bourgeon-sun-425-moon-759": "#447049", + "green-bourgeon-sun-425-moon-759-hover": "#639f6a", + "green-bourgeon-sun-425-moon-759-active": "#72b77a", + "green-bourgeon-925-125": "#a9fb68", + "green-bourgeon-925-125-hover": "#8ed654", + "green-bourgeon-925-125-active": "#7fc04b", + "green-bourgeon-main-640": "#68a532", + "green-bourgeon-850-200": "#95e257", + "green-emeraude-975-75": "#e3fdeb", + "green-emeraude-975-75-hover": "#94f9b9", + "green-emeraude-975-75-active": "#6df1a3", + "green-emeraude-950-100": "#c3fad5", + "green-emeraude-950-100-hover": "#77eda5", + "green-emeraude-950-100-active": "#6dd897", + "green-emeraude-sun-425-moon-753": "#297254", + "green-emeraude-sun-425-moon-753-hover": "#3ea47a", + "green-emeraude-sun-425-moon-753-active": "#49bc8d", + "green-emeraude-925-125": "#9ef9be", + "green-emeraude-925-125-hover": "#69df97", + "green-emeraude-925-125-active": "#5ec988", + "green-emeraude-main-632": "#00a95f", + "green-emeraude-850-200": "#6fe49d", + "green-menthe-975-75": "#dffdf7", + "green-menthe-975-75-hover": "#84f9e7", + "green-menthe-975-75-active": "#70ebd8", + "green-menthe-950-100": "#bafaee", + "green-menthe-950-100-hover": "#79e7d5", + "green-menthe-950-100-active": "#6fd3c3", + "green-menthe-sun-373-moon-652": "#37635f", + "green-menthe-sun-373-moon-652-hover": "#53918c", + "green-menthe-sun-373-moon-652-active": "#62a9a2", + "green-menthe-925-125": "#8bf8e7", + "green-menthe-925-125-hover": "#6ed5c5", + "green-menthe-925-125-active": "#62bfb1", + "green-menthe-main-548": "#009081", + "green-menthe-850-200": "#73e0cf", + "green-archipel-975-75": "#e5fbfd", + "green-archipel-975-75-hover": "#99f2f8", + "green-archipel-975-75-active": "#73e9f0", + "green-archipel-950-100": "#c7f6fc", + "green-archipel-950-100-hover": "#64ecf8", + "green-archipel-950-100-active": "#5bd8e3", + "green-archipel-sun-391-moon-716": "#006a6f", + "green-archipel-sun-391-moon-716-hover": "#009fa7", + "green-archipel-sun-391-moon-716-active": "#00bbc3", + "green-archipel-925-125": "#a6f2fa", + "green-archipel-925-125-hover": "#62dbe5", + "green-archipel-925-125-active": "#58c5cf", + "green-archipel-main-557": "#009099", + "green-archipel-850-200": "#60e0eb", + "blue-ecume-975-75": "#f4f6fe", + "blue-ecume-975-75-hover": "#d7dffb", + "blue-ecume-975-75-active": "#c3cffa", + "blue-ecume-950-100": "#e9edfe", + "blue-ecume-950-100-hover": "#c5d0fc", + "blue-ecume-950-100-active": "#adbffc", + "blue-ecume-sun-247-moon-675": "#2f4077", + "blue-ecume-sun-247-moon-675-hover": "#4e68bb", + "blue-ecume-sun-247-moon-675-active": "#667dcf", + "blue-ecume-925-125": "#dee5fd", + "blue-ecume-925-125-hover": "#b4c5fb", + "blue-ecume-925-125-active": "#99b3f9", + "blue-ecume-main-400": "#465f9d", + "blue-ecume-850-200": "#bfccfb", + "blue-cumulus-975-75": "#f3f6fe", + "blue-cumulus-975-75-hover": "#d3dffc", + "blue-cumulus-975-75-active": "#bed0fa", + "blue-cumulus-950-100": "#e6eefe", + "blue-cumulus-950-100-hover": "#bcd3fc", + "blue-cumulus-950-100-active": "#9fc3fc", + "blue-cumulus-sun-368-moon-732": "#3558a2", + "blue-cumulus-sun-368-moon-732-hover": "#5982e0", + "blue-cumulus-sun-368-moon-732-active": "#7996e6", + "blue-cumulus-925-125": "#dae6fd", + "blue-cumulus-925-125-hover": "#a9c8fb", + "blue-cumulus-925-125-active": "#8ab8f9", + "blue-cumulus-main-526": "#417dc4", + "blue-cumulus-850-200": "#b6cffb", + "purple-glycine-975-75": "#fef3fd", + "purple-glycine-975-75-hover": "#fcd4f8", + "purple-glycine-975-75-active": "#fabff5", + "purple-glycine-950-100": "#fee7fc", + "purple-glycine-950-100-hover": "#fdc0f8", + "purple-glycine-950-100-active": "#fca8f6", + "purple-glycine-sun-319-moon-630": "#6e445a", + "purple-glycine-sun-319-moon-630-hover": "#a66989", + "purple-glycine-sun-319-moon-630-active": "#bb7f9e", + "purple-glycine-925-125": "#fddbfa", + "purple-glycine-925-125-hover": "#fbaff5", + "purple-glycine-925-125-active": "#fa96f2", + "purple-glycine-main-494": "#A558A0", + "purple-glycine-850-200": "#fbb8f6", + "pink-macaron-975-75": "#fef4f2", + "pink-macaron-975-75-hover": "#fcd8d0", + "pink-macaron-975-75-active": "#fac5b8", + "pink-macaron-950-100": "#fee9e6", + "pink-macaron-950-100-hover": "#fdc6bd", + "pink-macaron-950-100-active": "#fcb0a2", + "pink-macaron-sun-406-moon-833": "#8d533e", + "pink-macaron-sun-406-moon-833-hover": "#ca795c", + "pink-macaron-sun-406-moon-833-active": "#e08e73", + "pink-macaron-925-125": "#fddfda", + "pink-macaron-925-125-hover": "#fbb8ab", + "pink-macaron-925-125-active": "#faa18d", + "pink-macaron-main-689": "#e18b76", + "pink-macaron-850-200": "#fcc0b4", + "pink-tuile-975-75": "#fef4f3", + "pink-tuile-975-75-hover": "#fcd7d3", + "pink-tuile-975-75-active": "#fac4be", + "pink-tuile-950-100": "#fee9e7", + "pink-tuile-950-100-hover": "#fdc6c0", + "pink-tuile-950-100-active": "#fcb0a7", + "pink-tuile-sun-425-moon-750": "#a94645", + "pink-tuile-sun-425-moon-750-hover": "#d5706f", + "pink-tuile-sun-425-moon-750-active": "#da8a89", + "pink-tuile-925-125": "#fddfdb", + "pink-tuile-925-125-hover": "#fbb8ad", + "pink-tuile-925-125-active": "#faa191", + "pink-tuile-main-556": "#ce614a", + "pink-tuile-850-200": "#fcbfb7", + "yellow-tournesol-975-75": "#fef6e3", + "yellow-tournesol-975-75-hover": "#fce086", + "yellow-tournesol-975-75-active": "#f5d24b", + "yellow-tournesol-950-100": "#feecc2", + "yellow-tournesol-950-100-hover": "#fbd335", + "yellow-tournesol-950-100-active": "#e6c130", + "yellow-tournesol-sun-407-moon-922": "#716043", + "yellow-tournesol-sun-407-moon-922-hover": "#a28a62", + "yellow-tournesol-sun-407-moon-922-active": "#cab300", + "yellow-tournesol-925-125": "#fde39c", + "yellow-tournesol-925-125-hover": "#e9c53b", + "yellow-tournesol-925-125-active": "#d3b235", + "yellow-tournesol-main-731": "#c8aa39", + "yellow-tournesol-850-200": "#efcb3a", + "yellow-moutarde-975-75": "#fef5e8", + "yellow-moutarde-975-75-hover": "#fcdca3", + "yellow-moutarde-975-75-active": "#fbcd64", + "yellow-moutarde-950-100": "#feebd0", + "yellow-moutarde-950-100-hover": "#fdcd6d", + "yellow-moutarde-950-100-active": "#f4be30", + "yellow-moutarde-sun-348-moon-860": "#695240", + "yellow-moutarde-sun-348-moon-860-hover": "#9b7b61", + "yellow-moutarde-sun-348-moon-860-active": "#b58f72", + "yellow-moutarde-925-125": "#fde2b5", + "yellow-moutarde-925-125-hover": "#f6c43c", + "yellow-moutarde-925-125-active": "#dfb135", + "yellow-moutarde-main-679": "#c3992a", + "yellow-moutarde-850-200": "#fcc63a", + "orange-terre-battue-975-75": "#fef4f2", + "orange-terre-battue-975-75-hover": "#fcd8d0", + "orange-terre-battue-975-75-active": "#fac5b8", + "orange-terre-battue-950-100": "#fee9e5", + "orange-terre-battue-950-100-hover": "#fdc6ba", + "orange-terre-battue-950-100-active": "#fcb09e", + "orange-terre-battue-sun-370-moon-672": "#755348", + "orange-terre-battue-sun-370-moon-672-hover": "#ab7b6b", + "orange-terre-battue-sun-370-moon-672-active": "#c68f7d", + "orange-terre-battue-925-125": "#fddfd8", + "orange-terre-battue-925-125-hover": "#fbb8a5", + "orange-terre-battue-925-125-active": "#faa184", + "orange-terre-battue-main-645": "#E4794A", + "orange-terre-battue-850-200": "#fcc0b0", + "brown-cafe-creme-975-75": "#fbf6ed", + "brown-cafe-creme-975-75-hover": "#f2deb6", + "brown-cafe-creme-975-75-active": "#eacf91", + "brown-cafe-creme-950-100": "#f7ecdb", + "brown-cafe-creme-950-100-hover": "#edce94", + "brown-cafe-creme-950-100-active": "#dabd84", + "brown-cafe-creme-sun-383-moon-885": "#685c48", + "brown-cafe-creme-sun-383-moon-885-hover": "#97866a", + "brown-cafe-creme-sun-383-moon-885-active": "#ae9b7b", + "brown-cafe-creme-925-125": "#f4e3c7", + "brown-cafe-creme-925-125-hover": "#e1c386", + "brown-cafe-creme-925-125-active": "#ccb078", + "brown-cafe-creme-main-782": "#D1B781", + "brown-cafe-creme-850-200": "#e7ca8e", + "brown-caramel-975-75": "#fbf5f2", + "brown-caramel-975-75-hover": "#f1dbcf", + "brown-caramel-975-75-active": "#ecc9b5", + "brown-caramel-950-100": "#f7ebe5", + "brown-caramel-950-100-hover": "#eccbb9", + "brown-caramel-950-100-active": "#e6b79a", + "brown-caramel-sun-425-moon-901": "#845d48", + "brown-caramel-sun-425-moon-901-hover": "#bb8568", + "brown-caramel-sun-425-moon-901-active": "#d69978", + "brown-caramel-925-125": "#f3e2d9", + "brown-caramel-925-125-hover": "#e7bea6", + "brown-caramel-925-125-active": "#e1a982", + "brown-caramel-main-648": "#c08c65", + "brown-caramel-850-200": "#eac7b2", + "brown-opera-975-75": "#fbf5f2", + "brown-opera-975-75-hover": "#f1dbcf", + "brown-opera-975-75-active": "#ecc9b5", + "brown-opera-950-100": "#f7ece4", + "brown-opera-950-100-hover": "#eccdb3", + "brown-opera-950-100-active": "#e6ba90", + "brown-opera-sun-395-moon-820": "#745b47", + "brown-opera-sun-395-moon-820-hover": "#a78468", + "brown-opera-sun-395-moon-820-active": "#c09979", + "brown-opera-925-125": "#f3e2d7", + "brown-opera-925-125-hover": "#e7bfa0", + "brown-opera-925-125-active": "#deaa7e", + "brown-opera-main-680": "#bd987a", + "brown-opera-850-200": "#eac7ad", + "beige-gris-galet-975-75": "#f9f6f2", + "beige-gris-galet-975-75-hover": "#eadecd", + "beige-gris-galet-975-75-active": "#e1ceb1", + "beige-gris-galet-950-100": "#f3ede5", + "beige-gris-galet-950-100-hover": "#e1d0b5", + "beige-gris-galet-950-100-active": "#d1bea2", + "beige-gris-galet-sun-407-moon-821": "#6a6156", + "beige-gris-galet-sun-407-moon-821-hover": "#988b7c", + "beige-gris-galet-sun-407-moon-821-active": "#afa08f", + "beige-gris-galet-925-125": "#eee4d9", + "beige-gris-galet-925-125-hover": "#dbc3a4", + "beige-gris-galet-925-125-active": "#c6b094", + "beige-gris-galet-main-702": "#aea397", + "beige-gris-galet-850-200": "#e0cab0", + "shadow-color": "#00001229", + "beige-gris-galet": "#AEA397", + "blue-cumulus-sun-368-active": "#7996e6", + "blue-cumulus-sun-368-hover": "#5982e0", + "blue-cumulus-sun-368": "#3558A2", + "blue-cumulus": "#417DC4", + "blue-ecume-850-active": "#6b93f6", + "blue-ecume-850-hover": "#8ba7f8", + "blue-ecume-850": "#bfccfb", + "blue-ecume": "#465F9D", + "blue-france-850-hover": "#a1a1f8", + "blue-france-850": "#cacafb", + "blue-france-925-active": "#adadf9", + "blue-france-925-hover": "#c1c1fb", + "blue-france-925": "#e3e3fd", + "blue-france-950-hover": "#cecefc", + "blue-france-950": "#ececfe", + "blue-france-975-hover": "#dcdcfc", + "blue-france-975": "#f5f5fe", + "blue-france-main-525-active": "#aeaef9", + "blue-france-main-525-hover": "#9898f8", + "blue-france-sun-113": "#000091", + "blue-france": "#2323ff", + "brown-cafe-creme-main-782-active": "#8b7954", + "brown-cafe-creme-main-782-hover": "#a38e63", + "brown-cafe-creme": "#D1B781", + "brown-caramel": "#C08C65", + "brown-opera": "#BD987A", + "green-archipel": "#009099", + "green-bourgeon-850-active": "#679e3b", + "green-bourgeon-850-hover": "#77b645", + "green-bourgeon-850": "#95e257", + "green-bourgeon": "#68A532", + "green-emeraude": "#00A95F", + "green-menthe-850-active": "#4f9d91", + "green-menthe-850-hover": "#5bb5a7", + "green-menthe-850": "#73e0cf", + "green-menthe-main-548-active": "#00e2cb", + "green-menthe-main-548-hover": "#00c7b3", + "green-menthe-sun-373-active": "#62a9a2", + "green-menthe-sun-373-hover": "#53918c", + "green-menthe-sun-373": "#37635f", + "green-menthe": "#009081", + "green-tilleul-verveine": "#B7A73F", + "grey-50": "#161616", + "grey-200": "#3a3a3a", + "grey-425": "#666666", + "grey-850": "#cecece", + "grey-900": "#dddddd", + "grey-925": "#e5e5e5", + "grey-950": "#eeeeee", + "grey-975": "#f6f6f6", + "info-425": "#0063CB", + "light-gray": "#e5e5e5", + "orange-terre-battue-main-645-active": "#f4bfb1", + "orange-terre-battue-main-645-hover": "#f1a892", + "orange-terre-battue": "#E4794A", + "pink-macaron": "#E18B76", + "pink-tuile-850-active": "#fa7659", + "pink-tuile-850-hover": "#fb907d", + "pink-tuile-850": "#fcbfb7", + "pink-tuile": "#CE614A", + "purple-glycine-main-494-active": "#db9cd6", + "purple-glycine-main-494-hover": "#d282cd", + "purple-glycine": "#A558A0", + "red-500": "#EB4444", + "yellow-moutarde-850-active": "#b18a26", + "yellow-moutarde-850-hover": "#cb9f2d", + "yellow-moutarde-850": "#fcc63a", + "yellow-moutarde": "#C3992A", + "yellow-tournesol": "#cab300", +} diff --git a/dsfr_hacks/extract_dsfr_colors.py b/dsfr_hacks/extract_dsfr_colors.py new file mode 100644 index 000000000..2d0812b14 --- /dev/null +++ b/dsfr_hacks/extract_dsfr_colors.py @@ -0,0 +1,132 @@ +import re + +import requests + +LEGACY_MAPPING_FROM_TAILWIND = { + "beige-gris-galet": "#AEA397", + "blue-cumulus-sun-368-active": "#7996e6", + "blue-cumulus-sun-368-hover": "#5982e0", + "blue-cumulus-sun-368": "#3558A2", + "blue-cumulus": "#417DC4", + "blue-ecume-850-active": "#6b93f6", + "blue-ecume-850-hover": "#8ba7f8", + "blue-ecume-850": "#bfccfb", + "blue-ecume": "#465F9D", + "blue-france-850-hover": "#a1a1f8", + "blue-france-850": "#cacafb", + "blue-france-925-active": "#adadf9", + "blue-france-925-hover": "#c1c1fb", + "blue-france-925": "#e3e3fd", + "blue-france-950-hover": "#cecefc", + "blue-france-950": "#ececfe", + "blue-france-975-hover": "#dcdcfc", + "blue-france-975": "#f5f5fe", + "blue-france-main-525-active": "#aeaef9", + "blue-france-main-525-hover": "#9898f8", + "blue-france-main-525": "#6a6af4", + "blue-france-sun-113": "#000091", + "blue-france": "#2323ff", + "brown-cafe-creme-main-782-active": "#8b7954", + "brown-cafe-creme-main-782-hover": "#a38e63", + "brown-cafe-creme-main-782": "#D1B781", + "brown-cafe-creme": "#D1B781", + "brown-caramel": "#C08C65", + "brown-opera": "#BD987A", + "green-archipel": "#009099", + "green-bourgeon-850-active": "#679e3b", + "green-bourgeon-850-hover": "#77b645", + "green-bourgeon-850": "#95e257", + "green-bourgeon": "#68A532", + "green-emeraude": "#00A95F", + "green-menthe-850-active": "#4f9d91", + "green-menthe-850-hover": "#5bb5a7", + "green-menthe-850": "#73e0cf", + "green-menthe-main-548-active": "#00e2cb", + "green-menthe-main-548-hover": "#00c7b3", + "green-menthe-main-548": "#009081", + "green-menthe-sun-373-active": "#62a9a2", + "green-menthe-sun-373-hover": "#53918c", + "green-menthe-sun-373": "#37635f", + "green-menthe": "#009081", + "green-tilleul-verveine": "#B7A73F", + "grey-50": "#161616", + "grey-200": "#3a3a3a", + "grey-425": "#666666", + "grey-850": "#cecece", + "grey-900": "#dddddd", + "grey-925": "#e5e5e5", + "grey-950": "#eeeeee", + "grey-975": "#f6f6f6", + "info-425": "#0063CB", + "light-gray": "#e5e5e5", + "orange-terre-battue-main-645-active": "#f4bfb1", + "orange-terre-battue-main-645-hover": "#f1a892", + "orange-terre-battue-main-645": "#E4794A", + "orange-terre-battue": "#E4794A", + "pink-macaron": "#E18B76", + "pink-tuile-850-active": "#fa7659", + "pink-tuile-850-hover": "#fb907d", + "pink-tuile-850": "#fcbfb7", + "pink-tuile": "#CE614A", + "purple-glycine-main-494-active": "#db9cd6", + "purple-glycine-main-494-hover": "#d282cd", + "purple-glycine-main-494": "#A558A0", + "purple-glycine": "#A558A0", + "red-500": "#EB4444", + "yellow-moutarde-850-active": "#b18a26", + "yellow-moutarde-850-hover": "#cb9f2d", + "yellow-moutarde-850": "#fcc63a", + "yellow-moutarde": "#C3992A", + "yellow-tournesol": "#cab300", +} + + +def format_line(variable, value): + return f" '{variable.replace('--', '')}': '{value}',\n" + + +# Generate css variables dict +r = requests.get("http://localhost:8000/static/qfdmo.css") +css = r.text + +root_pattern = r":root(?:\[[^\]]*\])?\s*{([^}]*)}" +root_blocks = re.findall(root_pattern, css, re.DOTALL) +css_variables = {} + +for block in root_blocks: + variables = re.findall(r"--([a-zA-Z0-9-_]+)\s*:\s*(#[^;]+);", block) + + for name, value in variables: + if name not in css_variables: + css_variables[name] = value.strip() + + +# Keep support for colors previously defined manually in tailwind.config.js +# These should be removed later in order to only used colors names coming from +# the DSFR +css_variables.update(**LEGACY_MAPPING_FROM_TAILWIND) + +# THIS IS A HACK BECAUSE THE FORMULAIRE VIEW USES A BAD COLOR NAME +# TODO: write better documentation regarding this case. +css_variables["yellow-tournesol-sun-407-moon-922-active"] = "#cab300" + +# Generate js file +js_content = "const colorVariables = {\n" +for variable, value in css_variables.items(): + js_content += format_line(variable, value) +js_content += "};\n\nexport default colorVariables;\n" + +# Generate python file +python_content = "DSFRColors = {\n" +for variable, value in css_variables.items(): + # Remplace les tirets par des underscores pour une meilleure compatibilité en Python + python_content += format_line(variable, value) +python_content += "}\n" + + +# Write files +with open("dsfr_hacks/colors.py", "w") as py_file: + py_file.write(python_content) + +with open("dsfr_hacks/colors.js", "w") as js_file: + js_file.write(js_content) diff --git a/dsfr_hacks/extract_used_colors.py b/dsfr_hacks/extract_used_colors.py new file mode 100644 index 000000000..c8a15cff2 --- /dev/null +++ b/dsfr_hacks/extract_used_colors.py @@ -0,0 +1,24 @@ +import requests + +r = requests.get("http://localhost:8000/api/qfdmo/actions") +actions = r.json() +colors = [action["background"] for action in actions] + +r = requests.get("http://localhost:8000/api/qfdmo/actions/groupes") +groupe_actions = r.json() +colors.extend( + [ + *[action["background"] for action in groupe_actions], + *[action["border"] for action in groupe_actions], + ] +) + +# Generate js file +js_content = "const usedColors = [\n" +for color in colors: + js_content += f'"{color}",' +js_content += "];\n\nexport default usedColors;\n" + +# Write files +with open("dsfr_hacks/used_colors.js", "w") as js_file: + js_file.write(js_content) diff --git a/dsfr_hacks/extract_used_icons.py b/dsfr_hacks/extract_used_icons.py new file mode 100644 index 000000000..d92b692d3 --- /dev/null +++ b/dsfr_hacks/extract_used_icons.py @@ -0,0 +1,21 @@ +import requests + +# TODO: user a django command and read the database directly. +r = requests.get("http://localhost:8000/api/qfdmo/actions") +actions = r.json() +icons = [action["icon"] for action in actions] + +r = requests.get("http://localhost:8000/api/qfdmo/actions/groupes") +groupe_actions = r.json() +icons.extend([action["icon"] for action in groupe_actions]) + + +# Generate js file +js_content = "const icons = [\n" +for icon in icons: + js_content += f'"{icon}",' +js_content += "];\n\nexport default icons;\n" + +# Write files +with open("dsfr_hacks/used_icons.js", "w") as js_file: + js_file.write(js_content) diff --git a/dsfr_hacks/forms.py b/dsfr_hacks/forms.py new file mode 100644 index 000000000..8045af317 --- /dev/null +++ b/dsfr_hacks/forms.py @@ -0,0 +1,6 @@ +from django import forms +from dsfr.forms import DsfrBaseForm + + +class ColorForm(DsfrBaseForm): + hexa_color = forms.CharField(label="Couleur hexadécimale") diff --git a/dsfr_hacks/icons.js b/dsfr_hacks/icons.js new file mode 100644 index 000000000..effbee836 --- /dev/null +++ b/dsfr_hacks/icons.js @@ -0,0 +1,19 @@ +const icons = [ + "fr-icon-action-preter", + "fr-icon-action-emprunter", + "fr-icon-action-louer", + "fr-icon-action-mettreenlocation", + "fr-icon-action-reparer", + "fr-icon-action-donner", + "fr-icon-action-echanger", + "fr-icon-action-acheter", + "fr-icon-action-vendre", + "fr-icon-recycle-line", + "fr-icon-recycle-line", + "fr-icon-money-euro-circle-line", + "fr-icon-arrow-go-back-line", + "fr-icon-hand-heart-line", + "fr-icon-tools-fill", +] + +export default icons diff --git a/dsfr_hacks/urls.py b/dsfr_hacks/urls.py new file mode 100644 index 000000000..bea7cb7e4 --- /dev/null +++ b/dsfr_hacks/urls.py @@ -0,0 +1,5 @@ +from django.urls import path + +from .views import ColorsView + +urlpatterns = [path("colors", ColorsView.as_view(), name="colors")] diff --git a/dsfr_hacks/used_colors.js b/dsfr_hacks/used_colors.js new file mode 100644 index 000000000..11bc29270 --- /dev/null +++ b/dsfr_hacks/used_colors.js @@ -0,0 +1,24 @@ +const usedColors = [ + "orange-terre-battue-main-645", + "orange-terre-battue-main-645", + "purple-glycine-main-494", + "purple-glycine-main-494", + "green-menthe-main-548", + "yellow-tournesol-sun-407-moon-922-active", + "blue-cumulus-main-526", + "brown-cafe-creme-main-782", + "brown-cafe-creme-main-782", + "yellow-tournesol-sun-407-moon-922-active", + "purple-glycine-975-75", + "brown-cafe-creme-950-100", + "pink-tuile-975-75", + "blue-cumulus-975-75", + "green-menthe-975-75", + "purple-glycine-main-494", + "brown-cafe-creme-main-782", + "pink-tuile-main-556", + "blue-cumulus-main-526", + "green-menthe-main-548", +] + +export default usedColors diff --git a/dsfr_hacks/used_icons.js b/dsfr_hacks/used_icons.js new file mode 100644 index 000000000..0e14dc0cb --- /dev/null +++ b/dsfr_hacks/used_icons.js @@ -0,0 +1,4 @@ +const icons = [ +"fr-icon-action-preter","fr-icon-action-emprunter","fr-icon-action-louer","fr-icon-action-mettreenlocation","fr-icon-action-reparer","fr-icon-action-donner","fr-icon-action-echanger","fr-icon-action-acheter","fr-icon-action-vendre","fr-icon-recycle-line","fr-icon-recycle-line","fr-icon-money-euro-circle-line","fr-icon-arrow-go-back-line","fr-icon-hand-heart-line","fr-icon-tools-fill",]; + +export default icons; diff --git a/dsfr_hacks/views.py b/dsfr_hacks/views.py new file mode 100644 index 000000000..21b74a402 --- /dev/null +++ b/dsfr_hacks/views.py @@ -0,0 +1,26 @@ +from django.shortcuts import render +from django.views.generic.edit import FormView + +from dsfr_hacks.colors import DSFRColors +from dsfr_hacks.forms import ColorForm + + +class ColorsView(FormView): + template_name = "dsfr_hacks/colors.html" + form_class = ColorForm + + def form_valid(self, form): + dsfr_color = next( + ( + key + for key, val in DSFRColors.items() + if form.cleaned_data["hexa_color"].lower() in val.lower() + ), + "Couleur introuvable", + ) + + return render( + self.request, + self.template_name, + self.get_context_data(form=form, dsfr_color=dsfr_color), + ) diff --git a/e2e_tests/accessibility.spec.ts b/e2e_tests/accessibility.spec.ts index d537f2064..a00cdf423 100644 --- a/e2e_tests/accessibility.spec.ts +++ b/e2e_tests/accessibility.spec.ts @@ -1,7 +1,7 @@ import { AxeBuilder } from "@axe-core/playwright" import { expect, test } from "@playwright/test" -test("iFrame is WCAG compliant", async ({ page }) => { +test("formulaire iFrame is WCAG compliant", async ({ page }) => { await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" }) const accessibilityScanResults = await new AxeBuilder({ page }) @@ -11,3 +11,14 @@ test("iFrame is WCAG compliant", async ({ page }) => { expect(accessibilityScanResults.violations).toEqual([]) }) + +test("carte iFrame is WCAG compliant", async ({ page }) => { + await page.goto(`http://localhost:8000/test_iframe?carte`, { waitUntil: "networkidle" }) + + const accessibilityScanResults = await new AxeBuilder({ page }) + .include("iframe") // restriction du scan à l'iframe uniquement + .withTags(['wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']) // TODO : trouver quelle règle se rapproche le plus du RGAA + .analyze() + + expect(accessibilityScanResults.violations).toEqual([]) +}) diff --git a/e2e_tests/advanced_filters.spec.ts b/e2e_tests/advanced_filters.spec.ts index 11d94b110..fa6f7f061 100644 --- a/e2e_tests/advanced_filters.spec.ts +++ b/e2e_tests/advanced_filters.spec.ts @@ -14,9 +14,9 @@ async function openAdvancedFilters(page, dataTestId="advanced-filters") { // Explicitely wait for addresses to load await page.waitForTimeout(5000); await page.locator(`button[data-testid=${dataTestId}]`).click() - await expect(page.locator("[data-testid=advanced-filters-modal] .fr-modal__content h4")).toBeInViewport() + await expect(page.locator("[data-testid=advanced-filters-modal] .fr-modal__content h2")).toBeInViewport() await page.locator("[data-testid=advanced-filters-modal] .fr-modal__header button").click() - await expect(page.locator("[data-testid=advanced-filters-modal] .fr-modal__content h4")).toBeHidden() + await expect(page.locator("[data-testid=advanced-filters-modal] .fr-modal__content h2")).toBeHidden() } test("Filtres avancés s'ouvrent et se ferment en mode iframe", async ({ page }) => { diff --git a/e2e_tests/iframe.spec.ts b/e2e_tests/iframe.spec.ts index ed6732091..29969bd4a 100644 --- a/e2e_tests/iframe.spec.ts +++ b/e2e_tests/iframe.spec.ts @@ -1,82 +1,65 @@ + import { expect, test } from "@playwright/test" -import exp = require("constants") -test("iframe is loaded with correct parameter", async ({ page }) => { - await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" }) +// Helper function to check iframe attributes +async function expectIframeAttributes(iframeElement) { + const attributes = await Promise.all([ + iframeElement?.getAttribute("allow"), + iframeElement?.getAttribute("src"), + iframeElement?.getAttribute("frameborder"), + iframeElement?.getAttribute("scrolling"), + iframeElement?.getAttribute("allowfullscreen"), + iframeElement?.getAttribute("style"), + iframeElement?.getAttribute("title") + ]); - const titlePage = await page.title() - expect(titlePage).toBe("IFrame test : QFDMO") + const [ + allow, src, frameborder, scrolling, allowfullscreen, style, title + ] = attributes; - // Check if the iframe is loaded - const iframeElement = await page.$("iframe") + expect(allow).toBe("geolocation; clipboard-write"); + expect(src).toBe( + "http://localhost:8000?iframe=1&direction=jai&first_dir=jai&action_list=reparer%7Cechanger%7Cmettreenlocation%7Crevendre" + ); + expect(frameborder).toBe("0"); + expect(scrolling).toBe("yes"); + expect(allowfullscreen).toBe("true"); + expect(style).toContain("width: 100%;"); + expect(style).toContain("height: 100vh;"); + expect(style).toContain("max-width: 800px;"); + expect(title).toBe("Longue vie aux objets"); +} - // test attribute allow="geolocation" is present - const iframeAllowAttribute = await iframeElement?.getAttribute("allow") - expect(iframeAllowAttribute).toBe("geolocation; clipboard-write") +test("iframe is loaded with correct parameters", async ({ page }) => { + await page.goto("http://localhost:8000/test_iframe", { waitUntil: "networkidle" }); - // - const iframeSrcAttribute = await iframeElement?.getAttribute("src") - expect(iframeSrcAttribute).toBe( - "http://localhost:8000?iframe=1&direction=jai&first_dir=jai&action_list=reparer%7Cechanger%7Cmettreenlocation%7Crevendre", - ) + const titlePage = await page.title(); + expect(titlePage).toBe("IFrame test : QFDMO"); - const iframeFrameborderAttribute = await iframeElement?.getAttribute("frameborder") - expect(iframeFrameborderAttribute).toBe("0") - const iframeScrollingAttribute = await iframeElement?.getAttribute("scrolling") - expect(iframeScrollingAttribute).toBe("no") - const iframeAllowfullscreenAttribute = - await iframeElement?.getAttribute("allowfullscreen") - expect(iframeAllowfullscreenAttribute).toBe("true") - const iframeStyleAttribute = await iframeElement?.getAttribute("style") - expect(iframeStyleAttribute).toContain("width: 100%;") - expect(iframeStyleAttribute).toContain("height: 100vh;") - expect(iframeStyleAttribute).toContain("max-width: 800px;") - const iframeTitleAttribute = await iframeElement?.getAttribute("title") - expect(iframeTitleAttribute).toBe("Longue vie aux objets") -}) + const iframeElement = await page.$("iframe"); + await expectIframeAttributes(iframeElement); +}); -test("the form is visible in the iframe", async ({ page }) => { - await page.goto(`http://localhost:8000/test_iframe`, { waitUntil: "networkidle" }) +test("form is visible in the iframe", async ({ page }) => { + await page.goto("http://localhost:8000/test_iframe", { waitUntil: "networkidle" }); - const iframeElement = await page.$("iframe") - const iframe = await iframeElement?.contentFrame() - const form = await iframe?.$("#search_form") - expect(form).not.toBeNull() + const iframeElement = await page.$("iframe"); + const iframe = await iframeElement?.contentFrame(); + const form = await iframe?.$("#search_form"); + expect(form).not.toBeNull(); - const height = await iframe?.$eval( - "[data-test-id='form-content']", - (el) => (el as HTMLElement).offsetHeight, - ) - expect(height).toBeGreaterThan(600) -}) + const formHeight = await iframe?.$eval("[data-testid='form-content']", el => el.offsetHeight); + expect(formHeight).toBeGreaterThan(600); +}); -// test("rechercher dans cette zone", async ({ page }) => { -// await page.goto(`http://localhost:8000/test_iframe?carte=1`, { -// waitUntil: "networkidle", -// }) -// await page.frameLocator("#lvao_iframe").locator("#djHideToolBarButton").click() -// expect(page.frameLocator("#lvao_iframe").getByTestId("searchInZone")).toBeHidden() -// await page.locator("#lvao_iframe").hover() -// await page.mouse.down() -// await page.mouse.move(2000, 2000) -// await page.mouse.up() -// await page.waitForTimeout(2000) // ensures iframe has enough time to load properly -// expect(page.frameLocator("#lvao_iframe").getByTestId("searchInZone")).toBeVisible() -// }) +test("iframe with 0px parent height displays correctly", async ({ page }) => { + await page.goto("http://localhost:8000/test_iframe?carte=1", { waitUntil: "networkidle" }); + await expect(page).toHaveScreenshot("iframe.png"); -test("iframe loaded with 0px parent height looks good", async ({ page }) => { - await page.goto(`http://localhost:8000/test_iframe?carte=1`, { - waitUntil: "networkidle", - }) - await expect(page).toHaveScreenshot(`iframe.png`) - await page.goto(`http://localhost:8000/test_iframe?no-height=1&carte=1`, { - waitUntil: "networkidle", - }) - await page.evaluate(() => - document - .querySelector("[data-testid=iframe-no-height-wrapper]") - ?.setAttribute("style", ""), - ) - await page.waitForTimeout(1000) // ensures iframe has enough time to load properly - await expect(page).toHaveScreenshot(`iframe.png`) -}) + await page.goto("http://localhost:8000/test_iframe?no-height=1&carte=1", { waitUntil: "networkidle" }); + await page.evaluate(() => { + document.querySelector("[data-testid=iframe-no-height-wrapper]")?.setAttribute("style", ""); + }); + await page.waitForTimeout(1000); + await expect(page).toHaveScreenshot("iframe.png"); +}); diff --git a/e2e_tests/search_update.spec.ts b/e2e_tests/search_update.spec.ts index 093273f9a..75f696916 100644 --- a/e2e_tests/search_update.spec.ts +++ b/e2e_tests/search_update.spec.ts @@ -6,9 +6,6 @@ test("Recherche et modification d'une recherche", async ({ page }) => { }) // Masquage de django debug toolbar await page.locator("#djHideToolBarButton").click() - - - await page.locator("input#id_sous_categorie_objet").click() await page.locator("input#id_sous_categorie_objet").fill("chaussures") await expect(page.locator("#id_sous_categorie_objetautocomplete-list")).toBeInViewport() @@ -19,8 +16,16 @@ test("Recherche et modification d'une recherche", async ({ page }) => { await expect (page.locator("#id_adresseautocomplete-list.autocomplete-items div:nth-of-type(2)")).toBeInViewport() await page.locator("#id_adresseautocomplete-list.autocomplete-items div:nth-of-type(2)").click() await page.locator("button[data-testid=rechercher-adresses-submit]").click() - - await expect (page.locator("[data-search-solution-form-target=headerAddressPanel]")).toBeInViewport() + await expect (page.locator("[data-search-solution-form-target=headerAddressPanel]")).toBeVisible() + // This tests that the header of the Formulaire view cannot be reached when the Update form is opened. + // This cannot be tested with .toBeVisible or toBeInViewport because of the way the header is styled. + // It is actually visible, but is covered by a child of the header's adjacent
tag, and + // Playwright detect it as visible. + // Testing that we cannot interact with it ensures it is actually not visible. await page.locator("button[data-testid=modifier-recherche]").click() - await expect (page.locator("[data-search-solution-form-target=headerAddressPanel]")).toBeHidden() + try { + await page.locator("[data-search-solution-form-target=headerAddressPanel]").click({ timeout: 2000 }) + } catch (error) { + expect(error.message).toContain('locator.click: Timeout'); + } }) diff --git a/iframe_without_js.html b/iframe_without_js.html index 78d4e7519..ff7ba542a 100644 --- a/iframe_without_js.html +++ b/iframe_without_js.html @@ -23,7 +23,7 @@

Page d'affichage dynamique de l'iframe de l'application

src="https://lvao.ademe.fr?iframe=1&direction=jai&first_dir=jai&action_list=reparer|echanger|mettreenlocation|revendre" id="myiframe" frameborder="0" - scrolling="no" + scrolling="yes" allow="geolocation; clipboard-write" style="width: 100%; overflow: hidden; max-width: 800px; height: 579px;" allowfullscreen="true" diff --git a/integration_tests/core/test_display_as_iframe.py b/integration_tests/core/test_display_as_iframe.py index 09d1b92e1..6a82a46f8 100644 --- a/integration_tests/core/test_display_as_iframe.py +++ b/integration_tests/core/test_display_as_iframe.py @@ -24,14 +24,3 @@ def test_display_as_iframe(self, client): assert b"R\xc3\xa9utiliser cette carte sur mon site" in response.content assert b"Participer \xc3\xa0 son am\xc3\xa9lioration" in response.content assert "longuevieauxobjets.ademe.fr" in str(response.content) - - @pytest.mark.django_db - def test_display_as_no_iframe(self, client): - url = "" - - response = client.get(url) - - assert response.status_code == 200 - assert 'class="fr-header' in str(response.content) - assert 'class="fr-footer' in str(response.content) - assert "Pour en savoir plus :" not in str(response.content) diff --git a/integration_tests/qfdmo/test_acteur_detail.py b/integration_tests/qfdmo/test_acteur_detail.py new file mode 100644 index 000000000..37651b829 --- /dev/null +++ b/integration_tests/qfdmo/test_acteur_detail.py @@ -0,0 +1,122 @@ +import pytest +from bs4 import BeautifulSoup + +from unit_tests.qfdmo.acteur_factory import ( + DisplayedActeurFactory, + LabelQualiteFactory, + SourceFactory, +) + + +@pytest.fixture +def get_response(client): + def _get_response(identifiant_unique): + url = f"/adresse/{identifiant_unique}" + response = client.get(url) + assert response.status_code == 200 + return response, BeautifulSoup(response.content, "html.parser") + + return _get_response + + +@pytest.mark.django_db +class TestDisplaySource: + def test_display_no_source(self, get_response): + adresse = DisplayedActeurFactory() + response, _ = get_response(adresse.identifiant_unique) + assert response.context["display_sources_panel"] is False + + def test_display_one_source(self, get_response): + adresse = DisplayedActeurFactory() + adresse.sources.add(SourceFactory(afficher=True)) + response, _ = get_response(adresse.identifiant_unique) + assert response.context["display_sources_panel"] is True + + +@pytest.mark.django_db +class TestDisplayLabel: + @pytest.mark.parametrize( + "label_setup, expected_text, should_display", + [ + ([], None, False), + ( + [("ess", "Enseigne de l'économie sociale et solidaire", True)], + "Enseigne de l'économie sociale et solidaire", + False, + ), + ([("label", "Mon label", False)], "Mon label", True), + ( + [("label1", "Mon label 1", False), ("label2", "Mon label 2", False)], + "Cet établissement dispose de plusieurs labels", + True, + ), + ( + [("label", "Mon label", False, True)], + "Éligible au bonus réparation", + True, + ), + ], + ) + def test_display_labels( + self, get_response, label_setup, expected_text, should_display + ): + adresse = DisplayedActeurFactory() + for code, libelle, type_enseigne, *bonus in label_setup: + adresse.labels.add( + LabelQualiteFactory( + code=code, + libelle=libelle, + type_enseigne=type_enseigne, + bonus=bonus[0] if bonus else False, + ) + ) + + response, soup = get_response(adresse.identifiant_unique) + assert response.context["display_labels_panel"] == should_display + label_tag = soup.find(attrs={"data-testid": "acteur-detail-labels"}) + if expected_text: + assert label_tag and expected_text in label_tag.text + else: + assert label_tag is None + + +@pytest.mark.django_db +class TestAboutPanel: + def assert_about_panel_text(self, soup, expected_text, text_is_expected): + wrapper = soup.find(attrs={"data-testid": "acteur-detail-about-panel"}) + assert wrapper is not None + if text_is_expected: + assert expected_text in wrapper.text + else: + assert expected_text not in wrapper.text + + @pytest.mark.parametrize( + "uniquement_sur_rdv", [True, False], ids=["With RDV", "Without RDV"] + ) + def test_display_rdv_message(self, get_response, uniquement_sur_rdv): + adresse = DisplayedActeurFactory() + expected_text = "📆 Les services de cet établissement ne sont disponibles" + " que sur rendez-vous." + adresse.uniquement_sur_rdv = uniquement_sur_rdv + adresse.save() + + response, soup = get_response(adresse.identifiant_unique) + self.assert_about_panel_text(soup, expected_text, uniquement_sur_rdv) + + @pytest.mark.parametrize( + "exclusivite_de_reprisereparation", + [True, False], + ids=["Exclusive Reparation", "Non-exclusive Reparation"], + ) + def test_display_reparation_message( + self, get_response, exclusivite_de_reprisereparation + ): + adresse = DisplayedActeurFactory() + expected_text = "Cet établissement ne répare que les produits de ses marques." + adresse.exclusivite_de_reprisereparation = exclusivite_de_reprisereparation + adresse.save() + + response, soup = get_response(adresse.identifiant_unique) + self.assert_about_panel_text( + soup, expected_text, exclusivite_de_reprisereparation + ) diff --git a/integration_tests/qfdmo/test_adresse_detail.py b/integration_tests/qfdmo/test_adresse_detail.py deleted file mode 100644 index 63ed04e9d..000000000 --- a/integration_tests/qfdmo/test_adresse_detail.py +++ /dev/null @@ -1,241 +0,0 @@ -import pytest -from bs4 import BeautifulSoup - -from unit_tests.qfdmo.acteur_factory import ( - DisplayedActeurFactory, - LabelQualiteFactory, - SourceFactory, -) - - -@pytest.mark.django_db -class TestDisplaySource: - def test_display_no_source(self, client): - adresse = DisplayedActeurFactory() - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_sources_panel"] is False - - def test_display_one_source(self, client): - adresse = DisplayedActeurFactory() - source = SourceFactory(afficher=True) - adresse.sources.add(source) - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_sources_panel"] - - -@pytest.mark.django_db -class TestDisplayLabel: - def test_display_no_label(self, client): - adresse = DisplayedActeurFactory() - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_labels_panel"] is False - - def test_display_ess_label(self, client): - adresse = DisplayedActeurFactory() - label_ess = LabelQualiteFactory( - code="ess", - libelle="Enseigne de l'économie sociale et solidaire", - type_enseigne=True, - ) - adresse.labels.add(label_ess) - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_labels_panel"] is False - - soup = BeautifulSoup(response.content, "html.parser") - label_tag = soup.find(attrs={"data-testid": "adresse_detail_header_tag"}) - assert label_tag is not None - assert "Enseigne de l'économie sociale et solidaire" in label_tag.text - - def test_display_one_label(self, client): - adresse = DisplayedActeurFactory() - label = LabelQualiteFactory( - code="label", - libelle="Mon label", - ) - adresse.labels.add(label) - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_labels_panel"] - - soup = BeautifulSoup(response.content, "html.parser") - label_tag = soup.find(attrs={"data-testid": "adresse_detail_header_tag"}) - assert label_tag is not None - assert "Mon label" in label_tag.text - - def test_display_two_label(self, client): - adresse = DisplayedActeurFactory() - label1 = LabelQualiteFactory( - code="label1", - libelle="Mon label 1", - ) - label2 = LabelQualiteFactory( - code="label2", - libelle="Mon label 2", - ) - adresse.labels.add(label1, label2) - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_labels_panel"] - - soup = BeautifulSoup(response.content, "html.parser") - label_tag = soup.find(attrs={"data-testid": "adresse_detail_header_tag"}) - assert label_tag is not None - assert "Cet établissement dispose de plusieurs labels" in label_tag.text - - def test_display_bonus_label(self, client): - adresse = DisplayedActeurFactory() - label = LabelQualiteFactory( - code="label", - libelle="Mon label", - bonus=True, - ) - adresse.labels.add(label) - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_labels_panel"] - - soup = BeautifulSoup(response.content, "html.parser") - label_tag = soup.find(attrs={"data-testid": "adresse_detail_header_tag"}) - assert label_tag is not None - assert "Éligible au bonus réparation" in label_tag.text - - def test_display_bonus_first_label(self, client): - adresse = DisplayedActeurFactory() - label_bonus = LabelQualiteFactory( - code="label", - libelle="Mon label", - bonus=True, - ) - label1 = LabelQualiteFactory( - code="label1", - libelle="Mon label 1", - ) - label2 = LabelQualiteFactory( - code="label2", - libelle="Mon label 2", - ) - label_ess = LabelQualiteFactory( - code="ess", - libelle="Enseigne de l'économie sociale et solidaire", - type_enseigne=True, - ) - adresse.labels.add(label_bonus, label1, label2, label_ess) - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_labels_panel"] - - soup = BeautifulSoup(response.content, "html.parser") - label_tag = soup.find(attrs={"data-testid": "adresse_detail_header_tag"}) - assert label_tag is not None - assert "Éligible au bonus réparation" in label_tag.text - - def test_display_label_before_ess(self, client): - adresse = DisplayedActeurFactory() - label = LabelQualiteFactory( - code="label", - libelle="Mon label", - ) - label_ess = LabelQualiteFactory( - code="ess", - libelle="Enseigne de l'économie sociale et solidaire", - type_enseigne=True, - ) - adresse.labels.add(label, label_ess) - - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - assert response.context["display_labels_panel"] - - soup = BeautifulSoup(response.content, "html.parser") - label_tag = soup.find(attrs={"data-testid": "adresse_detail_header_tag"}) - assert label_tag is not None - assert "Mon label" in label_tag.text - - -@pytest.mark.django_db -class TestUniquementSurRDV: - def test_uniquement_sur_rdv_is_displayed(self, client): - adresse = DisplayedActeurFactory(uniquement_sur_rdv=True) - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - - soup = BeautifulSoup(response.content, "html.parser") - wrapper = soup.find(attrs={"id": "aboutPanel"}) - assert wrapper is not None - assert ( - "Les services sont disponibles uniquement sur rendez-vous" in wrapper.text - ) - - def test_uniquement_sur_rdv_is_not_displayed(self, client): - adresse = DisplayedActeurFactory(uniquement_sur_rdv=False) - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - - soup = BeautifulSoup(response.content, "html.parser") - wrapper = soup.find(attrs={"id": "aboutPanel"}) - assert wrapper is not None - assert ( - "Les services sont disponibles uniquement sur rendez-vous" - not in wrapper.text - ) - - -@pytest.mark.django_db -class TestExclusiviteReparation: - def test_exclusivite_reparation_is_displayed(self, client): - adresse = DisplayedActeurFactory(exclusivite_de_reprisereparation=True) - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - - soup = BeautifulSoup(response.content, "html.parser") - wrapper = soup.find(attrs={"id": "aboutPanel"}) - assert wrapper is not None - assert "Répare uniquement les produits de ses marques" in wrapper.text - - def test_exclusivite_reparation_is_not_displayed(self, client): - adresse = DisplayedActeurFactory(exclusivite_de_reprisereparation=False) - url = f"/adresse/{adresse.identifiant_unique}" - - response = client.get(url) - assert response.status_code == 200 - - soup = BeautifulSoup(response.content, "html.parser") - wrapper = soup.find(attrs={"id": "aboutPanel"}) - assert wrapper is not None - assert "Répare uniquement les produits de ses marques" not in wrapper.text diff --git a/jinja2/dsfr_hacks/colors.html b/jinja2/dsfr_hacks/colors.html new file mode 100644 index 000000000..a25a0f4bd --- /dev/null +++ b/jinja2/dsfr_hacks/colors.html @@ -0,0 +1,21 @@ +{% extends "layout/base.html" %} + +{% block content %} +
+
+ {{ csrf_input }} + {{ form }} +
+ +
+
+ {% if form.cleaned_data %} +

+ Nom de la couleur: {{ dsfr_color }}
+ Code hexadécimal : {{ form.cleaned_data.hexa_color }} +

+ {% endif %} +
+{% endblock content %} diff --git a/jinja2/layout/base.html b/jinja2/layout/base.html index 58bbd4213..6ecb06677 100644 --- a/jinja2/layout/base.html +++ b/jinja2/layout/base.html @@ -1,5 +1,9 @@ - + @@ -26,7 +30,7 @@ {% block javascript_extras %}{% endblock %} - {% if is_embedded(request) %} + {% if is_embedded %} {% endif %} @@ -35,11 +39,12 @@ class="qfdmo-flex qfdmo-flex-col" data-controller="analytics" > - {% if not is_embedded(request) %} + {% if not is_embedded %} {% block header %} {% include "layout/header.html" %} {% endblock %} {% endif %} +
- {% if not is_embedded(request) %} + + {% if not is_embedded %} {% block footer %} {% include "layout/footer.html" %} {% endblock %} {% endif %} + + {% block modals %}{% endblock modals %} {% block js %} - {% endblock %} - {% if is_embedded(request) %} - - {% endif %} + {% if is_embedded %} + + {% endif %} - {% if request.user.is_authenticated %} - + {% endif %} + + - {% endif %} - - + {% endblock js %} diff --git a/jinja2/qfdmo/_address_card_partials/address_actions.html b/jinja2/qfdmo/_address_card_partials/address_actions.html index 55ea6b44d..5de0629ba 100644 --- a/jinja2/qfdmo/_address_card_partials/address_actions.html +++ b/jinja2/qfdmo/_address_card_partials/address_actions.html @@ -1,7 +1,7 @@
{% for action in adresse.acteur_actions(direction=direction) %} -

+

{% if action.icon %}   {% endif %} diff --git a/jinja2/qfdmo/_address_card_partials/source_or_label_list.html b/jinja2/qfdmo/_address_card_partials/source_or_label_list.html deleted file mode 100644 index 1e82d9d01..000000000 --- a/jinja2/qfdmo/_address_card_partials/source_or_label_list.html +++ /dev/null @@ -1,17 +0,0 @@ -{% for source_or_label in source_or_label_list %} -

- - {% if source_or_label.logo_file %} - Ademe - Agence de la transition écologique - {% endif %} - {{ source_or_label.libelle }} - -
-{% endfor %} diff --git a/jinja2/qfdmo/_addresses_partials/adresse_input_form.html b/jinja2/qfdmo/_addresses_partials/adresse_input_form.html index e68d6b212..0ad353142 100644 --- a/jinja2/qfdmo/_addresses_partials/adresse_input_form.html +++ b/jinja2/qfdmo/_addresses_partials/adresse_input_form.html @@ -3,9 +3,9 @@
diff --git a/jinja2/qfdmo/_addresses_partials/filters/_modal.html b/jinja2/qfdmo/_addresses_partials/filters/_modal.html index 4904a6181..042a67714 100644 --- a/jinja2/qfdmo/_addresses_partials/filters/_modal.html +++ b/jinja2/qfdmo/_addresses_partials/filters/_modal.html @@ -1,24 +1,40 @@
-
- {% block content %} - {% endblock content %} +
+ {% block modal_header %} + {% endblock modal_header %}
+ +
+

+ {% block modal_title %} + {% endblock modal_title %} +

+
+ + {% block modal_content %} + {% endblock modal_content %} +
+ +
+ {% block modal_footer %} + {% endblock modal_footer %} +
+
diff --git a/jinja2/qfdmo/_addresses_partials/filters/_object_filter.html b/jinja2/qfdmo/_addresses_partials/filters/_object_filter.html index 39555f0ae..d5983b5d9 100644 --- a/jinja2/qfdmo/_addresses_partials/filters/_object_filter.html +++ b/jinja2/qfdmo/_addresses_partials/filters/_object_filter.html @@ -2,9 +2,9 @@
{{ form.sous_categorie_objet.label_tag() }} diff --git a/jinja2/qfdmo/_addresses_partials/filters/iframe_advanced_filters.html b/jinja2/qfdmo/_addresses_partials/filters/iframe_advanced_filters.html deleted file mode 100644 index 6a2084327..000000000 --- a/jinja2/qfdmo/_addresses_partials/filters/iframe_advanced_filters.html +++ /dev/null @@ -1,10 +0,0 @@ -{% extends 'qfdmo/_addresses_partials/filters/panel_filters.html' %} - -{% block filters_title %} -

- Filtres avancés -

-{% endblock %} -{% block filters_content %} - {% include 'qfdmo/_addresses_partials/filters/_labels_filters.html' %} -{% endblock %} diff --git a/jinja2/qfdmo/_addresses_partials/filters/panel_filters.html b/jinja2/qfdmo/_addresses_partials/filters/panel_filters.html index 664b65242..2bf316255 100644 --- a/jinja2/qfdmo/_addresses_partials/filters/panel_filters.html +++ b/jinja2/qfdmo/_addresses_partials/filters/panel_filters.html @@ -9,68 +9,48 @@ tabindex="0" {% endblock wrapper_attrs %} -{% block content %} -
+{% block modal_header %} + +{% endblock modal_header %} + +{% block modal_title %}Filtres avancés{% endblock modal_title %} + +{% block modal_content %} +{% include 'qfdmo/_addresses_partials/filters/_labels_filters.html' %} +{% endblock modal_content %} + +{% block modal_footer %} +
-
- - {% block filters_title %} -

- Filtres avancés -

- {% endblock %} -
- - {% block filters_content %} - {% with field=form.bonus, legend="Éligibles au bonus réparation" %} - {% include "qfdmo/_addresses_partials/filter/_panel_filters" %} - {% endwith %} - - {% 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 %} - - -
-
-
- -
-
+ -
-
-{% endblock content %} + Appliquer + +
+{% endblock modal_footer %} diff --git a/jinja2/qfdmo/_addresses_partials/iframe_footer_links.html b/jinja2/qfdmo/_addresses_partials/iframe_footer_links.html index e0edfc20f..4e1d515f8 100644 --- a/jinja2/qfdmo/_addresses_partials/iframe_footer_links.html +++ b/jinja2/qfdmo/_addresses_partials/iframe_footer_links.html @@ -1,5 +1,5 @@ {# Liens de pieds de page pour iframe #} -{% if is_embedded(request) %} +{% if is_embedded %}
+ +
+
+ {% if object.labels_display %} + {% include "qfdmo/acteur/_labels.html" %} + {% endif %} + +

{{ object.nom }}

+

+ {{ object.acteur_services_display }} {{ distance }} +

+ + {% include "qfdmo/acteur/tabs/_separator.html" %} + {% include "qfdmo/acteur/_actions.html" %} +
+ {% include "qfdmo/acteur/_tabs.html" %} +
+ +
+{% endblock content %} diff --git a/jinja2/qfdmo/acteur/_action.html b/jinja2/qfdmo/acteur/_action.html new file mode 100644 index 000000000..33ede3da9 --- /dev/null +++ b/jinja2/qfdmo/acteur/_action.html @@ -0,0 +1,23 @@ + + + + {{ text }} + diff --git a/jinja2/qfdmo/acteur/_action_mailto.html b/jinja2/qfdmo/acteur/_action_mailto.html new file mode 100644 index 000000000..5c47e8bfa --- /dev/null +++ b/jinja2/qfdmo/acteur/_action_mailto.html @@ -0,0 +1,3 @@ +{% extends "qfdmo/acteur/_action.html" %} + +{% block href %}mailto:{{ mailto }}{% endblock href %} diff --git a/jinja2/qfdmo/acteur/_action_share.html b/jinja2/qfdmo/acteur/_action_share.html new file mode 100644 index 000000000..2e6cd12ea --- /dev/null +++ b/jinja2/qfdmo/acteur/_action_share.html @@ -0,0 +1,78 @@ +
+ + + + Partager +
diff --git a/jinja2/qfdmo/acteur/_action_tel.html b/jinja2/qfdmo/acteur/_action_tel.html new file mode 100644 index 000000000..97a3f3bd6 --- /dev/null +++ b/jinja2/qfdmo/acteur/_action_tel.html @@ -0,0 +1,3 @@ +{% extends "qfdmo/acteur/_action.html" %} + +{% block href %}tel:{{ tel }}{% endblock href %} diff --git a/jinja2/qfdmo/acteur/_actions.html b/jinja2/qfdmo/acteur/_actions.html new file mode 100644 index 000000000..84805cc24 --- /dev/null +++ b/jinja2/qfdmo/acteur/_actions.html @@ -0,0 +1,24 @@ +
+ {% if itineraire_url %} + {% with text="Itinéraire",url=itineraire_url,icon="fr-icon-send-plane-line" %} + {% include "qfdmo/acteur/_action.html" %} + {% endwith %} + {% endif %} + + {% if object.url %} + {% with text="Site web",url=object.url,icon="fr-icon-global-line",extra_classes="fr-btn--secondary-light" %} + {% include "qfdmo/acteur/_action.html" %} + {% endwith %} + {% endif %} + + {% if object.telephone %} + {% with text="Téléphone",tel=object.telephone,icon="fr-icon-phone-line",extra_classes="fr-btn--secondary-light md:qfdmo-hidden",mobile_only=True %} + {% include "qfdmo/acteur/_action_tel.html" %} + {% endwith %} + {% endif %} + + {% include "qfdmo/acteur/_action_share.html" %} + +
diff --git a/jinja2/qfdmo/acteur/_label.html b/jinja2/qfdmo/acteur/_label.html new file mode 100644 index 000000000..60fed9809 --- /dev/null +++ b/jinja2/qfdmo/acteur/_label.html @@ -0,0 +1,24 @@ +
+ + {% if source_or_label.logo_file %} + Ademe - Agence de la transition écologique + {% endif %} + {{ source_or_label.libelle }} + + +
diff --git a/jinja2/qfdmo/acteur/_labels.html b/jinja2/qfdmo/acteur/_labels.html new file mode 100644 index 000000000..8463ae41f --- /dev/null +++ b/jinja2/qfdmo/acteur/_labels.html @@ -0,0 +1,11 @@ +
+ {% with label=object.labels_display.first() %} + {% if label.bonus %} + {% include "qfdmo/acteur/_labels/bonus.html" %} + {% elif object.labels_display.filter(type_enseigne=False).count() > 1 %} + {% include "qfdmo/acteur/_labels/multiple_labels.html" %} + {% else %} + {% include "qfdmo/acteur/_labels/generic.html" %} + {% endif %} + {% endwith %} +
diff --git a/jinja2/qfdmo/acteur/_labels/bonus.html b/jinja2/qfdmo/acteur/_labels/bonus.html new file mode 100644 index 000000000..ad1b04b49 --- /dev/null +++ b/jinja2/qfdmo/acteur/_labels/bonus.html @@ -0,0 +1,3 @@ +{% with content="Éligible au bonus réparation",icon="fr-icon-percent-line" %} + {% include "qfdmo/shared/tag.html" %} +{% endwith %} diff --git a/jinja2/qfdmo/acteur/_labels/generic.html b/jinja2/qfdmo/acteur/_labels/generic.html new file mode 100644 index 000000000..e6f2f73b7 --- /dev/null +++ b/jinja2/qfdmo/acteur/_labels/generic.html @@ -0,0 +1,3 @@ +{% with content=label.libelle,icon_image=label.logo_file %} + {% include "qfdmo/shared/tag.html" %} +{% endwith %} diff --git a/jinja2/qfdmo/acteur/_labels/multiple_labels.html b/jinja2/qfdmo/acteur/_labels/multiple_labels.html new file mode 100644 index 000000000..6acccbfa2 --- /dev/null +++ b/jinja2/qfdmo/acteur/_labels/multiple_labels.html @@ -0,0 +1,3 @@ +{% with content="Cet établissement dispose de plusieurs labels",icon="fr-icon-shield-check-line" %} + {% include "qfdmo/shared/tag.html" %} +{% endwith %} diff --git a/jinja2/qfdmo/acteur/_tabs.html b/jinja2/qfdmo/acteur/_tabs.html new file mode 100644 index 000000000..d5c6350ae --- /dev/null +++ b/jinja2/qfdmo/acteur/_tabs.html @@ -0,0 +1,23 @@ +
+
    + {% with text="Présentation",target="aboutPanel" %} + {% include "qfdmo/acteur/tabs/_tab.html" %} + {% endwith %} + {% if object.labels_without_enseigne_display %} + {% with text="Labels",target="labelsPanel" %} + {% include "qfdmo/acteur/tabs/_tab.html" %} + {% endwith %} + {% endif %} + {% with text="Sources",target="sourcesPanel" %} + {% include "qfdmo/acteur/tabs/_tab.html" %} + {% endwith %} +
+ + {% include "qfdmo/acteur/tabs/about_panel.html" %} + {% include "qfdmo/acteur/tabs/labels_panel.html" %} + {% include "qfdmo/acteur/tabs/sources_panel.html" %} +
diff --git a/jinja2/qfdmo/acteur/detail.html b/jinja2/qfdmo/acteur/detail.html deleted file mode 100644 index 6b49d117c..000000000 --- a/jinja2/qfdmo/acteur/detail.html +++ /dev/null @@ -1,391 +0,0 @@ - -{% if adresse.labels.filter(afficher=True, bonus=True, type_enseigne=False) %} -

Éligible au bonus réparation

-{% elif adresse.labels.filter(afficher=True, type_enseigne=False).count() == 1 %} - {% with source_or_label=adresse.labels.filter(afficher=True, type_enseigne=False).first() %} - {% if source_or_label.logo_file %} - Ademe - Agence de la transition écologique - {% endif %} - {{ source_or_label.libelle }} - {% endwith %} -{% elif adresse.labels.filter(afficher=True, type_enseigne=False).count() >= 1 %} -

Cet établissement dispose de plusieurs labels

-{% elif adresse.labels.filter(afficher=True, type_enseigne=True).count() >= 1 %} - {% with source_or_label=adresse.labels.filter(afficher=True, type_enseigne=True).first() %} -

- {% if source_or_label.logo_file %} - Ademe - Agence de la transition écologique - {% endif %} - {{ source_or_label.libelle }} -

- {% endwith %} -{% endif %} - -

- {{ adresse.libelle }} -

- -

- {% for acteur_service in adresse.get_acteur_services() %} - {{ acteur_service }}{% if not loop.last %}, {% endif %} - {% endfor %} - {{ distance_to_acteur(request, adresse) }} -

- -
-
- {% if latitude and longitude and not adresse.is_digital %} - - - Itinéraire - - {% endif %} - {% if adresse.url %} - - - - Site web - - {% endif %} - {% if adresse.email and False %} - - - E-mail - - {% endif %} - {% if adresse.telephone %} - - - Téléphone - - {% endif %} - -
- - - - Partager -
-
- - -
-
    -
  • - -
    • - {% if display_infos_panel(adresse) %} -
  • - -
    • - {% endif %} - {% if display_labels_panel %} -
  • - -
    • - {% endif %} - {% if display_sources_panel %} -
  • - -
    • - {% endif %} -
-
- - {% if adresse.description %} -

Description

-

{{adresse.description}}

- {% endif %} - - {% if adresse.uniquement_sur_rdv %} -
-
-
- - Les services sont disponibles uniquement sur rendez-vous - -
-
-
- {% endif %} - - {% if display_exclusivite_reparation(adresse) %} -
-
-
- Répare uniquement les produits de ses marques -
-
-
- {% endif %} - -

Services disponibles

- {% for service_proposition in adresse.proposition_services_by_direction(direction) %} -
-

- {% if service_proposition.action.icon %} -   - {% endif %} - {{ service_proposition.action.libelle }} -

-

- {% for sous_categorie in service_proposition.sous_categories.all() %} - {{ sous_categorie }}{% if not loop.last %}, {% endif %} - {% endfor %} -

-
- {% endfor %} - - {% if adresse.labels.filter(afficher=True, bonus=True, type_enseigne=False) %} -
-
-
-

- -  Éligible au bonus réparation - -

-

Découvrez les réparations pour lesquelles vous pouvez bénéficier d'une aide et faites des économies

- -
-
-
- {% endif %} - -
- - {% if display_infos_panel(adresse) %} -
- {% if adresse.horaires_description %} -

Horaires d'ouverture

-
- {{ adresse.horaires_description.replace('\n', '
')|safe }} -
- {% endif %} - - {% if adresse.display_postal_address() %} -

Adresse

-
- {% if adresse.adresse %} - {{ adresse.adresse|title }}
- {% endif %} - {% if adresse.adresse_complement %} - {{ adresse.adresse_complement }}
- {% endif %} - {% if adresse.code_postal %} - {{ adresse.code_postal }} - {% endif %} - {% if adresse.ville %} - {{ adresse.ville|title }} - {% endif %} -
- {% endif %} - - {% with source_or_label_list=adresse.labels.filter(afficher=True, type_enseigne=True) %} - {% if source_or_label_list %} -

Type d'enseigne

- {% with source_or_label_list=adresse.labels.filter(afficher=True, type_enseigne=True) %} - {% include "qfdmo/_address_card_partials/source_or_label_list.html" %} - {% endwith %} - {% endif %} - {% endwith %} - -
- {% endif %} - - {% if display_labels_panel %} -
- - {% with source_or_label_list=adresse.labels.filter(afficher=True, type_enseigne=False) %} - {% include "qfdmo/_address_card_partials/source_or_label_list.html" %} - {% endwith %} - -
- {% endif %} - - {% if display_sources_panel %} -
- {% with source_or_label_list=adresse.sources.all() %} - {% include "qfdmo/_address_card_partials/source_or_label_list.html" %} - {% endwith %} -
- {% endif %} -
-
-
- Mis à jour le {{ adresse.modifie_le.strftime('%d/%m/%Y') }} -
-
- -
- - Proposer une modification - -
- -{% if request.user.is_staff %} -
- Pour le staff : Lien vers l'admin -
-{% endif %} diff --git a/jinja2/qfdmo/acteur/tabs/_panel.html b/jinja2/qfdmo/acteur/tabs/_panel.html new file mode 100644 index 000000000..19fbf5f4f --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/_panel.html @@ -0,0 +1,9 @@ +
+ {% block content %} + {% endblock content %} +
diff --git a/jinja2/qfdmo/acteur/tabs/_section.html b/jinja2/qfdmo/acteur/tabs/_section.html new file mode 100644 index 000000000..2077669d4 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/_section.html @@ -0,0 +1,13 @@ +
+

+ {% block title %} + {% endblock title %} +

+ +
+ {% block content %} + {% endblock content %} +
+ + {% include "qfdmo/acteur/tabs/_separator.html" %} +
diff --git a/jinja2/qfdmo/acteur/tabs/_separator.html b/jinja2/qfdmo/acteur/tabs/_separator.html new file mode 100644 index 000000000..54b9ae785 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/_separator.html @@ -0,0 +1 @@ +
diff --git a/jinja2/qfdmo/acteur/tabs/_service_tag.html b/jinja2/qfdmo/acteur/tabs/_service_tag.html new file mode 100644 index 000000000..4fbe070d9 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/_service_tag.html @@ -0,0 +1,11 @@ +

+ + {{ text|capitalize }} + +

diff --git a/jinja2/qfdmo/acteur/tabs/_tab.html b/jinja2/qfdmo/acteur/tabs/_tab.html new file mode 100644 index 000000000..f516e3c27 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/_tab.html @@ -0,0 +1,11 @@ +
  • + +
    • diff --git a/jinja2/qfdmo/acteur/tabs/about_panel.html b/jinja2/qfdmo/acteur/tabs/about_panel.html new file mode 100644 index 000000000..459bb7749 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/about_panel.html @@ -0,0 +1,45 @@ +{% extends "qfdmo/acteur/tabs/_panel.html" %} + +{% block id %}aboutPanel{% endblock id %} + +{% block aria_labelledby %}aboutPanel{% endblock aria_labelledby %} + +{% block content %} +
    + {% if object.exclusivite_de_reprisereparation %} + {% include "qfdmo/acteur/tabs/sections/exclusivite_de_reprisereparation.html" %} + {% endif %} + + {% if object.should_display_adresse %} + {% include "qfdmo/acteur/tabs/sections/adresse.html" %} + {% endif %} + + {% if object.telephone %} + {% include "qfdmo/acteur/tabs/sections/telephone.html" %} + {% endif %} + + {% if object.description %} + {% include "qfdmo/acteur/tabs/sections/description.html" %} + {% endif %} + + {% if object.sorted_acteur_services_libelles %} + {% include "qfdmo/acteur/tabs/sections/services_disponibles.html" %} + {% endif %} + + {% if object.is_bonus_reparation %} + {% include "qfdmo/acteur/tabs/sections/bonus.html" %} + {% endif %} + + {% if object.horaires_description or object.uniquement_sur_rdv %} + {% include "qfdmo/acteur/tabs/sections/horaires.html" %} + {% endif %} + + {% if object.labels_enseigne_display %} + {% include "qfdmo/acteur/tabs/sections/type_enseigne.html" %} + {% endif %} + + {% include "qfdmo/acteur/tabs/sections/meta.html" %} +
    +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/labels_panel.html b/jinja2/qfdmo/acteur/tabs/labels_panel.html new file mode 100644 index 000000000..c10aa1f04 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/labels_panel.html @@ -0,0 +1,13 @@ +{% extends "qfdmo/acteur/tabs/_panel.html" %} + +{% block id %}labelsPanel{% endblock id %} + +{% block aria_labelledby %}labelsPanel{% endblock aria_labelledby %} + +{% block content %} +
    +{% for source_or_label in object.labels_without_enseigne_display %} + {% include "qfdmo/acteur/_label.html" %} +{% endfor %} +
    +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/adresse.html b/jinja2/qfdmo/acteur/tabs/sections/adresse.html new file mode 100644 index 000000000..8821fcbb0 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/adresse.html @@ -0,0 +1,34 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} + +{% block title %} +Adresse +{% endblock title %} + +{% block content %} +
    + {% if object.adresse %} + {{ object.adresse|title }}
    + {% endif %} + + {% if object.adresse_complement %} + {{ object.adresse_complement }}
    + {% endif %} + + {% if object.code_postal %} + {{ object.code_postal }} + {% endif %} + + {% if object.ville %} + {{ object.ville|title }} + {% endif %} +
    + +{# TODO: Ce champ n'est pas implémenté. Lorsqu'il sera implémenté, adapter le nom du champ à celui utilisé en base de données. #} +{% if object.services_a_domicile %} +
    +

    + Cet établissement propose des services à domicile. +

    +
    +{% endif %} +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/bonus.html b/jinja2/qfdmo/acteur/tabs/sections/bonus.html new file mode 100644 index 000000000..b9840c71d --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/bonus.html @@ -0,0 +1,25 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} + +{% block wrapper_attrs %}id="bonus"{% endblock wrapper_attrs %} + +{% block title %} +{# TODO : icone #} +Éligible au bonus réparation +{% endblock title %} + +{% block content %} +
    + Découvrez les réparations pour lesquelles vous pouvez bénéficier d'une aide et faites des économies. +
    + + +En savoir plus + + +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/description.html b/jinja2/qfdmo/acteur/tabs/sections/description.html new file mode 100644 index 000000000..5c4af1064 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/description.html @@ -0,0 +1,9 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} + +{% block title %} +Description +{% endblock title %} + +{% block content %} +{{ object.description }} +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/exclusivite_de_reprisereparation.html b/jinja2/qfdmo/acteur/tabs/sections/exclusivite_de_reprisereparation.html new file mode 100644 index 000000000..ef8ba0592 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/exclusivite_de_reprisereparation.html @@ -0,0 +1,11 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} +{% block title %}Exclusivité de reprise / réparation{% endblock title %} +{% block title_classes %}qfdmo-sr-only{% endblock title_classes %} + +{% block content %} +
    +

    + Cet établissement ne répare que les produits de ses marques. +

    +
    +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/horaires.html b/jinja2/qfdmo/acteur/tabs/sections/horaires.html new file mode 100644 index 000000000..efb150bb6 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/horaires.html @@ -0,0 +1,21 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} + +{% block title %} +Horaires +{% endblock title %} + +{% block content %} +
    + {% if object.uniquement_sur_rdv %} +

    + 📆 Les services de cet établissement ne sont disponibles que sur rendez-vous. +

    + {% endif %} + + {% if object.uniquement_sur_rdv and object.horaires_description|safe %} + {% include "qfdmo/acteur/tabs/_separator.html" %} + {% endif %} + + {{ object.horaires_description|safe }} +
    +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/meta.html b/jinja2/qfdmo/acteur/tabs/sections/meta.html new file mode 100644 index 000000000..119d9f51b --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/meta.html @@ -0,0 +1,33 @@ +
    +
    + {% if request.user.is_staff %} + + Pour le staff : + Lien vers l'admin + + + {% endif %} + + + Mis à jour le {{ object.modifie_le_display }} + +
    + + + Proposer une modification + +
    diff --git a/jinja2/qfdmo/acteur/tabs/sections/services_disponibles.html b/jinja2/qfdmo/acteur/tabs/sections/services_disponibles.html new file mode 100644 index 000000000..543173a02 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/services_disponibles.html @@ -0,0 +1,42 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} + +{% block title %} +Services disponibles +{% endblock title %} + +{% block content %} +
    + {% for service in object.sorted_proposition_services %} +
    + {% with text=service.action.libelle %} + {% if is_carte %} + {% with action=service.action.groupe_action %} + {% include "qfdmo/acteur/tabs/_service_tag.html" %} + {% endwith %} + {% else %} + {% with action=service.action,extra_classes="qfdmo-bg-opacity-30" %} + {% include "qfdmo/acteur/tabs/_service_tag.html" %} + {% endwith %} + {% endif %} + {% endwith %} + +

    + {{ service.sous_categories_display }} +

    +
    + {% endfor %} + + {% if object.reprise == "1 pour 1" %} +
    +

    + Information importante +

    +

    + Cet établissement ne reprend vos objets que dans le cadre d’un achat neuf. +

    +
    + {% endif %} +
    +
    +
    +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/telephone.html b/jinja2/qfdmo/acteur/tabs/sections/telephone.html new file mode 100644 index 000000000..5c56e756d --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/telephone.html @@ -0,0 +1,14 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} + +{% block title %}Téléphone{% endblock title %} +{% block title_classes %}qfdmo-sr-only{% endblock title_classes %} + +{% block wrapper_attrs %}class="max-md:qfdmo-hidden"{% endblock %} + +{% block content %} +

    + + + {{ object.telephone }} +

    +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sections/type_enseigne.html b/jinja2/qfdmo/acteur/tabs/sections/type_enseigne.html new file mode 100644 index 000000000..c1a78e32c --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sections/type_enseigne.html @@ -0,0 +1,11 @@ +{% extends "qfdmo/acteur/tabs/_section.html" %} + +{% block title %} +Type{% if object.labels_enseigne_display|length > 1 %}s{% endif %} d'enseigne +{% endblock title %} + +{% block content %} + {% for source_or_label in object.labels_enseigne_display %} + {% include "qfdmo/acteur/_label.html" %} + {% endfor %} +{% endblock content %} diff --git a/jinja2/qfdmo/acteur/tabs/sources_panel.html b/jinja2/qfdmo/acteur/tabs/sources_panel.html new file mode 100644 index 000000000..ef49a86f3 --- /dev/null +++ b/jinja2/qfdmo/acteur/tabs/sources_panel.html @@ -0,0 +1,13 @@ +{% extends "qfdmo/acteur/tabs/_panel.html" %} + +{% block id %}sourcesPanel{% endblock id %} + +{% block aria_labelledby %}sourcesPanel{% endblock aria_labelledby %} + +{% block content %} + {% with border=True %} + {% for source_or_label in object.sources.all() %} + {% include "qfdmo/acteur/_label.html" %} + {% endfor %} + {% endwith %} +{% endblock content %} diff --git a/jinja2/qfdmo/adresse_detail.html b/jinja2/qfdmo/adresse_detail.html deleted file mode 100644 index b23da2b59..000000000 --- a/jinja2/qfdmo/adresse_detail.html +++ /dev/null @@ -1,11 +0,0 @@ -{% extends 'layout/base.html' %} - -{% block content %} -
    -
    - - {% include 'qfdmo/acteur/detail.html' %} - -
    -
    -{% endblock %} diff --git a/jinja2/qfdmo/carte.html b/jinja2/qfdmo/carte.html new file mode 100644 index 000000000..c2a7588ea --- /dev/null +++ b/jinja2/qfdmo/carte.html @@ -0,0 +1,30 @@ +{% extends "qfdmo/shared/main.html" %} + +{% block form_controller_data_actions %}address-autocomplete:optionSelected->search-solution-form#advancedSubmit{% endblock form_controller_data_actions %} + +{% block form_header %} + {# Panel Header #} + {# TODO: refacto turbo, should be moved outside of form #} + {% include 'qfdmo/carte/header.html' %} +{% endblock form_header %} + +{% block form_result %} + {{ super() }} + {# Panel «Legend» #} + {# TODO: refacto turbo, should be moved outside of form #} + {% include 'qfdmo/carte/panels/legend_mobile.html' %} +{% endblock form_result %} + +{% block form_fields %} + {{ super() }} + {{ form.epci_codes }} +{% endblock form_fields %} + +{% block form_modals %} + {# Panel «Filtres» #} + {% include 'qfdmo/carte/modals/filters.html' %} + + {# Panel À propos #} + {# TODO: refacto turbo, should be moved outside of form #} + {% include 'qfdmo/carte/modals/a_propos.html' %} +{% endblock form_modals %} diff --git a/jinja2/qfdmo/carte/_a_propos.html b/jinja2/qfdmo/carte/_a_propos.html deleted file mode 100644 index 4964925a5..000000000 --- a/jinja2/qfdmo/carte/_a_propos.html +++ /dev/null @@ -1,65 +0,0 @@ -{% extends 'qfdmo/_addresses_partials/filters/_modal.html' %} - -{# Panel «À propos» #} -{% block wrapper_attrs %} - data-search-solution-form-target="aProposMainPanel" -{% endblock wrapper_attrs %} - -{% block content %} -
    - -
    -
    -

    - À propos de La Carte -

    -
    -
    -
    -
    -

    - - Réutiliser La Carte - -

    -

    - Et si vous ajoutiez cette carte à votre site ? Pour utiliser notre widget, c'est par ici ! -

    -
    -
    -
    -
    -
    -
    -

    - - Donner votre avis - -

    -

    Cette carte doit-être la vôtre ! Si vous avez des idées pour l'améliorer, on vous écoute.

    -
    -
    -
    -
    -
    -
    - {% include 'layout/_partials/header_logos.html' %} -
    -
    -{% endblock content %} diff --git a/jinja2/qfdmo/carte/_digital_results.html b/jinja2/qfdmo/carte/_digital_results.html new file mode 100644 index 000000000..459308ab2 --- /dev/null +++ b/jinja2/qfdmo/carte/_digital_results.html @@ -0,0 +1,36 @@ +{# On line addresses #} +
    +
    + {% for adresse in acteurs %} + + {% endfor %} + {% if acteurs.count() == 0 %} +

    + Aucune solution en ligne n'a été trouvée pour votre recherche. +

    + {% endif %} +
    +
    +
    +
    diff --git a/jinja2/qfdmo/carte/_header.html b/jinja2/qfdmo/carte/_header.html deleted file mode 100644 index 5e316cfc0..000000000 --- a/jinja2/qfdmo/carte/_header.html +++ /dev/null @@ -1,38 +0,0 @@ -
    - - - {# Recherche adresse #} -
    - {% include 'qfdmo/_addresses_partials/adresse_input_form.html' %} - -
    - -
    - - -
    -
    -
    -
    diff --git a/jinja2/qfdmo/carte/_map.html b/jinja2/qfdmo/carte/_map.html deleted file mode 100644 index 843529567..000000000 --- a/jinja2/qfdmo/carte/_map.html +++ /dev/null @@ -1,238 +0,0 @@ -
    -
    -
    - {% if request.GET["digital"] == "1" %} - {# On line addresses#} -
    - {# TODO: REFACTO OVERFLOW : supprimer les overflow auto et le padding left sur la liste qui empêche l'outline de déborder du conteneur #} -
    - {% for adresse in acteurs.all() %} - - {% endfor %} - {% if acteurs.count() == 0 %} -

    - Aucune solution en ligne n'a été trouvée pour votre recherche. -

    - {% endif %} -
    -
    -
    -
    - {% else %} - {# Near by addresses#} -
    - {{ form.bounding_box }} -
    - {% if is_carte(request) %} - - Proposer une adresse - - {% endif %} -
    - - {% if is_carte(request) %} - - {% endif %} - {% with address_ok=(form.initial.adresse or form.initial.bounding_box or acteurs) %} -
    - - - - -
    -

    - Découvrez les lieux près de chez vous - pour donner une seconde vie à votre objet ! -

    -

    - Saisissez une adresse et recherchez des établissements à proximité qui vous aideront à remettre votre objet en circulation.

    -
    -
    -
    -
    - Il n'existe pas de solution {% if bounding_box %}dans cette zone{% else %}localisée proche de chez vous (<30 km){% endif %}, essayez avec une autre combinaison de filtres. -
    -
    - {% endwith %} - {% for acteur in acteurs %} - - {% endfor %} -
    - {% endif %} -
    -
    -
    - - Chargement des adresses... -
    -
    - {% if not is_carte(request) %} -
    - - Proposer une adresse - -
    - {% endif %} -
    - - {# Détail de l'adresse #} -
    -
    -
    - - - -
    - {# passer la direction en paramètre #} -
    -
    - {% with direction=form.direction.value(), latitude=form.latitude.value(), longitude=form.longitude.value() %} - - - {% endwith %} -
    -
    -
    -
    -
    diff --git a/jinja2/qfdmo/carte/_result.html b/jinja2/qfdmo/carte/_result.html deleted file mode 100644 index 59c866ec4..000000000 --- a/jinja2/qfdmo/carte/_result.html +++ /dev/null @@ -1,4 +0,0 @@ -{% extends "qfdmo/carte/result.html" %} - -{% block panel_extra_classes %}qfdmo-flex-grow{% endblock panel_extra_classes %} -{% block panel_header %}{% endblock panel_header %} diff --git a/jinja2/qfdmo/carte/_search_in_zone.html b/jinja2/qfdmo/carte/_search_in_zone.html new file mode 100644 index 000000000..9fbea8e1e --- /dev/null +++ b/jinja2/qfdmo/carte/_search_in_zone.html @@ -0,0 +1,12 @@ + diff --git a/jinja2/qfdmo/carte/base.html b/jinja2/qfdmo/carte/base.html deleted file mode 100644 index 9e2ba6da8..000000000 --- a/jinja2/qfdmo/carte/base.html +++ /dev/null @@ -1,51 +0,0 @@ -{% extends base_template %} - - {% block content %} - - {# Controleur général de gestion de la navigation et du formulaire #} - -
    - {% include "qfdmo/partials/featureflip_inputs.html" %} - - {# Panel Header #} - {# TODO: refacto turbo, should be moved outside of form #} - {% include 'qfdmo/carte/_header.html' %} - - {# Panel Result #} - {% include 'qfdmo/carte/_result.html' %} - - {# Panel «Filtres» #} - {% include 'qfdmo/carte/_filters.html' %} - - {# Panel «Legend» #} - {# TODO: refacto turbo, should be moved outside of form #} - {% include 'qfdmo/carte/_legend.html' %} - - {# Panel À propos #} - {# TODO: refacto turbo, should be moved outside of form #} - {% include 'qfdmo/carte/_a_propos.html' %} - - {{ form.epci_codes }} -
    -     - - {% include 'qfdmo/reparacteur_modale.html' %} - {% endblock %} diff --git a/jinja2/qfdmo/carte/header.html b/jinja2/qfdmo/carte/header.html new file mode 100644 index 000000000..a31aeec8c --- /dev/null +++ b/jinja2/qfdmo/carte/header.html @@ -0,0 +1,40 @@ + + +{# Recherche adresse #} +
    + {% include 'qfdmo/_addresses_partials/adresse_input_form.html' %} + +
    + +
    + + +
    +
    +
    diff --git a/jinja2/qfdmo/carte/modals/a_propos.html b/jinja2/qfdmo/carte/modals/a_propos.html new file mode 100644 index 000000000..caf106ed0 --- /dev/null +++ b/jinja2/qfdmo/carte/modals/a_propos.html @@ -0,0 +1,60 @@ +{% extends 'qfdmo/_addresses_partials/filters/_modal.html' %} + +{# Panel «À propos» #} +{% block wrapper_attrs %} + data-search-solution-form-target="aProposMainPanel" +{% endblock wrapper_attrs %} + +{% block modal_header %} + +{% endblock modal_header %} + +{% block modal_title %}À propos de La Carte{% endblock modal_title %} + +{% block modal_content %} +
    +
    +
    +

    + + Réutiliser La Carte + +

    +

    + Et si vous ajoutiez cette carte à votre site ? Pour utiliser notre widget, c'est par ici ! +

    +
    +
    +
    +
    +
    +
    +

    + + Donner votre avis + +

    +

    Cette carte doit-être la vôtre ! Si vous avez des idées pour l'améliorer, on vous écoute.

    +
    +
    +
    +
    + {% include 'layout/_partials/header_logos.html' %} +
    +{% endblock modal_content %} diff --git a/jinja2/qfdmo/carte/_filters.html b/jinja2/qfdmo/carte/modals/filters.html similarity index 79% rename from jinja2/qfdmo/carte/_filters.html rename to jinja2/qfdmo/carte/modals/filters.html index 2741f8217..8c739d303 100644 --- a/jinja2/qfdmo/carte/_filters.html +++ b/jinja2/qfdmo/carte/modals/filters.html @@ -1,12 +1,10 @@ {% extends 'qfdmo/_addresses_partials/filters/panel_filters.html' %} -{% block filters_title %} -

    - Filtres -

    +{% block modal_title %} +Filtres {% endblock %} -{% block filters_content %} +{% block modal_content %} data-search-solution-form-target="direction" > {{ form.action_displayed }} + {% with hidden=hide_object_filter(request) %} {% include 'qfdmo/_addresses_partials/filters/_object_filter.html' %} {% endwith %} + {% include 'qfdmo/_addresses_partials/filters/_labels_filters.html' %} -{% endblock %} +{% endblock modal_content %} diff --git a/jinja2/qfdmo/carte/panels/acteur_detail.html b/jinja2/qfdmo/carte/panels/acteur_detail.html new file mode 100644 index 000000000..02508b9c8 --- /dev/null +++ b/jinja2/qfdmo/carte/panels/acteur_detail.html @@ -0,0 +1,20 @@ +{# Détail de l'adresse #} +{# Barre visible en mobile uniquement #} + +{# Content #} +
    + {# Close button #} + + + +
    diff --git a/jinja2/qfdmo/carte/panels/legend.html b/jinja2/qfdmo/carte/panels/legend.html new file mode 100644 index 000000000..03a976130 --- /dev/null +++ b/jinja2/qfdmo/carte/panels/legend.html @@ -0,0 +1,44 @@ + diff --git a/jinja2/qfdmo/carte/_legend.html b/jinja2/qfdmo/carte/panels/legend_mobile.html similarity index 96% rename from jinja2/qfdmo/carte/_legend.html rename to jinja2/qfdmo/carte/panels/legend_mobile.html index 8781cdf0e..197ac6aa5 100644 --- a/jinja2/qfdmo/carte/_legend.html +++ b/jinja2/qfdmo/carte/panels/legend_mobile.html @@ -1,4 +1,4 @@ -{# Panel «Légende» #} +{# Panel «Légende» affiché uniquement en mobile #}
    @@ -32,7 +32,7 @@

    type="button" data-action="click -> search-solution-form#advancedSubmit" data-without-zone="false" - data-with-controls={{"false" if is_carte(request) else "true"}} + data-with-controls={{"false" if is_carte else "true"}} data-toggle-advanced-filters="true" > Appliquer diff --git a/jinja2/qfdmo/carte/result.html b/jinja2/qfdmo/carte/result.html deleted file mode 100644 index 73a5b936b..000000000 --- a/jinja2/qfdmo/carte/result.html +++ /dev/null @@ -1,30 +0,0 @@ - - {% block panel_header %} -
    - - {# Digital #} -
    - - {{ form.digital.label_tag() }} - - {{ form.digital }} -
    - -

    - Vos {% if form.digital.value() == "1" %}résultats{% else %}adresses{% endif %} {% if form.sous_categorie_objet.value() %}pour «{{ form.sous_categorie_objet.value() }}»{% endif %} : -

    -
    - {% endblock panel_header %} - - {% include 'qfdmo/carte/_map.html' %} - -     diff --git a/jinja2/qfdmo/iframe_configurator/_iframe.html b/jinja2/qfdmo/configurator/_iframe.html similarity index 100% rename from jinja2/qfdmo/iframe_configurator/_iframe.html rename to jinja2/qfdmo/configurator/_iframe.html diff --git a/jinja2/qfdmo/iframe_configurator/advanced.html b/jinja2/qfdmo/configurator/advanced.html similarity index 97% rename from jinja2/qfdmo/iframe_configurator/advanced.html rename to jinja2/qfdmo/configurator/advanced.html index c7cfbe54e..4b8778a50 100644 --- a/jinja2/qfdmo/iframe_configurator/advanced.html +++ b/jinja2/qfdmo/configurator/advanced.html @@ -109,6 +109,9 @@

    Configurateur d'Iframe

    - {% include "qfdmo/iframe_configurator/_iframe.html"%} + {% include "qfdmo/configurator/_iframe.html"%}
    {% endblock content %} + + +{% block js %}{% endblock js %} diff --git a/jinja2/qfdmo/iframe_configurator/base.html b/jinja2/qfdmo/configurator/base.html similarity index 98% rename from jinja2/qfdmo/iframe_configurator/base.html rename to jinja2/qfdmo/configurator/base.html index 6e4b02fc3..45290e392 100644 --- a/jinja2/qfdmo/iframe_configurator/base.html +++ b/jinja2/qfdmo/configurator/base.html @@ -72,3 +72,5 @@

    Prévisualisation

    {% endif %}
    {% endblock content %} + +{% block js %}{% endblock js %} diff --git a/jinja2/qfdmo/formulaire.html b/jinja2/qfdmo/formulaire.html index c33b91081..35341cb9f 100644 --- a/jinja2/qfdmo/formulaire.html +++ b/jinja2/qfdmo/formulaire.html @@ -1,41 +1,37 @@ -{% extends 'layout/base.html' %} +{% extends "qfdmo/shared/main.html" %} - {% block content %} - - {# Controleur général de gestion de la navigation et du formulaire #} +{% block header_classes %} +qfdmo-z-0 {# The header in Formulaire needs to be under the main tag #} +{% endblock header_classes %} -
    - {% include "qfdmo/partials/featureflip_inputs.html" %} - {# Ici on on a tout préfixé de iframe, mais en fait il aurait fallu préfixer de formulaire. Car la carte peut être dans une iframe, non ? #} - {# Panel «Filtres avancés» #} - {% include 'qfdmo/_addresses_partials/filters/iframe_advanced_filters.html' %} - {# Panel «Modifier ma recherche» #} - {% include 'qfdmo/_addresses_partials/iframe_back_to_form.html' %} - {# Panel «Formulaire de recherche» #} - {% include 'qfdmo/_addresses_partials/iframe_form.html' %} - {# Panel «Résultats de la recherche» #} - {% include 'qfdmo/carte/result.html' %} - {# Liens de pieds de page pour iframe #} - {% include 'qfdmo/_addresses_partials/iframe_footer_links.html' %} -
    -     +{% block form_header %} + {# Panel Filtres avancés et modifier ma recherche #} + {% include 'qfdmo/formulaire/header.html' %} +{% endblock form_header %} - {% include 'qfdmo/reparacteur_modale.html' %} - {% endblock %} +{% block form_modals %} + {# Panel «Formulaire de recherche» #} + {% include 'qfdmo/formulaire/search_form.html' %} + + {# Panel «Filtres avancés» #} + {% include 'qfdmo/formulaire/modals/advanced_filters.html' %} +{% endblock form_modals %} + +{% block content_footer %} +
    + + Proposer une adresse + +
    + + {# Liens de pieds de page pour iframe #} + {% include 'qfdmo/_addresses_partials/iframe_footer_links.html' %} +{% endblock content_footer %} diff --git a/jinja2/qfdmo/formulaire/header.html b/jinja2/qfdmo/formulaire/header.html new file mode 100644 index 000000000..e4d040321 --- /dev/null +++ b/jinja2/qfdmo/formulaire/header.html @@ -0,0 +1,18 @@ +
    + {# Panel «Modifier ma recherche» #} + {% include 'qfdmo/formulaire/update_search.html' %} + +
    + {# Digital #} +
    + + {{ form.digital.label_tag() }} + + {{ form.digital }} +
    + +

    + Vos {% if form.digital.value() == "1" %}résultats{% else %}adresses{% endif %} {% if form.sous_categorie_objet.value() %}pour «{{ form.sous_categorie_objet.value() }}»{% endif %} : +

    +
    +
    diff --git a/jinja2/qfdmo/formulaire/modals/advanced_filters.html b/jinja2/qfdmo/formulaire/modals/advanced_filters.html new file mode 100644 index 000000000..d176efe71 --- /dev/null +++ b/jinja2/qfdmo/formulaire/modals/advanced_filters.html @@ -0,0 +1 @@ +{% extends 'qfdmo/_addresses_partials/filters/panel_filters.html' %} diff --git a/jinja2/qfdmo/_addresses_partials/iframe_form.html b/jinja2/qfdmo/formulaire/search_form.html similarity index 83% rename from jinja2/qfdmo/_addresses_partials/iframe_form.html rename to jinja2/qfdmo/formulaire/search_form.html index 2d951c80e..3d4d30e98 100644 --- a/jinja2/qfdmo/_addresses_partials/iframe_form.html +++ b/jinja2/qfdmo/formulaire/search_form.html @@ -1,15 +1,17 @@ {# Panel «Formulaire de recherche» #} -
    -

    Longue vie aux objets

    - -
    - -
    +

    Longue vie aux objets

    +
    +
    {# TODO: REFACTO OVERFLOW : supprimer les overflow et le padding left #} -
    +
    {# Direction #}
    @@ -40,8 +42,8 @@

    Longue vie aux objets

    {% endwith %}
    -
    +
    {# Advanced filters #}
    +