Liste des sujets MD Composant Mobile

[Steven]

C’est faisable

Je ne sais pas si je mettrais cela dans les paramètres par défaut, mais si vous voulez essayer, voici le code à ajouter dans la section header

{{d-icon \"eye\"}} {{number topic.views numberKey=\"views_long\"}}
et
{{#if hasLikes}}{{d-icon \"heart\"}} <a>{{number topic.like_count}}</a>{{/if}}

Pour mon écran, j’ai utilisé ceci :

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
  {{~raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='right'>
    <div>
        {{!--
          La syntaxe `~` supprime les espaces entre les éléments, produisant
          `<a> class=topic-post-badgesQuelques textes</span>`
          sans espace entre eux.
          Cela fait que le topic-post-badge est considéré comme le même mot que "texte"
          à la fin du lien, l'empêchant de passer à la ligne sur sa propre ligne.
        --}}
        {{~raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{~raw-plugin-outlet name="topic-list-before-status"}}
          {{~raw "topic-status" topic=topic~}}
          {{~topic-link topic class="raw-link raw-topic-link"}}
          {{~#if topic.featured_link~}}
          {{~topic-featured-link topic~}}
          {{~/if~}}
          {{~raw-plugin-outlet name="topic-list-after-title"}}
          {{~#if showTopicPostBadges}}
		    {{~raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
		  {{~/if}}
          {{~#if expandPinned~}}
          {{~raw "list/topic-excerpt" topic=topic~}}
          {{~/if~}}
        </div>
        <div class="topic-item-stats clearfix">
          {{#if hideCategory}}
            <span class="topic-creator">
              {{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            </span>
            {{else}}
            {{~raw-plugin-outlet name="topic-list-before-category"}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/if}}
          <span class="comments">
            {{d-icon "eye"}} {{number topic.views numberKey="views_long"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
          </span>
          {{discourse-tags topic mode="list"}}
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="pull-right">
      <div class="last-post-avatar">
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
      </div>
      <div class='num activity last'>
        <span class="age activity" title="{{topic.bumpedAtTitle}}">
          <a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a>
        </span>
      </div>
    </div>
</td>
</script>

[Heliosurge (Dan DeMontmorency)]

L’œil ne s’affiche pas. J’ai ajouté le script que vous avez posté à une nouvelle extension de composant thématique dans votre thème principal.

[Steven]

Pour certaines icônes, vous devez enregistrer le caractère Font Awesome qui l’accompagne.

Vérifiez le paramètre svg icon subset et ajoutez fa-eye

[Heliosurge (Dan DeMontmorency)]

Merci, cela a résolu le problème. Je pensais l’avoir ajouté mais j’ai dû oublier de valider le changement.

[Heliosurge (Dan DeMontmorency)]

Tout fonctionne bien en Stable. Mais test passed ne semble pas afficher les vues ou les likes. même en aperçu pour s’assurer que d’autres composants n’interfèrent pas avec des choses comme Air Theme. Votre composant de base fonctionne comme prévu. L’extension n’affiche pas les vues ou les likes.

[satonotdead]

Désolé, mais que signifie l’icône rouge ? Est-ce comme une étiquette ou quelque chose comme ça ?

Pouvons-nous utiliser une icône Font Awesome à la place, pour garder l’harmonie avec le reste du forum ?

Merci pour le partage !

[Steven]

J’ai eu quelques problèmes avec la balise d-icon au cas où il n’y aurait pas de tags.

J’ai essayé une nouvelle solution, j’ai poussé une mise à jour, pour utiliser l’icône font-awesome au lieu d’un emoji, faites-moi savoir si cela fonctionne bien.

edit : rétabli, cela fonctionne sur ordinateur mais pas sur mobile.

Si vous voulez l’essayer, voici le css que vous pouvez utiliser :

.topic-list .topic-item-stats .discourse-tags::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b";
  margin-left: 5px;
  margin-right: 2px;
}

[digitaldominica]

Salut, l’option de sélection en bloc sur mobile ne fonctionne pas lorsque ce composant thématique est activé.

[Steven]

Merci, j’ai poussé une mise à jour

Vous devriez maintenant avoir la case à cocher à côté du titre du sujet

[digitaldominica]

Merci, le problème est résolu pour moi.

[Steven]

Je ne vois aucun moyen de le faire fonctionner avec la nouvelle liste de sujets Glimmer.

Je pense que ce composant de thème sera abandonné. Pour l’instant, nous pouvons le marquer comme deprecated.

J’essaierai peut-être quelque chose de nouveau en utilisant uniquement les Plugin Outlets, mais il n’aura certainement pas le même aspect.

[CAX.DO (Max)]

C’est en effet un composant très utile, surtout son apparence, qui permet au forum d’afficher plus de contenu. C’est vraiment dommage qu’il ne soit plus utilisable à l’avenir.

[Canapin (Coin-coin le Canapin)]

Grand fan de ce composant car je trouve la vue mobile par défaut médiocre (l’avatar du dernier posteur à gauche étant la chose la plus étrange). Ce serait dommage de le laisser tomber, malheureusement je ne sais pas coder, et ChatGPT non plus d’ailleurs

[Arkshine]

Je vais essayer !

[Arkshine]

J’ai fait une PR

DEV: Modernize using plugin outlet

[Steven]

Excellent travail !

Je n’ai pas encore eu la chance de l’essayer, mais avez-vous réussi à ajouter le badge de sujet (messages non lus) ? J’ai fait quelques tests et le badge de sujet à côté du titre du sujet n’était pas si facile à ajouter.

Mais je ne suis nulle part près de votre niveau.

[Arkshine]

@Steven Je n’ai pas testé ! Avec les modifications actuelles, cela ne remplace rien, vous pouvez donc vous attendre à ce qu’il soit affiché (mais peut-être pas à l’endroit attendu).

EDIT :
Voici à quoi cela ressemble :

La vue d’origine sans le composant ressemble à ceci :

Voulez-vous toujours remplacer l’avatar ou est-ce que cela vous convient tel quel ?
Laissez-moi voir si je peux remplacer l’avatar.

EDIT2 :

DEV: Show topic post badges in place of the avatar when available

[Steven]

Merci @Arskshine pour le travail que tu as fait !

J’ai un peu travaillé sur le composant, j’ai une proposition pour vous tous.

Voici la vue actuelle :

J’ai travaillé sur une alternative qui restaure l’extrait et déplace le badge du sujet à côté du titre (désolé, la capture d’écran est en français, mais le design est la partie la plus importante)

Que voulez-vous pour la version officielle ?

[CAX.DO (Max)]

Salut @Steven @Arkshine
Merci beaucoup pour votre travail.

J’ai une autre question : les deux images ci-dessous sont des captures d’écran de la nouvelle version et de l’ancienne version, respectivement. Comme vous pouvez le voir, la largeur des titres d’articles diffère entre les deux versions, ce qui est évident d’après les sauts de ligne (désolé, les titres sont en chinois, mais ce qui compte, c’est la position des sauts de ligne).

Est-il possible d’augmenter la longueur des titres dans la nouvelle version ? L’un des objectifs de l’utilisation de ce composant est d’afficher plus d’informations.

Je ne sais pas coder, donc ma description n’est peut-être pas très professionnelle.

[CAX.DO (Max)]

J’ai essayé d’ajouter ce bout de CSS, et ça a fonctionné.

td .main-link {
    width: 100%;
    display: inline-block;
}