# モバイルでトピックボタンがセレクトに変換されるのを無効にする

**URL:** https://meta.discourse.org/t/disable-topic-buttons-converting-to-select-on-mobile/248266
**Category:** Development
**Created:** [2022 年 12 月 8 日午後 12:26 UTC](https://meta.discourse.org/t/disable-topic-buttons-converting-to-select-on-mobile/248266 "2022-12-08T12:26:17Z")
**Posts on this page:** 1
**Showing post:** 2

<div class="post-metadata">

### Author: ![Don](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/don/32/228726_2.png) [@Don](https://meta.discourse.org/u/Don)
#### Post date: [2022 年 12 月 8 日午後 9:06 UTC](https://meta.discourse.org/t/disable-topic-buttons-converting-to-select-on-mobile/248266/2 "2022-12-08T21:06:21Z")

</div>

こんにちは。

トピックフッターボタンテンプレートをオーバーライドすることで実現できます。

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

このテンプレートを変更して、モバイルビューでもボタンを表示するようにしました。これは、コアテンプレートに変更があった場合に、こちらも変更しないとサイトが壊れる可能性があるため、少しリスクがあります。そのため、サイトを更新するたびにコアテンプレートを確認する必要があります。

Common/Header

```xml
<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>

```

 ![Screenshot 2022-12-08 at 21.43.52](https://global.discourse-cdn.com/meta/original/4X/0/8/c/08cd309d6e1ce8080a6c7445f74284d358876c89.png)

モバイルではラベルを非表示にし、ブックマークされたアイコンを青色でモバイル版に追加したいです。

Mobile/CSS

```scss
#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);
    }
  }
}

```

 ![Screenshot 2022-12-08 at 21.47.29](https://global.discourse-cdn.com/meta/original/4X/6/b/b/6bbe70dc3b5017bc1b9d8d5a2130f58981f48b60.png) ![Screenshot 2022-12-08 at 21.52.39](https://global.discourse-cdn.com/meta/original/4X/6/e/c/6ecb60b0966e394cf397a7247f81d21d4b01079d.png)

---

_[View the full topic](https://meta.discourse.org/t/disable-topic-buttons-converting-to-select-on-mobile/248266)._