Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Design news redaction #242

Open
wants to merge 54 commits into
base: master
from

Conversation

Projects
None yet
3 participants
@Trim
Copy link
Contributor

commented Jun 8, 2019

A lot have been modified for the new redaction space.

See in French: https://linuxfr.org/users/trim/journaux/nouveau-design-pour-l-espace-de-redaction

Trim added some commits May 29, 2019

edition_in_place: fix to be able to send file
Ajax queries can only send files with the FormData API (it allows
JavaScript to access file on disk).

To be able to correctly use FormData, jQuery ajax() method has to set
`processData` and `contentType` to `false`.
Otherwise, the request isn't sent as an ajax call.
redaction/news: add a sidebar on the left and move in it Toc, Links a…
…nd Buttons

Keep a clean style for both sidebar and be a little more closer to the
proposed design.
models/news: add figure to model (image, alternative text and caption)
As the image is binary data, we don't do versioning fo these fields.
uploader: news_figure_image uses now resize_to_limit which is more na…
…tural processing

Remove default image as it was the one for avatars.
chat_n_edit: remove inline CSS to use a class
redaction: use arrow-left icon from feather-icons which is lighter
adjust space between top bars and title
redaction/news: update design of middle part to well integrate figure
Note: avoid use of `unset` in CSS to be compatible with IE
@Trim

This comment has been minimized.

Copy link
Contributor Author

commented Jun 15, 2019

Voilà, j'ai eu le temps d'adapter le code pour les suggestions proposées.

Il reste la question des écrans 4K et de la base de donnée.

Pour les écrans 4K, je vois dans le lien Wikipédia, que les écrans vont jusqu'à 4096 pixels.
On pourrait donc générer une image avec un facteur multiplicateur de 10 en plus (pour avoir 3000 pixel de large).

Comme il n'y a pas d'autres tailles entre deux, il suffit peut être d'ajouter cette taille ?
Il vaut mieux y penser maintenant avant de publier les premières images :)

@Trim

This comment has been minimized.

Copy link
Contributor Author

commented Jun 17, 2019

Hier, j'ai fait quelques essais pour la 4K et je me suis rendu compte avec ce format que le rapport 3:1 est assez limitant.

@mjourdan pour les images d'illustration, quelle est l'idée pour le format ? Faut-il forcer l'image à être au format 3:1 ou est-ce que le plus important est d'avoir l'image en toute largeur de l'article ?

Je me demande s'il faut forcer une hauteur particulière pour forcer le rapport quitte à rogner et centrer automatiquement l'image ?

@mjourdan

This comment has been minimized.

Copy link

commented Jun 17, 2019

@Trim, je dirais qu'il y a différents cas :

  1. sur la liste des articles, les articles disposant d'une (petite) illustration
  2. sur la liste des articles, les articles mis à l'honneur avec une illustration sur toute la largeur
  3. au sein d'un article, l'illustration principale (qui lorsqu'elle existe est réutilisée pour les cas 1 et 2)
  4. au sein d'un article, des illustrations secondaires

Tel que je le vois, pour faire simple :

  • pour 1 et 2, il s'agirait de forcer hauteur et largueur, ce qui impliquerait inévitablement de rogner et centrer.
  • pour 3 et 4, il s'agirait plutôt de respecter la largeur de l'article tout en conservant le ratio d'origine de l'image.

Tout ça serait pour l'espace de rédaction, mais ne marcherait pas différement pour les articles déjà publiés.

@Trim

This comment has been minimized.

Copy link
Contributor Author

commented Jun 18, 2019

Merci, j'ai regardé à nouveau l'expérimentation 5 et effectivement, j'avais oublié les petites illustrations.

Je vais donc ajuster le code pour ajouter les versions "épinglées" et les petites illustrations.

@mjourdan

This comment has been minimized.

Copy link

commented Jun 20, 2019

En attendant que je prenne le temps de tester, voici une revue sur la base des captures d'écran figurant dans le journal…

Colonne principale :

  • pour améliorer la lisibilité et rendre évidente la structuration en trois colonnes, l'espace devrait figurer entre ces colonnes plutôt que sur les bords de la page
  • la mise en forme du chapeau devrait différer de celle du corps de texte
  • la mise en forme du texte dans le cadre d'image devrait différer de celle du corps de texte
  • lorsqu'une image a été insérée, les boutons devraient continuer d'apparaître dans le cadre, plutôt que sous l'image
  • l'icône ciseaux et sa description dans la section aide ne me semblent pas clairs du tout. Le chapeau doit pouvoir être édité totalement séparément de l'article, et en l'absence de chapeau les 200 (admettons) premiers caractères seront réutilisés sur la liste des articles

Colonnes adjacentes :

  • la proxymité des boutons pour effacer la dépêche ou la publier est susceptibles d'entraîner des accidents
  • marquer la dépêche comme urgente ne doit pouvoir se faire que lors de la soumission à modération
  • marquer la dépêche comme urgente doit pouvoir se faire via une case à cocher plutôt que via un bouton d'action
  • le bouton « réorganiser » aurait peut-être plus de sens dans la section « sommaire »
  • dans les colonnes, les boutons devraient tous faire la même largeur
  • dans la tribune, pour faciliter la lecture, le texte ne devrait pas dépasser sous l'avatar
  • l'ensemble des tribunes (celle qu'on peut voir depuis l'accueil, celle de l'espace de rédaction, celle de l'article) devrait s'utiliser de la même manière, et partager le même code, donc afficher les avatars

Trim added some commits Jun 20, 2019

news: display main figure with right set of image according to displa…
…y context

Also, remove section figure to avoid too many image on news rendering
(see new design)
home: exclude node which is on_ppp to avoid display on top and in col…
…lection

When the node is on_ppp, we now do a really different display with the
figure linked to it.

So to ensure consistency of the nodes in collection, we exclude it from there.
node_helper: add (main) figure for nodes and add css class to disting…
…uish

display on collection and display single node
@Trim

This comment has been minimized.

Copy link
Contributor Author

commented Jun 20, 2019

Les commits que je viens de faire sont fait pour ajouter la prise en charge des écrans 4K et l'ajout des "petites illustrations" sur la page d'accueil. J'ai enlevé l'affichage des sections pour les dépêches pour réduire le nombre d'informations affichées.

Accueil avec thumb

Merci pour les retours sur l'espace de rédaction, je viens de les voir :)

Trim added some commits Jun 20, 2019

tribune: redesign _large with avatars
- avatar is now left alone on the left, without text below
- posts aren't any more collapsed
- posts have neither background nor border
- the text area has now a send button attached to it
@Trim

This comment has been minimized.

Copy link
Contributor Author

commented Jun 20, 2019

Avec ces commits, j'ai retravaillé l'apparance de la tribune pour se rapprocher du wireframe pour l'espace de rédaction (c'est déjà le même code qui est utilisé pour l'accueil de l'espace de rédaction).

J'ai aussi élargi la surface pour le template à 3 colonnes et déplacer le bouton "Réorganiser".

Pour les autres boutons, je les ai placés à gauche pour faire simple en attendant de développer complètement le workflow que tu proposes (il n'y a pas de système de popup pour la création puis l'envoi de l'article). Pour le bouton supprimer, il y a une alerte JavaScript qui demande de confirmer avant de continuer et il n'apparaît que pour l'auteur de la dépêche.

Voilà un nouvel aperçu:

espace rédaction

Pour le chapeau et l'image, c'est une bonne idée de faire changer l'apparence des textes. Je vais m'y mettre ce weekend je pense.

@Trim

This comment has been minimized.

Copy link
Contributor Author

commented Jun 23, 2019

* l'icône ciseaux et sa description dans la section aide ne me semblent pas clairs du tout. Le chapeau doit pouvoir être édité totalement séparément de l'article, et en l'absence de chapeau les 200 (admettons) premiers caractères seront réutilisés sur la liste des articles

Avant que j'inclue l'image de présentation, ce qui séparait la première partie (le chapeau) de la seconde, c'était les liens et le sommaire. Avec la nouvelle présentation, c'est vrai qu'il n'est pas claire que la partie avant l'image doit être juste la partie courte et la partie après l'image le corps complet de l'article.

Pour info, le chapeau ne peut actuellement pas être vide, mais il n'est pas limité en taille. Notre équipe de modération fait donc un beau travail, car je n'ai jamais vu d'abus sur la longueur du chapeau :)

Donc, pour reprendre la discussion sur la séparation chapeau - image et corp principale, je te propose un rendu dans ce style:

Nouvelle dépêche à rédiger

Comme je n'ai pas spécialement de talent d'illustrateur, j'ai utilisé l'image de la section "LinuxFr.org" pour illustrer l'ajout d'image.

Est-ce que cette illustration te semble bien ? Ce n'est que sur mon poste en local pour l'instant.

Moi ça me plaît et je pense que l'on peut enlever la fonctionnalité du "ciseau sur la gauche" grâce à ça 👍

@mjourdan

This comment has been minimized.

Copy link

commented Jun 24, 2019

Ça rend bien mieux avec les changements ! Il faudrait aligner le chapeau avec le titre, pour éviter une lecture avec des débuts de ligne en zigzag. Par contre ça vaut effectivement le coup d'avoir un texte un peu moins large que le cadre d'image, comme ici (c'est vrai que c'est un changement que je n'avais pas répercuté sur toutes les maquettes). Pour l'illustration, l'icône « image » (en 64 x 64 ?) de Feather serait plus adaptée. Du côté du corps d'article, ça serait intéressant de faire figurer un titre de niveau 1 (voire aussi un titre de niveau 2), pour l'exemple.

@Trim

This comment has been minimized.

Copy link
Contributor Author

commented Jun 25, 2019

Chouette, merci pour ces explications :) J'ai travaillé avec le wireframe de l'espace de rédaction, mais je n'ai pas pensé du tout que je pouvais appliquer à peu près le même style que celui prévu pour la publication finale.

Voilà donc à quoi va ressembler l'espace de rédaction:

L'espace ajusté

Je pense que pour cette itération, il faut s'arrêter ici et déjà proposer tous ces nouveaux changements. Bien que ce n'est pas encore proche du design final, la série de commit est déjà longue :)

@mjourdan

This comment has been minimized.

Copy link

commented Jun 26, 2019

J'avoue c'est bien velu comme série de changements =D

Pour info, j'ai màj le cadre d'image sur les wireframes.

Avant d'envoyer les changements en test, des questions restent pour moi en suspens :

  • comment peut-on changer le titre, la catégorie, la licence ou les tags ?
  • marquer une dépêche comme urgente a-t-il une quelconque utilité à part demander gentiment aux modos de bien vouloir lire celle-ci en priorité ?

Voilà ce qu'il faudrait corriger ou changer àmha sur la page de rédaction :

  • en fonction de la réponse précédente, il peut être souhaitable de marquer la dépêche comme urgente via une case à cocher, dont l'état sera soumis lors du clic sur « Soumettre ». En gros c'est donc toute la section « publication » qui serait réservée à l'auteur
  • faire apparaître le bouton « Effacer la dépêche » suivi d'un séparateur, avant la case d'urgence et le bouton soumettre, pour mettre en évidence le lien entre « marquer comme » et « soumettre »
  • le titre et le chapeau de l'article devraient être alignés à gauche, pour être (relativement…) cohérent avec le rendu une fois l'article publié
  • dans la colonne de gauche, tous les boutons devraient avoir la même largeur et disposer d'au moins 8 px d'espace vertical, pour rendre le parcours de la page plus agréable
  • la section sommaire devrait faire figurer les titres de niveau 1 et 2, y compris dès la création de la dépêche, pour mettre en évidence le lien entre cette zone et le contenu de la page
  • le champ de saisie de la tribune devrait contenir l'indication (grisée) « Écrire un message… », pour qu'on sache de quoi il retourne
  • dans la cadre d'image, le gris qu'il y avait dans l'ancien wireframe est un poil oppressant et on a pas encore statué sur une nouvelle charte graphique… Même si ça respire pas encore la joie de vivre, #e0e0e0 serait plus léger et cohérent avec le survol des paragraphes modifiables

Sur la page d'accueil :

  • retirer la licence liée aux illustrations. Cliquer sur le miniature ouvre l'article avec l'illustration en grand format et faire figurer la licence ici semble suffisant
  • aligner l'image avec le haut du titre, notamment pour éviter les blancs lorsque le chapeau est court
  • retirer les informations d'édition, de modération, et de licence, pour la même raison qu'on a retiré les sections (sauf si tu veux garder ça pour une prochaine série)
@nono

This comment has been minimized.

Copy link
Member

commented Jun 27, 2019

marquer une dépêche comme urgente a-t-il une quelconque utilité à part demander gentiment aux modos de bien vouloir lire celle-ci en priorité ?

Ça ne sert que pour ça. Les modérateurs voient que la dépêche est urgente et vont essayer de la traiter en priorité.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.