토픽 카드

[Gonerdot]

태그의 위치를 변경하려면 파일에서 무엇을 수정해야 하는지 알려 주세요.
제 생각에는 제목이 먼저 와야 합니다.

변경 전:

변경 후:

[manchestermania (Quaerimus Felicitatem)]

정말 멋진 TC를 만들어 주셔서 감사합니다. 디자인이 정말 현대적이고 단순하며 세련된 느낌을 줍니다.

한 가지 질문과 요청이 있습니다.

검색 결과 화면도 동일한 스타일로 표시할 수 있을까요? 사용자분들이 검색 기능을 많이 사용하시므로, 검색 결과 화면이 TC 화면과 동일하게 보이면 정말 좋겠습니다.

다시 한번 이 작업에 감사드립니다.

[chapoi]

@manchestermania

검색 결과 화면도 같은 스타일로 표시할 수 있을까요? 우리 사용자들은 검색 기능을 많이 사용하므로, 검색 결과 화면이 TC 화면과 동일한 모습이면 정말 좋겠습니다.

좋은 아이디어지만, 안타깝게도 앱의 완전히 다른 영역이라 단순히 그대로 적용하는 것은 불가능합니다. 이를 구현하려면 기본적으로 완전히 새로운 컴포넌트를 만들어야 합니다.

[Ahmed26]

@chapoi 이미지 크기와 대상 영역을 어떻게 줄일 수 있나요?

토픽 카드가 너무 큽니다

[P_O]

정말 훌륭한 테마 컴포넌트네요. 다음 항목들을 편집할 수 있는 설정 페이지를 추가하는 등의 개선점을 제안해도 될까요?

• 둥근 모서리 설정 값 또는 해제
• 그림자 설정 값 또는 해제
• 답글, 보기 및 활동 활성화/비활성화 설정
• 포스터 표시 true 또는 false

[traceymoko (Tracey)]

@Gonerdot

이 컴포넌트를 여러 테마에 설치해 보았는데, 어디에나 약간 삐뚤어 보입니다. 제가 뭘 잘못하고 있는 건가요?

@chapoi

자, 토픽 카드에는 max-height가 필요합니다. 그렇지 않으면 다음과 같은 문제가 발생합니다:

@chapoi

font-size, font-family 또는 line-height와 관련이 있을 수 있습니다. 불행히도 이것은 개별적인 조정이 필요하며, 제가 일괄적으로 수정할 수 있는 부분이 아닙니다.

혹시 다른 분들께 도움이 될까 봐 공유합니다:

제 경우, Minima 테마에 테마 컴포넌트로 설치했을 때 썸네일이 있는 경우 토픽 카드의 최대 높이가 충분히 크지 않아서 같은 문제를 겪었습니다.

이를 수정하기 위해 사용한 관련 CSS는 다음과 같습니다:

// 썸네일이 있는 토픽 카드의 최대 높이 증가
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(인스펙터에서 확인했을 때 기본 높이는 210px인 것 같았습니다)

조정이 필요할 수 있습니다 – 모바일 폭에서는 확인해 보지 않았습니다.

수정 전

수정 후

[Heliosurge (Dan DeMontmorency)]

이것이 설정을 통해 어떤 카테고리에 토픽 카드를 사용할지 선택할 수 있는지 궁금합니다. 모바일에서는 토픽 섬네일이 그리 편하지 않기 때문에 #customization:theme에서 이 기능이 사용될 수 있다면 좋겠습니다.

정말 멋진 컴포넌트입니다.

[chapoi]

@traceymoko

저의 경우에도 섬네일이 있는 경우 주제 카드의 최대 높이가 충분히 크지 않아 같은 문제가 발생했습니다. 이는 Minima 테마에 테마 구성 요소로 설치할 때의 상황이었습니다.

이를 수정하기 위해 사용한 관련 CSS는 다음과 같습니다:

// 섬네일이 있는 주제 카드의 최대 높이 증가
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

(인스펙터로 확인했을 때 기본 높이는 210px인 것 같았습니다)

조정이 필요할 수 있습니다. 모바일 폭에서는 확인해 보지 못했기 때문입니다.

네, 제가 이전에 말씀드린 것이 바로 이겁니다. 다른 매개변수에 따라 210px은 너무 작을 수 있고, 275px은 너무 클 수 있습니다. 모든 상황에 맞는 보편적인 해결책을 만드는 것은 어렵습니다.

추가 설정(예: @Heliosurge가 요청한 대로 카테고리를 선택하는 것)을 추가할 수 있으며, 각 포럼이 자유롭게 조정할 수 있도록 최대 크기 설정을 포함할 수도 있습니다.

[Truest]

1. 사진을 오른쪽으로 슬라이드하는 것은 어떨까요?
   사진이 있는 경우와 없는 경우의 배치가 서로 다르고 일관성이 없습니다.
2. 일부 콘텐츠가 표시될 때 하단 텍스트가 잘리는 경향이 있는 것 같습니다.

[icaria36]

이 테마 컴포넌트가 Air Theme 에서 어떻게 보이는지 궁금했습니다. 또한 이미지 있는 토픽과 없는 토픽을 함께 섞어보는 것도 테스트해 보았습니다. 기대는 되지만 아직은 완벽하지는 않은 것 같습니다. CSS만으로 문제를 해결할 수도 있고, 더 깊은 작업이 필요할 수도 있겠네요.

모바일에서는 잘 보입니다!

일단 지금은 삭제하겠지만, 의도한 대로 매우 좋아 보이므로 이 토픽을 계속 주시하겠습니다.

그리고 토픽 자체에 이미지가 없을 때 카테고리 이미지를 가져오는 기능도 좋은 추가 기능이 될 것 같습니다.

[icaria36]

토픽 카드(Topic Cards) 구성 요소가 현재처럼 토픽의 s(좋아요)만 표시하는 것이 아니라, 공식 Topic List Thumbnails 블로그 모드에서처럼 조회 수와 댓글 수도 함께 표시하려면 무엇이 필요할까요?

토픽 목록 썸네일(Topic List Thumbnails)

토픽 카드(Topic Cards)

또한, 토픽 목록 썸네일의 마지막 활동 날짜(위 사진의 “1d”) 사용 방식이 토픽 카드의 “게시(Published)” 날짜보다 더 좋다고 생각합니다. 활동 날짜는 디스코스의 기본 설정과 일치하며 사용자에게 더 많은 정보를 제공합니다. 또한 디자인 구현이 조회 수, 좋아요, 게시물 옆에 매우 자연스럽게 배치됩니다.

관심 있으신 분들을 위해, 디폴트 테마, Air Theme, 토픽 카드와 토픽 목록 썸네일 간의 조합을 수 시간 동안 테스트하고 CSS를 꽤나 만져본 후 얻은 추가적인 생각들을 공유합니다.

결국 토픽 카드 + 디폴트 테마 조합으로 결정했습니다. 여기에 카테고리용 카드를 제공하여 토픽 카드와 잘 어울리는 모던 카테고리 + 그룹 박스(Modern Category + Group Boxes)를 추가했습니다.

이유:

• 토픽 카드는 이미지가 있는 글과 없는 글을 모두 우아하게 처리합니다.
• 에어(Air) 테마는 매우 멋지지만, 토픽 카드와 모던 카테고리를 함께 사용하면 거의 동일한 효과를 낼 수 있습니다.
• 디폴트 테마를 유지하면 공식 테마 구성 요소와의 호환성을 기본적으로 보장받을 수 있습니다.

[icaria36]

좋아요, 아마도 이 질문이 더 간단할 수 있겠네요:

현재 모든 페이지 하단에 표시되는 '추천 주제(Suggested topics)'도 카드 형태로 표시됩니다. 메인 페이지의 카드 디자인은 좋아하지만, 모든 페이지 하단에서는 다소 과장되어 보이며 실제 페이지 내용이나 토론에서 시선을 분산시킨다고 생각합니다.

메인 페이지의 주제 카드에는 영향을 주지 않으면서, 추천 주제를 단순한 목록 형태로(기본 테마에 최대한 가깝게) 표시할 방법이 있을까요?

[chapoi]

아직은 아니에요. 하지만 제 생각에는 좋은 요청이니까, 항상 해당 기능에 대한 요청을 등록해 볼 수 있어요. 그렇게 하면 채택될 수도 있거든요.

[icaria36]

@chapoi

하지만 제 생각엔 좋은 요청이니까, 해당 기능에 대해 기능 요청을 해보는 것도 좋습니다.

네, 감사합니다. 위 요청도 포함하여 모두 처리했습니다.

• Don't show Topic Cards' style in the Suggested topics
• Add icons for Views and Replies, and Last Activity date in Topic Cards

그리고 참고로, 어제 저도 카드 밖으로 콘텐츠가 넘치는 같은 문제를 겪어 해당 방법을 시도해 보았습니다:

@traceymoko

이를 수정하기 위해 사용한 관련 CSS입니다:

// 썸네일이 있는 토픽 카드의 최대 높이 증가
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

이렇게 하면 모바일 화면이 깨지지 않나요? 제가 시도해 봤더니 제 경우엔 화면이 깨졌습니다.

[chapoi]

확인해 볼게요. 최소한 높이 설정을 추가해서 조정하기 쉽게 만들 거예요. 잊어버리지 않도록 알림을 걸어둘게요.

[icaria36]

토픽 카드의 높이를 제한하는 데 도움이 될 수 있는 몇 가지 관찰 사항입니다. 이를 철저히 테스트해 보지는 않았지만, 다음과 같이 보입니다…

• 설명은 항상 3줄로 제한되어 있지만, 제목은 2줄 이상으로 늘어날 수 있습니다. 제목이 2번째 줄이 필요한 경우는 비교적 흔하며, 디자인에서 이를 고려할 수 있습니다.
• 태그가 많고 카테고리 옆에 공간이 부족하면, 모든 태그가 아래 새 줄로 이동합니다. 태그가 항상 카테고리 옆에서 렌더링을 시작하고, 첫 줄에 들어가지 않는 태그만 두 번째 줄로 이어지도록 하는 것이 더 자연스럽고 공간 효율적입니다.
• "[날짜] 게시"와 는 현재 작성자 아래 새 줄에 위치합니다. 그러나 “게시” 요소를 옆에 오른쪽 정렬하여 작성자와 같은 줄에 배치할 수 있습니다. 이렇게 하면 각 항목의 세로 공간을 절약하고 콘텐츠가 넘쳐나는 위험을 줄일 수 있습니다.

태그에 대한 설명이 명확하지 않을 수 있으니, 기본적으로 카테고리 옆에서 시작하는 대신 새 줄에서 시작하는 방식을 아래에서 확인하실 수 있습니다:

[eisammy (Sammy)]

여기서 일어나고 있습니다

[icaria36]

태그에 1줄 제한을 강제하는 것이 기술적으로 가능한지 궁금합니다. 제목에는 2줄, 설명에는 3줄 제한이 이미 적용되어 있듯이요.

대부분의 Discourse 인스턴스는 0~5개의 태그를 사용하며, 1줄이면 충분합니다. 저희처럼 태그를 광범위하게 사용하는 인스턴스도 있지만, 토픽 카드에서 모든 태그를 볼 필요는 없습니다. 첫 번째 태그만 보여도 대략적인 내용을 파악하는 데 충분합니다.

줄 수에 대한 제약을 추가하면 이미지 크기와 종횡비가 다른 경우에도 토픽 카드의 일관성이 더 좋아집니다:

• 카테고리 및 태그: 1줄
• 제목: 최대 2줄
• 설명: 최대 3줄
• 작성자, 게시일, 좋아요: 1줄

[icaria36]

@icaria36

“[날짜] 게시”와 는 현재 작성자 아래 새 줄에 표시되어 있습니다. 하지만 “게시” 요소를 옆에 우측 정렬하여, 작성자와 같은 줄에 배치할 수 있습니다. 이렇게 하면 각 항목에서 세로 공간을 절약할 수 있고, 콘텐츠가 넘치는 위험도 줄일 수 있습니다.

참고로, 이 문제는 Add icons for Views and Replies, and Last Activity date in Topic Cards 에서 다룰 예정입니다.

[traceymoko (Tracey)]

@icaria36

@traceymoko

이 문제를 해결하기 위해 사용한 관련 CSS입니다:

// Increase max height for topic cards with thumbnail
.topic-card:has(.topic-card__thumbnail) {
    max-height: 275px;
}

이렇게 하면 모바일 뷰가 깨지지 않나요? 제가 직접 테스트해 보니 제 경우엔 문제가 발생했습니다.

아, 네. 그 부분에 대한 업데이트를 여기에 코멘트로 남기는 걸 깜빡했네요: 해당 코드를 common.scss가 아닌 desktop.scss에만 추가해야 했습니다.

원래 코멘트는 더 이상 수정할 수 없지만, 제 테마 컴포넌트에는 업데이트했습니다: Minima Adjustments for Topic Cards