Elenco argomenti MD Componente Mobile

[Steven]

È fattibile

Non so se lo inserirei nelle impostazioni predefinite, ma se vuoi provarlo, ecco il codice da aggiungere nella sezione header

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

Per il mio schermo, ho usato questo:

<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 sintassi `~` rimuove gli spazi tra gli elementi, producendo
          `<a> class=topic-post-badgesSome text<span>`
          senza spazio tra di loro.
          Ciò fa sì che il topic-post-badge venga considerato la stessa parola di "text"
          alla fine del link, impedendogli di andare a capo sulla propria riga.
        --}}
        {{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’occhio non viene visualizzato. Ho aggiunto lo script che hai pubblicato a un nuovo componente aggiuntivo di tema per il tuo tema principale.

[Steven]

Per alcune icone, è necessario registrare il carattere Font Awesome corrispondente.

Controllare l’impostazione svg icon subset e aggiungere fa-eye.

[Heliosurge (Dan DeMontmorency)]

Grazie, ha risolto il problema. Pensavo di averlo aggiunto ma devo aver dimenticato di eseguire il commit della modifica.

[Heliosurge (Dan DeMontmorency)]

Funziona tutto bene in Stable. Ma test passed sembra non visualizzare viste o like. anche in anteprima per assicurarsi che altri componenti non interferiscano con cose come Air Theme. Il tuo componente base funziona come previsto. L’estensione non mostra viste o like.

[satonotdead]

Mi dispiace ma cosa significa l’icona rossa? È come un tag o qualcos’altro?

Possiamo usare l’icona awesome invece, per mantenere l’armonia con il resto del forum?

Grazie per la condivisione!

[Steven]

Ho avuto qualche problema con il tag d-icon nel caso in cui non ci fossero tag.

Ho provato una nuova soluzione, ho effettuato un aggiornamento, per utilizzare l’icona font-awesome invece di un emoji, fammi sapere se funziona bene

modifica: ripristinato, funziona sul desktop ma non sul mobile

Se vuoi provarlo, questo è il css che puoi usare

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

Ciao, l’opzione di selezione multipla su mobile non funziona quando questo componente del tema è abilitato.

[Steven]

Grazie, ho rilasciato un aggiornamento

Ora dovresti avere la casella di controllo accanto al titolo dell’argomento

[digitaldominica]

Grazie, il problema si è risolto per me.

[Steven]

Non vedo un modo per farlo funzionare con la nuova lista di argomenti di Glimmer.

Penso che questo componente del tema verrà abbandonato. Per ora possiamo contrassegnarlo come deprecated.

Potrei provare qualcosa di nuovo usando solo i Plugin Outlet, ma non avrà sicuramente lo stesso aspetto.

[CAX.DO (Max)]

Questo è davvero un componente molto utile, specialmente il suo aspetto, che permette al forum di visualizzare più contenuti. È davvero un peccato che non sarà utilizzabile in futuro.

[Canapin (Coin-coin le Canapin)]

Sono un grande fan di questo componente poiché trovo la visualizzazione mobile predefinita scadente (l’avatar dell’ultimo poster a sinistra è la cosa più strana). Sarebbe un peccato abbandonarlo, sfortunatamente non so programmare, né può farlo ChatGPT a questo proposito

[Arkshine]

Ci proverò!

[Arkshine]

Ho creato una PR

DEV: Modernize using plugin outlet

[Steven]

Ottimo lavoro!

Non ho ancora avuto modo di provarlo, sei riuscito ad aggiungere anche il badge dell’argomento (post non letti)? Ho fatto alcuni test e il badge dell’argomento accanto al titolo dell’argomento non è stato così facile da aggiungere

Ma non sono nemmeno lontanamente al tuo livello

[Arkshine]

@Steven Non ho testato! Con le modifiche attuali, non sostituisce nulla, quindi puoi aspettarti che venga visualizzato (ma forse non nel posto previsto).

MODIFICA:
Ecco come appare:

La visualizzazione originale senza il componente appare così:

Vuoi ancora sostituire l’avatar o va bene così com’è?
Vediamo se riesco a sostituire l’avatar.

MODIFICA2:

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

[Steven]

Grazie @Arskshine per il lavoro che hai svolto!

Ho lavorato un po’ sul componente, ho una proposta per tutti voi.

Questa è la vista attuale:

Ho lavorato su un’alternativa che ripristina l’estratto e sposta il badge dell’argomento accanto al titolo (mi dispiace che lo screenshot sia in francese, ma il design è la parte più importante)

Cosa volete per la versione ufficiale?

[CAX.DO (Max)]

Ciao @Steven @Arkshine
Grazie mille per il tuo lavoro.

Ho un’altra questione: le due immagini sottostanti sono screenshot della Nuova versione e della Vecchia versione, rispettivamente. Come puoi vedere, la larghezza dei titoli degli articoli differisce tra le due versioni, il che è evidente dai ritorni a capo (mi dispiace, i titoli sono in cinese, ma ciò che conta è la posizione dei ritorni a capo).

È possibile aumentare la lunghezza dei titoli nella nuova versione? Uno degli scopi dell’utilizzo di questo componente è visualizzare più informazioni.

Non so programmare, quindi la mia descrizione potrebbe non essere molto professionale.

[CAX.DO (Max)]

Ho provato ad aggiungere questo pezzo di CSS e ha funzionato.

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