make status form selectors justified properly

This commit is contained in:
rat 2024-06-10 17:20:51 -07:00
parent 3e86db24d3
commit aad023c8a0
1 changed files with 53 additions and 39 deletions

View File

@ -190,6 +190,7 @@
<div <div
v-if="!disableScopeSelector" v-if="!disableScopeSelector"
class="visibility-tray" class="visibility-tray"
:class="{ 'visibility-tray-edit': isEdit }"
> >
<scope-selector <scope-selector
v-if="!disableVisibilitySelector" v-if="!disableVisibilitySelector"
@ -200,47 +201,50 @@
/> />
<div <div
class="language-selector" class="format-selector-container">
> <div
<Select class="format-selector"
id="post-language"
v-model="newStatus.language"
class="form-control"
>
<option
v-for="language in postLanguageOptions"
:key="language.key"
:value="language.value"
> >
{{ language.label }} <Select
</option> id="post-language"
</Select> v-model="newStatus.language"
</div> class="form-control"
<div
v-if="postFormats.length > 1"
class="text-format"
>
<Select
id="post-content-type"
v-model="newStatus.contentType"
class="form-control"
>
<option
v-for="postFormat in postFormats"
:key="postFormat"
:value="postFormat"
> >
{{ $t(`post_status.content_type["${postFormat}"]`) }} <option
</option> v-for="language in postLanguageOptions"
</Select> :key="language.key"
</div> :value="language.value"
<div >
v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'" {{ language.label }}
class="text-format" </option>
> </Select>
<span class="only-format"> </div>
{{ $t(`post_status.content_type["${postFormats[0]}"]`) }} <div
</span> v-if="postFormats.length > 1"
class="text-format format-selector"
>
<Select
id="post-content-type"
v-model="newStatus.contentType"
class="form-control"
>
<option
v-for="postFormat in postFormats"
:key="postFormat"
:value="postFormat"
>
{{ $t(`post_status.content_type["${postFormat}"]`) }}
</option>
</Select>
</div>
<div
v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
class="text-format format-selector"
>
<span class="only-format">
{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
</span>
</div>
</div> </div>
</div> </div>
</div> </div>
@ -460,6 +464,10 @@
align-items: baseline; align-items: baseline;
} }
.visibility-tray-edit {
justify-content: right;
}
.visibility-notice.edit-warning { .visibility-notice.edit-warning {
> :first-child { > :first-child {
margin-top: 0; margin-top: 0;
@ -470,6 +478,12 @@
} }
} }
.format-selector-container {
.format-selector {
display: inline-block;
}
}
.media-upload-icon, .poll-icon, .emoji-icon, .spoiler-icon { .media-upload-icon, .poll-icon, .emoji-icon, .spoiler-icon {
font-size: 1.85em; font-size: 1.85em;
line-height: 1.1; line-height: 1.1;