search

entrepreneur-interet-general / CIS-front

Site public du carrefour des innovations sociales
http://carrefourdesinnovationssociales.fr/
MIT License
7 stars 5 forks source link

Lissage UI / Home page #147

Closed Eliselalique closed 5 years ago

Eliselalique commented 6 years ago

Lié à l'issue #146

capture d ecran 2018-11-22 a 11 55 03
DavidBruant commented 5 years ago

Barre de recherche: Pas le bon picto loupe

@Eliselalique Dans le dossier des icones, je trouve une icone de la bonne forme, mais pas de la bonne couleur

Eliselalique commented 5 years ago

Ah pardon je pensais que tu pouvais changer les couleurs le mieux pour toi c'est que je fasse un dossier avec la bonne couleur ?$

Le mar. 22 janv. 2019 à 18:13, David Bruant notifications@github.com a écrit :

Barre de recherche: Pas le bon picto loupe

@Eliselalique https://github.com/Eliselalique Dans le dossier des icones, je trouve une icone de la bonne forme, mais pas de la bonne couleur

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/entrepreneur-interet-general/CIS-front/issues/147#issuecomment-456482389, or mute the thread https://github.com/notifications/unsubscribe-auth/AilOMv8FK_f84TOCb9zVG0_CX3k4IkWzks5vF0a8gaJpZM4Ytkk5 .

-- Elise Lalique

DavidBruant commented 5 years ago

Ah pardon je pensais que tu pouvais changer les couleurs

pas avec les images (enfin sauf si je modifie l'image directement, évidemment)

le mieux pour toi c'est que je fasse un dossier avec la bonne couleur ?

Dans le même dossier, c'est cool, merci :-)

J'ai remarqué que toutes les icones sont à la fois en SVG et en PNG. Est-ce qu'il y a une raison à ça ? De mon côté, les versions SVG suffisent. Si tu n'as pas de raison d'avoir les PNG dans ce dossier, je propose qu'on les enlève (je peux le faire, c'est rapide pour moi)

Eliselalique commented 5 years ago

Yes, comme je savais pas quelle format était préconisé, j'ai mis les deux :) Tu peux supprimer le PNG si il est inutile.

Mais du coup, je ne comprend pas si c'est le SVG que tu utilises, comme c'est un format vectoriel c'est possible de modifier les couleurs ? (je peux exporter avec la bonne couleur c'est pas un soucis pour moi c'est rapide, c'est juste pour etre sur de bien comprendre :))

Le mar. 22 janv. 2019 à 18:28, David Bruant notifications@github.com a écrit :

Ah pardon je pensais que tu pouvais changer les couleurs

pas avec les images (enfin sauf si je modifie l'image directement, évidemment)

le mieux pour toi c'est que je fasse un dossier avec la bonne couleur ?

Dans le même dossier, c'est cool, merci :-)

J'ai remarqué que toutes les icones sont à la fois en SVG et en PNG. Est-ce qu'il y a une raison à ça ? De mon côté, les versions SVG suffisent. Si tu n'as pas de raison d'avoir les PNG dans ce dossier, je propose qu'on les enlève (je peux le faire, c'est rapide pour moi)

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/entrepreneur-interet-general/CIS-front/issues/147#issuecomment-456487911, or mute the thread https://github.com/notifications/unsubscribe-auth/AilOMuYDuzYVna_6_tWrheapEl0Ltjdcks5vF0pJgaJpZM4Ytkk5 .

-- Elise Lalique

DavidBruant commented 5 years ago

Tu peux supprimer le PNG si il est inutile.

oki

Mais du coup, je ne comprend pas si c'est le SVG que tu utilises, comme c'est un format vectoriel c'est possible de modifier les couleurs ?

Oui, mais c'est pas facile. Pour afficher un SVG sur l'écran, y'a ces stratégies-là:

  1. dans le HTML : <img src="loupe.svg">
  2. dans le CSS : background-image: url(loupe.svg)
  3. dans le HTML inliné : 
    <div>
<svg>
    <!-- les éléments SVG qui composent la loupe ici -->
</svg>
</div>
  4. en JavaScript
    • récupérer le svg dynamiquement
    • le rentrer dans le HTML dynamiquement
  5. Créer une font custom à partir du SVG

Pour 1. et 2., il n'est pas possible de customiser le SVG qui se charge comme n'importe quelle image sur laquelle on n'a aucun contrôle à part sa taille

Pour 3., on peut ensuite appliquer du CSS, mais ça demande d'inliner le SVG, soit en faisant un copier-coller (relou si l'icone change), soit en mettant un place une automatisation de l'inlining. Ca se fait peut-être déjà tout seul côté serveur avec les templates Jinja, mais c'est pas évident côté client. Après recherche, c'est possible, mais ça demande un peu de travail

Pour 4, on peut customiser l'icone, mais on perd en rapidité sur l'interface

Pour 5, on peut customiser, mais il faut se taper le travail de créer la font (et payer le prix de charger toutes les icônes sur toutes les pages... sauf si on créé plusieurs font d'icones... blah..)

Au final, y'a 3. qui fonctionnerait, mais qui demande quand même un peu de travail. Je propose qu'on en repapote s'il devient nécessaire de modifier régulièrement des icones ou beaucoup d'un coup

DavidBruant commented 5 years ago

Barre de recherche

J'ai "fini" les points mentionnés (modulo l'icone), mais je me pose des questions sur les espacements, les alignements. J'ai du mal à déterminer ce qui est intentionnel et ce qui ne l'est pas\ Je pousserai en prod, mais il sera ptèt utile qu'on se refasse un point sur ce sujet

Eliselalique commented 5 years ago

Pas de soucis, quand tu veux pour le point

Je suis en train d'uploader toutes les icônes en gris / violet / blanc pour pouvoir les intégrer plus facilement !

Le mer. 23 janv. 2019 à 10:58, David Bruant notifications@github.com a écrit :

Barre de recherche

J'ai "fini" les points mentionnés (modulo l'icone), mais je me pose des questions sur les espacements, les alignements. J'ai du mal à déterminer ce qui est intentionnel et ce qui ne l'est pas Je pousserai en prod, mais il sera ptèt utile qu'on se refasse un point sur ce sujet

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/entrepreneur-interet-general/CIS-front/issues/147#issuecomment-456740457, or mute the thread https://github.com/notifications/unsubscribe-auth/AilOMugyX2ZdO5P1RvhYcHKkmCxHP36Cks5vGDJRgaJpZM4Ytkk5 .

-- Elise Lalique

DavidBruant commented 5 years ago

Pas la bonne couleur de gris de fond : la bonne couleur est #F6F6F6

Tu faisais référence à quel élément ici ? (est-ce que c'est déjà fait actuellement ?)

DavidBruant commented 5 years ago

Dans le dossier des icones, beaucoup d'icones sont en double. Certaines avec le prefix icon_, d'autres avec le prefix pictogrammes_icon. Y'a une raison ? (pareil, c'est facile pour moi de supprimer un groupe d'icone si utile (pour supprimer les png, j'ai juste eu à taper rm *.png dans un terminal :-) ))

DavidBruant commented 5 years ago

J'ai déployé en prod @Eliselalique je t'invite à réouvrir cette issue pendant ce sprint si quelque chose ne te semble pas correct sur la homepage

Eliselalique commented 5 years ago

Ok je veux bien que tu supprimes tout ceux en .png et et ceux qui commencent pas pictogramme, on y verra plus clair ! Quand ce sera fait j'uploaderai tous les icones en variation de couleur ! merci :)

Le mer. 23 janv. 2019 à 11:20, David Bruant notifications@github.com a écrit :

Dans le dossier des icones, beaucoup d'icones sont en double. Certaines avec le prefix icon_, d'autres avec le prefix pictogrammes_icon. Y'a une raison ? (pareil, c'est facile pour moi de supprimer un groupe d'icone si utile (pour supprimer les png, j'ai juste eu à taper rm *.png dans un terminal :-) ))

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/entrepreneur-interet-general/CIS-front/issues/147#issuecomment-456747404, or mute the thread https://github.com/notifications/unsubscribe-auth/AilOMtjUQou-fMUO8QVXG3fQM8TD5gJZks5vGDdugaJpZM4Ytkk5 .

-- Elise Lalique

DavidBruant commented 5 years ago

Après discussion avec @Eliselalique :