diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/media_upload/media_upload.vue | 16 | ||||
| -rw-r--r-- | src/components/post_status_form/post_status_form.vue | 36 |
2 files changed, 38 insertions, 14 deletions
diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue index ac32ae83..1dda7bc1 100644 --- a/src/components/media_upload/media_upload.vue +++ b/src/components/media_upload/media_upload.vue @@ -31,12 +31,14 @@ <script src="./media_upload.js" ></script> <style> - .media-upload { - font-size: 26px; - min-width: 50px; - } +.media-upload { + .icon-upload { + cursor: pointer; + } - .icon-upload { - cursor: pointer; - } + label { + display: block; + width: 100%; + } +} </style> diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 0e0b0e60..89e51b97 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -159,6 +159,7 @@ <div class="form-bottom-left"> <media-upload ref="mediaUpload" + class="media-upload-icon" :drop-files="dropFiles" @uploading="disableSubmit" @uploaded="addMediaFile" @@ -176,11 +177,11 @@ <div v-if="pollsAvailable" class="poll-icon" + :class="{ selected: pollFormVisible }" > <i :title="$t('polls.add_poll')" class="icon-chart-bar btn btn-default" - :class="pollFormVisible && 'selected'" @click="togglePollForm" /> </div> @@ -316,6 +317,8 @@ .form-bottom-left { display: flex; flex: 1; + padding-right: 7px; + margin-right: 7px; } .text-format { @@ -325,19 +328,38 @@ } } - .poll-icon, .emoji-icon { + .media-upload-icon, .poll-icon, .emoji-icon { font-size: 26px; flex: 1; - .selected { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); + i { + display: block; + width: 100%; } + + &.selected, &:hover { + // needs to be specific to override icon default color + i, label { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + } + + // Order is not necessary but a good indicator + .media-upload-icon { + order: 1; + text-align: left; } .emoji-icon { - flex: 0; - min-width: 50px; + order: 2; + text-align: center; + } + + .poll-icon { + order: 3; + text-align: right; } .icon-chart-bar { |