feat(test-app): add back navigation and improve mobile layout
- Add back buttons to all sub-views (Schedule, Status, Notifications, History, Logs, Settings, UserZero, About) - Fix router navigation by importing router instance directly (resolves TypeScript errors with vue-facing-decorator) - Update back button styling: flex layout with page title, arrow-only label - Fix "Check Status" action to navigate to StatusView instead of checking status inline - Remove horizontal padding on mobile views (max-width 768px) for edge-to-edge layout - Simplify badge styling in HomeView (remove padding and border-radius)
This commit is contained in:
Jose Olarte III
@@ -1,10 +1,61 @@
|
||||
<template>
|
||||
<div class="about">
|
||||
<h1>This is an about page</h1>
|
||||
<div class="view-header">
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1>This is an about page</h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
<script setup lang="ts">
|
||||
import { useRouter } from 'vue-router'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
function goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.view-header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.about {
|
||||
min-height: 100vh;
|
||||
@@ -12,4 +63,17 @@
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="history-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">📋 History</h1>
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">📋 History</h1>
|
||||
</div>
|
||||
<p class="page-subtitle">Notification history and activity</p>
|
||||
</div>
|
||||
<div class="placeholder-content">
|
||||
@@ -12,9 +17,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
||||
import router from '../router'
|
||||
|
||||
@Component
|
||||
class HistoryView extends Vue {}
|
||||
class HistoryView extends Vue {
|
||||
goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
export default toNative(HistoryView)
|
||||
</script>
|
||||
|
||||
@@ -29,6 +39,36 @@ export default toNative(HistoryView)
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
@@ -51,4 +91,17 @@ export default toNative(HistoryView)
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -44,8 +44,7 @@
|
||||
icon="📊"
|
||||
title="Check Status"
|
||||
description="View notification system status"
|
||||
@click="checkSystemStatus"
|
||||
:loading="isCheckingStatus"
|
||||
@click="navigateToStatus"
|
||||
/>
|
||||
<ActionCard
|
||||
icon="🔐"
|
||||
@@ -199,6 +198,11 @@ const navigateToSettings = (): void => {
|
||||
router.push('/settings')
|
||||
}
|
||||
|
||||
const navigateToStatus = (): void => {
|
||||
console.log('🔄 CLICK: Navigate to Status')
|
||||
router.push('/status')
|
||||
}
|
||||
|
||||
const checkSystemStatus = async (): Promise<void> => {
|
||||
console.log('🔄 CLICK: Check System Status')
|
||||
isCheckingStatus.value = true
|
||||
@@ -653,8 +657,6 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.platform-badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
@@ -662,8 +664,6 @@ onMounted(async () => {
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
padding: 6px 12px;
|
||||
border-radius: 16px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
@@ -697,7 +697,7 @@ onMounted(async () => {
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.home-view {
|
||||
padding: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.welcome-title {
|
||||
@@ -707,10 +707,5 @@ onMounted(async () => {
|
||||
.action-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.platform-info {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -12,7 +12,12 @@
|
||||
<template>
|
||||
<div class="logs-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">📋 System Logs</h1>
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">📋 System Logs</h1>
|
||||
</div>
|
||||
<p class="page-subtitle">View and copy DailyNotification plugin logs</p>
|
||||
</div>
|
||||
|
||||
@@ -73,6 +78,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
||||
import router from '../router'
|
||||
type LogLine = { ts: number; msg: string; level: string }
|
||||
|
||||
@Component
|
||||
@@ -82,6 +88,10 @@ class LogsView extends Vue {
|
||||
logs: LogLine[] = []
|
||||
lastUpdated: number | null = null
|
||||
|
||||
goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
get hasLogs() { return this.logs.length > 0 }
|
||||
|
||||
formatTimestamp(ts: number) { return new Date(ts).toLocaleString() }
|
||||
@@ -130,6 +140,36 @@ export default toNative(LogsView)
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
@@ -278,7 +318,7 @@ export default toNative(LogsView)
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.logs-view {
|
||||
padding: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.logs-controls {
|
||||
@@ -301,5 +341,15 @@ export default toNative(LogsView)
|
||||
.log-timestamp {
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="notifications-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">🔔 Notifications</h1>
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">🔔 Notifications</h1>
|
||||
</div>
|
||||
<p class="page-subtitle">Manage scheduled notifications</p>
|
||||
</div>
|
||||
<div class="placeholder-content">
|
||||
@@ -12,9 +17,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
||||
import router from '../router'
|
||||
|
||||
@Component
|
||||
class NotificationsView extends Vue {}
|
||||
class NotificationsView extends Vue {
|
||||
goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
export default toNative(NotificationsView)
|
||||
</script>
|
||||
|
||||
@@ -29,6 +39,36 @@ export default toNative(NotificationsView)
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
@@ -51,4 +91,17 @@ export default toNative(NotificationsView)
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -10,7 +10,12 @@
|
||||
<template>
|
||||
<div class="schedule-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">📅 Schedule Notification</h1>
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">📅 Schedule Notification</h1>
|
||||
</div>
|
||||
<p class="page-subtitle">Schedule a new daily notification</p>
|
||||
</div>
|
||||
|
||||
@@ -41,6 +46,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
||||
import router from '../router'
|
||||
|
||||
@Component
|
||||
class ScheduleView extends Vue {
|
||||
@@ -49,6 +55,10 @@ class ScheduleView extends Vue {
|
||||
notificationMessage = 'Your daily notification is ready!'
|
||||
isScheduling = false
|
||||
|
||||
goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
|
||||
async scheduleNotification() {
|
||||
this.isScheduling = true
|
||||
try {
|
||||
@@ -106,6 +116,36 @@ export default toNative(ScheduleView)
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
@@ -192,11 +232,21 @@ export default toNative(ScheduleView)
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.schedule-view {
|
||||
padding: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.schedule-form {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="settings-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">⚙️ Settings</h1>
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">⚙️ Settings</h1>
|
||||
</div>
|
||||
<p class="page-subtitle">Configure app preferences</p>
|
||||
</div>
|
||||
<div class="placeholder-content">
|
||||
@@ -12,9 +17,14 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
||||
import router from '../router'
|
||||
|
||||
@Component
|
||||
class SettingsView extends Vue {}
|
||||
class SettingsView extends Vue {
|
||||
goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
}
|
||||
export default toNative(SettingsView)
|
||||
</script>
|
||||
|
||||
@@ -29,6 +39,36 @@ export default toNative(SettingsView)
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
@@ -51,4 +91,17 @@ export default toNative(SettingsView)
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
/* Mobile responsiveness */
|
||||
@media (max-width: 768px) {
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="status-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">📊 Status Matrix</h1>
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">📊 Status Matrix</h1>
|
||||
</div>
|
||||
<p class="page-subtitle">Comprehensive system status and diagnostics</p>
|
||||
</div>
|
||||
|
||||
@@ -87,6 +92,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
||||
import router from '../router'
|
||||
import StatusCard from '../components/cards/StatusCard.vue'
|
||||
import { createTypedPlugin } from '../lib/typed-plugin'
|
||||
import { collectDiagnostics, copyDiagnosticsToClipboard, type ComprehensiveDiagnostics } from '../lib/diagnostics-export'
|
||||
@@ -114,6 +120,10 @@ type Diagnostics = ComprehensiveDiagnostics
|
||||
class StatusView extends Vue {
|
||||
isRefreshing = false
|
||||
errorMessage = ''
|
||||
|
||||
goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
diagnostics: Diagnostics = {
|
||||
appVersion: '1.0.0',
|
||||
platform: 'Android',
|
||||
@@ -345,6 +355,36 @@ export default toNative(StatusView)
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
@@ -533,7 +573,7 @@ export default toNative(StatusView)
|
||||
/* Responsive Design */
|
||||
@media (max-width: 768px) {
|
||||
.status-view {
|
||||
padding: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.matrix-header {
|
||||
@@ -573,5 +613,15 @@ export default toNative(StatusView)
|
||||
.action-button {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,7 +1,12 @@
|
||||
<template>
|
||||
<div class="user-zero-view">
|
||||
<div class="view-header">
|
||||
<h1 class="page-title">User Zero Stars Testing</h1>
|
||||
<div class="header-title-row">
|
||||
<button class="back-button" @click="goBack" aria-label="Go back to home">
|
||||
←
|
||||
</button>
|
||||
<h1 class="page-title">User Zero Stars Testing</h1>
|
||||
</div>
|
||||
<p class="page-subtitle">Test starred projects querying with TimeSafari User Zero</p>
|
||||
</div>
|
||||
|
||||
@@ -103,8 +108,11 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { TEST_USER_ZERO_CONFIG, TestUserZeroAPI } from '../config/test-user-zero'
|
||||
|
||||
const router = useRouter()
|
||||
|
||||
// Reactive state
|
||||
const config = reactive(TEST_USER_ZERO_CONFIG)
|
||||
const isTesting = ref(false)
|
||||
@@ -272,6 +280,13 @@ function toggleMockMode() {
|
||||
function clearError() {
|
||||
errorMessage.value = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* Navigate back to home
|
||||
*/
|
||||
function goBack() {
|
||||
router.push('/')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -288,6 +303,36 @@ function clearError() {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: white;
|
||||
padding: 8px 12px;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s ease;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.back-button:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translateX(-2px);
|
||||
}
|
||||
|
||||
.page-title {
|
||||
margin: 0 0 8px 0;
|
||||
font-size: 28px;
|
||||
@@ -461,7 +506,7 @@ function clearError() {
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-zero-view {
|
||||
padding: 16px;
|
||||
padding: 16px 0;
|
||||
}
|
||||
|
||||
.config-grid {
|
||||
@@ -475,5 +520,15 @@ function clearError() {
|
||||
.test-button {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.header-title-row {
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.back-button {
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user