till/managarten
1
0
Fork 0
mirror of https://github.com/Memo-2023/mana-monorepo.git synced 2026-05-22 18:06:42 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 5

fix(manacore/web): float DateStrip at bottom, remove sidebar

Browse source 
Position DateStrip fixed above PillNav with glass blur effect.
Remove MiniCalendar sidebar to give calendar view full width.
Restore @clock/shared package from archive (needed by clock module).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Till JS 2026-04-02 13:06:55 +02:00
parent e870270734
commit 99d0dc6fb0
11 changed files with 380 additions and 122 deletions
Download patch file Download diff file Expand all files Collapse all files

15
apps/manacore/apps/web/src/lib/modules/calendar/components/DateStrip.svelte
View file

@ -268,18 +268,25 @@
<style>
.date-strip-wrapper {
width: 100%;
flex-shrink: 0;
position: fixed;
bottom: calc(68px + env(safe-area-inset-bottom, 0px));
left: 0;
right: 0;
z-index: 48;
pointer-events: none;
}
.date-strip-container {
display: flex;
flex-direction: column;
background: hsl(var(--color-card));
border-bottom: 1px solid hsl(var(--color-border));
background: hsl(var(--color-card) / 0.92);
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
border-top: 1px solid hsl(var(--color-border));
padding: 0.375rem 0;
width: 100%;
overflow: hidden;
pointer-events: auto;
}
.month-header {

133
apps/manacore/apps/web/src/routes/(app)/calendar/+page.svelte
View file

@ -17,7 +17,6 @@
import WeekView from '$lib/modules/calendar/components/WeekView.svelte';
import MonthView from '$lib/modules/calendar/components/MonthView.svelte';
import AgendaView from '$lib/modules/calendar/components/AgendaView.svelte';
import MiniCalendar from '$lib/modules/calendar/components/MiniCalendar.svelte';
import EventDetailModal from '$lib/modules/calendar/components/EventDetailModal.svelte';
import EventForm from '$lib/modules/calendar/components/EventForm.svelte';
@ -119,53 +118,25 @@
<!-- Header -->
<CalendarHeader onNewEvent={handleNewEvent} />
<!-- Date Strip -->
<DateStrip />
<!-- Main content area -->
<!-- Calendar view (full width) -->
<div class="calendar-content">
<!-- Sidebar (desktop only) -->
<aside class="calendar-sidebar">
<MiniCalendar
selectedDate={calendarViewStore.currentDate}
onDateSelect={(date) => {
calendarViewStore.setDate(date);
if (calendarViewStore.viewType === 'month') {
calendarViewStore.setViewType('week');
}
{#if calendarViewStore.viewType === 'week'}
<WeekView onEventClick={handleEventClick} onQuickCreate={handleQuickCreate} />
{:else if calendarViewStore.viewType === 'month'}
<MonthView
onEventClick={handleEventClick}
onDayClick={(day) => {
calendarViewStore.setDate(day);
calendarViewStore.setViewType('week');
}}
/>
<!-- Calendar list -->
<div class="sidebar-section">
<h3 class="sidebar-title">Kalender</h3>
{#each calendarsCtx.value as cal (cal.id)}
<div class="calendar-item">
<div class="calendar-dot" style="background-color: {cal.color}"></div>
<span class="calendar-name" class:muted={!cal.isVisible}>{cal.name}</span>
</div>
{/each}
<a href="/calendar/calendars" class="sidebar-link">Verwalten</a>
</div>
</aside>
<!-- Calendar view -->
<main class="calendar-main">
{#if calendarViewStore.viewType === 'week'}
<WeekView onEventClick={handleEventClick} onQuickCreate={handleQuickCreate} />
{:else if calendarViewStore.viewType === 'month'}
<MonthView
onEventClick={handleEventClick}
onDayClick={(day) => {
calendarViewStore.setDate(day);
calendarViewStore.setViewType('week');
}}
/>
{:else}
<AgendaView onEventClick={handleEventClick} />
{/if}
</main>
{:else}
<AgendaView onEventClick={handleEventClick} />
{/if}
</div>
<!-- Floating Date Strip (above PillNav/InputBar) -->
<DateStrip />
</div>
<!-- Event Detail Modal -->
@ -214,81 +185,7 @@
.calendar-content {
flex: 1;
display: flex;
min-height: 0;
}
.calendar-sidebar {
width: 240px;
flex-shrink: 0;
border-right: 1px solid hsl(var(--color-border));
padding: 0.75rem;
display: flex;
flex-direction: column;
gap: 1rem;
overflow-y: auto;
}
/* Hide sidebar on small screens */
@media (max-width: 768px) {
.calendar-sidebar {
display: none;
}
}
.sidebar-section {
display: flex;
flex-direction: column;
gap: 0.375rem;
}
.sidebar-title {
font-size: 0.75rem;
font-weight: 600;
color: hsl(var(--color-muted-foreground));
text-transform: uppercase;
letter-spacing: 0.05em;
margin: 0;
}
.calendar-item {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.25rem 0;
}
.calendar-dot {
width: 10px;
height: 10px;
border-radius: 50%;
flex-shrink: 0;
}
.calendar-name {
font-size: 0.8125rem;
color: hsl(var(--color-foreground));
}
.calendar-name.muted {
opacity: 0.5;
text-decoration: line-through;
}
.sidebar-link {
font-size: 0.75rem;
color: hsl(var(--color-primary));
text-decoration: none;
margin-top: 0.25rem;
}
.sidebar-link:hover {
text-decoration: underline;
}
.calendar-main {
flex: 1;
min-width: 0;
overflow: hidden;
}