You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.3 KiB
72 lines
1.3 KiB
<!--
|
|
/**
|
|
* Main App Component - Platform Neutral Vue 3 + vue-facing-decorator
|
|
*
|
|
* Cross-platform DailyNotification test app for Android/iOS/Electron
|
|
*
|
|
* @author Matthew Raymer
|
|
* @version 1.0.0
|
|
*/
|
|
-->
|
|
|
|
<template>
|
|
<div id="app" class="app-container">
|
|
<!-- Header Navigation -->
|
|
<AppHeader />
|
|
|
|
<!-- Main Content -->
|
|
<main class="main-content">
|
|
<router-view />
|
|
</main>
|
|
|
|
<!-- Footer -->
|
|
<AppFooter />
|
|
|
|
<!-- Global Loading Overlay -->
|
|
<LoadingOverlay v-if="isLoading" />
|
|
|
|
<!-- Global Error Dialog -->
|
|
<ErrorDialog
|
|
v-if="errorMessage"
|
|
:message="errorMessage"
|
|
@close="clearError"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Vue, Component, toNative } from 'vue-facing-decorator'
|
|
|
|
@Component
|
|
class App extends Vue {
|
|
isLoading = false
|
|
errorMessage = ''
|
|
|
|
clearError() {
|
|
this.errorMessage = ''
|
|
}
|
|
}
|
|
export default toNative(App)
|
|
</script>
|
|
|
|
<style scoped>
|
|
.app-container {
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
}
|
|
|
|
.main-content {
|
|
flex: 1;
|
|
padding: 0;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Platform-specific adjustments */
|
|
@media (max-width: 768px) {
|
|
.main-content {
|
|
padding: 0;
|
|
}
|
|
}
|
|
</style>
|