mirror of
https://github.com/zulip/zulip.git
synced 2025-10-23 04:52:12 +00:00
d00cf1a0e8
This commit improves the responsiveness of normal banners by adopting a flexbox layout for the label and action buttons. This change better accommodates varying text lengths and button counts in the banners, due to the natural flowy nature of flexboxes. The key logic shift involves using `flex-basis` to manage layout transitions: the label and the group of action buttons now wrap to separate lines when the label's width is less than 60% of the banner query container's width (60cqw). This commit also updates the CSS for navbar banners to align with the new flexbox layout between the label and the group of action buttons, while also ensuring that the layout behavior of these banners remains consistent with the previous implementation.
20 lines
709 B
Handlebars
20 lines
709 B
Handlebars
<div {{#if process}}data-process="{{process}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}banner banner-{{intent}}">
|
|
<span class="banner-content">
|
|
<span class="banner-label">
|
|
{{label}}
|
|
</span>
|
|
<span class="banner-action-buttons">
|
|
{{#each buttons}}
|
|
{{#if this.intent}}
|
|
{{> action_button .}}
|
|
{{else}}
|
|
{{> action_button . intent=../intent}}
|
|
{{/if}}
|
|
{{/each}}
|
|
</span>
|
|
</span>
|
|
{{#if close_button}}
|
|
{{> icon_button custom_classes="banner-close-action banner-close-button" icon="close" intent=intent}}
|
|
{{/if}}
|
|
</div>
|