mirror of
https://github.com/callumalpass/tasknotes.git
synced 2026-07-22 12:50:26 +00:00
feat: Hide calendar title in narrow containers for better responsive UI (#285)
Improve calendar header responsiveness by detecting actual container width instead of window width: - Hide title when calendar container width ≤ 600px - Use getBoundingClientRect() to measure actual container dimensions - Update header visibility on resize events for dynamic pane adjustments - Provides better UX in Obsidian's flexible pane system (sidebars, split views)
This commit is contained in:
parent
6b5d8105ae
commit
5972fb9c02
1 changed files with 8 additions and 1 deletions
|
|
@ -413,9 +413,14 @@ export class AdvancedCalendarView extends ItemView {
|
|||
return false; // This hides the entire header toolbar
|
||||
}
|
||||
|
||||
// Check if calendar container is narrow (less than 600px wide) to hide title
|
||||
const calendarContainer = this.contentEl.querySelector('.advanced-calendar-view__calendar-container');
|
||||
const containerWidth = calendarContainer ? calendarContainer.getBoundingClientRect().width : window.innerWidth;
|
||||
const isNarrowView = containerWidth <= 600;
|
||||
|
||||
const toolbarConfig = {
|
||||
left: 'prev,next today',
|
||||
center: 'title',
|
||||
center: isNarrowView ? '' : 'title', // Hide title in narrow views
|
||||
right: 'refreshICS multiMonthYear,dayGridMonth,timeGridWeek,timeGridCustom,timeGridDay'
|
||||
};
|
||||
console.log('Header toolbar config:', toolbarConfig);
|
||||
|
|
@ -656,6 +661,8 @@ export class AdvancedCalendarView extends ItemView {
|
|||
this.resizeTimeout = win.setTimeout(() => {
|
||||
if (this.calendar) {
|
||||
this.calendar.updateSize();
|
||||
// Update header toolbar to handle narrow view title visibility
|
||||
this.updateHeaderVisibility();
|
||||
}
|
||||
}, 150);
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue