Anon/yandere_fe
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make reply-or-quote selection display as horizontal button group

Browse Source
This commit is contained in:
tusooa 2023-07-19 17:00:46 -04:00
parent a314ad7ccc
commit 1b081a9272
No known key found for this signature in database
GPG Key ID: 42AEC43D48433C51
1 changed files with 14 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/post_status_form/post_status_form.vue
View File

@ -129,44 +129,32 @@
<div <div
v-if="quotable" v-if="quotable"
role="radiogroup" role="radiogroup"
class="reply-or-quote-selector" class="btn-group reply-or-quote-selector"
> >
<div <button
class="reply-or-quote-option" :id="`reply-or-quote-option-${randomSeed}-reply`"
class="btn button-default reply-or-quote-option"
:class="{ toggled: !newStatus.quoting }"
tabindex="0" tabindex="0"
role="radio" role="radio"
:aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`" :aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
:aria-checked="!newStatus.quoting" :aria-checked="!newStatus.quoting"
@click="newStatus.quoting = false" @click="newStatus.quoting = false"
> >
<input
type="radio"
:checked="!newStatus.quoting"
>
<label class="reply-or-quote-option-text">
<span :id="`reply-or-quote-option-${randomSeed}-reply`">
{{ $t('post_status.reply_option') }} {{ $t('post_status.reply_option') }}
</span> </button>
</label> <button
</div> :id="`reply-or-quote-option-${randomSeed}-quote`"
<div class="btn button-default reply-or-quote-option"
class="reply-or-quote-option" :class="{ toggled: newStatus.quoting }"
tabindex="0" tabindex="0"
role="radio" role="radio"
:aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`" :aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
:aria-checked="newStatus.quoting" :aria-checked="newStatus.quoting"
@click="newStatus.quoting = true" @click="newStatus.quoting = true"
> >
<input
type="radio"
:checked="newStatus.quoting"
>
<label class="reply-or-quote-option-text">
<span :id="`reply-or-quote-option-${randomSeed}-quote`">
{{ $t('post_status.quote_option') }} {{ $t('post_status.quote_option') }}
</span> </button>
</label>
</div>
</div> </div>
<EmojiInput <EmojiInput
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)" v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
@ -463,17 +451,7 @@
} }
.reply-or-quote-selector { .reply-or-quote-selector {
display: flex; margin-bottom: 0.5em;
flex-direction: column;
.reply-or-quote-option {
display: flex;
align-items: center;
.reply-or-quote-option-text::before {
vertical-align: middle;
}
}
} }
.text-format { .text-format {