refactor: Update layout and styling components; remove unused CSS files and enhance button styles
All checks were successful
Gitea Actions Demo / build-and-push (push) Successful in 46s
All checks were successful
Gitea Actions Demo / build-and-push (push) Successful in 46s
This commit is contained in:
2
.github/copilot-instructions.md
vendored
2
.github/copilot-instructions.md
vendored
@@ -11,7 +11,7 @@
|
||||
|
||||
## 🧩 Key Patterns & Conventions
|
||||
|
||||
- **Frontend Styling**: Use only `:root` CSS variables from `global.css` for all colors, spacing, and tokens. Example: `--btn-primary`, `--list-item-bg-good`.
|
||||
- **Frontend Styling**: Use only `:root` CSS variables from `colors.css` for all colors, spacing, and tokens. Example: `--btn-primary`, `--list-item-bg-good`.
|
||||
- **Scoped Styles**: All `.vue` files must use `<style scoped>`. Reference global variables for theme consistency.
|
||||
- **API Error Handling**: Backend returns JSON with `error` and `code` (see `backend/api/error_codes.py`). Frontend extracts `{ msg, code }` using `parseErrorResponse(res)` from `api.ts`.
|
||||
- **JWT Auth**: Tokens are stored in HttpOnly, Secure, SameSite=Strict cookies.
|
||||
|
||||
@@ -1,108 +0,0 @@
|
||||
/* Root layout */
|
||||
.layout-root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
|
||||
}
|
||||
|
||||
/* Top bar */
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 5px 5px;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/* Back button container and login button container */
|
||||
.back-btn-container,
|
||||
.login-btn-container {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1 1 0;
|
||||
}
|
||||
|
||||
.back-btn-container {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.login-btn-container {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Spacer for layouts without a center nav */
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
/* Back button */
|
||||
.back-btn {
|
||||
background: var(--button-bg, #fff);
|
||||
border: 0;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
color: var(--button-text, #667eea);
|
||||
font-weight: 600;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Login button inside login-btn container */
|
||||
.login-btn {
|
||||
background: var(--button-bg, #fff);
|
||||
border: 0;
|
||||
padding: 0.6rem 1rem;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
color: var(--button-text, #667eea);
|
||||
font-weight: 600;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Main content area */
|
||||
.main-content {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
/* App version display */
|
||||
.app-version {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 12px;
|
||||
font-size: 0.92rem;
|
||||
color: var(--app-version, #cbd5e1);
|
||||
opacity: 0.85;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 480px) {
|
||||
.back-btn,
|
||||
.login-btn button {
|
||||
padding: 0.45rem 0.75rem;
|
||||
font-size: 0.6rem;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
@@ -131,16 +131,16 @@ onUnmounted(() => {
|
||||
|
||||
<template>
|
||||
<div style="position: relative">
|
||||
<button v-if="!isParentAuthenticated" @click="open" aria-label="Parent login" class="login-btn">
|
||||
<button
|
||||
v-if="!isParentAuthenticated"
|
||||
@click="open"
|
||||
aria-label="Parent login"
|
||||
class="login-btn parent-btn"
|
||||
>
|
||||
Parent
|
||||
</button>
|
||||
<div v-else style="display: inline-block; position: relative" ref="dropdownRef">
|
||||
<button
|
||||
@click="toggleDropdown"
|
||||
aria-label="Parent menu"
|
||||
class="login-btn"
|
||||
style="min-width: 80px"
|
||||
>
|
||||
<button @click="toggleDropdown" aria-label="Parent menu" class="login-btn parent-btn">
|
||||
Parent ▼
|
||||
</button>
|
||||
<div
|
||||
@@ -200,8 +200,41 @@ onUnmounted(() => {
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
/* modal */
|
||||
<style scoped>
|
||||
.parent-btn {
|
||||
width: 65px;
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin: 0;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
background: var(--button-bg, #fff);
|
||||
border: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
color: var(--button-text, #667eea);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.18s;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.parent-btn {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.pin-input {
|
||||
width: 100%;
|
||||
|
||||
@@ -36,15 +36,88 @@ const showBack = computed(
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Only keep styles unique to ChildLayout */
|
||||
.layout-root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
|
||||
}
|
||||
|
||||
.topbar > .spacer {
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.back-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 65px;
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 65px;
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin: 0;
|
||||
background: var(--button-bg, #fff);
|
||||
border: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
color: var(--button-text, #667eea);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.18s;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.back-btn {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
.main-content {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<div class="layout-root">
|
||||
<header class="topbar">
|
||||
<div class="back-btn-container">
|
||||
<div class="end-button-container">
|
||||
<button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
|
||||
</div>
|
||||
<div class="spacer"></div>
|
||||
<div class="login-btn-container">
|
||||
<div class="end-button-container">
|
||||
<LoginButton />
|
||||
</div>
|
||||
</header>
|
||||
@@ -35,15 +35,88 @@ const showBack = computed(() => route.path !== '/child')
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* Only keep styles unique to ChildLayout */
|
||||
.layout-root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
|
||||
}
|
||||
|
||||
.topbar > .spacer {
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.end-button-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 65px;
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 65px;
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin: 0;
|
||||
background: var(--button-bg, #fff);
|
||||
border: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
color: var(--button-text, #667eea);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.18s;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.back-btn {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.spacer {
|
||||
flex: 1 1 auto;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
.main-content {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -45,7 +45,7 @@ onMounted(async () => {
|
||||
<template>
|
||||
<div class="layout-root">
|
||||
<header class="topbar">
|
||||
<div class="back-btn-container">
|
||||
<div class="back-btn-container edge-btn-container">
|
||||
<button v-show="showBack" class="back-btn" @click="handleBack" tabindex="0">← Back</button>
|
||||
</div>
|
||||
<nav v-if="!hideViewSelector" class="view-selector">
|
||||
@@ -153,7 +153,9 @@ onMounted(async () => {
|
||||
</svg>
|
||||
</button>
|
||||
</nav>
|
||||
<LoginButton class="login-btn-container" />
|
||||
<div class="login-btn-container edge-btn-container">
|
||||
<LoginButton />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
@@ -165,14 +167,80 @@ onMounted(async () => {
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
/* Only keep styles unique to ParentLayout */
|
||||
.layout-root {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0;
|
||||
background: var(--header-bg, linear-gradient(135deg, #667eea 0%, #764ba2 100%));
|
||||
}
|
||||
|
||||
.topbar {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
height: 48px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.edge-btn-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 65px;
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin-left: 5px;
|
||||
margin-right: 5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.back-btn {
|
||||
width: 65px;
|
||||
min-width: 65px;
|
||||
max-width: 65px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
max-height: 48px;
|
||||
margin: 0;
|
||||
background: var(--button-bg, #fff);
|
||||
border: 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
cursor: pointer;
|
||||
color: var(--button-text, #667eea);
|
||||
font-weight: 600;
|
||||
font-size: 0.8rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
transition:
|
||||
background 0.18s,
|
||||
color 0.18s;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.back-btn {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
}
|
||||
|
||||
.view-selector {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
flex: 2 1 0;
|
||||
flex: 1 1 0;
|
||||
justify-content: center;
|
||||
min-width: 0;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.view-selector button {
|
||||
@@ -191,6 +259,7 @@ onMounted(async () => {
|
||||
color 0.18s;
|
||||
font-size: 1rem;
|
||||
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.08);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.view-selector button.active {
|
||||
@@ -212,4 +281,29 @@ onMounted(async () => {
|
||||
font-size: 0.85rem;
|
||||
}
|
||||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
align-items: flex-start;
|
||||
box-sizing: border-box;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
overflow-y: visible;
|
||||
}
|
||||
|
||||
.app-version {
|
||||
position: fixed;
|
||||
right: 18px;
|
||||
bottom: 12px;
|
||||
font-size: 0.92rem;
|
||||
color: var(--app-version, #cbd5e1);
|
||||
opacity: 0.85;
|
||||
z-index: 100;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
font-family: monospace;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -3,9 +3,7 @@ import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import '@/assets/actions-shared.css'
|
||||
import '@/assets/layout-shared.css'
|
||||
import '@/assets/button-shared.css'
|
||||
import '@/assets/view-shared.css'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user