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

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

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