[Résolu] indentation des commentaires sur smartphone

cyrille · avril 2016

Forcément comme ça ne fait jamais dans la demi mesure chez moi, on peut arriver à des articles qui vont passer le cap des 40 commentaires. On vient de m'envoyer la capture ci-dessous. Il serait peut être judicieux de couper l'indentation quand on a basculé vers les basses définitions.

kowalsky · avril 2016

Pas nécessairement couper l'identation mais plutôt faire en sorte que l'affichage des commentaires ne se décale pas à chaque fois sur la droite.

Il suffit pour cela de modifier ton fichier theme.css et rajouter le code suivant vers les lignes 150-170 par exemple, pour supprimer le margin-left via un media query adapté pour un affichage en basse résolution :

[== CSS ==]
@media (max-width: 768px) {
.level-1, .level-2, .level-3, .level-4, .level-5, .level-max { margin-left: 0;}
}

Et c'est là que l'on se rend compte que la numérotation actuelle des commentaires évoquée quelques temps auparavant sur ce forum n'en facilite pas la lecture. J'dis ça comme ça même si cela n'avait pas eu l'air de chagriner grand monde précédemment.

Éventuellement mettre 5px à la place de 0 redonnera un semblant d'identation avec un effet minime pour un affichage smartphone.

cyrille · avril 2016

l'indentation en 1920x1080 ne pose aucun problème, sur un tout petit écran c'est autre chose.

Stéphane · avril 2016

Le code donné par kowalsky n'est appliqué que pour une petite résolution (en dessous de 768px)
A ajouter dans le fichier css de son theme

@media (max-width: 768px)

C'est un ajout qui sera fait dans le theme par la suite. C'est pris en compte:
https://github.com/pluxml/PluXml/issues/172

cyrille · avril 2016

je le colle où Stéphane ? N'importe où ?

Stéphane · avril 2016

@cyrille: à la fin du fichier theme.css

cyrille · avril 2016

ok.

Sans rapport, tu as pu voir le mail que je t'ai envoyé quant à des commentaires issus de l'administration qui n'apparaissaient pas sur la page d'accueil ?

kowalsky · avril 2016

Afin d'optimiser l'affichage des commentaires pour les petites résolutions en gardant l'indentation, une autre alternative serait de faire disparaitre l'image de gauche en background, permettant ainsi de gagner 4rem sur la largeur d'affichage. Gain qui permet de réintroduire un petit décalage latéral facilitant la lecture des commentaires indentés :

[== CSS ==]
@media (max-width: 768px) {
  .comment { background-image: none; padding-left: 0; }
  .level-1 { margin-left: 10px; }
  .level-2 { margin-left: 20px; }
  .level-3 { margin-left: 30px; }
  .level-4 { margin-left: 40px; }
  .level-5, .level-max { margin-left: 50px; }
}

ou la même chose avec des unités relatives si on préfère :

[== CSS ==]
@media (max-width: 768px) {
  .comment { background-image: none; padding-left: 0; }
  .level-1 { margin-left: 1em; }
  .level-2 { margin-left: 2em; }
  .level-3 { margin-left: 3em; }
  .level-4 { margin-left: 4em; }
  .level-5, .level-max { margin-left: 5em; }
}

Stéphane · janvier 2017

@kowalsky: j'ai pris en compte ton code pour l'ajouter au theme par défaut. merci

[Résolu] indentation des commentaires sur smartphone

Réponses