Desactivar botones de tema que se convierten en selección en móvil

[misham (Mykhailo)]

Hola, ¿hay alguna forma de deshabilitar la conversión de estos botones en selectores en dispositivos móviles Imgur: The magic of the Internet? Me gustaría mostrarlos como botones simples

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

[Don]

Hola,

Puedes hacerlo sobrescribiendo la plantilla topic-footer-buttons.

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

Modifiqué la plantilla para mostrar también los botones en la vista móvil. Esto es un poco arriesgado porque si hay algún cambio en la plantilla principal, tendrás que cambiar esto también, de lo contrario, el sitio podría romperse. Así que tienes que revisar la plantilla principal cada vez que actualices tu sitio.

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>

Ocultaría las etiquetas en el móvil y añadiría el icono de marcado en azul a la versión móvil también.

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