[AwesomeBB] Modifier l'apparence de la liste des sujets en format mobile

[Zlork]

Détails techniques

Version du forum : AwesomeBB
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : https://gemurama.com/

Description du problème

Bonjour,

J'aimerais réduire l'affichage de la liste des sujets sur mobile et/ou tablette de cette manière :



Est-ce que c'est possible de le faire ou non ? Si oui, comment ?

Merci d'avance pour votre aide

[R.P. Gryphus]

Bonjour Zlork!

Essaies ce CSS et dis-moi si le résultat est celui désiré :

Code:

@media (max-width: 750px) { /* EXCLUSIF AUX ÉCRANS D'UNE LARGEUR ÉGALE OU INFÉRIEURE À 750px */

  .forum-lastpost > avatar-default,
  .forum-lastpost i,
  .posts-lastpost > avatar-default,
  .posts-lastpost i {
    display: none; /* SUPPRESSION DE L'AVATAR ET DES ICÔNES DANS LA BOÎTE 'DERNIERS MESSAGES' */
  }

  .forum-lastpost-inner,
  .posts-lastpost-inner {
    margin-left: 0; /* MARGE GAUCHE DE L'ARRIÈRE PLAN DU TEXTE DANS LA BOÎTE 'DERNIERS MESSAGES' */
    font-size: 10px; /* TAILLE DE LA POLICE POUR L'AUTEUR ET LA DATE */
    line-height: normal; /* INTERLIGNE */
  }

  .darkmode.forum-lastpost,
  .darkmode.posts-lastpost {
    background: #2E3238; /* CHANGE LA COULEUR DE L'ARRIÈRE PLAN */
    border-top: 1px solid rgba(255,255,255,0.1); /* AJOUT D'UNE BORDURE SEMI-TRANSPARENTE */
  }

  .forum-description,
  .posts-description {
    margin-bottom: 0; /* SUPPRESSION DE LA MARGE SÉPARANT LA DESCRIPTION DU FORUM ET LA BOÎTE 'DERNIERS MESSAGES' */
  }

  .forum-lastpost,
  .posts-lastpost {
    padding: 4px 16px; /* MARGE ENTRE LE CONTENU DE LA BOÎTE 'DERNIERS MESSAGES' ET SON CONTENANT (AFFECTE LA TAILLE DE L'ARRIÈRE-PLAN) */
  }

  .forum-lastpost-time,
  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }

  .forum-lastpost.topic-title,
  .posts-lastpost.topic-title {
    font-size: 10px; /* TAILLE DE LA POLICE DU LIEN VERS LE DERNIER MESSAGE */
    text-overflow: initial; /* CETTE DÉCLARATION AINSI QUE LES 2 SUIVANTES DEVRAIENT PERMETTRE L'AFFICHAGE DU LIEN EN ENTIER */
    overflow: visible;
    white-space: normal;
    text-transform: uppercase; /* LETTRES DU LIEN EN MAJUSCULE */
  }

}


[Zlork]

Bonjour,



Voilà donc le résultat. Pas vraiment ce que je veux donc mais on est pas loin.
Et attention, je souhaite ce résultat uniquement dans la liste des sujets, pas sur la page d'accueil

[R.P. Gryphus]

Ah pardon, dans ce cas fais bien sûr de supprimer le CSS que je t'ai proposé plus tôt et remplace le par celui-ci :

Code:

@media (max-width: 750px) { /* EXCLUSIF AUX ÉCRANS D'UNE LARGEUR ÉGALE OU INFÉRIEURE À 750px */
 
  .posts-lastpost > .avatar-default,
  .posts-lastpost i {
    display: none; /* SUPPRESSION DE L'AVATAR ET DES ICÔNES DANS LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost-inner {
    margin-left: 0; /* MARGE GAUCHE DE L'ARRIÈRE PLAN DU TEXTE DANS LA BOÎTE 'DERNIERS MESSAGES' */
    font-size: 10px; /* TAILLE DE LA POLICE POUR L'AUTEUR ET LA DATE */
    line-height: normal; /* INTERLIGNE */
  }
 
  .darkmode.posts-lastpost {
    background: #2E3238; /* CHANGE LA COULEUR DE L'ARRIÈRE PLAN */
    border-top: 1px solid rgba(255,255,255,0.1); /* AJOUT D'UNE BORDURE SEMI-TRANSPARENTE */
  }
 
  .posts-description {
    margin-bottom: 0; /* SUPPRESSION DE LA MARGE SÉPARANT LA DESCRIPTION DU FORUM ET LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost {
    padding: 4px 16px; /* MARGE ENTRE LE CONTENU DE LA BOÎTE 'DERNIERS MESSAGES' ET SON CONTENANT (AFFECTE LA TAILLE DE L'ARRIÈRE-PLAN) */
  }
 
  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }
 
}

[Zlork]

Merci on avance



Je voudrais aligner avec le titre si possible ?
Et je voudrais tester la date et heure à coté du pseudo et non au dessous

[R.P. Gryphus]

Je voudrais aligner avec le titre si possible ?
Et je voudrais tester la date et heure à coté du pseudo et non au dessous

Oui en fait le code que j'ai proposé était supposé mettre la date à droite, mais j'ai oublié une déclaration, donc re-voici le code avec la correction :

Code:

@media (max-width: 750px) { /* EXCLUSIF AUX ÉCRANS D'UNE LARGEUR ÉGALE OU INFÉRIEURE À 750px */
 
  .posts-lastpost > .avatar-default,
  .posts-lastpost i {
    display: none; /* SUPPRESSION DE L'AVATAR ET DES ICÔNES DANS LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost-inner {
    font-size: 10px; /* TAILLE DE LA POLICE POUR L'AUTEUR ET LA DATE */
    line-height: normal; /* INTERLIGNE */
  }
 
  .darkmode.posts-lastpost {
    background: #2E3238; /* CHANGE LA COULEUR DE L'ARRIÈRE PLAN */
    border-top: 1px solid rgba(255,255,255,0.1); /* AJOUT D'UNE BORDURE SEMI-TRANSPARENTE */
  }
 
  .posts-description {
    margin-bottom: 0; /* SUPPRESSION DE LA MARGE SÉPARANT LA DESCRIPTION DU FORUM ET LA BOÎTE 'DERNIERS MESSAGES' */
  }
 
  .posts-lastpost {
    padding: 4px 16px; /* MARGE ENTRE LE CONTENU DE LA BOÎTE 'DERNIERS MESSAGES' ET SON CONTENANT (AFFECTE LA TAILLE DE L'ARRIÈRE-PLAN) */
  }
 
  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }

  .posts-lastpost-author,
  .posts-lastpost-time {
    width: auto;
  }
 
}

[Zlork]

Merci beaucoup

On y est presque :



J'aimerais pour finir que la date s'approche du pseudo. Pas collé mais avec un ou deux espace

[R.P. Gryphus]

Dans ce cas remplace ceci :

Code:

  .posts-lastpost-time {
    float: right; /* ALIGNEMENT DE LA DATE À DROITE */
  }

Par ceci :

Code:

  .posts-lastpost-time {
    margin-left: 10px; /* MARGE ENTRE L'AUTEUR ET LA DATE */
  }

Et ajustes selon ta préférence.

[Zlork]

Merci beaucoup !

Je cloture