Sujets en vedette

Merci pour la mise à jour ! :heart:

Avec quelques astuces CSS, j’ai déplacé l’avatar en superposition sur la miniature en mode carte :

.featured-topics__topic-details .topic-author {
    position: absolute;
    right: 30px;
    bottom: 30px;
}

Comment puis-je réduire la hauteur de la div (violette) de l’auteur du sujet à 0 et supprimer efficacement l’espace tout en affichant toujours l’avatar ?

1 « J'aime »

Si vous écrivez du CSS personnalisé, plutôt que d’ajouter du code qui écrase l’une des dispositions prédéfinies, je vous recommanderais plutôt de choisir l’option de disposition Aucune dans les paramètres du thème et de déclarer vos styles à partir de zéro.

Par exemple, vous pourriez copier la feuille de style Cartes par défaut et déclarer le conteneur featured-topics__topic-details comme une grille. Ensuite, vous pouvez positionner ses éléments exactement comme vous le souhaitez, plutôt que de les déplacer avec des déclarations absolues.

2 « J'aime »

C’est une excellente idée !

Pour l’instant, nous sommes satisfaits du modèle et juste quelques petites modifications CSS pour le tester initialement. Une fois que nous passerons à la phase d’optimisation du CTR, nous suivrons probablement votre conseil. :slight_smile:

2 « J'aime »

Je ne sais pas si ce comportement est attendu ou s’il pourrait être considéré comme un bug :

Lorsque trois sujets sont définis dans les paramètres, mais que seulement deux sont affichés, un espace apparaît là où le troisième sujet devrait se trouver. Il serait idéal que les cartes soient redimensionnées pour occuper toute la largeur dans de tels cas.

Si quelqu’un est intéressé par l’utilisation du défilement horizontal sur mobile, voici quelques CSS que « j’ai » créés (avec l’aide de l’IA). Cela inclut également des ajustements de défilement et de taille que j’ai trouvés plus adaptés à notre cas d’utilisation.

PS : J’ai également essayé de créer des pilules de navigation sans ajouter de HTML, mais c’était certainement un étirement.

@media (max-width: 750px) {
  .featured-topics__topic-wrapper {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 1em 10vw; /* Padding latéral pour la visibilité des cartes voisines */
    gap: 1rem; /* Espacement cohérent entre les cartes */
    overscroll-behavior-x: contain; /* Empêche les interférences de sur-défilement */
    scroll-behavior: smooth; /* Défilement fluide */
    scrollbar-width: none; /* Masquer la barre de défilement */
    -ms-overflow-style: none;
  }

  .featured-topics__topic-wrapper::-webkit-scrollbar {
    display: none; /* Masquer la barre de défilement dans les navigateurs WebKit */
  }

  .featured-topics__topic-container {
    flex: 0 0 80vw; /* Cartes plus étroites pour la visibilité latérale */
    min-width: 280px; /* Largeur minimale pour les petits écrans */
    scroll-snap-align: center; /* Centre chaque carte lors du défilement */
    height: unset !important; /* Hauteur cohérente */
  }

  .featured-topics__topic-thumbnail {
    height: 40vw;
    width: 100%;
  }
}

Salut, merci beaucoup pour ce composant, je l’adore !

Quelqu’un pourrait-il par hasard m’aider à ajuster la taille du titre car il est trop grand en ce moment ?

J’ai reçu un message d’erreur indiquant que ce composant doit être mis à jour pour être compatible avec les prochaines modifications du noyau de Discourse. Quelqu’un sait-il si une mise à jour est prévue ?

J’ai mis à jour le composant plus tôt cette année. Vous devez le réinstaller pour utiliser la nouvelle version, voir : :index_pointing_up: Featured Topics - #38 by manuel

1 « J'aime »

Oh, merci beaucoup, ça a fonctionné !

La seule chose que je n’arrive pas à corriger (je taquine Chat GPT depuis une heure, je suppose…) c’est la hauteur des cartes — des conseils pour la réduire/supprimer ?

Salut Manuel - y a-t-il un moyen pour que ton super composant de thème ignore les images (pour qu’il affiche juste un extrait) ?

J’ai pas mal de sujets mis en avant sans images (que je veux mettre en avant), mais ils font assez mauvais effet à côté de ceux qui contiennent des images. De plus, je m’intéresse plus au texte qu’aux images.

Le modèle de composant affiche une variété de contenus disponibles sur un sujet. L’apparence finale est ensuite ajustée avec des règles de style. Par exemple, lorsque vous sélectionnez « cartes » comme mise en page, les extraits de sujet sont masqués lorsqu’il y a une image mise en avant et affichés lorsqu’il n’y en a pas :

Si vous souhaitez toujours afficher l’extrait et ne jamais afficher d’image, vous pouvez soit sélectionner « aucun » pour la mise en page et ajouter votre propre feuille de style. Ou bien, vous pouvez remplacer les règles de la mise en page des cartes qui affichent l’image et masquent l’extrait.

1 « J'aime »