[Résolu] indentation des commentaires sur smartphone

cyrillecyrille Member
avril 2016 modifié dans Bogues
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

Réponses

  • kowalskykowalsky Member
    avril 2016 modifié
    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.
  • l'indentation en 1920x1080 ne pose aucun problème, sur un tout petit écran c'est autre chose.
  • StéphaneStéphane Member, Former PluXml Project Manager
    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

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • je le colle où Stéphane ? N'importe où ?
  • StéphaneStéphane Member, Former PluXml Project Manager
    @cyrille: à la fin du fichier theme.css

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

  • 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 ?
  • kowalskykowalsky Member
    avril 2016 modifié
    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éphaneStéphane Member, Former PluXml Project Manager
    @kowalsky: j'ai pris en compte ton code pour l'ajouter au theme par défaut. merci

    Consultant PluXml

    Ancien responsable du projet (2010 à 2018)

Connectez-vous ou Inscrivez-vous pour répondre.