하위 범주가 있는 상자를 목록으로 변환

[MichelleBarnett]

안녕하세요,

현재 “하위 카테고리 포함 박스” 설정을 켜 놓았는데, 하위 카테고리가 너무 많아 화면이 다소 어지러워 보입니다. (이미지 참조)

하위 카테고리를 목록 형태로 표시할 수 있는 방법이 있을까요? 아니면 “카테고리 순서 변경” 기능을 사용하지 않고 수동으로 위치를 조정할 수 있을까요? 혹은 양쪽 여백을 줄여서 한 줄에 더 많은 항목이 들어오도록 할 수도 있을까요?

감사합니다!

[Canapin (Coin-coin le Canapin)]

편집: 2023년 11월 9일 기준: 사각형 불릿(squared bullets) 이외의 카테고리 스타일은 가까운 장래에 중단되거나 사용 불가능해질 예정입니다.

---

@MichelleBarnett

하위 카테고리가 있는 박스

늦게 답글을 달지만, 늦은 것이 나을 수는 없으니…

상위 카테고리에 하위 카테고리를 쌓으려면:

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

불릿 목록(bulleted list)의 경우, 카테고리에 사용하는 스타일에 따라 달라집니다. “bullet” 스타일을 사용한다고 가정해 보겠습니다:

다음과 같이 보입니다:

상위 카테고리에는 색상 불릿을 유지하되, 하위 카테고리에는 적용하지 않으려면:

실제 불릿 문자를 사용하는 경우:

.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;
        }
    }
}

더 간단하게, 현재 Discourse 카테고리 불릿의 모양을 변경하는 경우:

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