Y a-t-il des réflexions sur le fait de rendre Horizon pleine largeur ? Je trouve que cela semble un peu restreint au milieu (corset ?), et le rendre entièrement pleine largeur le détendrait joliment.
4 « J'aime »
Non, nous n’avons pas l’intention de le faire. Nous maintenons une largeur limitée, ce qui correspond à une longueur de lecture optimale.
2 « J'aime »
Bonjour, j’ai essayé de prévisualiser le thème, mais c’est tout ce que je vois :
Est-ce que je fais quelque chose de mal ?
1 « J'aime »
Je viens de tester (sur mobile cependant) et cela fonctionne bien pour moi. Y a-t-il quelque chose dans la console ? Ou pouvez-vous essayer un autre navigateur pour vérifier ?
1 « J'aime »
Merci @chapoi ! Ma console :
1 « J'aime »
D’accord, oui, je peux certainement reproduire cela. Je pense que c’est parce que Horizon a probablement été déplacé vers le cœur. Il faudra trouver comment corriger le lien de prévisualisation, si c’est possible. (Il sera plus facile de simplement prévisualiser sur Meta – sujet mis à jour)
Ceci étant dit, vous pouvez simplement le prévisualiser ici sur Meta en changeant de thème.
2 « J'aime »
Merci beaucoup, ça fonctionne maintenant !
1 « J'aime »
Tableau de bord : Texte des boutons invisible par défaut + désalignement de la mise en page dans « Sujets les plus référencés » et « Termes de recherche tendances »
Bonjour
J’utilise le thème Horizon et j’ai identifié plusieurs problèmes d’interface utilisateur dans le tableau de bord d’administration, spécifiquement dans les sections Sujets les plus référencés et Termes de recherche tendances.
Problème 1 : Le texte du bouton est invisible jusqu’au survol
Emplacement : Boutons dans les deux sections (par exemple, « Voir le sujet », « Voir le terme de recherche »)
Comportement attendu : L’étiquette du bouton doit être visible en tout temps (état normal).
Problème 2 : Déséquilibre de la largeur des colonnes et retour à la ligne du texte
Emplacement : Colonnes de tableau dans les deux widgets
Mise en page observée :
Colonne Sujet / Termes : trop étroite → les longs titres s’affichent sur plusieurs lignes verticalement (par exemple, texte multiligne à l’intérieur d’une seule ligne).
Colonnes numériques (Vues, Clics, Recherches, etc.) : trop larges → espace blanc excessif.
Problème supplémentaire : Les valeurs numériques sont alignées à droite (par défaut pour les nombres), mais dans les contextes RTL (comme le persan/arabe), cela crée une incohérence visuelle. Pour une meilleure expérience utilisateur dans les locales RTL, les colonnes numériques doivent rester alignées à droite, mais les colonnes de sujets/termes doivent être alignées à gauche — actuellement, elles apparaissent alignées à droite en RTL, ce qui provoque un désalignement.
Merci pour votre travail sur le thème Horizon.
1 « J'aime »
Merci pour ces rapports, cela sera corrigé !
Pour la prochaine fois cependant : quelques captures d’écran sont très utiles pour identifier plus rapidement le problème que le texte.
1 « J'aime »
Débordement du conteneur d’annonce mobile dans les annonces internes – Inadéquation de la mise en page RTL/LTR
Bonjour
J’utilise le thème Horizon avec le plugin House Ads officiel, et j’ai créé un composant personnalisé pour styliser les annonces en utilisant des variables CSS et des règles de mise en page compatibles avec le système de conception de Discourse.
Problème : Le conteneur d’annonce déborde de la vue sur mobile (LTR et RTL)
- Thème : Horizon (non reproductible dans les thèmes par défaut ou autres comme Material, etc.)
- Plugin : House Ads + composant personnalisé
- Appareil : Mobile
- Comportement :
- Lorsque la langue du site = Anglais (LTR) → le bord gauche de
.ad-containerest coupé (déborde à gauche). - Lorsque la langue du site = Persan/Arabe (RTL) → le bord droit est coupé (déborde à droite).
- Lorsque la langue du site = Anglais (LTR) → le bord gauche de
- Attendu : La carte d’annonce doit être entièrement contenue dans la vue, centrée ou alignée avec la largeur du contenu de la publication.
Mon code CSS :
Résumé
:root {
/* Couleurs de base */
--ad-bg: var(--secondary);
--ad-border: var(--highlight);
--ad-text: var(--primary);
/* Étiquette */
--ad-label-bg: var(--highlight);
--ad-label-text: var(--danger);
}
.house-creative {
margin-left: 0 !important;
}
.house-creative a.between-posts-ad {
display: block;
text-decoration: none;
color: inherit;
background-color: transparent;
font-family: inherit;
}
/* ===============================
Conteneur de carte
=============================== */
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
margin-bottom: 20px;
padding: 10px 5px;
max-width: calc(#{$topic-avatar-width} + #{$topic-body-width} + (#{$topic-body-width-padding} * 2)); background-color: var(--ad-bg);
border: 2px solid var(--ad-border);
border-radius: 10px;
box-sizing: border-box;
line-height: 1.7;
color: var(--ad-text);
transition:
background-color 0.3s ease,
border-color 0.3s ease,
box-shadow 0.3s ease,
transform 0.2s ease;
}
.house-creative a.between-posts-ad:hover .ad-container {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.house-creative .ad-label {
display: inline-block;
text-align: center;
margin-bottom: 6px;
padding: 4px 12px;
font-size: 0.85em;
font-weight: 700;
text-transform: uppercase;
background-color: var(--ad-label-bg);
color: var(--ad-label-text);
border-radius: 999px;
}
.house-creative .ad-container .ad-text {
margin: 0;
font-size: 1rem;
line-height: 1.9;
color: var(--ad-text);
direction: rtl ;
text-align: center !important ;
unicode-bidi: isolate;
}
@media (max-width: 480px) {
.house-creative .ad-container {
direction: rtl !important;
text-align: center !important;
padding: 16px 12px;
width: 100%;
max-width: 100%;
}
}
Horizon n’est pas compatible avec tous les composants et plugins (pour l’instant).
1 « J'aime »