MD 토픽 목록 모바일 컴포넌트

데스크톱의 토픽 목록 페이지에 대한 소규모 리디자인 작업을 마친 후, 토픽 제목에 더 많은 공간을 제공하고, 두 번째 줄에 추가 정보를 표시하며, 마지막 게시글 전용 컬럼을 포함하는 등 유사한 아이디어를 적용한 모바일 버전을 조금 더 작업했습니다.


호환성

이 테마 컴포넌트는 태그, 추천 링크 기능 및 원본 토픽 목록 버전에서 사용 가능한 모든 기능과 호환됩니다. 모든 카테고리 스타일 표시 방식(점, 막대, 상자)이 이 컴포넌트와 함께 작동해야 합니다.

테마 컴포넌트는 몇 가지 색상 팔레트에서 테스트되었으며, 라이트, 뉴트럴 또는 다크 테마 모두에서 작동합니다.

불행히도, 토픽 목록 표시를 이미 변경하는 플러그인(예: Topic List Previews)과 함께 작동하지 않을 수 있습니다.

문제가 발생하면 알려주세요!

22개의 좋아요

좋은 플러그인입니다. 다만 일반적인 권장 사항으로, 테마 및 컴포넌트 목록에 최소 Discourse 버전을 명시해 주실 수 있을까요? 저는 Stable 브랜치를 사용 중이지만 2.5beta용 테스트 샌드박스는 가지고 있습니다. @codinghorror님?

구버전을 위한 특정 브랜치를 따로 만들었습니다.

설치 시에는 https://github.com/iunctis/md-topic-list-mobile 링크를 사용하고, 고급 옵션에서 older-discourse를 추가하세요.

오른쪽 열의 아바타가 정상적으로 표시되면 작동하는 것입니다. 몇 주 후 아바타가 깨지면, 고급 옵션을 사용하지 않고 해당 컴포넌트를 다시 설치하기만 하면 됩니다.

2개의 좋아요

직접적인 비교:

기본 / 컴포넌트

마지막 게시자의 아바타가 오른쪽에 배치된 점이 좋습니다.
기본 모바일 레이아웃에서는 주제 제목 바로 왼쪽에 큰 아바타가 배치되어 있어 "저자"임을 강조하는 느낌이 강하게 듭니다.

궁금해서 scss 파일을 살펴봤는데, scss에서 제공하는 중첩 구문을 사용하지 않은 특별한 이유가 있나요?

7개의 좋아요

고급 옵션을 시도해 보았지만, 여전히 '2.5 beta2에서 비활성화된 요구 사항’이라고 표시됩니다.

주로 css에서 중첩 문법을 사용할 때 실수를 더 많이 하기 때문입니다 :grimacing:

하지만 주제 목록 디자인에 대해 더 자신감이 생기는 몇 주 후에는 다시 작성해 볼 수 있을 것 같습니다.

@Heliosurge about.json 파일을 수정했는데, 이제 괜찮을 것 같습니다.

3개의 좋아요

정말 멋진 작업에 감사드립니다. :clinking_beer_mugs::smiling_face_with_sunglasses::+1::sparkles:

2개의 좋아요

방금 작은 업그레이드를 적용했습니다. 새로운 기능은 없지만, 새로운 썸네일 함수와의 호환성을 추가했습니다.

이제 테마 컴포넌트는 다음 컴포넌트와 완전히 호환됩니다:

4개의 좋아요

정말 좋아요, 너무 깔끔해요. @Steven 총 답글 수를 클릭했을 때 나타나는 이 네이티브 기능을 CSS로 추가할 수 있을지 궁금했어요.

CSS로는 안 되지만 템플릿을 수정할 수는 있습니다.

저는 개인적으로 이 기능을 첫 번째 게시글에 접근하는 용도로만 사용하지만, 제 방식대로 탐색하는 것을 모두에게 강요할 수는 없죠. 이 기능을 복원할 수 있는지 알아볼게요.

2개의 좋아요

이 기능을 복원하기 위해 컴포넌트를 업그레이드했습니다. 두 가지 지원 환경에서 테스트를 수행했는데, 문제가 있다면 알려주세요.

2개의 좋아요

Hey @Steven, 새 메시지 알림이 두 번 표시되는 것 같습니다. 하나는 주제 제목 오른쪽에, 다른 하나는 답장 카운터 대신 표시됩니다. 이건 버그인가요, 아니면 제가 놓치고 있는 게 있나요?

그런데 모바일 주제 뷰가 정말 잘 만들어졌네요. 제 사용자들도 좋아합니다.

1개의 좋아요

주제 진입 버튼이 있는 마지막 업데이트에서 발생한 문제인 것 같습니다. 이전 버전으로 되돌리는 것이 더 나을 것 같아요. 이 컴포넌트에 제대로 맞게 조정되지 않은 것 같습니다.

몇 분 안에 업그레이드를 진행하겠습니다.

수정: 방금 업그레이드를 완료했습니다. 개선되었는지 알려주세요.

1개의 좋아요

네, 이제 완벽하게 작동합니다. 빠르게 처리해 주셔서 감사합니다 :slight_smile:

1개의 좋아요

태그 목록 앞에 추가하신 태그 이모지를 제거해야 한다고 생각합니다:

OS에 따라 표시가 다릅니다:

image

포럼 디자인과 어울리지 않을 수 있으며, 데스크톱 디자인 선택 사항(기본적으로 아이콘이 없는 경우)을 존중해야 합니다.

태그 아이콘 컴포넌트로 태그 아이콘을 실제로 추가하면 다음과 같이 보입니다:

image

그래서 CSS로 이모지를 숨겼지만, 애초에 여기에 있어야 할 것 같지 않습니다 :slight_smile:

현재 제 포럼에서 표시되는 모습:

image

.md-tlm .discourse-tags::before {
    display: none;
}
.md-tlm .tl-replies {
    margin-right: 8px;
}
1개의 좋아요

피드백 감사합니다. 인터넷 연결에 문제가 많아서 디스코र्स 관련 작업이 다소 뒤처져 있습니다.

태그 아이콘이나 이모지 아이디어는 마음에 듭니다. 다만 두 테마 구성 요소를 d-icon 태그로 변경할 가능성이 높습니다. 동시에 태그 아이콘 구성 요소와의 호환성을 위해 아이콘을 사용하지 않는 브랜치도 만들 예정입니다.

1개의 좋아요

스티븐님, 안녕하세요!
현재 버전의 Discourse에 레이아웃 문제가 몇 가지 있는 것 같습니다.
빈 테마를 만들고 MD Topic List Mobile 컴포넌트만 포함해 보았는데, 이것이 실제로 문제인 것 같습니다.
모바일 화면은 다음과 같습니다:

여백/패딩에 뭔가 이상한 점이 있습니다.

2개의 좋아요

감사합니다. 지금 바로 확인해 보겠습니다.

현재 진행 중인 코어 재설계를 고려할 때, 템플릿을 다시 작성하여 커스텀 클래스를 최대한 제거하는 것이 가장 좋다고 생각합니다.

수정: 새로운 커밋을 추가했습니다. 템플릿과 스타일시트를 다시 작성하여 향후 업데이트가 더 쉬워지도록 했습니다.

문제가 있으면 알려주세요 @Canapin

4개의 좋아요

완벽해 보이네요. 감사합니다!

1개의 좋아요

답변 수 옆에 전체 주제 좋아요 수와 조회 수를 추가할 수 있을까요?

2개의 좋아요