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:
@@ -37,8 +37,9 @@
|
|||||||
</main>
|
</main>
|
||||||
|
|
||||||
<footer class="app-footer" v-if="authStore.isAuthenticated">
|
<footer class="app-footer" v-if="authStore.isAuthenticated">
|
||||||
<div class="container">
|
<div class="container app-footer-inner">
|
||||||
<p>© 2025 TimeClock v3 - Zeiterfassungssystem</p>
|
<p class="app-footer-copy">© 2025 TimeClock v3 – Zeiterfassungssystem</p>
|
||||||
|
<p class="app-footer-version">Version {{ appVersion }}</p>
|
||||||
</div>
|
</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
@@ -52,8 +53,10 @@ import { computed } from 'vue'
|
|||||||
import StatusBox from './components/StatusBox.vue'
|
import StatusBox from './components/StatusBox.vue'
|
||||||
import SideMenu from './components/SideMenu.vue'
|
import SideMenu from './components/SideMenu.vue'
|
||||||
import AppBrand from './components/AppBrand.vue'
|
import AppBrand from './components/AppBrand.vue'
|
||||||
|
import { APP_VERSION } from '@/config/version'
|
||||||
|
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
|
const appVersion = APP_VERSION
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
@@ -270,15 +273,28 @@ const pageTitle = computed(() => {
|
|||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
background-color: #f9f9f9;
|
background-color: #f9f9f9;
|
||||||
padding: 1.5rem 0;
|
padding: 1rem 0;
|
||||||
text-align: center;
|
|
||||||
color: #666;
|
color: #666;
|
||||||
border-top: 1px solid #ddd;
|
border-top: 1px solid #ddd;
|
||||||
z-index: 1000;
|
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;
|
margin: 0;
|
||||||
font-size: 0.9rem;
|
font-size: 0.9rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.app-footer-version {
|
||||||
|
color: #888;
|
||||||
|
font-size: 0.85rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@@ -29,7 +29,6 @@
|
|||||||
<span class="value" v-if="value !== null">{{ value || '—' }}</span>
|
<span class="value" v-if="value !== null">{{ value || '—' }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="status-version">TimeClock v{{ appVersion }}</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="status-box loading" v-else>
|
<div class="status-box loading" v-else>
|
||||||
Lädt…
|
Lädt…
|
||||||
@@ -41,10 +40,7 @@ import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
|
|||||||
import { useTimeStore } from '../stores/timeStore'
|
import { useTimeStore } from '../stores/timeStore'
|
||||||
import { useAuthStore } from '../stores/authStore'
|
import { useAuthStore } from '../stores/authStore'
|
||||||
import { API_BASE_URL } from '@/config/api'
|
import { API_BASE_URL } from '@/config/api'
|
||||||
import { APP_VERSION } from '@/config/version'
|
|
||||||
|
|
||||||
const API_URL = API_BASE_URL
|
const API_URL = API_BASE_URL
|
||||||
const appVersion = APP_VERSION
|
|
||||||
const timeStore = useTimeStore()
|
const timeStore = useTimeStore()
|
||||||
const authStore = useAuthStore()
|
const authStore = useAuthStore()
|
||||||
const stats = ref({})
|
const stats = ref({})
|
||||||
@@ -588,12 +584,4 @@ const displayRows = computed(() => {
|
|||||||
font-weight: 500;
|
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>
|
</style>
|
||||||
|
|||||||
@@ -1,2 +1,2 @@
|
|||||||
/** Sichtbare Web-App-Version (synchron mit package.json). */
|
/** Sichtbare Web-App-Version (synchron mit package.json). */
|
||||||
export const APP_VERSION = '3.0.0'
|
export const APP_VERSION = '3.1.0'
|
||||||
|
|||||||
Reference in New Issue
Block a user