[AwesomeBB] Problème d'affichage sur mobile et tablette

[orpheus]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : non défini
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://anima-news.superforum.fr

Description du problème

Bonjour à tous !

Voila, en naviguant sur mon forum qui tourne sous AwesomeBB sur mobile, j'ai remarqué qu'il y a un problème sur celui-ci lorsqu'on navigue sur mobile/tablette.
En mode portrait, ça passe (bien que pas fan de la position de l'étiquette) mais en mode paysage, c'est une catastrophe avec les étiquettes qui s'entremêlent dans le titre des sujets).

Les captures ci-dessous proviennent de mon téléphone. Sur tablette, le rendu est un peu mieux mais le problème demeure toujours.

Voir les images:

Merci d'avance pour votre aide.

[Oka.mi]

Bonjour,

Ce comportement est normal, puisque vous avez ceci dans votre feuille CSS :

Code:

.posts-section .topic-icon {
   float:right!important
}


Supprimer ce passage résoudrait le problème, mais le rendu par défaut n'est peut-être pas ce que vous voulez. Je vous invite, en ce cas, à préciser le rendu souhaité !

[orpheus]

Bonjour Oka.mi et merci pour votre réponse !
Après recherche, il semblerai que j'avais ajouté ce code à mon CSS car je souhaitais que les icônes/étiquettes apparaissent sur la droite des catégories.
Je pensais qu'il s'agissait d'un problème d'affichage, désolé du coup

Pour le rendu souhaité du coup, je souhaiterai simplement éviter que les étiquettes s'entremêlent dans le titre des sujets.
J'ai remarqué le même problème lorsque j'ouvre un sujet en haut sur la banderole bleue, l'étiquette s'entremêlent également avec le titre.
Soit en les décalant sur le bas (sur la ligne on le nom de l'auteur du post est inscrit par exemple), soit complètement faire disparaître les icônes de la version mobile, tout en les préservant du rendu PC.

[Oka.mi]

D'accord, dans ce cas, on peut procéder comme suit :

• Dans votre template topics_list_box, ligne 167, changez le .prepend en .after, puis après l'accolade de la ligne 169, ajoutez :
  

  Code:

  if ($(this).find('h3 a').width() < 757) {
                $(this).find('h3').addClass('without-after-element');
            }

  
  
  En effectuant ces modifications, on s'appuie sur le JS déjà existant dans le template pour changer la structure au niveau de ce qui nous intéresse : on place l'icône après le h3 (le bloc contenant le titre du sujet qui a actuellement une width de 100%, ce qui fait que même si on déplace l'image, elle sera d'office mise à la ligne (le titre prenant toute la largeur). On modifiera ce détail plus bas, via css.
  Au niveau des lignes de script ajoutées, on vérifie, pour tous les liens de sujets (qui eux ont une largeur variable, l'excédent est caché via css), leur largeur, et on retire l'effet dégradé (qui est un after) si la largeur est inférieure à 757px (484px sur mon forum test, c'est en fonction de la largeur de votre forum); autrement dit, on retire l'effet de dégradé si la largeur du titre est inférieure à la largeur calculée du bloc h3.
  
  
  
• Du côté du CSS, il faudra donc retirer le passage précédemment cité
  

  Code:

  .posts-section .topic-icon {
  float:right!important
}

  
  Et ajouter plutôt ceci :
  

  Code:

  .posts-description h3 {
  width: auto;
  margin-right: 5px;
}

.topic-description {
  float: left;
}

.without-after-element::after {
  display:none;
}

Dans l'ordre, nous commençons par retirer la largeur de 100% fixée sur le h3 pour qu'il s'adapte en fonction de la longueur du titre (pour que l'icône puisse avoir sa place). Ensuite, on ajoute une petite marge à droite de 5px afin que l'icône ne se colle pas au titre.
Comme le h3 n'a plus sa largeur de 100%, la description d'un sujet monte pour se coller au titre, on rectifie ça donc avec un petit float à gauche.
La dernière ligne, .without-after-element::after, c'est ce qu'on a ajouté avec le JS plus haut : quand la largeur < 757px, on ajoute cette class qui sert à annuler l'effet de bordure en dégradé à la fin du titre.

https://developer.mozilla.org/fr/docs/Web/CSS/::after
https://developer.mozilla.org/fr/docs/Web/CSS/float

[orpheus]

Encore merci Oka.mi pour ton aide qui a presque totalement résolu mon problème !

Presque parce que je chipote, en mode portrait lorsque je visite un sujet, l'étiquette s'entremêle toujours au titre.

Voir l'exemple:

J'ai remarqué également que dans d'autres topics lorsque le titre semble trop long comme ici, la petite icone en forme de feuille s'entremêle également au titre.

Voir l'exemple:

Est-il possible de corriger cela également ?
Et encore merci pour ton aide !

[Oka.mi]

Ah, oui, c'est parce que ça concerne d'autres éléments, qui n'ont pas les mêmes noms que ceux visés dans le code donné
Par contre, comme l'icône est toujours à gauche sur l'affichage d'un sujet, je ne sais pas si vous voulez que je déplace l'icône sur la droite ?
Si l'icône peut rester à gauche, il vous suffit d'ajoutez ce bout de css, on fait en sorte que le titre ne se superpose plus sur l'icône (on annule en gros des propriétés définies dans le css de base) :

Code:

.post-heading-wrap {
  margin: 0;
  float: none;
}

[orpheus]

Cette fois tout fonctionne à merveille !
Encore merci pour ton aide et tes explications, ça a totalement solutionné mon problème !