gkucmierz/tools-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: centralize UI config and inject CSS variables dynamically

Browse Source
This commit is contained in:
Grzegorz Kucmierz
2026-02-28 04:18:53 +00:00
parent d5d3d37804
commit 70d7c8873e
8 changed files with 29 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/App.vue
View File

@@ -6,6 +6,7 @@ import Footer from './components/Footer.vue'
import Sidebar from './components/Sidebar.vue'
import InstallPrompt from './components/InstallPrompt.vue'
import ReloadPrompt from './components/ReloadPrompt.vue'
import { UI_CONFIG } from './config/ui'
const isSidebarOpen = ref(window.innerWidth >= 768)
const router = useRouter()
@@ -31,6 +32,11 @@ const handleResize = () => {
}
onMounted(() => {
// Set global CSS variables from config
document.documentElement.style.setProperty('--header-height', `${UI_CONFIG.headerHeight}px`)
document.documentElement.style.setProperty('--footer-height', `${UI_CONFIG.footerHeight}px`)
document.documentElement.style.setProperty('--page-padding', `${UI_CONFIG.pagePadding}px`)
window.addEventListener('resize', handleResize)
})
@@ -70,14 +76,14 @@ onUnmounted(() => {
padding: 1rem;
width: 100%;
max-width: 100%;
/* Space for fixed footer on mobile + extra margin (match top padding 2rem + footer height ~40px) */
padding-bottom: calc(1rem + 40px + env(safe-area-inset-bottom));
/* Space for fixed footer on mobile + extra margin */
padding-bottom: calc(1rem + var(--footer-height) + env(safe-area-inset-bottom));
}
@media (max-width: 640px) {
.main-content {
padding: 0.5rem;
padding-bottom: calc(0.5rem + 40px + env(safe-area-inset-bottom));
padding-bottom: calc(0.5rem + var(--footer-height) + env(safe-area-inset-bottom));
}
}