|
|
@ -48,7 +48,7 @@
|
|
|
|
<EmojiInput
|
|
|
|
<EmojiInput
|
|
|
|
:suggest="emojiUserSuggestor"
|
|
|
|
:suggest="emojiUserSuggestor"
|
|
|
|
v-model="newStatus.status"
|
|
|
|
v-model="newStatus.status"
|
|
|
|
class="form-control"
|
|
|
|
class="form-control main-input"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
<textarea
|
|
|
|
<textarea
|
|
|
|
ref="textarea"
|
|
|
|
ref="textarea"
|
|
|
@ -65,6 +65,13 @@
|
|
|
|
class="form-post-body"
|
|
|
|
class="form-post-body"
|
|
|
|
>
|
|
|
|
>
|
|
|
|
</textarea>
|
|
|
|
</textarea>
|
|
|
|
|
|
|
|
<p
|
|
|
|
|
|
|
|
v-if="hasStatusLengthLimit"
|
|
|
|
|
|
|
|
class="character-counter faint"
|
|
|
|
|
|
|
|
:class="{ error: isOverLengthLimit }"
|
|
|
|
|
|
|
|
>
|
|
|
|
|
|
|
|
{{ charactersLeft }}
|
|
|
|
|
|
|
|
</p>
|
|
|
|
</EmojiInput>
|
|
|
|
</EmojiInput>
|
|
|
|
<div class="visibility-tray">
|
|
|
|
<div class="visibility-tray">
|
|
|
|
<div class="text-format" v-if="postFormats.length > 1">
|
|
|
|
<div class="text-format" v-if="postFormats.length > 1">
|
|
|
@ -109,8 +116,6 @@
|
|
|
|
/>
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p>
|
|
|
|
|
|
|
|
<p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
|
|
|
|
<button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button>
|
|
|
|
<button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
|
|
|
|
<button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button>
|
|
|
@ -304,10 +309,12 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.form-post-body {
|
|
|
|
.form-post-body {
|
|
|
|
|
|
|
|
height: 16px; // Only affects the empty-height
|
|
|
|
line-height: 16px;
|
|
|
|
line-height: 16px;
|
|
|
|
resize: none;
|
|
|
|
resize: none;
|
|
|
|
overflow: hidden;
|
|
|
|
overflow: hidden;
|
|
|
|
transition: min-height 200ms 100ms;
|
|
|
|
transition: min-height 200ms 100ms;
|
|
|
|
|
|
|
|
padding-bottom: 1.75em;
|
|
|
|
min-height: 1px;
|
|
|
|
min-height: 1px;
|
|
|
|
box-sizing: content-box;
|
|
|
|
box-sizing: content-box;
|
|
|
|
}
|
|
|
|
}
|
|
|
@ -316,6 +323,23 @@
|
|
|
|
min-height: 48px;
|
|
|
|
min-height: 48px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.main-input {
|
|
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.character-counter {
|
|
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
|
|
margin: 0 0.5em;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&.error {
|
|
|
|
|
|
|
|
color: $fallback--cRed;
|
|
|
|
|
|
|
|
color: var(--cRed, $fallback--cRed);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn {
|
|
|
|
.btn {
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|