diff --git a/app/assets/javascripts/discourse/app/templates/composer.hbs b/app/assets/javascripts/discourse/app/templates/composer.hbs index 0d750b379b9..3df19168ad1 100644 --- a/app/assets/javascripts/discourse/app/templates/composer.hbs +++ b/app/assets/javascripts/discourse/app/templates/composer.hbs @@ -272,45 +272,6 @@ {{/if}} {{/if}} - {{#if (or this.isUploading this.isProcessingUpload)}} -
- {{#if this.isProcessingUpload}} - {{loading-spinner size="small"}}{{i18n - "upload_selector.processing" - }} - {{else}} - {{loading-spinner size="small"}}{{i18n - "upload_selector.uploading" - }} - {{this.uploadProgress}}% - {{/if}} - - {{#if this.isCancellable}} - {{d-icon "times"}} - {{/if}} -
- {{/if}} - -
- {{#if this.model.draftStatus}} - - {{#if this.model.draftConflictUser}} - {{avatar this.model.draftConflictUser imageSize="small"}} - {{d-icon "user-edit"}} - {{else}} - {{d-icon "exclamation-triangle"}} - {{/if}} - {{#unless this.site.mobileView}} - {{this.model.draftStatus}} - {{/unless}} - - {{/if}} -
- {{/if}} - {{else}} + {{/if}} + + {{#if (or this.isUploading this.isProcessingUpload)}} +
+ {{#if this.isProcessingUpload}} + {{loading-spinner size="small"}}{{i18n + "upload_selector.processing" + }} + {{else}} + {{loading-spinner size="small"}}{{i18n + "upload_selector.uploading" + }} + {{this.uploadProgress}}% + {{/if}} + + {{#if this.isCancellable}} + {{d-icon "times"}} + {{/if}} +
+ {{/if}} + +
+ {{#if this.model.draftStatus}} + + {{#if this.model.draftConflictUser}} + {{avatar this.model.draftConflictUser imageSize="small"}} + {{d-icon "user-edit"}} + {{else}} + {{d-icon "exclamation-triangle"}} + {{/if}} + {{#unless this.site.mobileView}} + {{this.model.draftStatus}} + {{/unless}} + + {{/if}} +
+ + {{#unless this.site.mobileView}} - {{/if}} + {{/unless}} {{else}} diff --git a/app/assets/stylesheets/common/base/compose.scss b/app/assets/stylesheets/common/base/compose.scss index 9bdcc0ffb9a..f0f2856a994 100644 --- a/app/assets/stylesheets/common/base/compose.scss +++ b/app/assets/stylesheets/common/base/compose.scss @@ -337,7 +337,8 @@ html.composer-open { .save-or-cancel { align-items: center; display: flex; - flex: 1 1 auto; + flex: 0 1 auto; + margin-right: 1em; .btn-primary { flex: 0 0 auto; @@ -357,32 +358,36 @@ html.composer-open { color: var(--danger); } } - - #draft-status, - #file-uploading { - margin-left: 25px; - } - #file-uploading { - display: flex; - align-items: center; - a { - margin-left: 5px; - color: var(--primary-high); - } - .spinner { - margin-right: 5px; - } - } - #draft-status .d-icon-user-edit { - color: var(--danger); - font-size: 20px; - vertical-align: -5.5px; - } } #draft-status, #file-uploading { color: var(--primary-high); + margin-right: 0.5em; + } + + #file-uploading { + display: flex; + align-items: center; + a { + margin-left: 0.33em; + color: var(--primary-high); + } + .spinner { + margin-right: 0.33em; + } + } + + #draft-status { + margin-left: auto; + .d-icon-user-edit { + color: var(--danger); + font-size: 20px; + vertical-align: -5.5px; + } + + .btn-mini-toggle { + margin-left: 0; + } } #file-uploader { @@ -595,7 +600,7 @@ body:not(.ios-safari-composer-hacks) { } .toggle-preview { - margin-left: 8px; + margin-left: auto; transition: all 0.33s ease-out; &.active { diff --git a/app/assets/stylesheets/desktop/compose.scss b/app/assets/stylesheets/desktop/compose.scss index 633bf0604ec..c1c63aa610f 100644 --- a/app/assets/stylesheets/desktop/compose.scss +++ b/app/assets/stylesheets/desktop/compose.scss @@ -226,7 +226,6 @@ a.toggle-preview { #draft-status, #file-uploading { - flex-grow: 1; text-align: right; } diff --git a/app/assets/stylesheets/mobile/compose.scss b/app/assets/stylesheets/mobile/compose.scss index 136eb8880a9..8a2e73fb533 100644 --- a/app/assets/stylesheets/mobile/compose.scss +++ b/app/assets/stylesheets/mobile/compose.scss @@ -101,8 +101,18 @@ .submit-panel { margin-top: 6px; + flex-wrap: wrap; + gap: 0.25em 0; + + .create { + max-width: 50vw; + span { + @include ellipsis; + } + } .save-or-cancel { + margin-right: 0.5em; flex: 1 1 auto; #draft-status,