UX: Minor composer button alignment adjustments, simplification

This commit is contained in:
Kris 2019-05-29 14:37:32 -04:00
parent 23fdaf07f2
commit b24938b5ff
4 changed files with 12 additions and 25 deletions

View File

@ -176,7 +176,6 @@
</div>
</div>
<div class="composer-bottom-right">
{{#if site.mobileView}}
{{#if allowUpload}}
<a class="btn btn-default no-text mobile-file-upload {{if isUploading 'hidden'}}">
@ -195,7 +194,6 @@
<a href {{action "togglePreview"}} class='toggle-preview'>{{{toggleText}}}</a>
{{/if}}
</div>
</div>
</div>

View File

@ -280,6 +280,7 @@
flex-basis: 50%;
display: flex;
align-items: center;
margin-right: auto;
button {
flex: 0 0 auto;
}
@ -314,15 +315,6 @@
}
}
.composer-bottom-right {
flex-basis: 50%;
display: flex;
flex-direction: row-reverse;
.toggle-preview {
order: 2;
}
}
#draft-status,
#file-uploading {
color: $primary-high;

View File

@ -202,12 +202,10 @@
width: calc(50% - 65px);
}
.composer-bottom-right {
a {
color: $primary-high;
&:hover {
color: $tertiary;
}
a.toggle-preview {
color: $primary-high;
&:hover {
color: $tertiary;
}
}

View File

@ -71,22 +71,21 @@
flex: 1 1 auto;
#draft-status,
#file-uploading {
margin-left: 15px;
margin-left: 6px;
}
.cancel {
font-size: 1.6em;
font-size: 1.4em;
color: $primary-low-mid;
margin-left: 0.6em;
padding: 0 5px;
padding: 3px 6px;
}
}
.composer-bottom-right {
margin-left: auto;
flex: 1 1 auto;
.mobile-file-upload:not(.hidden),
.mobile-preview {
// Alignment fix, remove if converted to buttons
display: inline-flex;
}
.mobile-file-upload {
order: 2;
&.hidden + .mobile-preview {
// Hide preview button while file is uploading to make room for upload progress
display: none;