commit: 619423eacb29f50482c8e1545a839a1eaaa31c1b
parent c698dec89d2a2264a0a8fb73a7bf373afb8dc45b
Author: Henry Jameson <me@hjkos.com>
Date: Thu, 19 Dec 2024 14:52:01 +0200
move reply-quote buttons on same line as preview
Diffstat:
2 files changed, 33 insertions(+), 30 deletions(-)
diff --git a/changelog.d/quote-buttons.fix b/changelog.d/quote-buttons.fix
@@ -0,0 +1 @@
+reply-or-quote buttons now take less space
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
@@ -103,6 +103,36 @@
icon="circle-notch"
/>
</div>
+ <div
+ v-if="quotable"
+ role="radiogroup"
+ class="btn-group reply-or-quote-selector"
+ >
+ <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"
+ >
+ {{ $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"
+ >
+ {{ $t('post_status.quote_option') }}
+ </button>
+ </div>
</div>
<div
v-if="showPreview"
@@ -126,36 +156,6 @@
class="preview-status"
/>
</div>
- <div
- v-if="quotable"
- role="radiogroup"
- class="btn-group reply-or-quote-selector"
- >
- <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"
- >
- {{ $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"
- >
- {{ $t('post_status.quote_option') }}
- </button>
- </div>
<EmojiInput
v-if="!disableSubject && (newStatus.spoilerText || alwaysShowSubject)"
v-model="newStatus.spoilerText"
@@ -447,6 +447,8 @@
.reply-or-quote-selector {
margin-bottom: 0.5em;
+ display: grid;
+ grid-template-columns: 1fr 1fr;
}
.text-format {