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

15
src/composables/useFillHeight.js
View File

@@ -1,6 +1,7 @@
import { onMounted, onUnmounted, ref, nextTick } from 'vue'
import { UI_CONFIG } from '../config/ui'
export function useFillHeight(elementRef, marginBottom = 20) {
export function useFillHeight(elementRef, extraMargin = 0) {
const height = ref('auto')
const updateHeight = () => {
@@ -8,16 +9,10 @@ export function useFillHeight(elementRef, marginBottom = 20) {
const rect = elementRef.value.getBoundingClientRect()
const windowHeight = window.innerHeight
// Calculate available space: window height - element top position - margin bottom
// We also need to account for the footer height if it's fixed or layout related
// The user mentioned "margin bottom from footer".
// If footer is in the flow, we might just want to fill the parent container?
// But user asked for JS resizing.
// Let's assume we want to fill down to (windowHeight - marginBottom).
// This assumes the element should stretch to the bottom of the viewport.
const availableHeight = windowHeight - rect.top - marginBottom
// Calculate available space: window height - element top position - footer height - padding - extra margin
const bottomOffset = UI_CONFIG.footerHeight + UI_CONFIG.pagePadding + extraMargin
const availableHeight = windowHeight - rect.top - bottomOffset
// Ensure minimum height
if (availableHeight > 100) {