Boxen mit Unterkategorien in eine Aufzählungsliste

[MichelleBarnett]

Hallo,

ich habe aktuell die Einstellung „Boxen mit Unterkategorien" aktiviert, aber ich habe sehr viele Unterkategorien, was etwas überfüllt wirkt. (siehe Bild)

Gibt es eine Möglichkeit, die Unterkategorien als Aufzählungsliste darzustellen? Oder sie manuell zu verschieben, anstatt die Funktion „Kategorien neu anordnen" zu verwenden? Oder könnte ich vielleicht die Ränder auf jeder Seite verkleinern, damit mehr auf einer Zeile Platz finden?

Vielen Dank!

[Canapin (Coin-coin le Canapin)]

Bearbeitung: Ab dem 09.11.2023: Kategorie-Stile, die keine quadratischen Aufzählungszeichen sind, werden in naher Zukunft eingestellt/nicht mehr verfügbar sein.

---

@MichelleBarnett

Kästen mit Unterkategorien

Ich antworte hier später, aber besser spät als nie…

Um sie übereinander zu stapeln:

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

Was eine Aufzählungsliste angeht, so hängt es davon ab, welchen Stil Sie für Ihre Kategorien verwenden. Nehmen wir an, Sie verwenden „Aufzählungspunkte“:

Es wird so aussehen:

Wenn Sie die farbigen Aufzählungszeichen für die übergeordneten Kategorien beibehalten möchten, aber nicht für die Unterkategorien:

Verwendung des tatsächlichen Aufzählungszeichens:

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        &:before {
            content: "•";
            margin-right: .25em;
            font-size: 1.5em;
            line-height: 0;
        }
        .badge-category-bg {
            display: none;
        }
        .subcategory-image-placeholder {
            display: none;
        }
    }
}

Einfacher, durch Umformen des aktuellen Discourse-Kategorie-Aufzählungszeichens:

.category-box .subcategories {
    flex-direction: column;
    .subcategory {
        .badge-category-bg {
            border-radius: 50%;
        }
        .subcategory-image-placeholder {
            display: none;
        }
    }
}