모바일에서 주제 버튼이 셀렉트로 변환되는 기능 비활성화

[misham (Mykhailo)]

안녕하세요, 모바일에서 이 버튼들을 select로 변환하는 기능을 비활성화하는 방법이 있을까요? Imgur: The magic of the Internet 그냥 단순한 버튼으로 표시하고 싶습니다.

![|32x32](https://d3bpeqsaub0i6y.cloudfront.net/user_avatar/meta.discourse.org/jammydodger/64/254611_2.png

[Don]

안녕하세요,

오버라이딩을 통해 topic-footer-buttons 템플릿을 수정하면 됩니다.

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs

모바일 뷰에서도 버튼이 표시되도록 템플릿을 수정했습니다. 이는 코어 템플릿에 변경 사항이 생기면 이 부분도 함께 수정해야 하므로 다소 위험할 수 있습니다. 그렇지 않으면 사이트가 손상될 수 있습니다. 따라서 사이트를 업데이트할 때마다 코어 템플릿을 확인해야 합니다.

Common/Header

<script type="text/x-handlebars" data-template-name="components/topic-footer-buttons">
  <div class="topic-footer-main-buttons">
    <TopicAdminMenuButton @topic={{this.topic}} @openUpwards="true" @toggleMultiSelect={{this.toggleMultiSelect}} @showTopicSlowModeUpdate={{this.showTopicSlowModeUpdate}} @deleteTopic={{this.deleteTopic}} @recoverTopic={{this.recoverTopic}} @toggleFeaturedOnProfile={{this.toggleFeaturedOnProfile}} @toggleClosed={{this.toggleClosed}} @toggleArchived={{this.toggleArchived}} @toggleVisibility={{this.toggleVisibility}} @showTopicTimerModal={{this.showTopicTimerModal}} @showFeatureTopic={{this.showFeatureTopic}} @showChangeTimestamp={{this.showChangeTimestamp}} @resetBumpDate={{this.resetBumpDate}} @convertToPublicTopic={{this.convertToPublicTopic}} @convertToPrivateMessage={{this.convertToPrivateMessage}} />

    {{#each this.inlineButtons as |actionable|}}
      <DButton @id={{concat "topic-footer-button-" actionable.id}} @class={{concat "btn-default topic-footer-button " actionable.classNames}} @action={{actionable.action}} @icon={{actionable.icon}} @translatedLabel={{actionable.label}} @translatedTitle={{actionable.title}} @translatedAriaLabel={{actionable.ariaLabel}} @disabled={{actionable.disabled}} />
    {{/each}}

    <PluginOutlet @name="topic-footer-main-buttons-before-create" @args={{hash topic=this.topic}} @connectorTagName="span" />

    {{#if this.topic.details.can_create_post}}
      <DButton @class="btn-primary create" @icon="reply" @action={{this.replyToPost}} @label="topic.reply.title" @title="topic.reply.help" />
    {{/if}}

    <PluginOutlet @name="after-topic-footer-main-buttons" @args={{hash topic=this.topic}} @connectorTagName="span" />
  </div>

  <PinnedButton @pinned={{this.topic.pinned}} @topic={{this.topic}} />

  {{#if this.showNotificationsButton}}
    {{#if this.showNotificationUserTip}}
      <UserTip @id="topic_notification_levels" @selector=".notifications-button" />
    {{/if}}

    <TopicNotificationsButton @notificationLevel={{this.topic.details.notification_level}} @topic={{this.topic}} />
  {{/if}}

  <PluginOutlet @name="after-topic-footer-buttons" @args={{hash topic=this.topic}} @connectorTagName="span" />
</script>

모바일에서는 라벨을 숨기고, 모바일 버전에서도 북마크 아이콘에 파란색을 적용하도록 하겠습니다.

Mobile/CSS

#topic-footer-buttons {
  .topic-footer-button {
    .d-icon {
      margin: 0;
    }
    .d-button-label {
      display: none;
    }
  }

  .bookmark.bookmarked {
    .d-icon-bookmark,
    .d-icon-discourse-bookmark-clock {
      color: var(--tertiary);
    }
  }
}