Desativar botões de tópico convertendo para selecionar no celular

[misham (Mykhailo)]

Olá, há alguma maneira de desativar a conversão desses botões em seletores no celular Imgur: The magic of the Internet? Gostaria de exibi-los como botões simples

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

[Don]

Olá,

Você pode fazer isso substituindo o template topic-footer-buttons.

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

Eu modifiquei o template para mostrar os botões também na visualização mobile. Isso é um pouco arriscado porque se houver alguma alteração no template principal, você terá que alterá-lo também, caso contrário, o site pode quebrar. Portanto, você terá que verificar o template principal toda vez que atualizar seu site.

Comum/Cabeçalho

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

Eu ocultaria os rótulos no mobile e adicionaria o ícone de favorito com cor azul à versão mobile também.

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);
    }
  }
}