ryan/chore
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

round 1

Browse Source
This commit is contained in:
Ryan Kegel
2025-11-25 16:08:10 -05:00
parent cb0f972a5f
commit 72971f6d3e
19 changed files with 1595 additions and 785 deletions
Download Patch File Download Diff File Expand all files Collapse all files

175
web/vue-app/src/layout/ParentLayout.vue
View File

@@ -14,18 +14,91 @@ const handleBack = () => {
}
}
const showBack = computed(() => route.path !== '/parent')
const showBack = computed(
() => !(route.path === '/parent' || route.name === 'TaskView' || route.name === 'RewardView'),
)
</script>
<template>
<div class="layout-root">
<header class="topbar">
<div class="topbar-inner">
<button v-if="showBack" class="back-btn" @click="handleBack">← Back</button>
<div class="spacer"></div>
<LoginButton />
<div style="height: 100%; display: flex; align-items: center">
<button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
</div>
<nav class="view-selector">
<button
:class="{ active: ['ParentChildrenListView', 'ParentView'].includes(String(route.name)) }"
@click="router.push({ name: 'ParentChildrenListView' })"
aria-label="Children"
title="Children"
>
<!-- Children Icon: Two user portraits -->
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="8" cy="10" r="3" />
<circle cx="16" cy="10" r="3" />
<path d="M2 20c0-2.5 3-4.5 6-4.5s6 2 6 4.5" />
<path d="M10 20c0-2 2-3.5 6-3.5s6 1.5 6 3.5" />
</svg>
</button>
<button
:class="{ active: ['TaskView', 'EditTask', 'CreateTask'].includes(String(route.name)) }"
@click="router.push({ name: 'TaskView' })"
aria-label="Tasks"
title="Tasks"
>
<!-- Book Icon -->
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20" />
<path d="M20 22V6a2 2 0 0 0-2-2H6.5A2.5 2.5 0 0 0 4 6.5v13" />
<path d="M16 2v4" />
</svg>
</button>
<button
:class="{ active: route.name === 'RewardView' }"
@click="router.push({ name: 'RewardView' })"
aria-label="Rewards"
title="Rewards"
>
<!-- Trophy Icon -->
<svg
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.7"
stroke-linecap="round"
stroke-linejoin="round"
>
<path d="M8 21h8" />
<path d="M12 17v4" />
<path d="M17 17a5 5 0 0 0 5-5V7h-4" />
<path d="M7 17a5 5 0 0 1-5-5V7h4" />
<rect x="7" y="2" width="10" height="15" rx="5" />
</svg>
</button>
</nav>
<LoginButton class="login-btn" />
</header>
<main class="main-content">
<router-view />
</main>
@@ -35,31 +108,19 @@ const showBack = computed(() => route.path !== '/parent')
<style scoped>
.layout-root {
width: 100%;
box-sizing: border-box;
min-height: 100vh;
height: 100vh;
display: flex;
flex-direction: column;
/* Reduce top padding */
padding: 0.5rem 2rem 2rem 2rem;
padding: 0; /* Remove bottom padding */
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
/* top bar holds title and logout button */
.topbar {
width: 100%;
padding: 12px 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
}
.topbar-inner {
width: 100%;
max-width: 1200px;
display: flex;
display: grid;
grid-template-columns: 76px 1fr 76px;
align-items: center;
gap: 1rem;
}
.title {
@@ -68,38 +129,51 @@ const showBack = computed(() => route.path !== '/parent')
margin: 0;
}
/* spacer pushes button to the right */
.spacer {
flex: 1;
/* View Selector styles */
.view-selector {
justify-self: center;
}
.logout-btn {
background: white;
.view-selector button {
background: #fff;
color: #667eea;
border: 0;
padding: 0.5rem 0.75rem;
border-radius: 8px;
cursor: pointer;
border: none;
border-radius: 8px 8px 0 0;
padding: 0.6rem 1.2rem;
font-weight: 600;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
transition: all 0.2s ease;
cursor: pointer;
transition:
background 0.18s,
color 0.18s;
font-size: 1rem;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
}
.logout-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
.view-selector button.active {
background: #7257b3;
color: #fff;
}
.view-selector button.active svg {
stroke: #fff;
}
.view-selector button:hover:not(.active) {
background: #e6eaff;
}
/* main content remains centered */
.main-content {
flex: 1 1 auto;
width: 100%;
display: flex;
justify-content: center;
align-items: flex-start; /* content starts higher */
align-items: flex-start;
box-sizing: border-box;
/* Reduce top padding */
padding: 4px 20px 40px;
min-height: 0;
height: 0; /* Ensures children can use 100% height */
overflow: hidden; /* Prevents parent from scrolling */
overflow-y: visible;
}
/* back button specific styles */
@@ -107,24 +181,33 @@ const showBack = computed(() => route.path !== '/parent')
background: white;
border: 0;
padding: 0.6rem 1rem;
border-radius: 8px;
border-radius: 8px 8px 0 0;
cursor: pointer;
margin-bottom: 0;
color: #667eea;
font-weight: 600;
margin-top: 0;
align-self: end;
}
.back-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
.login-btn {
align-self: end;
}
@media (max-width: 480px) {
.back-btn {
padding: 0.45rem 0.75rem;
font-size: 0.95rem;
margin-bottom: 0.7rem;
}
}
</style>
<style>
.login-btn button {
background: white;
border: 0;
padding: 0.6rem 1rem;
border-radius: 8px 8px 0 0;
cursor: pointer;
color: #667eea;
font-weight: 600;
}
</style>