misham
(Mykhailo)
December 8, 2022, 12:26pm
1
Hi, is there any way to disable converting these buttons to select on mobile https://i.imgur.com/OwZuGs5.png ? I’d like to display them as simple buttons
![|32x32](https://d3bpeqsaub0i6y.cloudfront.net/user_avatar/meta.discourse.org/jammydodger/64/254611_2.png
Don
December 8, 2022, 9:06pm
2
Hello,
You can do it with overriding the topic-footer-buttons template.
I modified the template to show the buttons on mobile view too. This is a little risky because if there is any change in core template you have to change this too otherwise the site could broke. So you have to check the core template every time you update your site.
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>
I would hide the labels on mobile and add the bookmarked icon blue color to the mobile version too.
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);
}
}
}
system
(system)
Closed
January 7, 2023, 9:07pm
3
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.