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

2 participants

Voir le sujet précédent Voir le sujet suivant Aller en bas

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

Message par orpheus Lun 15 Aoû 2022 - 11:44

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.


Dernière édition par orpheus le Mar 16 Aoû 2022 - 22:19, édité 1 fois
orpheus

orpheus
*****

Messages : 620
Inscrit(e) le : 21/05/2009

Voir le profil de l'utilisateur https://empiredesouvenirs.forumactif.com
orpheus a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [AwesomeBB] Problème d'affichage sur mobile et tablette

Message par Oka.mi Mar 16 Aoû 2022 - 12:21

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é ! Smile


[AwesomeBB] Problème d'affichage sur mobile et tablette 1213Donnez un titre explicite [AwesomeBB] Problème d'affichage sur mobile et tablette VTzsyWB à votre sujet pour améliorer son référencement

Remerciez [AwesomeBB] Problème d'affichage sur mobile et tablette 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP [AwesomeBB] Problème d'affichage sur mobile et tablette FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Problème d'affichage sur mobile et tablette

Message par orpheus Mar 16 Aoû 2022 - 13:28

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 Embarassed

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

orpheus
*****

Messages : 620
Inscrit(e) le : 21/05/2009

Voir le profil de l'utilisateur https://empiredesouvenirs.forumactif.com
orpheus a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [AwesomeBB] Problème d'affichage sur mobile et tablette

Message par Oka.mi Mar 16 Aoû 2022 - 15:13

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');
                }
    [AwesomeBB] Problème d'affichage sur mobile et tablette Image96

    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.
    [AwesomeBB] Problème d'affichage sur mobile et tablette Image95

  • 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


[AwesomeBB] Problème d'affichage sur mobile et tablette 1213Donnez un titre explicite [AwesomeBB] Problème d'affichage sur mobile et tablette VTzsyWB à votre sujet pour améliorer son référencement

Remerciez [AwesomeBB] Problème d'affichage sur mobile et tablette 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP [AwesomeBB] Problème d'affichage sur mobile et tablette FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Problème d'affichage sur mobile et tablette

Message par orpheus Mar 16 Aoû 2022 - 17:40

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

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 !
orpheus

orpheus
*****

Messages : 620
Inscrit(e) le : 21/05/2009

Voir le profil de l'utilisateur https://empiredesouvenirs.forumactif.com
orpheus a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: [AwesomeBB] Problème d'affichage sur mobile et tablette

Message par Oka.mi Mar 16 Aoû 2022 - 17:48

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


[AwesomeBB] Problème d'affichage sur mobile et tablette 1213Donnez un titre explicite [AwesomeBB] Problème d'affichage sur mobile et tablette VTzsyWB à votre sujet pour améliorer son référencement

Remerciez [AwesomeBB] Problème d'affichage sur mobile et tablette 976083691 le message qui vous a aidé pour le mettre en évidence

Cochez résolu lorsque votre problème est résolu pour faciliter le travail des modérateurs

L'aide par MP [AwesomeBB] Problème d'affichage sur mobile et tablette FsAeGeb n'est pas autorisée pour que celle-ci puisse bénéficier au plus grand nombre
Oka.mi

Oka.mi
Aidactive
Aidactive

Messages : 2776
Inscrit(e) le : 06/01/2011

Voir le profil de l'utilisateur https://deus-academia.forumactif.com/
Oka.mi a été remercié(e) par l'auteur de ce sujet.

Résolu Re: [AwesomeBB] Problème d'affichage sur mobile et tablette

Message par orpheus Mar 16 Aoû 2022 - 22:19

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

orpheus
*****

Messages : 620
Inscrit(e) le : 21/05/2009

Voir le profil de l'utilisateur https://empiredesouvenirs.forumactif.com
orpheus a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut

- Sujets similaires

Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum