Project

General

Profile

Development #57950

Thème pour l'Eure-et-Loir (CD28), ajout d'icône par catégorie

Added by Brice Mallet about 1 month ago. Updated about 1 month ago.

Status:
Solution déployée
Priority:
Normal
Assignee:
Target version:
-
Start date:
18 Oct 2021
Due date:
% Done:

0%

Estimated time:
Patch proposed:
Yes
Planning:
No

Description

Le CD28 souhaite maintenant associer des pictos comme icône (à gauche sur la même ligne que le titre) à chaque catégorie, à l'exemple de https://mesdemarches.fontenay-sous-bois.fr/ (les hexagones rouges).


Files


Related issues

Related to Intégrations graphiques Publik - Development #54143: Thème pour l'Eure-et-Loir (CD28)Solution déployée20 May 2021

Actions

Associated revisions

Revision 5624804f (diff)
Added by Nicolas Roche about 1 month ago

eurelien-cd28: add picto on wcs-forms-of-category-cell (#57950)

Revision 24f0026b (diff)
Added by Nicolas Roche about 1 month ago

eurelien-cd28: remove forms borders on forms category cell (#57950)

History

#1

Updated by Brice Mallet about 1 month ago

  • Tracker changed from Support to Development
#3

Updated by Brice Mallet about 1 month ago

#5

Updated by Nicolas Roche about 1 month ago

Question concernant Fontenay :

La gestion des photographies et pictogrammes se fait depuis https://mesdemarches-fsb.test.entrouvert.org/manage/assets/

https://dev.entrouvert.org/issues/24615#note-28
Dans le thème de Fontenay
https://git.entrouvert.org/publik-base-theme.git/tree/templates/variants/fontenay-sous-bois-2018/combo/wcs/forms_of_category.html
on utilise la balise asset_url qui accède aux ressources.
https://git.entrouvert.org/combo.git/tree/combo/apps/assets/templatetags/assets.py#n28
Où sont créés les resources logo et picture ?

#6

Updated by Thomas Jund about 1 month ago

fontenay sous bois a 2 images par cellules : une phototgraphie et une icone. Il y a donc besoin sur ce theme de créer une ressource supplementaire.
Pour ton besoin, le core a déjà tout ce qu'il faut.
Pour positionner l'image de la cellule à côté du titre, plusieurs thèmes le font.
Tu peux t'inspirer du css de clermont-ici par exemple https://git.entrouvert.org/publik-base-theme.git/tree/static/clermont-ici/_custom.scss#n314

        // Picture position
        &.has-asset-picture {
            > div {
                display: flex;
                flex-wrap: wrap;
                align-items: baseline;

                > * {
                    flex: 0 0 100%;
                }

                > h2:first-child {
                    flex: 1 0 50%;
                    margin-left: -1 * ($image-width + 1);

                }

                > picture {
                    display: block;
                    order: -1;
                    flex: 0 0 $image-width;
                    align-self: center;
                    margin-left: 1rem;
                    position: relative;
                    z-index: 1;

                    img {
                        padding: 0;
                    }
                }
            }
        }

le taille de l'icon est géré par `$image-width`.

Çe répond à ton questionnement ?

#7

Updated by Frédéric Péters about 1 month ago

Il y a

  "WCS_CATEGORY_ASSET_SLOTS": {
    "picture": {
      "prefix": "Photographie" 
    },
    "logo": {
      "prefix": "Pictogramme" 
    }
  }

dans le $tenant/settings.json. (j'imagine cette intégration venant avant la possibilité de paramétrer ça dans le config.json).

#8

Updated by Nicolas Roche about 1 month ago

Merci pour l'aide.

0001
Pour simplifier j'ai copié le gabarit de Fontenay tel quel, et j'ai juste adapté le css pour :
  • garder les 30px sur le titre
  • décaler un peut l'image du bord et le titre de l'image

0002
Aussi, tant qu'à toucher à cette cellule, j'ai supprimé l'entre-filet qu'il y a entre 2 démarches dans la liste (parce que ça arrangeait Brice).

#9

Updated by Serghei Mihai about 1 month ago

  • Status changed from Solution proposée to En cours

Dans 0001 pourquoi ne pas avoir fait plutôt:

{% extends 'combo/wcs/forms_of_category.html' %}
{% load assets i18n static %}
{% block cell-header %}
<h2 style="background-image: url({% asset_url "wcs:category:picture:"|add:cell.category_reference size="65x65" %})"><span>{{ title }}</span></h2>
{% include "combo/asset_picture_fragment.html" %}
{% if description %}
<div class="intro">
{{ description|safe }}
</div>
{% endif %}
{% endblock %}

et ensuite placer l'image au dessus du titre avec: $cell-image-position: top;

#16

Updated by Serghei Mihai about 1 month ago

  • Status changed from Solution proposée to Solution validée

Vire i18n static de {% load assets ... %} et go.

#17

Updated by Nicolas Roche about 1 month ago

  • Status changed from Solution validée to Résolu (à déployer)
commit 24f0026b105c8dee04a08cee0939f525391a5bd4
Author: Nicolas ROCHE <nroche@entrouvert.com>
Date:   Thu Oct 21 10:22:49 2021 +0200

    eurelien-cd28: remove forms borders on forms category cell (#57950)

commit 5624804fef88c7be9e03f42122f7b40bde04452d
Author: Nicolas ROCHE <nroche@entrouvert.com>
Date:   Wed Oct 20 17:27:20 2021 +0200

    eurelien-cd28: add picto on wcs-forms-of-category-cell (#57950)

#18

Updated by Frédéric Péters about 1 month ago

  • Status changed from Résolu (à déployer) to Solution déployée

Also available in: Atom PDF