PluXml.org

Blog ou CMS à l'Xml

Vous n'êtes pas identifié(e).

#1 23/04/2016 21:46:52

cyrille
Membre
Lieu : Saint Pierre La Mer
Inscription : 30/11/2010
Messages : 159
Site Web

[Résolu] indentation des commentaires sur smartphone

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.

Screenshot_2016_04_23_21_35_42.png

Dernière modification par cyrille (24/04/2016 18:41:06)

Hors ligne

#2 23/04/2016 23:23:36

kowalsky
Membre
Inscription : 20/08/2015
Messages : 292
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

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. wink

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.

Dernière modification par kowalsky (23/04/2016 23:31:25)

Hors ligne

#3 24/04/2016 07:04:16

cyrille
Membre
Lieu : Saint Pierre La Mer
Inscription : 30/11/2010
Messages : 159
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

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

Hors ligne

#4 24/04/2016 07:54:20

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 203
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#5 24/04/2016 08:33:46

cyrille
Membre
Lieu : Saint Pierre La Mer
Inscription : 30/11/2010
Messages : 159
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

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

Hors ligne

#6 24/04/2016 09:02:07

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 203
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

@cyrille: à la fin du fichier theme.css


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

#7 24/04/2016 10:15:48

cyrille
Membre
Lieu : Saint Pierre La Mer
Inscription : 30/11/2010
Messages : 159
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

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 ?

Hors ligne

#8 24/04/2016 23:51:39

kowalsky
Membre
Inscription : 20/08/2015
Messages : 292
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

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; }
}

Dernière modification par kowalsky (24/04/2016 23:53:07)

Hors ligne

#9 10/01/2017 14:41:15

Stéphane
Responsable du projet
Lieu : pas loin de Metz
Inscription : 07/08/2007
Messages : 6 203
Site Web

Re : [Résolu] indentation des commentaires sur smartphone

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


Mes articles et tutoriels pour PluXml
Pluxopolis mon site sur PluXml, mais pas seulement...
Twitter: @pluxopolis

Hors ligne

Pied de page des forums

A propos Nous soutenir Contact Twitter Google+
Copyright © 2006-2017 PluXml.org, tous droits réservés