MD-Thematische Liste Mobile-Komponente

[Steven]

Es ist machbar!

Ich weiß nicht, ob ich das in die Standardeinstellungen aufnehmen würde, aber wenn Sie es ausprobieren möchten, hier ist der Code, den Sie in den header-Bereich einfügen können:

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

Für meinen Bildschirm habe ich Folgendes verwendet:

<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>
        {{!--
          Die `~`-Syntax entfernt Leerzeichen zwischen den Elementen, sodass sie
          `<a> class=topic-post-badgesSome text</a><span class=topic-post-badges>` erzeugt,
          ohne Leerzeichen dazwischen.
          Dadurch wird das topic-post-badge als dasselbe Wort wie "text"
          am Ende des Links betrachtet, was verhindert, dass es in eine eigene Zeile umgebrochen wird.
        --}}
        {{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)]

Das Auge wird nicht angezeigt. Ich habe das von Ihnen gepostete Skript zu einer neuen Theme-Komponenten-Erweiterung zu Ihrem Hauptthema hinzugefügt.

[Steven]

Für einige Symbole müssen Sie das entsprechende Font Awesome-Zeichen registrieren.

Überprüfen Sie die Einstellung svg icon subset und fügen Sie fa-eye hinzu.

[Heliosurge (Dan DeMontmorency)]

Danke, das hat es behoben. Ich dachte, ich hätte es hinzugefügt, aber ich muss vergessen haben, die Änderung zu committen.

[Heliosurge (Dan DeMontmorency)]

In Stable funktioniert alles gut. Aber „test passed“ scheint keine Ansichten oder Likes anzuzeigen. Selbst in der Vorschau, um sicherzustellen, dass andere Komponenten nicht mit Dingen wie dem Air Theme interferieren. Ihre Basiskomponente funktioniert wie vorgesehen. Die Erweiterung zeigt keine Ansichten oder Likes an.

[satonotdead]

Entschuldigung, aber was bedeutet das rote Symbol? Ist es wie ein Tag oder so etwas?

Können wir stattdessen ein Awesome Icon verwenden, um die Harmonie mit dem Rest des Forums zu wahren?

Danke fürs Teilen!

[Steven]

Ich hatte einige Probleme mit dem d-icon-Tag, falls keine Tags vorhanden waren.

Ich habe jetzt eine neue Lösung ausprobiert und ein Update hochgeladen, um ein Font-Awesome-Icon anstelle eines Emojis zu verwenden. Lassen Sie mich wissen, ob es gut funktioniert.

Bearbeiten: Rückgängig gemacht, es funktioniert auf dem Desktop, aber nicht auf dem Handy.

Wenn Sie es ausprobieren möchten, ist hier das CSS, das Sie verwenden können:

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

Hallo, die Massenauswahloption auf Mobilgeräten funktioniert nicht, wenn diese Themenkomponente aktiviert ist.

[Steven]

Danke, ich habe ein Update hochgeladen

Du solltest jetzt das Kontrollkästchen neben dem Thema haben

[digitaldominica]

Danke, das Problem hat sich für mich gelöst.

[Steven]

Ich sehe keine Möglichkeit, dies mit der neuen Glimmer-Themenliste zum Laufen zu bringen

Ich denke, diese Themenkomponente wird aufgegeben. Vorerst können wir sie als deprecated kennzeichnen

Ich werde vielleicht etwas Neues versuchen, das nur Plugin-Outlets verwendet, aber es wird definitiv nicht dasselbe Aussehen haben.

[CAX.DO (Max)]

Dies ist in der Tat eine sehr nützliche Komponente, besonders ihr Aussehen, das es dem Forum ermöglicht, mehr Inhalte anzuzeigen. Es ist wirklich schade, dass sie in Zukunft nicht mehr nutzbar sein wird.

[Canapin (Coin-coin le Canapin)]

Ich bin ein großer Fan dieser Komponente, da ich die Standard-Mobile-Ansicht für unterdurchschnittlich halte (am seltsamsten ist der Avatar des letzten Posters auf der linken Seite). Es wäre schade, sie aufzugeben, leider kann ich nicht programmieren, und das kann ChatGPT in dieser Angelegenheit auch nicht

[Arkshine]

Ich werde es versuchen!

[Arkshine]

Ich habe einen PR erstellt

DEV: Modernize using plugin outlet

[Steven]

Tolle Arbeit!

Ich hatte noch keine Gelegenheit, es auszuprobieren. Hast du es geschafft, auch das Thema-Badge (ungelesene Beiträge) zu bekommen? Ich habe einige Tests durchgeführt und das Thema-Badge neben dem Thema-Titel war nicht so einfach hinzuzufügen.

Aber ich bin lange nicht auf deinem Niveau.

[Arkshine]

@Steven Ich habe nicht getestet! Mit den aktuellen Änderungen ersetzt es nichts, daher kann man erwarten, dass es angezeigt wird (aber vielleicht nicht an der erwarteten Stelle).

EDIT:
So sieht es aus:

Die ursprüngliche Ansicht ohne die Komponente sieht so aus:

Möchtest du den Avatar immer noch ersetzen oder ist es so in Ordnung?
Ich werde sehen, ob ich den Avatar ersetzen kann.

EDIT2:

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

[Steven]

Danke @Arskshine für deine Arbeit!

Ich habe ein wenig an der Komponente gearbeitet und habe einen Vorschlag für euch alle.

Das ist die aktuelle Ansicht:

Ich habe an einer Alternative gearbeitet, die den Auszug wiederherstellt und das Thema-Badge neben den Titel verschiebt (Entschuldigung, der Screenshot ist auf Französisch, aber das Design ist der wichtigste Teil)

Was wünscht ihr euch für die offizielle Version?

[CAX.DO (Max)]

Hallo @Steven @Arkshine
Vielen Dank für Ihre Arbeit.

Ich habe noch eine weitere Angelegenheit: Die beiden untenstehenden Bilder sind Screenshots der neuen und der alten Version. Wie Sie sehen können, unterscheidet sich die Breite der Artikelüberschriften zwischen den beiden Versionen, was sich durch die Zeilenumbrüche zeigt (Entschuldigung, die Titel sind auf Chinesisch, aber wichtig ist die Position der Zeilenumbrüche).

Ist es möglich, die Länge der Titel in der neuen Version zu erhöhen? Einer der Zwecke der Verwendung dieser Komponente ist die Anzeige von mehr Informationen.

Ich habe keine Programmierkenntnisse, daher ist meine Beschreibung möglicherweise nicht sehr professionell.

[CAX.DO (Max)]

Ich habe versucht, diesen CSS-Code hinzuzufügen, und es hat funktioniert.

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