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

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
Details

Browse Source
This commit is contained in:
Ryan Kegel
2026-02-02 23:53:04 -05:00
parent 5351932194
commit 99d3aeb068
7 changed files with 295 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
frontend/vue-app/src/layout/AuthLayout.vue
View File

@@ -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>

83
frontend/vue-app/src/layout/ChildLayout.vue
View File

@@ -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>

102
frontend/vue-app/src/layout/ParentLayout.vue
View File

@@ -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>