feat(board): redesign classifieds + Slack channel creation

Adds AdminGhost bot token for admin-only Slack channel creation, refreshes
BoardPostCard/Form layouts, and expands admin board-channels management.
This commit is contained in:
Jennie Robinson Faber 2026-04-14 20:20:17 +01:00
parent 6f3d088763
commit 9a560f2a3b
14 changed files with 544 additions and 158 deletions

View file

@ -2,6 +2,7 @@
<form class="post-form" @submit.prevent="handleSubmit">
<div class="form-header">
<h3 class="form-title">{{ isEdit ? 'Edit post' : 'New post' }}</h3>
<p class="form-hint">Fill in <em>Seeking</em> or <em>Offering</em> (or both).</p>
</div>
<div class="field">
@ -13,35 +14,34 @@
maxlength="120"
placeholder="Short summary"
>
<div class="char-count">{{ form.title.length }}/120</div>
</div>
<div class="field-row">
<div class="field">
<label for="post-seeking">Seeking <span class="opt">(optional)</span></label>
<textarea
id="post-seeking"
v-model="form.seeking"
rows="2"
maxlength="500"
placeholder="What are you looking for?"
/>
</div>
<div class="field">
<label for="post-offering">Offering <span class="opt">(optional)</span></label>
<textarea
id="post-offering"
v-model="form.offering"
rows="2"
maxlength="500"
placeholder="What can you offer?"
/>
</div>
</div>
<div class="field">
<label for="post-seeking">Seeking</label>
<textarea
id="post-seeking"
v-model="form.seeking"
rows="3"
maxlength="500"
placeholder="What are you looking for?"
/>
<div class="char-count">{{ form.seeking.length }}/500</div>
</div>
<div class="field">
<label for="post-offering">Offering</label>
<textarea
id="post-offering"
v-model="form.offering"
rows="3"
maxlength="500"
placeholder="What can you offer?"
/>
<div class="char-count">{{ form.offering.length }}/500</div>
</div>
<div class="field">
<label for="post-note">Note (optional)</label>
<label for="post-note">Note <span class="opt">(optional)</span></label>
<textarea
id="post-note"
v-model="form.note"
@ -49,7 +49,6 @@
maxlength="300"
placeholder="Anything else to add?"
/>
<div class="char-count">{{ form.note.length }}/300</div>
</div>
<div v-if="tags.length" class="field">
@ -139,22 +138,38 @@ function handleSubmit() {
<style scoped>
.post-form {
border: 1px dashed var(--border);
padding: 20px 24px;
padding: 14px 16px;
background: var(--bg);
}
.form-header {
margin-bottom: 14px;
margin-bottom: 10px;
}
.form-title {
font-family: "Brygada 1918", serif;
font-size: 18px;
font-size: 15px;
font-weight: 500;
color: var(--text-bright);
}
.form-hint {
font-size: 11px;
color: var(--text-faint);
font-family: "Commit Mono", monospace;
margin-top: 2px;
}
.form-hint em {
color: var(--text-dim);
font-style: normal;
}
.field {
margin-bottom: 12px;
margin-bottom: 8px;
flex: 1;
min-width: 0;
}
.field-row {
display: flex;
gap: 12px;
}
.field label {
display: block;
@ -164,12 +179,20 @@ function handleSubmit() {
color: var(--text-faint);
margin-bottom: 3px;
}
.field label .opt {
color: var(--text-faint);
text-transform: none;
letter-spacing: 0;
font-size: 9px;
margin-left: 4px;
opacity: 0.7;
}
.field input,
.field textarea {
width: 100%;
padding: 5px 8px;
padding: 4px 8px;
font-family: "Commit Mono", monospace;
font-size: 13px;
font-size: 12px;
color: var(--text-bright);
background: var(--input-bg);
border: 1px solid var(--border);
@ -232,8 +255,15 @@ function handleSubmit() {
display: flex;
justify-content: flex-end;
gap: 8px;
margin-top: 14px;
padding-top: 12px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px dashed var(--border);
}
@media (max-width: 640px) {
.field-row {
flex-direction: column;
gap: 0;
}
}
</style>