Move the new-project form into the dashboard grid as a tile
It now sits last in .dashboard__grid, styled like a project-card (dashed border to read as an action rather than a project) instead of as a separate form below the grid. Relabel it 'Create a project' and add a 'Name' placeholder to the input. Also drop the now-redundant 'no projects yet' empty-state message -- the grid always renders since the create tile lives inside it. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
@@ -43,10 +43,6 @@ async function onCreate() {
|
||||
<div class="dashboard">
|
||||
<p v-if="loadError" class="form-error">{{ loadError }}</p>
|
||||
<p v-else-if="projects.loading && !projects.loaded" class="muted">Loading…</p>
|
||||
<p v-else-if="projects.projects.length === 0" class="muted">
|
||||
No projects yet — create one below. Anything uncategorised lives in the
|
||||
inbox, in the sidebar.
|
||||
</p>
|
||||
|
||||
<div v-else class="dashboard__grid">
|
||||
<RouterLink
|
||||
@@ -60,28 +56,28 @@ async function onCreate() {
|
||||
{{ project.card_count }} card{{ project.card_count === 1 ? '' : 's' }}
|
||||
</span>
|
||||
</RouterLink>
|
||||
|
||||
<form class="project-card project-card--new" @submit.prevent="onCreate">
|
||||
<label>
|
||||
<span class="project-card__title">Create a project</span>
|
||||
<input v-model="title" type="text" maxlength="255" placeholder="Name" required :disabled="atLimit" />
|
||||
<small v-if="createError?.fieldError('title')" class="field-error">
|
||||
{{ createError.fieldError('title') }}
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<p v-if="createError && Object.keys(createError.details).length === 0" class="form-error">
|
||||
{{ createError.message }}
|
||||
</p>
|
||||
|
||||
<button type="submit" :disabled="submitting || atLimit">
|
||||
{{ submitting ? 'Creating…' : 'Create project' }}
|
||||
</button>
|
||||
|
||||
<p v-if="atLimit" class="hint">
|
||||
You have reached the maximum of {{ MAX_PROJECTS }} projects.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<form class="form form--new-project" @submit.prevent="onCreate">
|
||||
<label>
|
||||
<span>New project title</span>
|
||||
<input v-model="title" type="text" maxlength="255" required :disabled="atLimit" />
|
||||
<small v-if="createError?.fieldError('title')" class="field-error">
|
||||
{{ createError.fieldError('title') }}
|
||||
</small>
|
||||
</label>
|
||||
|
||||
<p v-if="createError && Object.keys(createError.details).length === 0" class="form-error">
|
||||
{{ createError.message }}
|
||||
</p>
|
||||
|
||||
<button type="submit" :disabled="submitting || atLimit">
|
||||
{{ submitting ? 'Creating…' : 'Create project' }}
|
||||
</button>
|
||||
|
||||
<p v-if="atLimit" class="hint">
|
||||
You have reached the maximum of {{ MAX_PROJECTS }} projects.
|
||||
</p>
|
||||
</form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user