Adds dynamic CSS grid column management

Updates ConfigManager to dynamically set CSS grid columns based on work week settings

Ensures the grid layout accurately reflects the number of visible days in the calendar view
Automatically updates grid columns when work week configuration changes

Improves responsive design and layout flexibility
This commit is contained in:
Janus C. H. Knudsen 2025-11-03 22:52:48 +01:00
parent 989c9bd69d
commit d3f4667b61
3 changed files with 18 additions and 3 deletions

View file

@ -5,8 +5,17 @@ import { TimeFormatter } from '../utils/TimeFormatter';
/**
* ConfigManager - Static configuration loader
* Loads JSON and creates Configuration instance
* Also manages CSS custom properties for dynamic styling
*/
export class ConfigManager {
/**
* Update CSS custom property for grid columns
* This ensures the CSS grid matches the number of visible columns
*/
static updateGridColumns(weekDays: number): void {
document.documentElement.style.setProperty('--grid-columns', weekDays.toString());
}
/**
* Load configuration from JSON and create Configuration instance
*/
@ -50,6 +59,10 @@ export class ConfigManager {
// Configure TimeFormatter
TimeFormatter.configure(config.timeFormatConfig);
// Set initial CSS grid columns based on the current work week preset
const workWeekSettings = config.getWorkWeekSettings();
ConfigManager.updateGridColumns(workWeekSettings.totalDays);
return config;
}
}