Update footer to display app version and adjust styling

Refactor the footer in App.vue to include the application version and improve layout with flexbox. Remove the version display from StatusBox.vue and update the app version in version.js from 3.0.0 to 3.1.0.
This commit is contained in:
Torsten Schulz (local)
2026-05-15 11:52:34 +02:00
parent f50ea76c89
commit 62fcdb821e
3 changed files with 22 additions and 18 deletions

View File

@@ -37,8 +37,9 @@
</main>
<footer class="app-footer" v-if="authStore.isAuthenticated">
<div class="container">
<p>&copy; 2025 TimeClock v3 - Zeiterfassungssystem</p>
<div class="container app-footer-inner">
<p class="app-footer-copy">&copy; 2025 TimeClock v3 Zeiterfassungssystem</p>
<p class="app-footer-version">Version {{ appVersion }}</p>
</div>
</footer>
</div>
@@ -52,8 +53,10 @@ import { computed } from 'vue'
import StatusBox from './components/StatusBox.vue'
import SideMenu from './components/SideMenu.vue'
import AppBrand from './components/AppBrand.vue'
import { APP_VERSION } from '@/config/version'
const authStore = useAuthStore()
const appVersion = APP_VERSION
const router = useRouter()
const route = useRoute()
@@ -270,15 +273,28 @@ const pageTitle = computed(() => {
left: 0;
right: 0;
background-color: #f9f9f9;
padding: 1.5rem 0;
text-align: center;
padding: 1rem 0;
color: #666;
border-top: 1px solid #ddd;
z-index: 1000;
}
.app-footer p {
.app-footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.app-footer-copy,
.app-footer-version {
margin: 0;
font-size: 0.9rem;
}
.app-footer-version {
color: #888;
font-size: 0.85rem;
white-space: nowrap;
}
</style>

View File

@@ -29,7 +29,6 @@
<span class="value" v-if="value !== null">{{ value || '' }}</span>
</div>
</div>
<div class="status-version">TimeClock v{{ appVersion }}</div>
</div>
<div class="status-box loading" v-else>
Lädt
@@ -41,10 +40,7 @@ import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
import { useTimeStore } from '../stores/timeStore'
import { useAuthStore } from '../stores/authStore'
import { API_BASE_URL } from '@/config/api'
import { APP_VERSION } from '@/config/version'
const API_URL = API_BASE_URL
const appVersion = APP_VERSION
const timeStore = useTimeStore()
const authStore = useAuthStore()
const stats = ref({})
@@ -588,12 +584,4 @@ const displayRows = computed(() => {
font-weight: 500;
}
.status-version {
margin-top: 8px;
padding-top: 6px;
border-top: 1px solid #e8e8e8;
text-align: center;
font-size: 11px;
color: #888;
}
</style>

View File

@@ -1,2 +1,2 @@
/** Sichtbare Web-App-Version (synchron mit package.json). */
export const APP_VERSION = '3.0.0'
export const APP_VERSION = '3.1.0'