feat(admin-events): form layout overhaul + agenda input + date input rewrite
Admin event create form: - Wraps body in a form-layout/form-main container for upcoming sidebar work. - Bigger autoresize textareas for description/content; adds an Agenda textarea (one item per line, persisted as event.agenda). - Reorganises settings into Event Settings + conditional Cancellation Message sections. - Pulls event-type options from EVENT_TYPES; location becomes optional; passes displayTimezone through to NaturalDateInput. NaturalDateInput: rewritten to a single always-visible UInput with chrono parsing and trailing status icon, instead of toggling between input and parsed-summary blocks. Cleaner state model (rawInput / parsedDate / isValid / hasError) and timezone-aware update emission.
This commit is contained in:
parent
622cc8e53b
commit
4a05e91715
2 changed files with 474 additions and 514 deletions
|
|
@ -27,6 +27,8 @@
|
|||
</div>
|
||||
|
||||
<form @submit.prevent="saveEvent">
|
||||
<div class="form-layout">
|
||||
<div class="form-main">
|
||||
<!-- Basic Information -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Basic Information</h2>
|
||||
|
|
@ -38,6 +40,7 @@
|
|||
placeholder="Enter a clear, descriptive event title"
|
||||
required
|
||||
:color="fieldErrors.title ? 'error' : undefined"
|
||||
:ui="{ base: 'title-input' }"
|
||||
class="w-full"
|
||||
/>
|
||||
<p v-if="fieldErrors.title" class="field-error">
|
||||
|
|
@ -60,7 +63,8 @@
|
|||
v-model="eventForm.description"
|
||||
placeholder="Provide a clear description of what attendees can expect from this event"
|
||||
required
|
||||
:rows="4"
|
||||
:rows="8"
|
||||
autoresize
|
||||
:color="fieldErrors.description ? 'error' : undefined"
|
||||
class="w-full"
|
||||
/>
|
||||
|
|
@ -77,7 +81,8 @@
|
|||
<UTextarea
|
||||
v-model="eventForm.content"
|
||||
placeholder="Add detailed information, agenda, requirements, or other important details"
|
||||
:rows="6"
|
||||
:rows="12"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -85,6 +90,21 @@
|
|||
requirements
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label>Event Agenda</label>
|
||||
<UTextarea
|
||||
v-model="agendaText"
|
||||
placeholder="Introduction and welcome - 10 mins Main talk - 30 mins Q&A - 15 mins"
|
||||
:rows="6"
|
||||
autoresize
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
One agenda item per line. Help attendees know what to expect
|
||||
during the event.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Details -->
|
||||
|
|
@ -97,12 +117,7 @@
|
|||
<USelect
|
||||
v-model="eventForm.eventType"
|
||||
aria-label="Event type"
|
||||
:items="[
|
||||
{ label: 'Community Meetup', value: 'community' },
|
||||
{ label: 'Workshop', value: 'workshop' },
|
||||
{ label: 'Social Event', value: 'social' },
|
||||
{ label: 'Showcase', value: 'showcase' },
|
||||
]"
|
||||
:items="EVENT_TYPES"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -128,18 +143,13 @@
|
|||
</div>
|
||||
|
||||
<div class="field">
|
||||
<label> Location <span class="required">*</span> </label>
|
||||
<label>Location</label>
|
||||
<UInput
|
||||
v-model="eventForm.location"
|
||||
placeholder="e.g., https://zoom.us/j/123..., #channel-name, or TBD"
|
||||
required
|
||||
:color="fieldErrors.location ? 'error' : undefined"
|
||||
class="w-full"
|
||||
/>
|
||||
<p v-if="fieldErrors.location" class="field-error">
|
||||
{{ fieldErrors.location }}
|
||||
</p>
|
||||
<p v-if="!fieldErrors.location" class="help-text">
|
||||
<p class="help-text">
|
||||
Video conference link, Slack channel (#channel-name), or 'TBD' if
|
||||
the platform is undecided
|
||||
</p>
|
||||
|
|
@ -149,6 +159,7 @@
|
|||
<label> Start Date & Time <span class="required">*</span> </label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.startDate"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., 'tomorrow at 3pm', 'next Friday at 9am'"
|
||||
:required="true"
|
||||
/>
|
||||
|
|
@ -161,6 +172,7 @@
|
|||
<label> End Date & Time <span class="required">*</span> </label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.endDate"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., 'tomorrow at 5pm', 'next Friday at 11am'"
|
||||
:required="true"
|
||||
/>
|
||||
|
|
@ -187,6 +199,7 @@
|
|||
<label>Registration Deadline</label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.registrationDeadline"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., 'tomorrow at noon', '1 hour before event'"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -196,6 +209,87 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Settings -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Event Settings</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isOnline" type="checkbox" >
|
||||
<div>
|
||||
<strong>Online Event</strong>
|
||||
<span class="help-text">
|
||||
Event will be conducted virtually
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.registrationRequired"
|
||||
type="checkbox"
|
||||
>
|
||||
<div>
|
||||
<strong>Registration Required</strong>
|
||||
<span class="help-text">
|
||||
Attendees must register before attending
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isVisible" type="checkbox" >
|
||||
<div>
|
||||
<strong>Visible on Public Calendar</strong>
|
||||
<span class="help-text">
|
||||
Event will appear on the public events page
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isCancelled" type="checkbox" >
|
||||
<div>
|
||||
<strong>Event Cancelled</strong>
|
||||
<span class="help-text"> Mark this event as cancelled </span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.membersOnly" type="checkbox" >
|
||||
<div>
|
||||
<strong>Members Only</strong>
|
||||
<span class="help-text">
|
||||
Hide this event from the public; only members can see it
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cancellation Message (conditional) -->
|
||||
<div v-if="eventForm.isCancelled" class="form-section">
|
||||
<div class="field">
|
||||
<label>Cancellation Message</label>
|
||||
<UTextarea
|
||||
v-model="eventForm.cancellationMessage"
|
||||
placeholder="Explain why the event was cancelled and any next steps..."
|
||||
:rows="3"
|
||||
color="error"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
This message will be displayed to users viewing the event page
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<aside class="form-aside">
|
||||
<!-- Target Audience -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Target Audience</h2>
|
||||
|
|
@ -208,39 +302,24 @@
|
|||
v-model="eventForm.targetCircles"
|
||||
value="community"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
<strong>Community Circle</strong>
|
||||
<span class="help-text">
|
||||
New members and those exploring the community
|
||||
</span>
|
||||
</div>
|
||||
>
|
||||
<strong>Community Circle</strong>
|
||||
</label>
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.targetCircles"
|
||||
value="founder"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
<strong>Founder Circle</strong>
|
||||
<span class="help-text">
|
||||
Entrepreneurs and business leaders
|
||||
</span>
|
||||
</div>
|
||||
>
|
||||
<strong>Founder Circle</strong>
|
||||
</label>
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.targetCircles"
|
||||
value="practitioner"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
<strong>Practitioner Circle</strong>
|
||||
<span class="help-text">
|
||||
Experts and professionals sharing knowledge
|
||||
</span>
|
||||
</div>
|
||||
>
|
||||
<strong>Practitioner Circle</strong>
|
||||
</label>
|
||||
</div>
|
||||
<p class="help-text">
|
||||
|
|
@ -261,11 +340,30 @@
|
|||
:items="tagOptions"
|
||||
value-key="value"
|
||||
multiple
|
||||
placeholder="Select tags..."
|
||||
searchable
|
||||
create-item
|
||||
placeholder="Select or type to add tags..."
|
||||
class="w-full"
|
||||
@create="onTagCreate"
|
||||
/>
|
||||
<div class="field new-tag-pool">
|
||||
<label>New tag pool</label>
|
||||
<USelect
|
||||
v-model="newTagPool"
|
||||
:items="[
|
||||
{ label: 'Cooperative', value: 'cooperative' },
|
||||
{ label: 'Craft', value: 'craft' },
|
||||
]"
|
||||
value-key="value"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
Pool assigned to any new tag you create from this field.
|
||||
</p>
|
||||
</div>
|
||||
<p class="help-text">
|
||||
Tag this event to help with discovery and recommendations
|
||||
Tag this event to help with discovery and recommendations. Type a
|
||||
new tag and press enter to add it.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -275,7 +373,7 @@
|
|||
<h2 class="section-heading">Ticketing</h2>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.tickets.enabled" type="checkbox" />
|
||||
<input v-model="eventForm.tickets.enabled" type="checkbox" >
|
||||
<div>
|
||||
<strong>Enable Ticketing</strong>
|
||||
<span class="help-text"> Allow ticket sales for this event </span>
|
||||
|
|
@ -287,7 +385,7 @@
|
|||
<input
|
||||
v-model="eventForm.tickets.public.available"
|
||||
type="checkbox"
|
||||
/>
|
||||
>
|
||||
<div>
|
||||
<strong>Public Tickets Available</strong>
|
||||
<span class="help-text">
|
||||
|
|
@ -369,6 +467,7 @@
|
|||
<label>Early Bird Deadline</label>
|
||||
<NaturalDateInput
|
||||
v-model="eventForm.tickets.public.earlyBirdDeadline"
|
||||
:display-timezone="eventForm.displayTimezone"
|
||||
placeholder="e.g., '1 week before event', 'next Monday'"
|
||||
/>
|
||||
<p class="help-text">
|
||||
|
|
@ -384,7 +483,7 @@
|
|||
<h2 class="section-heading">Series Management</h2>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.series.isSeriesEvent" type="checkbox" />
|
||||
<input v-model="eventForm.series.isSeriesEvent" type="checkbox" >
|
||||
<div>
|
||||
<strong>Part of Event Series</strong>
|
||||
<span class="help-text">
|
||||
|
|
@ -400,7 +499,6 @@
|
|||
<USelect
|
||||
v-model="selectedSeriesId"
|
||||
aria-label="Select series"
|
||||
@update:model-value="onSeriesSelect"
|
||||
:items="
|
||||
availableSeries.map((series) => ({
|
||||
label: `${series.title} (${series.eventCount || 0} events)`,
|
||||
|
|
@ -410,6 +508,7 @@
|
|||
placeholder="Choose existing series or create new..."
|
||||
value-key="value"
|
||||
class="w-full"
|
||||
@update:model-value="onSeriesSelect"
|
||||
/>
|
||||
<NuxtLink to="/admin/series/create" class="btn btn-primary">
|
||||
New Series
|
||||
|
|
@ -467,123 +566,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Event Agenda -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Event Agenda</h2>
|
||||
|
||||
<div class="agenda-items">
|
||||
<div
|
||||
v-for="(item, index) in eventForm.agenda"
|
||||
:key="index"
|
||||
class="agenda-row"
|
||||
>
|
||||
<UInput
|
||||
v-model="eventForm.agenda[index]"
|
||||
placeholder="Enter agenda item (e.g., 'Introduction and welcome - 10 mins')"
|
||||
class="w-full"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="removeAgendaItem(index)"
|
||||
class="link-btn link-btn-danger"
|
||||
>
|
||||
<Icon name="heroicons:trash" class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
@click="addAgendaItem"
|
||||
class="btn add-agenda-btn"
|
||||
>
|
||||
+ Add Agenda Item
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p class="help-text">
|
||||
Add agenda items to help attendees know what to expect during the
|
||||
event
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Event Settings -->
|
||||
<div class="form-section">
|
||||
<h2 class="section-heading">Event Settings</h2>
|
||||
|
||||
<div class="form-grid">
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isOnline" type="checkbox" />
|
||||
<div>
|
||||
<strong>Online Event</strong>
|
||||
<span class="help-text">
|
||||
Event will be conducted virtually
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input
|
||||
v-model="eventForm.registrationRequired"
|
||||
type="checkbox"
|
||||
/>
|
||||
<div>
|
||||
<strong>Registration Required</strong>
|
||||
<span class="help-text">
|
||||
Attendees must register before attending
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="check-group">
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isVisible" type="checkbox" />
|
||||
<div>
|
||||
<strong>Visible on Public Calendar</strong>
|
||||
<span class="help-text">
|
||||
Event will appear on the public events page
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.isCancelled" type="checkbox" />
|
||||
<div>
|
||||
<strong>Event Cancelled</strong>
|
||||
<span class="help-text"> Mark this event as cancelled </span>
|
||||
</div>
|
||||
</label>
|
||||
|
||||
<label class="check-label">
|
||||
<input v-model="eventForm.membersOnly" type="checkbox" />
|
||||
<div>
|
||||
<strong>Members Only</strong>
|
||||
<span class="help-text">
|
||||
Hide this event from the public; only members can see it
|
||||
</span>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Cancellation Message (conditional) -->
|
||||
<div v-if="eventForm.isCancelled" class="form-section">
|
||||
<div class="field">
|
||||
<label>Cancellation Message</label>
|
||||
<UTextarea
|
||||
v-model="eventForm.cancellationMessage"
|
||||
placeholder="Explain why the event was cancelled and any next steps..."
|
||||
:rows="3"
|
||||
color="error"
|
||||
class="w-full"
|
||||
/>
|
||||
<p class="help-text">
|
||||
This message will be displayed to users viewing the event page
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
|
|
@ -594,9 +577,9 @@
|
|||
<button
|
||||
v-if="!editingEvent"
|
||||
type="button"
|
||||
@click="saveAndCreateAnother"
|
||||
:disabled="creating"
|
||||
class="btn"
|
||||
@click="saveAndCreateAnother"
|
||||
>
|
||||
{{ creating ? "Saving..." : "Save & Create Another" }}
|
||||
</button>
|
||||
|
|
@ -619,6 +602,7 @@
|
|||
|
||||
<script setup>
|
||||
import { TIMEZONE_OPTIONS } from "~/config/timezones";
|
||||
import { EVENT_TYPES } from "~/config/eventTypes";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
|
|
@ -638,9 +622,32 @@ const availableSeries = ref([]);
|
|||
const availableTags = ref([]);
|
||||
|
||||
const tagOptions = computed(() =>
|
||||
availableTags.value.map((t) => ({ label: t.label, value: t.slug }))
|
||||
availableTags.value.map((t) => ({ label: t.label, value: t.slug })),
|
||||
);
|
||||
|
||||
const newTagPool = ref("cooperative");
|
||||
|
||||
const onTagCreate = async (item) => {
|
||||
const label = typeof item === "string" ? item : item?.label || item?.value;
|
||||
if (!label?.trim()) return;
|
||||
try {
|
||||
const { tag } = await $fetch("/api/admin/tags", {
|
||||
method: "POST",
|
||||
body: { label: label.trim(), pool: newTagPool.value },
|
||||
});
|
||||
if (!availableTags.value.some((t) => t.slug === tag.slug)) {
|
||||
availableTags.value.push({ slug: tag.slug, label: tag.label });
|
||||
}
|
||||
if (!eventForm.tags.includes(tag.slug)) {
|
||||
eventForm.tags.push(tag.slug);
|
||||
}
|
||||
} catch (err) {
|
||||
formErrors.value.push(
|
||||
`Failed to create tag "${label}": ${err?.data?.statusMessage || err?.statusMessage || err?.message || "unknown error"}`,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const eventForm = reactive({
|
||||
title: "",
|
||||
description: "",
|
||||
|
|
@ -648,7 +655,7 @@ const eventForm = reactive({
|
|||
featureImage: null,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
eventType: "community",
|
||||
eventType: "community-meetup",
|
||||
displayTimezone: "America/Toronto",
|
||||
location: "",
|
||||
isOnline: true,
|
||||
|
|
@ -724,14 +731,14 @@ const timezoneItems = computed(() => {
|
|||
return list;
|
||||
});
|
||||
|
||||
// Agenda management functions
|
||||
const addAgendaItem = () => {
|
||||
eventForm.agenda.push("");
|
||||
};
|
||||
|
||||
const removeAgendaItem = (index) => {
|
||||
eventForm.agenda.splice(index, 1);
|
||||
};
|
||||
const agendaText = computed({
|
||||
get() {
|
||||
return (eventForm.agenda || []).join("\n");
|
||||
},
|
||||
set(v) {
|
||||
eventForm.agenda = v.split("\n");
|
||||
},
|
||||
});
|
||||
|
||||
// Load available series and tags
|
||||
onMounted(async () => {
|
||||
|
|
@ -895,12 +902,6 @@ const validateForm = () => {
|
|||
fieldErrors.value.endDate = "Please select when the event ends";
|
||||
}
|
||||
|
||||
if (!eventForm.location.trim()) {
|
||||
formErrors.value.push("Location is required");
|
||||
fieldErrors.value.location =
|
||||
"Please enter a URL, Slack channel, or 'TBD'";
|
||||
}
|
||||
|
||||
// Date validation
|
||||
if (eventForm.startDate && eventForm.endDate) {
|
||||
const startDate = new Date(eventForm.startDate);
|
||||
|
|
@ -917,22 +918,6 @@ const validateForm = () => {
|
|||
}
|
||||
}
|
||||
|
||||
// Location format validation
|
||||
if (eventForm.location.trim()) {
|
||||
const value = eventForm.location.trim();
|
||||
const urlPattern = /^https?:\/\/.+/;
|
||||
const slackPattern = /^#[a-zA-Z0-9-_]+$/;
|
||||
const isTbd = value.toUpperCase() === "TBD";
|
||||
|
||||
if (!isTbd && !urlPattern.test(value) && !slackPattern.test(value)) {
|
||||
formErrors.value.push(
|
||||
"Location must be a valid URL, Slack channel (starting with #), or 'TBD'",
|
||||
);
|
||||
fieldErrors.value.location =
|
||||
"Enter a URL (https://...), Slack channel (#channel-name), or 'TBD' if undecided";
|
||||
}
|
||||
}
|
||||
|
||||
// Registration deadline validation
|
||||
if (eventForm.registrationDeadline && eventForm.startDate) {
|
||||
const regDeadline = new Date(eventForm.registrationDeadline);
|
||||
|
|
@ -979,6 +964,9 @@ const saveEvent = async (redirect = true) => {
|
|||
registrationDeadline: eventForm.registrationDeadline
|
||||
? toUTC(eventForm.registrationDeadline)
|
||||
: eventForm.registrationDeadline,
|
||||
agenda: (eventForm.agenda || [])
|
||||
.map((l) => l.trim())
|
||||
.filter(Boolean),
|
||||
tickets: {
|
||||
...eventForm.tickets,
|
||||
public: {
|
||||
|
|
@ -1036,7 +1024,7 @@ const saveAndCreateAnother = async () => {
|
|||
featureImage: null,
|
||||
startDate: "",
|
||||
endDate: "",
|
||||
eventType: "community",
|
||||
eventType: "community-meetup",
|
||||
displayTimezone: "America/Toronto",
|
||||
location: "",
|
||||
isOnline: true,
|
||||
|
|
@ -1082,7 +1070,42 @@ const saveAndCreateAnother = async () => {
|
|||
|
||||
<style scoped>
|
||||
.create-form {
|
||||
max-width: 800px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 100vh;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Vertical divider between main + aside, full viewport height */
|
||||
.create-form::after {
|
||||
content: "";
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 340px;
|
||||
border-left: 1px dashed var(--border);
|
||||
pointer-events: none;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.form-layout {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 340px;
|
||||
align-items: stretch;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.form-main {
|
||||
min-width: 0;
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.form-aside {
|
||||
padding: 24px 28px;
|
||||
}
|
||||
|
||||
.form-aside .form-section:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.page-header {
|
||||
|
|
@ -1119,7 +1142,21 @@ const saveAndCreateAnother = async () => {
|
|||
}
|
||||
|
||||
.form-body {
|
||||
padding: 24px 28px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.form-body > .error-box,
|
||||
.form-body > .success-box {
|
||||
margin: 24px 28px 0;
|
||||
}
|
||||
|
||||
.form-body > form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
|
|
@ -1127,7 +1164,9 @@ const saveAndCreateAnother = async () => {
|
|||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
padding-bottom: 10px;
|
||||
margin-left: -28px;
|
||||
margin-right: -28px;
|
||||
padding: 0 28px 10px;
|
||||
border-bottom: 1px dashed var(--border);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
|
@ -1225,7 +1264,7 @@ const saveAndCreateAnother = async () => {
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 20px;
|
||||
padding: 20px 28px;
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
|
||||
|
|
@ -1258,59 +1297,50 @@ const saveAndCreateAnother = async () => {
|
|||
flex: 1;
|
||||
}
|
||||
|
||||
.agenda-items {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.agenda-row {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.agenda-row .w-full {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.link-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--candle);
|
||||
cursor: pointer;
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
}
|
||||
|
||||
.link-btn:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.link-btn-danger {
|
||||
color: var(--ember);
|
||||
}
|
||||
|
||||
.add-agenda-btn {
|
||||
align-self: flex-start;
|
||||
color: var(--candle);
|
||||
border-color: var(--candle);
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
.btn:disabled,
|
||||
.btn-primary:disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
:deep(.title-input) {
|
||||
font-family: "Brygada 1918", serif;
|
||||
font-size: 24px;
|
||||
padding: 12px 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
.create-form::after {
|
||||
display: none;
|
||||
}
|
||||
.form-layout {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
.form-aside {
|
||||
border-top: 1px dashed var(--border);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.page-header {
|
||||
padding: 24px 20px 16px;
|
||||
}
|
||||
.form-body {
|
||||
padding: 20px;
|
||||
.form-main,
|
||||
.form-aside,
|
||||
.form-actions {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.form-body > .error-box,
|
||||
.form-body > .success-box {
|
||||
margin-left: 20px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
.section-heading {
|
||||
margin-left: -20px;
|
||||
margin-right: -20px;
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
.form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue