mirror of https://github.com/zulip/zulip.git
compose: Fix bug causing layout shift on expanding compose box.
The messagebox-wrapper div is removed, and it's only style `flex: 1` is applied to the messagebox div. The `height: 100%` and `margin-top: 5px` styles on the messagebox div were earlier causing it to move 5px down, outside the messagebox-wrapper div, when the compose box was expanded.
This commit is contained in:
N-Shar-ma
Tim Abbott
parent
af76d80856
commit
50fcc740bc
|
|
@ -244,13 +244,10 @@
|
|||
margin: 0;
|
||||
height: 100%;
|
||||
|
||||
.messagebox-wrapper {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.messagebox {
|
||||
/* normally 5px 14px; pull in the right and bottom a bit */
|
||||
cursor: default;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
background: none;
|
||||
box-shadow: none;
|
||||
|
|
|
|||
|
|
@ -71,42 +71,40 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="messagebox-wrapper">
|
||||
<div class="messagebox">
|
||||
<div id="message-content-container">
|
||||
<textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here...' }}"></textarea>
|
||||
<div id="preview-message-area-container">
|
||||
<div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">
|
||||
<div class="markdown_preview_spinner"></div>
|
||||
<div class="preview_content rendered_markdown"></div>
|
||||
</div>
|
||||
<div class="messagebox">
|
||||
<div id="message-content-container">
|
||||
<textarea class="new_message_textarea" name="content" id='compose-textarea' placeholder="{{t 'Compose your message here' }}" tabindex="0" aria-label="{{t 'Compose your message here...' }}"></textarea>
|
||||
<div id="preview-message-area-container">
|
||||
<div class="scrolling_list preview_message_area" data-simplebar id="preview_message_area" style="display:none;">
|
||||
<div class="markdown_preview_spinner"></div>
|
||||
<div class="preview_content rendered_markdown"></div>
|
||||
</div>
|
||||
<div class="composebox-buttons">
|
||||
<button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
|
||||
<button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
|
||||
</div>
|
||||
<div class="drag"></div>
|
||||
</div>
|
||||
<div class="composebox-buttons">
|
||||
<button type="button" class="expand-composebox-button zulip-icon zulip-icon-expand-diagonal" aria-label="{{t 'Expand compose box' }}" data-tippy-content="{{t 'Expand compose box' }}"></button>
|
||||
<button type="button" class="collapse-composebox-button zulip-icon zulip-icon-collapse-diagonal" aria-label="{{t 'Collapse compose box' }}" data-tippy-content="{{t 'Collapse compose box' }}"></button>
|
||||
</div>
|
||||
<div class="drag"></div>
|
||||
</div>
|
||||
|
||||
<div id="message-send-controls-container">
|
||||
<a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
|
||||
<span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
|
||||
</a>
|
||||
<span id="compose-limit-indicator" class="tippy-zulip-tooltip" data-tippy-content="{{t 'Maximum message length: {max_message_length} characters' }}"></span>
|
||||
<div class="message-send-controls">
|
||||
<button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
|
||||
<img class="loader" alt="" src="" />
|
||||
<i class="zulip-icon zulip-icon-send"></i>
|
||||
</button>
|
||||
<button class="send-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send options' }}">
|
||||
<i class="zulip-icon zulip-icon-more-vertical"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div id="message-send-controls-container">
|
||||
<a id="compose-drafts-button" role="button" class="send-control-button hide-sm" tabindex=0 href="#drafts">
|
||||
<span class="compose-drafts-text">{{t 'Drafts' }}</span><span class="compose-drafts-count-container">(<span class="compose-drafts-count"></span>)</span>
|
||||
</a>
|
||||
<span id="compose-limit-indicator" class="tippy-zulip-tooltip" data-tippy-content="{{t 'Maximum message length: {max_message_length} characters' }}"></span>
|
||||
<div class="message-send-controls">
|
||||
<button type="submit" id="compose-send-button" class="send_message compose-submit-button compose-send-or-save-button" aria-label="{{t 'Send' }}">
|
||||
<img class="loader" alt="" src="" />
|
||||
<i class="zulip-icon zulip-icon-send"></i>
|
||||
</button>
|
||||
<button class="send-control-button send-related-action-button" id="send_later" tabindex=0 type="button" data-tippy-content="{{t 'Send options' }}">
|
||||
<i class="zulip-icon zulip-icon-more-vertical"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="message-formatting-controls-container">
|
||||
{{> compose_control_buttons }}
|
||||
</div>
|
||||
<div id="message-formatting-controls-container">
|
||||
{{> compose_control_buttons }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue