Mobile Unterkategorien verschieben?

Hallo zusammen,

ich habe mich in den letzten Wochen mit dem Erstellen und Arbeiten mit Themes beschäftigt, da wir uns jetzt fast ausschließlich darauf konzentrieren.

Ich habe einige erstaunliche und coole Dinge mit Theme-Komponenten gemacht, aber ich versuche etwas herauszufinden, das mich den ganzen Abend beschäftigt hat.

Wie verschiebe ich auf Mobilgeräten die Liste der Unterkategorien, die auf der Kategorieseite angezeigt wird (wir verwenden Kategorien mit hervorgehobenen Themen als Standard), über die Themenliste und unter den Kategorietitel?

1 „Gefällt mir“

Es gibt zwei Möglichkeiten, dies zu tun. Wenn Sie die Reihenfolge des HTML selbst ändern müssen, dann bleibt Ihnen nichts anderes übrig, als die Vorlage zu überschreiben. Dies ist für die langfristige Wartbarkeit nicht ideal, denn wenn wir etwas ändern, auf dem die Vorlage basiert, könnte dies Ihre Anpassung beeinträchtigen.

Der andere Weg wäre mit CSS, was einfacher zu warten sein sollte. Ich habe dies nicht gründlich getestet, daher sollten Sie auf Nebenwirkungen achten… aber dies kann die Dinge so neu anordnen, wie Sie es sich wünschen:

.mobile-view .category-list {
  tbody {
    display: flex;
    flex-direction: column
  }
  .subcategories-list {
    order: -1
  }
  tr:first-child { // dies ist der Abschnitt mit dem Kategorietitel
    order: -1
  }
}

Dies wandelt das Tabellenlayout in Flexbox um, was es Geschwisterelementen ermöglicht, mit order neu angeordnet zu werden.

3 „Gefällt mir“

Vielen Dank!\n\nIch habe versucht, es mir zu kompliziert zu machen, indem ich versucht habe, mich in Outlets einzuhaken, Templates zu überschreiben und so weiter, obwohl es wirklich nicht nötig war.\n\n

\n\nDas ist, wo wir bisher sind. (Derzeit verwenden wir Graceful als Basistemplate für alle unsere Bearbeitungen, um es dem, was die Benutzer gewohnt sind, einigermaßen nahe zu bringen). Mit Ihrer Korrektur konnte ich schnell die Reihenfolge ändern, in der Kategoriebeschreibungen angezeigt wurden, sobald ich sah, was Ihr obiger Code bewirkt.\n\nEs ist noch nicht fertig, aber fast da.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.