mirror of
https://github.com/Memo-2023/mana-monorepo.git
synced 2026-05-14 19:41:09 +02:00
feat(calendar): convert toolbar to collapsed FAB next to InputBar
- CalendarToolbar is now collapsed by default as a FAB button - FAB positioned right next to the QuickInputBar - Toolbar panel opens above on click with smooth slide animation - Reduced bottom padding since toolbar no longer takes full width - DateStrip position adjusted to be closer to InputBar - Updated localStorage logic (default is now collapsed) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
parent
502ba0c6b9
commit
4d1db202c0
6 changed files with 16 additions and 30 deletions
|
|
@ -287,7 +287,7 @@
|
|||
<style>
|
||||
.date-strip-wrapper {
|
||||
position: fixed;
|
||||
bottom: calc(200px + env(safe-area-inset-bottom, 0px)); /* Above InputBar */
|
||||
bottom: calc(140px + env(safe-area-inset-bottom, 0px)); /* Above InputBar + PillNav */
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 48;
|
||||
|
|
@ -298,7 +298,7 @@
|
|||
transition: bottom 0.3s ease;
|
||||
}
|
||||
|
||||
/* When PillNav is in sidebar mode, no PillNav/Toolbar at bottom - just InputBar */
|
||||
/* When PillNav is in sidebar mode, no PillNav at bottom - just InputBar */
|
||||
.date-strip-wrapper.sidebar-mode {
|
||||
bottom: calc(70px + env(safe-area-inset-bottom, 0px));
|
||||
}
|
||||
|
|
|
|||
|
|
@ -915,8 +915,6 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.all-day-section {
|
||||
|
|
@ -1010,7 +1008,6 @@
|
|||
display: flex;
|
||||
width: 100%;
|
||||
max-width: 800px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.time-column {
|
||||
|
|
|
|||
|
|
@ -338,8 +338,6 @@
|
|||
.month-view {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.weekday-headers {
|
||||
|
|
@ -347,6 +345,9 @@
|
|||
grid-template-columns: repeat(var(--column-count, 7), 1fr);
|
||||
border-bottom: 1px solid hsl(var(--color-border));
|
||||
background: hsl(var(--color-background));
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.weekday-header {
|
||||
|
|
@ -362,7 +363,6 @@
|
|||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.week-row {
|
||||
|
|
|
|||
|
|
@ -313,11 +313,11 @@
|
|||
collapsedStore.set(true);
|
||||
}
|
||||
|
||||
// Initialize toolbar collapsed state from localStorage
|
||||
// Initialize toolbar collapsed state from localStorage (default is now collapsed)
|
||||
const savedToolbarCollapsed = localStorage.getItem('calendar-toolbar-collapsed');
|
||||
if (savedToolbarCollapsed === 'true') {
|
||||
isToolbarCollapsed = true;
|
||||
toolbarCollapsedStore.set(true);
|
||||
if (savedToolbarCollapsed === 'false') {
|
||||
isToolbarCollapsed = false;
|
||||
toolbarCollapsedStore.set(false);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
|
@ -423,10 +423,6 @@
|
|||
}
|
||||
|
||||
.main-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-height: 0;
|
||||
transition: all 300ms ease;
|
||||
position: relative;
|
||||
/* Space for QuickInputBar at bottom */
|
||||
|
|
@ -437,12 +433,12 @@
|
|||
padding-top: 70px;
|
||||
}
|
||||
|
||||
/* Extra padding when DateStrip + Toolbar are at bottom */
|
||||
/* Extra padding when DateStrip is at bottom (toolbar is now a FAB) */
|
||||
.main-content.floating-mode.has-toolbar {
|
||||
padding-top: 0;
|
||||
padding-bottom: calc(
|
||||
280px + env(safe-area-inset-bottom)
|
||||
); /* DateStrip + Toolbar + PillNav + QuickInputBar */
|
||||
220px + env(safe-area-inset-bottom)
|
||||
); /* DateStrip + PillNav + QuickInputBar */
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
|
|
@ -452,8 +448,8 @@
|
|||
}
|
||||
.main-content.has-toolbar {
|
||||
padding-bottom: calc(
|
||||
250px + env(safe-area-inset-bottom)
|
||||
); /* DateStrip + Toolbar + BottomNav + QuickInputBar */
|
||||
200px + env(safe-area-inset-bottom)
|
||||
); /* DateStrip + BottomNav + QuickInputBar */
|
||||
}
|
||||
.main-content.floating-mode.has-toolbar {
|
||||
padding-top: 70px;
|
||||
|
|
@ -465,8 +461,6 @@
|
|||
}
|
||||
|
||||
.content-wrapper {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
max-width: 100%;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
|
|
|||
|
|
@ -204,7 +204,6 @@
|
|||
display: flex;
|
||||
gap: 1.5rem;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -309,12 +308,10 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
background: hsl(var(--color-surface));
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid hsl(var(--color-border));
|
||||
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.calendar-main.expanded {
|
||||
|
|
@ -324,8 +321,6 @@
|
|||
|
||||
.calendar-content {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@media (max-width: 1024px) {
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
|
@ -99,7 +99,7 @@
|
|||
height: 100%;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
overflow: clip;
|
||||
}
|
||||
|
||||
.side-panel {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue