Project

General

Profile

Development #30700

nouvelle variante entrouvert

Added by Christophe Siraut 2 months ago. Updated 15 days ago.

Status:
Solution proposée
Priority:
Normal
Start date:
15 Feb 2019
Due date:
% Done:

0%

Patch proposed:
Yes
Planning:
No

Description

Pour l'intégration du site www.entrouvert.com, je suis parti de Clapotis-Les-Canards, voir diff attaché (pour éventuellement faciliter la relecture).

Ajouté notre logo, nécessite xstatic-lato, résultat dans la branche wip_entrouvert_com.

Screenshot-2019-2-26 Portail - Identité numérique(3).png View (209 KB) Christophe Siraut, 26 Feb 2019 06:01 PM

Screenshot-2019-2-26 Portail - Identité numérique(4).png View (196 KB) Christophe Siraut, 26 Feb 2019 06:01 PM

Screenshot-2019-2-26 Portail - Identité numérique(2).png View (214 KB) Christophe Siraut, 26 Feb 2019 06:01 PM

Screenshot-2019-2-26 Portail - Identité numérique(1).png View (199 KB) Christophe Siraut, 26 Feb 2019 06:01 PM

Screenshot-2019-2-26 Portail - Accueil(2).png View (145 KB) Christophe Siraut, 26 Feb 2019 06:10 PM

Screenshot-2019-2-26 Portail - Accueil(3).png View (122 KB) Christophe Siraut, 26 Feb 2019 06:11 PM

Screenshot-2019-3-1 Portail - Accueil(1).png View (130 KB) Christophe Siraut, 01 Mar 2019 06:03 PM

Screenshot-2019-3-1 Portail - Identité numérique(1).png View (211 KB) Christophe Siraut, 01 Mar 2019 06:03 PM

Screenshot-2019-3-1 Portail - Identité numérique.png View (207 KB) Christophe Siraut, 01 Mar 2019 06:03 PM

Screenshot-2019-3-1 Portail - Accueil.png View (163 KB) Christophe Siraut, 01 Mar 2019 06:03 PM

Screenshot-2019-3-12 Portail - Accueil.png View (167 KB) Christophe Siraut, 12 Mar 2019 03:57 PM

Screenshot-2019-3-13 Portail - Accueil.png View (176 KB) Christophe Siraut, 13 Mar 2019 06:04 PM

32055
32056
32057
32058
32059
32060
32186
32187
32188
32189
32550
32606

Related issues

Related to Intégrations graphiques Publik - Development #30737: ajout de la police Lato Solution déployée 18 Feb 2019

Associated revisions

Revision 7ed761d5 (diff)
Added by Christophe Siraut 2 months ago

add entrouvert variant (#30700)

Revision e136b166 (diff)
Added by Christophe Siraut 2 months ago

add entrouvert variant (#30700)

Revision f20c8c30 (diff)
Added by Christophe Siraut 2 months ago

add entrouvert variant (#30700)

Revision b0257702 (diff)
Added by Christophe Siraut 2 months ago

add entrouvert variant (#30700)

Revision 67489217 (diff)
Added by Christophe Siraut 2 months ago

add entrouvert variant (#30700)

Revision 2c8dda2f (diff)
Added by Christophe Siraut about 2 months ago

add entrouvert variant (#30700)

Revision d4be9ba3 (diff)
Added by Christophe Siraut about 1 month ago

add entrouvert variant (#30700)

History

#2 Updated by Christophe Siraut 2 months ago

  • File Capture d’écran du 2019-02-15 12-45-46.png added
  • File Capture d’écran du 2019-02-15 12-44-53.png added
  • File Capture d’écran du 2019-02-15 12-44-20.png added

Des captures d'écran.

#3 Updated by Christophe Siraut 2 months ago

  • Status changed from Nouveau to En cours

#4 Updated by Serghei Mihai 2 months ago

Je dirais qu'il n'y a pas besoin d'afficher les liens de connexion/inscription.

Tu peux avoir ça en mettant include_top_links: False dans le config.json.

#5 Updated by Frédéric Péters 2 months ago

Pour Lato, il y a des variantes supplémentaires à la police hairline/heavy; on aurait hairline 100, thin 200, light 300, et de l'autre côté heavy à 800. Attention nommage aussi, le fichier Italic doit être renommé en RegularItalic pour suivre la même forme. (aussi, ajouter mention dans le README).

#6 Updated by Christophe Siraut 2 months ago

  • Patch proposed changed from No to Yes
  • File 0001-add-Lato-font.patch added
  • Status changed from En cours to Solution proposée

Solution proposée, voir branche origin/wip_entrouvert_com.

#7 Updated by Frédéric Péters 2 months ago

+h1 {
+  font-family: Lato-Thin, sans-serif; }
+
+h2, h3 {
+  font-family: Lato-Light, sans-serif; }
+

Pour spécifier la graisse d'une police, on utilise plutôt font-weight; e.g. font-family: Lato; font-weight: 200;

La déclaration dans 0001 est en fait mauvaise :

+@mixin lato-font($type, $weight, $style: normal) {
+    @font-face {
+        font-family: 'Lato-#{$type}';

Il faut que ça soit font-family: Lato, pour toutes les graisses, genre :

    @font-face {
        font-family: 'Lato';
        src: url('#{$lato-font-path}/Lato-#{$type}.woff2') format('woff2'), etc.
        font-weight: $weight;
        font-style: $style;
    }

On indente les scss avec des tabulations, l'accolade fermante à la ligne.

(côté commentaires sur le rendu, je laisse la main)

#8 Updated by Pierre Cros 2 months ago

Les "boites" sont alignées verticalement sur la page d'accueil actuelle (c'est mieux mêmes si j'imagine bien que ça complique pas mal) et il y a le slider (mais ce dernier n'est sans doute pas lié au thème).

Pour les boites (page d'accueil) comme pour la colonne verticale (pages intérieures), je préférerai une délimitation plus marquée, comme celle du site actuel.

#9 Updated by Christophe Siraut 2 months ago

  • File deleted (Capture d’écran du 2019-02-15 12-45-46.png)

#10 Updated by Christophe Siraut 2 months ago

  • File deleted (Capture d’écran du 2019-02-15 12-44-53.png)

#11 Updated by Christophe Siraut 2 months ago

  • File deleted (Capture d’écran du 2019-02-15 12-44-20.png)

#12 Updated by Christophe Siraut 2 months ago

  • File Capture d’écran du 2019-02-18 12-28-14.png added
  • File Capture d’écran du 2019-02-18 12-36-58.png added
  • File Capture d’écran du 2019-02-18 12-31-59.png added
  • File Capture d’écran du 2019-02-18 12-29-42.png added
  • File Capture d’écran du 2019-02-18 12-28-54.png added
  • File Capture d’écran du 2019-02-18 12-22-24.png added

Corrigé la déclaration de la police, le formattage de style.scss, et l'alignement des boîtes.

Pour les boites (page d'accueil) comme pour la colonne verticale (pages intérieures), je préférerai une délimitation plus marquée, comme celle du site actuel.

Tenté de remettre des bords voir capture attachée, je ne suis pas convaincu, mais c'est comme vous voulez.

#13 Updated by Pierre Cros 2 months ago

  • File Capture-20190218131629-944x261.png added

C'est sûr qu'en l'état ce n'est pas convaincant, il n'y a pas de trait supérieur par exemple. Et le contraste entre les boites et la couleur de fond apportait aussi quelque chose sur l'ancien site.

Mais je ne sais pas à quel niveau de finitude on est, je ne sais pas si je dois pointer tous les manques par rapport au site original genre le menu supérieur qui est entre deux traits horizontaux avec des entrées séparées par des / (je suis pas irrémédiablement attaché à cette forme mais il faut une mise en forme plus marquée que l'actuelle, quand même).

Par ailleurs je me rends compte que j'avais parlé d'alignement vertical au lieu de parler d'alignement horizontal : sans cet alignement les boites ça va jamais aller j'en ai peur (capture jointe).

#14 Updated by Christophe Siraut 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 12-36-58.png)

#15 Updated by Christophe Siraut 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 12-28-54.png)

#16 Updated by Christophe Siraut 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 12-28-14.png)

#17 Updated by Christophe Siraut 2 months ago

  • File Capture d’écran du 2019-02-18 13-58-30.png added
  • File Capture d’écran du 2019-02-18 13-57-06.png added

il faut une mise en forme plus marquée que l'actuelle

Si comme pour le site actuel on veut le fond noir à bord perdu autour des boîtes de la première page ça demande d'avantage qu'une intégration basique. Sinon pour mettre des lignes, on peut partir de l'une des 2 options attachées. (j'imagine qu'on part sur le "mode jour")

Par ailleurs je me rends compte que j'avais parlé d'alignement vertical au lieu de parler d'alignement horizontal : sans cet alignement les boites ça va jamais aller j'en ai peur (capture jointe).

c'est noté (je ne sais pas encore comment aligner proprement la hauteur des boîtes de la première page sans définir une valeur absolue)

le menu supérieur qui est entre deux traits horizontaux avec des entrées séparées par des /

ok je peux reproduire ça.

(J'avais tenté une mise-en-page plus minimaliste que le site actuel, avec le texte plus en évidence, un peu comme un website épuré que tu pointais il n'y a pas longtemps, bref.)

#18 Updated by Christophe Siraut 2 months ago

  • Status changed from Solution proposée to En cours

#20 Updated by Christophe Siraut 2 months ago

#22 Updated by Christophe Siraut about 2 months ago

  • File Capture d’écran du 2019-02-25 16-41-31.png added
  • File Capture d’écran du 2019-02-25 16-44-14.png added
  • File Capture d’écran du 2019-02-25 16-44-01.png added
  • File Capture d’écran du 2019-02-25 16-40-19.png added

Nouvelles captures : j'ai ajouté des bordures et les autres éléments pour me rapprocher du site actuel; et en même temps on reste dans une intégration graphique simple (sans template propre).

#23 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-25 16-40-19.png)

#24 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-25 16-41-31.png)

#25 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-25 16-44-01.png)

#26 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-25 16-44-14.png)

#27 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 13-57-06.png)

#28 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 13-58-30.png)

#29 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture-20190218131629-944x261.png)

#30 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 12-22-24.png)

#31 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 12-29-42.png)

#32 Updated by Christophe Siraut about 2 months ago

  • File deleted (Capture d’écran du 2019-02-18 12-31-59.png)

#33 Updated by Christophe Siraut about 2 months ago

  • File deleted (clapotis-entrouvert.diff)

#34 Updated by Christophe Siraut about 2 months ago

  • File deleted (0001-add-Lato-font.patch)

#35 Updated by Christophe Siraut about 2 months ago

32055
32056
32057
32058

Sauf avis contraire je vais supprimer les pictos qui apparaissaient à côté des titres sur l'ancien site. Je trouve que ça ne rend pas bien (et dans une intégration simple varier les pictos associés aux titre impliquerait éventuellement d'ajouter un tag via l'édition en mode source de la cellule combo). Voici des captures avec et sans les pictos.

Un avis d'un CPF sur le rose en bas de page c'est pas trop criard? sinon je mets du gris triste.

D'autres questions et remarques?

Note: l'outil de capture de firefox buggue sur la bare de menu, qui dans ce cas-ci couvre le picto en question; mais vous aurez compris le principe avec les captures de pleine page.

#36 Updated by Christophe Siraut about 2 months ago

32059

Sur la première page je dois encore ajouter le carrousel.

#38 Updated by Frédéric Péters about 2 months ago

(pour garder un sens aux commentaires c'est bien de ne pas supprimer des éléments du ticket, captures/patchs/etc.)

Il y a des trucs notés dès le début, ex: "Je dirais qu'il n'y a pas besoin d'afficher les liens de connexion/inscription."; d'autres qui n'ont jamais été notées mais sont des différences évidentes, tu en parles, c'est criant, faut éviter, pas de ce rose pour le pied de page (ni dans les titres). (autre utilisation de couleur dans la navigation, à zapper aussi je trouve, le rose doit juste parfois apparaitre, pour ponctuer, comme les puces au-dessus des titres dans le site actuel).

Il reste aussi en premier lieu important de s'attacher à la page d'accueil, qui doit rester agrémentées de pictos, qui doit avoir un carrousel, qui doit avoir la liste des références tirées depuis barbacompta (ce qui impose que oui, il doit y avoir des gabarits spécifiques).

(et donc, à parler de gabarits spécifiques, c'est aussi nécessaire pour les liens contact/faq/réseau qu'on a actuellement, et super ça donnera l'occasion de gérer une section "fond sombre" sur l'accueil).

#40 Updated by Christophe Siraut about 2 months ago

32186
32187
32188
32189

Je dirais qu'il n'y a pas besoin d'afficher les liens de connexion/inscription.

Tu peux avoir ça en mettant include_top_links: False dans le config.json.

Je dois louper quelque chose, ça ne fonctionne pas pour moi.

Captures attachées; pas réussi à terminer, reste au moins le carrousel et les colonnes dans la cellule actualités.

Poussé les changements dans la branche wip_entrouvert_com (pas de souci pour garder ça en dehors de publik-base-theme).

#41 Updated by Frédéric Péters about 2 months ago

Je dois louper quelque chose, ça ne fonctionne pas pour moi.

make themes.json peut-être.

Poussé les changements dans la branche wip_entrouvert_com (pas de souci pour garder ça en dehors de publik-base-theme).

Sauf que l'intégration a été créée pour en dépendre. (mais comme je le notais, ça aurait juste été un choix perso).

#42 Updated by Christophe Siraut about 1 month ago

32550

Avec les carrousels. L'ensemble me semble désormais ok (excepté les liens vers /manage qui sont toujours présents). Le code est dans la branche wip/30700-nouvelle-variante-entrouvert.

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

Dans mes points notés plus haut :

(et donc, à parler de gabarits spécifiques, c'est aussi nécessaire pour les liens contact/faq/réseau qu'on a actuellement, et super ça donnera l'occasion de gérer une section "fond sombre" sur l'accueil).

#44 Updated by Benjamin Dauvergne about 1 month ago

Christophe Siraut a écrit :

Avec les carrousels. L'ensemble me semble désormais ok (excepté les liens vers /manage qui sont toujours présents). Le code est dans la branche wip/30700-nouvelle-variante-entrouvert.

C'est normal qu'on ait perdu le fond gris foncé pour le corps puis gris clair pour le pied ainsi que les espacement entre les blocs du corps ? Je compare juste à https://www.entrouvert.com/ actuel.

#45 Updated by Christophe Siraut about 1 month ago

C'est normal qu'on ait perdu le fond gris foncé pour le corps puis gris clair pour le pied ainsi que les espacement entre les blocs du corps ? Je compare juste à https://www.entrouvert.com/ actuel.

J'avais pris des libertés, (en me disant qu'une intégration basique ne pouvait pas reproduire l'original, et que ce dernier pouvait être amélioré), c'était peut-être une mauvaise idée, je vais recoller à l'original pour la structure avec les gris en fond de page, et ajouter les liens spécifiques en haut à droite. Voulez-vous aussi garder la police de carractère et la taille des polices, (et garder l'espacement entre les blocs, etc)?

#48 Updated by Christophe Siraut about 1 month ago

32606

Avec les fonds de couleur et les liens Libre Entreprise.

#49 Updated by Christophe Siraut 30 days ago

  • Status changed from En cours to Solution proposée

#50 Updated by Christophe Siraut 30 days ago

  • Assignee set to Christophe Siraut

#51 Updated by Pierre Cros 21 days ago

Pour moi ça pourrait être mis sur www2.entrouvert.com jeudi prochain lors de la mise à jour.

Mais Fred alertait sur la partie référence issue de barba, je pense pas qu'elle soit traitée ici (et ça ne doit pas empêcher de mettre ça sur www2.entrouvert.com).

Also available in: Atom PDF