add set layout view
This commit is contained in:
parent
4222d4c0a2
commit
a3ea15fc80
GPG key ID:
0FA60884F75520A9
6 changed files with 549 additions and 54 deletions
|
|
@ -1,33 +1,21 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
import BrandWordmark from '@/components/BrandWordmark.vue'
|
||||
import { useAuthStore } from '@/stores/auth'
|
||||
import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
|
||||
import { useSetsStore } from '@/stores/sets'
|
||||
|
||||
const authStore = useAuthStore()
|
||||
const setsStore = useSetsStore()
|
||||
const { sets, loading, error } = storeToRefs(setsStore)
|
||||
const router = useRouter()
|
||||
|
||||
onMounted(async () => {
|
||||
await setsStore.fetchSets()
|
||||
})
|
||||
|
||||
async function handleLogout(): Promise<void> {
|
||||
await authStore.logout()
|
||||
await router.push({ name: 'login' })
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="dashboard-page">
|
||||
<header class="dashboard-header">
|
||||
<BrandWordmark theme="dark" />
|
||||
<button type="button" class="logout-button" @click="handleLogout">Log out</button>
|
||||
</header>
|
||||
<AuthenticatedHeader />
|
||||
|
||||
<section class="sets-catalog" aria-labelledby="sets-heading">
|
||||
<div class="sets-catalog__introduction">
|
||||
|
|
@ -51,10 +39,19 @@ async function handleLogout(): Promise<void> {
|
|||
|
||||
<ul v-else class="set-grid" aria-label="Available sets">
|
||||
<li v-for="availableSet in sets" :key="availableSet.id">
|
||||
<article class="set-card">
|
||||
<p>Set</p>
|
||||
<h2>{{ availableSet.name }}</h2>
|
||||
</article>
|
||||
<RouterLink
|
||||
class="set-card-link"
|
||||
:to="{ name: 'set-layout', params: { setId: availableSet.id } }"
|
||||
>
|
||||
<article class="set-card">
|
||||
<p>Set</p>
|
||||
<h2>{{ availableSet.name }}</h2>
|
||||
<span class="set-card__action">
|
||||
Explore layout
|
||||
<span aria-hidden="true">→</span>
|
||||
</span>
|
||||
</article>
|
||||
</RouterLink>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -70,42 +67,6 @@ async function handleLogout(): Promise<void> {
|
|||
background: #f4f1e7;
|
||||
}
|
||||
|
||||
.dashboard-header {
|
||||
display: flex;
|
||||
width: min(100%, 76rem);
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.logout-button {
|
||||
min-height: 2.75rem;
|
||||
padding: 0.7rem 1.1rem;
|
||||
border: 0;
|
||||
border-radius: 0.7rem;
|
||||
color: #fffdf7;
|
||||
background: #183a31;
|
||||
box-shadow: 0 0.55rem 1.2rem rgb(24 58 49 / 14%);
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background-color 160ms ease,
|
||||
transform 160ms ease,
|
||||
box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.logout-button:hover {
|
||||
background: #285c4e;
|
||||
box-shadow: 0 0.7rem 1.4rem rgb(24 58 49 / 18%);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.logout-button:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.sets-catalog {
|
||||
width: min(100%, 72rem);
|
||||
margin: clamp(4.5rem, 10vh, 7rem) auto 0;
|
||||
|
|
@ -195,12 +156,35 @@ h1 {
|
|||
}
|
||||
|
||||
.set-card {
|
||||
height: 100%;
|
||||
min-height: 11rem;
|
||||
padding: 1.6rem;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
background: linear-gradient(135deg, rgb(255 253 247 / 96%), rgb(242 236 221 / 82%));
|
||||
box-shadow: 0 1rem 2.5rem rgb(40 62 52 / 8%);
|
||||
transition:
|
||||
border-color 160ms ease,
|
||||
box-shadow 160ms ease,
|
||||
transform 160ms ease;
|
||||
}
|
||||
|
||||
.set-card-link {
|
||||
display: block;
|
||||
height: 100%;
|
||||
border-radius: 1rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.set-card-link:hover .set-card {
|
||||
border-color: rgb(40 92 78 / 35%);
|
||||
box-shadow: 0 1.25rem 2.75rem rgb(40 62 52 / 13%);
|
||||
transform: translateY(-3px);
|
||||
}
|
||||
|
||||
.set-card-link:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 38%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.set-card p {
|
||||
|
|
@ -222,6 +206,16 @@ h1 {
|
|||
letter-spacing: -0.035em;
|
||||
}
|
||||
|
||||
.set-card__action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.35rem;
|
||||
margin-top: 1.4rem;
|
||||
color: #567064;
|
||||
font-size: 0.76rem;
|
||||
font-weight: 750;
|
||||
}
|
||||
|
||||
@media (max-width: 37.5rem) {
|
||||
.dashboard-page {
|
||||
padding: 1.4rem 1.1rem 2.5rem;
|
||||
|
|
|
|||
218
frontend/website/src/views/SetLayoutView.vue
Normal file
218
frontend/website/src/views/SetLayoutView.vue
Normal file
|
|
@ -0,0 +1,218 @@
|
|||
<script setup lang="ts">
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { ref, watch } from 'vue'
|
||||
import { useRoute } from 'vue-router'
|
||||
|
||||
import AuthenticatedHeader from '@/components/AuthenticatedHeader.vue'
|
||||
import ElementTree from '@/components/ElementTree.vue'
|
||||
import { useSetLayoutStore } from '@/stores/setLayout'
|
||||
|
||||
const route = useRoute()
|
||||
const setLayoutStore = useSetLayoutStore()
|
||||
const { layout, loading, error, notFound } = storeToRefs(setLayoutStore)
|
||||
const currentSetId = ref<number | null>(null)
|
||||
const EMPTY_MESSAGE = 'This set does not have any elements yet.'
|
||||
|
||||
watch(
|
||||
() => route.params.setId,
|
||||
async (setIdParameter) => {
|
||||
const rawSetId = Array.isArray(setIdParameter) ? setIdParameter[0] : setIdParameter
|
||||
const setId = Number(rawSetId)
|
||||
currentSetId.value = setId
|
||||
await setLayoutStore.fetchSetLayout(setId)
|
||||
},
|
||||
{ immediate: true },
|
||||
)
|
||||
|
||||
async function retry(): Promise<void> {
|
||||
if (currentSetId.value === null) {
|
||||
return
|
||||
}
|
||||
|
||||
await setLayoutStore.fetchSetLayout(currentSetId.value)
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main class="layout-page">
|
||||
<AuthenticatedHeader />
|
||||
|
||||
<section class="set-layout">
|
||||
<RouterLink class="back-link" :to="{ name: 'dashboard' }">
|
||||
<span aria-hidden="true">←</span>
|
||||
Back to sets
|
||||
</RouterLink>
|
||||
|
||||
<p v-if="loading" class="layout-state" role="status">Loading set layout...</p>
|
||||
|
||||
<div v-else-if="notFound" class="layout-state layout-state--error" role="alert">
|
||||
<p class="set-layout__eyebrow">Your library</p>
|
||||
<h1>Set not found</h1>
|
||||
<p>The set you're looking for is not available.</p>
|
||||
</div>
|
||||
|
||||
<div v-else-if="error !== null" class="layout-state layout-state--error" role="alert">
|
||||
<p>{{ error }}</p>
|
||||
<button type="button" class="retry-button" @click="retry">Try again</button>
|
||||
</div>
|
||||
|
||||
<template v-else-if="layout !== null">
|
||||
<header class="set-layout__introduction">
|
||||
<p class="set-layout__eyebrow">Set layout</p>
|
||||
<h1>{{ layout.set.name }}</h1>
|
||||
<p class="set-layout__description">
|
||||
Explore every element in this set and see how each level fits into the whole.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
<p
|
||||
v-if="layout.elements.length === 0"
|
||||
class="layout-state"
|
||||
role="status"
|
||||
v-text="EMPTY_MESSAGE"
|
||||
></p>
|
||||
|
||||
<div v-else class="layout-outline">
|
||||
<ElementTree :nodes="layout.elements" :label="`${layout.set.name} element layout`" />
|
||||
</div>
|
||||
</template>
|
||||
</section>
|
||||
</main>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.layout-page {
|
||||
min-height: 100vh;
|
||||
min-height: 100svh;
|
||||
padding: 2rem clamp(1.5rem, 6vw, 5rem) 5rem;
|
||||
color: #183029;
|
||||
background: #f4f1e7;
|
||||
}
|
||||
|
||||
.set-layout {
|
||||
width: min(100%, 62rem);
|
||||
margin: clamp(3.5rem, 8vh, 5.5rem) auto 0;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
border-radius: 0.35rem;
|
||||
color: #5e7067;
|
||||
font-size: 0.84rem;
|
||||
font-weight: 750;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
color: #183a31;
|
||||
}
|
||||
|
||||
.back-link:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
.set-layout__introduction {
|
||||
max-width: 44rem;
|
||||
margin-top: 2.75rem;
|
||||
}
|
||||
|
||||
.set-layout__eyebrow {
|
||||
margin: 0 0 1rem;
|
||||
color: #926044;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 800;
|
||||
letter-spacing: 0.14em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
font-size: clamp(3rem, 7vw, 5.25rem);
|
||||
font-weight: 500;
|
||||
line-height: 1;
|
||||
letter-spacing: -0.055em;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
.set-layout__description {
|
||||
max-width: 38rem;
|
||||
margin: 1.5rem 0 0;
|
||||
color: #68776f;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.layout-outline {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.layout-state {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
min-height: 10rem;
|
||||
place-items: center;
|
||||
margin: 2.75rem 0 0;
|
||||
padding: 2rem;
|
||||
border: 1px solid rgb(24 48 41 / 12%);
|
||||
border-radius: 1rem;
|
||||
color: #68776f;
|
||||
background: rgb(255 253 247 / 72%);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.layout-state--error {
|
||||
align-content: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.layout-state--error p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.layout-state--error h1 {
|
||||
font-size: clamp(2.25rem, 5vw, 3.6rem);
|
||||
}
|
||||
|
||||
.retry-button {
|
||||
min-height: 2.65rem;
|
||||
padding: 0.65rem 1rem;
|
||||
border: 1px solid rgb(24 58 49 / 28%);
|
||||
border-radius: 0.7rem;
|
||||
color: #183a31;
|
||||
background: #fffdf7;
|
||||
font-size: 0.82rem;
|
||||
font-weight: 750;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.retry-button:hover {
|
||||
border-color: #285c4e;
|
||||
background: #f9f5e9;
|
||||
}
|
||||
|
||||
.retry-button:focus-visible {
|
||||
outline: 3px solid rgb(86 127 112 / 34%);
|
||||
outline-offset: 0.25rem;
|
||||
}
|
||||
|
||||
@media (max-width: 37.5rem) {
|
||||
.layout-page {
|
||||
padding: 1.4rem 1.1rem 3rem;
|
||||
}
|
||||
|
||||
.set-layout {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
.set-layout__introduction {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
|
||||
.layout-outline {
|
||||
margin-top: 2.25rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue