commit: 1b081a927288ff2f43025d688e2fa15cf6ce6be1
parent a314ad7ccca05c91d4a717d956c207a0b0c47005
Author: tusooa <tusooa@kazv.moe>
Date: Wed, 19 Jul 2023 17:00:46 -0400
Make reply-or-quote selection display as horizontal button group
Diffstat:
1 file changed, 14 insertions(+), 36 deletions(-)
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -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 {