Alternative Voting Category Style

This theme component offers alternative styling for any specified categories that make use of the Discourse Voting plugin.

Installation

Repository Link
https://github.com/discourse/discourse-alternative-voting-category-style

If you are unfamiliar with theme components and how to install them, check out the theme installation guide. And if you’d like to learn more about Discourse themes, take a look at this guide.

Preview

The overall idea is based off of this mockup created by @erlend_sh.

Notable Features

  • Compact view
  • More prominent vote count
  • Colored icon to indicate that you voted on the topic

Settings

There is currently one setting use to specify which categories to apply the style:

Extra Customizations

If you want to customize the look of specific tags within your voting topic (see the “IN PROGRESS” tag in the preview image above), you can create an additional component and modify the following CSS to fit your needs

.voting-category.list-container {
    .topic-list-item:not(.about-topic) {
        // Common styling for all listed tags
        [data-tag-name="in-progress"],
        [data-tag-name="my-tag-one"],
        [data-tag-name="my-tag-two"] {
            font-weight: bold;
            text-transform: uppercase;
            font-family: Trebuchet MS;
        }
        // Specific styling for individual tags
        [data-tag-name="in-progress"] {
            color: #9e63d0;
        }
        [data-tag-name="my-tag-one"] {
            color: #5bd04a;
        }
        [data-tag-name="my-tag-two"] {
            color: #5f5dd0;
        }
    }
}

Future

The one thing that you may notice missing from the original mockup is an excerpt of the topic under the topic title. This feature would require changes to core or the voting plugin that will need to wait for now.

As always, please let me know if you experience any issues.

Big thanks @simon and @erlend_sh for working with me on this :heart_eyes:

38개의 좋아요

Great theme component! One thing I found was that the unlisted icon is not fitting into your design. The topic title is overlapping it.

03%20AM

8개의 좋아요

Thanks for the quick feedback! I will try to get that fixed a little later today :slightly_smiling_face:

Edit: @Sean_R I just pushed a quick fix. I may try to tinker with it a little more to get it even better, but there shouldn’t be any more overlap!

6개의 좋아요

Looks good now

image

I also had to change the CSS to make the topic list wider.

Was

.voting-category.list-container {
  max-width: $small-width;

Changed to

.voting-category.list-container {
  max-width: $large-width;
6개의 좋아요

Thanks for confirming that is fixed!

The smaller width was based on the original design. The rationale was that there was so little information displayed on each topic row that it would look odd at full width. I can imagine some people might feel the opposite - that the smaller width looks odd. A width option to toggle via a theme setting would be an easy addition. I’ll add that to my to-do list with this.

5개의 좋아요

This component has been updated! The changes include:

  • Support for font awesome changes
  • Additional setting to toggle between small-width and large-width
6개의 좋아요

이 컴포넌트는 여전히 작동하나요?

저는 free.discourse.group 인스턴스를 사용 중이며, Discourse Vote 플러그인의 대안을 찾고 있습니다.

이 컴포넌트는 여전히 작동하지만, 투표 플러그인 대신 사용하는 것이 아니라 함께 사용하도록 설계되었습니다. 이는 투표 플러그인에 대한 대안 스타일 옵션만 제공합니다.

3개의 좋아요

아, 이제 알겠어요. 관심 가져주셔서 감사합니다 :hugs:

3개의 좋아요

아직 이 플러그인을 활발하게 사용하시는 분이 계신가요? 현재 투표 플러그인(0.5) 버전으로 시도해 봤는데, 외형적으로는 꽤 좋지만 더 이상 기능이 작동하지 않는 것 같습니다. 적어도 저희 인스턴스에서는 그렇습니다.

정확히 어떤 부분이 작동하지 않는지 자세히 설명해 주시겠어요? 방금 테스트해 보았는데 모든 것이 정상적으로 작동하는 것으로 보입니다. 참고로 이 컴포넌트는 현재 순수하게 스타일링만 담당하고 있습니다. 토픽 목록에서 직접 투표할 수는 없습니다.

2개의 좋아요

즉시 답변해 주셔서 감사합니다!!!

첫째

이 컴포넌트는 현재 순수하게 스타일링 용도라는 점을 참고해 주세요. 토픽 목록에서 직접 투표할 수 없습니다.

아, 그걸 몰랐네요. 토픽 목록에서 바로 투표할 수 있을 줄 알았거든요. 알겠습니다. 그러면 다시 검토해 봐야겠네요.

둘째
실제 데이터/투표가 표시되지 않는 것 같습니다. 사진 두 장 첨부합니다: 하나는 스타일이 활성화된 상태이고, 다른 하나는 비활성화된 상태입니다.


테마와의 충돌인 것 같아서 다른 테마를 사용해 보았지만, 문제는 해결되지 않는 것 같습니다.

1개의 좋아요

음, 최신 사이트에서 테스트해 봤는데, 투표 수나 “투표함” 표시에 문제가 없네요:

브라우저 콘솔에 오류가 있는지 확인해 볼 수 있을까요? 다른 컴포넌트나 커스터마이징 없이 완전히 기본 테마로만 시도해 본 적은 있나요?

2개의 좋아요

테마/컴포넌트에 CSS 규칙을 추가하여 이 문제를 수정할 수 있어야 합니다. Ratings 플러그인이 설치되어 있지 않아 테스트는 못 해봤지만, 아마 다음과 같은 규칙이 필요할 것 같습니다:

.rating-list {
  margin-left: 65px;
}

실제로 현재 이 컴포넌트에 대한 작업을 진행 중입니다(오랜 기간 동안 변경 사항이 없었거든요!). 따라서 사용자 정의 토픽 목록 콘텐츠가 기본적으로 올바르게 위치하도록 설정할 수 있는지 확인해 보겠습니다.

3개의 좋아요

완벽해요, 감사합니다 :ok_hand:

1개의 좋아요

이 테마 컴포넌트를 설치하고 두 개의 카테고리에 활성화했습니다. 한쪽은 버그가 있는 것처럼 보이고, 다른 한쪽은 정상적으로 보입니다. 차이점은 카테고리 이름이 목록에 표시되어 투표 수와 겹쳐 보인다는 것입니다. 제가 생각할 수 있는 유일한 차이는 버그가 있는 카테고리는 하위 카테고리가 있는 반면, 다른 카테고리는 하위 카테고리가 없다는 점입니다.

버그 있음, 하위 카테고리 있음:

정상, 하위 카테고리 없음:

도움이 된다면, 이 기본 테마는 그레이 앰버(Grey Amber) 색상 팔레트를 사용하고 있습니다.

1개의 좋아요

리포트 감사합니다! 구성 요소를 업데이트하면 다음과 같은 수정 사항을 적용할 수 있습니다:

4개의 좋아요

이렇게 빠른 대응을 정말 감사합니다! 수정이 잘 작동합니다.

P.S. #voting 태그를 추가해 주세요. 이 컴포넌트는 너무 훌륭해서 숨기기에는 아깝습니다. :slight_smile:

3개의 좋아요

개별 주제에 있는 투표 표시기를 동일한 스타일로 보이게 하는 테마 컴포넌트가 있나요?

1개의 좋아요

이 컴포넌트는 참여자, 조회수, 활동 시간을 표시하는 열도 함께 숨깁니다. 이 부분을 분리해서, 해당 열을 숨기지 않고 표결 스타일 변경만 쉽게 활성화할 수 있으면 좋겠습니다.

아니면,

  .posters,
  .views,
  .activity {
    display: none;
  }

@if $use_compact_width == "true" {
안으로 옮기는 건 어떨까요?

2개의 좋아요