Use the card view's inline back arrow on every other heading
Generalized .card-view__back into .title-back and applied it to: - ProjectView: arrow back to the dashboard, inline before the title (previously no back link at all here -- the app bar's brand already covers it, but this is more discoverable and matches the others). - ProjectConfigureView: arrow back to the project, replacing the separate "Back to project" button that used to sit in the actions corner next to Manage. - ProfileView: arrow back to the dashboard, replacing the plain-text link removed in an earlier commit. Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
+6
-10
@@ -647,22 +647,18 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
.project-head__back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* The card view's back link sits inside its title, right before the card's
|
||||
text, rather than up in .project-head__actions like the other views. */
|
||||
.card-view__back {
|
||||
/* An arrow inline in a heading, right before the title text -- back to
|
||||
wherever this page is "inside" of (dashboard, a project, ...). Used by
|
||||
every heading that has one instead of a separate button, so they all
|
||||
look and behave the same. */
|
||||
.title-back {
|
||||
display: inline-flex;
|
||||
margin-right: 0.4rem;
|
||||
color: var(--muted);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.card-view__back:hover {
|
||||
.title-back:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
|
||||
@@ -106,7 +106,7 @@ async function onDelete() {
|
||||
<template v-else-if="card">
|
||||
<div class="project-head">
|
||||
<h1 class="project-head__title">
|
||||
<RouterLink :to="backTarget" class="card-view__back" :aria-label="backLabel">←</RouterLink>
|
||||
<RouterLink :to="backTarget" class="title-back" :aria-label="backLabel">←</RouterLink>
|
||||
{{ card.text }}
|
||||
</h1>
|
||||
|
||||
|
||||
@@ -121,7 +121,10 @@ async function onRemovePasskey(passkey: Passkey) {
|
||||
|
||||
<template>
|
||||
<section class="card">
|
||||
<h1>Your profile</h1>
|
||||
<h1>
|
||||
<RouterLink :to="{ name: 'dashboard' }" class="title-back" aria-label="Back to dashboard">←</RouterLink>
|
||||
Your profile
|
||||
</h1>
|
||||
|
||||
<p><strong>Email:</strong> {{ auth.user?.email }}</p>
|
||||
|
||||
|
||||
@@ -69,13 +69,12 @@ async function onRenameProject() {
|
||||
|
||||
<template v-else-if="project">
|
||||
<div class="project-head">
|
||||
<h1 class="project-head__title">{{ project.title }}</h1>
|
||||
<h1 class="project-head__title">
|
||||
<RouterLink :to="{ name: 'project', params: { id: projectId } }" class="title-back" aria-label="Back to project">←</RouterLink>
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
|
||||
<div class="project-head__actions">
|
||||
<RouterLink :to="{ name: 'project', params: { id: projectId } }" class="menu__toggle project-head__back">
|
||||
← Back to project
|
||||
</RouterLink>
|
||||
|
||||
<ProjectManageMenu :project-id="projectId" :project-title="project.title" :card-count="project.card_count" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -142,7 +142,10 @@ async function onCreate() {
|
||||
|
||||
<template v-else-if="project">
|
||||
<div class="project-head">
|
||||
<h1 class="project-head__title">{{ project.title }}</h1>
|
||||
<h1 class="project-head__title">
|
||||
<RouterLink :to="{ name: 'dashboard' }" class="title-back" aria-label="Back to dashboard">←</RouterLink>
|
||||
{{ project.title }}
|
||||
</h1>
|
||||
|
||||
<div class="project-head__actions">
|
||||
<ProjectManageMenu
|
||||
|
||||
Reference in New Issue
Block a user