@axium/calendar 0.3.0 → 0.3.2

package/lib/Select.svelte

@@ -19,7 +19,7 @@
 	const sameMonth = (d: Date) => view.getFullYear() == d.getFullYear() && view.getMonth() == d.getMonth();
 </script>
 
-<div class="CaldendarSelect">
+<div class="CalendarSelect">
 	<div class="bar">
 		<span class="label">{view.toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
 		<button style:display="contents" onclick={() => view.setMonth(view.getMonth() - 1)}><Icon i="chevron-left" /></button>
@@ -70,8 +70,7 @@
 <style>
 	.CalendarSelect {
 		display: flex;
-		align-items: center;
-		justify-content: space-between;
+		flex-direction: column;
 	}
 
 	.bar {
@@ -108,7 +107,7 @@
 			}
 
 			&.today {
-				border: 1px solid var(--border-accent);
+				border: var(--border-accent);
 			}
 
 			&.selected {
@@ -124,4 +123,23 @@
 			}
 		}
 	}
+
+	@media (width < 700px) {
+		.CalendarSelect {
+			width: 100%;
+		}
+
+		.month-grid {
+			width: 100%;
+			grid-template-columns: repeat(8, minmax(0, 1fr));
+			grid-template-rows: repeat(7, minmax(0, 1fr));
+		}
+
+		.month-grid > div {
+			width: 100%;
+			aspect-ratio: 1;
+			height: auto;
+			min-width: 0;
+		}
+	}
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@axium/calendar",
-	"version": "0.3.0",
+	"version": "0.3.2",
 	"author": "James Prevett <axium@jamespre.dev>",
 	"description": "Calendar for Axium",
 	"funding": {
@@ -35,7 +35,7 @@
 		"build": "tsc"
 	},
 	"peerDependencies": {
-		"@axium/client": ">=0.14.3",
+		"@axium/client": ">=0.17.0",
 		"@axium/core": ">=0.20.0",
 		"@axium/server": ">=0.36.0",
 		"@sveltejs/kit": "^2.27.3",

package/routes/calendar/+page.svelte

@@ -21,6 +21,7 @@
 	import { SvelteDate } from 'svelte/reactivity';
 	import { _throw } from 'utilium';
 	import * as z from 'zod';
+	import './cal.css';
 
 	const { data } = $props();
 
@@ -42,6 +43,7 @@
 	$effect(() => {
 		for (const cal of calendars) cal.color ||= encodeColor(colorHashHex(cal.name));
 		getEvents(calendars, { start: new Date(start.getTime()), end: new Date(end.getTime()) }).then(e => (events = e));
+		calSidebar?.classList.remove('active');
 	});
 
 	const tz = new Date().toLocaleString('en', { timeStyle: 'long' }).split(' ').slice(-1)[0];
@@ -80,6 +82,8 @@
 	);
 
 	const defaultEventColor = $derived((eventInit.calendar || calendars[0])?.color || encodeColor(colorHashHex(user.name)));
+
+	let calSidebar = $state<HTMLDivElement>();
 </script>
 
 <svelte:head>
@@ -87,28 +91,38 @@
 </svelte:head>
 
 <div id="cal-app">
-	<button class="event-init icon-text" command="show-modal" commandfor="event-init"><Icon i="plus" /> New Event</button>
+	<button class="event-init icon-text mobile-hide" command="show-modal" commandfor="event-init"><Icon i="plus" /> New Event</button>
 	<div class="bar">
-		<button onclick={() => start.setTime(today.getTime())}>Today</button>
+		<!-- desktop -->
+		<button class="mobile-hide" onclick={() => start.setTime(today.getTime())}>Today</button>
 		<button
-			style:display="contents"
+			class="reset mobile-hide"
 			onclick={() => {
 				start.setDate(start.getDate() - spanDays);
 				end.setDate(end.getDate() - spanDays);
 			}}><Icon i="chevron-left" /></button
 		>
 		<button
-			style:display="contents"
+			class="reset mobile-hide"
 			onclick={() => {
 				start.setDate(start.getDate() + spanDays);
 				end.setDate(end.getDate() + spanDays);
 			}}><Icon i="chevron-right" /></button
 		>
+
+		<!-- mobile -->
+		<button class="reset mobile-only icon-text" onclick={() => calSidebar?.classList.toggle('active')}><Icon i="bars" /></button>
+
+		<!-- shared -->
 		<span class="label">{weekDays[0].toLocaleString('default', { month: 'long', year: 'numeric' })}</span>
+
+		<!-- mobile -->
+		<button class="reset mobile-only day-number today" onclick={() => start.setTime(today.getTime())}>{today.getDate()}</button>
+		<button class="reset mobile-only icon-text" command="show-modal" commandfor="event-init"><Icon i="plus" /></button>
 	</div>
-	<div id="cal-list">
+	<div id="cal-sidebar" bind:this={calSidebar}>
 		<Cal.Select bind:start bind:end />
-		<div class="cal-list-header">
+		<div class="cal-sidebar-header">
 			<h4>My Calendars</h4>
 			<button style:display="contents" command="show-modal" commandfor="add-calendar">
 				<Icon i="plus" />
@@ -116,7 +130,7 @@
 		</div>
 		{#each calendars.filter(cal => cal.userId == user.id) as cal (cal.id)}
 			<div
-				class="cal-list-item"
+				class="cal-sidebar-item"
 				{@attach contextMenu(
 					{ i: 'pencil', text: 'Rename', action: () => dialogs['rename:' + cal.id].showModal() },
 					{ i: 'user-group', text: 'Share', action: () => dialogs['share:' + cal.id].showModal() },
@@ -161,7 +175,7 @@
 			</div>
 		{/each}
 		{#if calendars.some(cal => cal.userId != user.id)}
-			<div class="cal-list-header">
+			<div class="cal-sidebar-header">
 				<h4>Shared Calendars</h4>
 			</div>
 			{#each calendars.filter(cal => cal.userId != user.id) as cal (cal.id)}
@@ -173,7 +187,7 @@
 		{/if}
 	</div>
 	<div id="cal">
-		<div class="hours subtle">
+		<div id="hours" class="subtle">
 			{#each { length: 24 }, i}
 				{#if !i}
 					<span class="hour">{tz}</span>
@@ -369,207 +383,3 @@
 		<input name="name" type="text" required />
 	</div>
 </FormDialog>
-
-<style>
-	:global(body) {
-		top: 5em;
-	}
-
-	#cal-app {
-		display: grid;
-		grid-template-rows: 3em 1fr;
-		grid-template-columns: 15em 1fr;
-		inset: 0;
-		position: absolute;
-	}
-
-	button.event-init {
-		margin: 0.5em;
-		background-color: var(--bg-alt);
-		text-align: center;
-		justify-content: center;
-	}
-
-	:global {
-		form {
-			div:has(label ~ input),
-			div:has(label ~ textarea),
-			div:has(label ~ select) {
-				display: flex;
-				flex-direction: row;
-				gap: 0.5em;
-			}
-		}
-	}
-
-	div.event-times-container,
-	div.attendees-container {
-		display: flex;
-		flex-direction: row;
-		gap: 0.5em;
-	}
-
-	div.event-times,
-	div.attendees {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5em;
-		flex-grow: 1;
-	}
-
-	h3,
-	h4 {
-		margin: 0;
-	}
-
-	:global {
-		#event-init form {
-			.event-time-options {
-				display: flex;
-				align-items: center;
-				gap: 0.5em;
-
-				.spacing,
-				select {
-					flex: auto;
-				}
-
-				label {
-					flex: none;
-				}
-			}
-
-			input,
-			select,
-			textarea {
-				flex-grow: 1;
-			}
-
-			textarea {
-				padding: 0.5em;
-				font-size: 16px;
-			}
-		}
-	}
-
-	.bar {
-		display: flex;
-		gap: 1em;
-		align-items: center;
-		font-weight: bold;
-	}
-
-	#cal-list {
-		display: flex;
-		flex-direction: column;
-		gap: 1em;
-		grid-column: 1;
-		padding: 1em;
-
-		.cal-list-header,
-		.cal-list-item {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-		}
-	}
-
-	#cal {
-		display: flex;
-		width: 100%;
-		height: 100%;
-		padding: 1em;
-		border-radius: 1em;
-		background-color: var(--bg-menu);
-
-		.hours {
-			display: flex;
-			flex-direction: column;
-			align-items: stretch;
-			text-align: right;
-			justify-content: space-around;
-			overflow-x: visible;
-			margin-top: 5em;
-		}
-
-		.hour {
-			position: relative;
-			padding-right: 1em;
-		}
-
-		.hour:not(.empty)::after {
-			content: '';
-			position: absolute;
-			left: calc(100% - 0.5em);
-			width: calc(100vw - 22em);
-			border-bottom: 1px solid var(--border-accent);
-			top: 50%;
-			z-index: 0;
-			pointer-events: none;
-		}
-
-		.cal-content {
-			display: flex;
-			width: 100%;
-			height: 100%;
-			justify-content: space-around;
-		}
-
-		.day {
-			width: 100%;
-			height: 100%;
-			border-left: 1px solid var(--border-accent);
-			display: flex;
-			flex-direction: column;
-
-			.day-header {
-				display: flex;
-				text-align: center;
-				align-items: center;
-				justify-content: center;
-				gap: 0.5em;
-				user-select: none;
-				height: 5.9em;
-				flex-shrink: 0;
-
-				.day-number {
-					border-radius: 0.3em;
-					width: 2em;
-					height: 2em;
-					display: inline-flex;
-					align-items: center;
-					justify-content: center;
-
-					&.today {
-						border: 1px solid var(--border-accent);
-						color: var(--fg-accent);
-					}
-				}
-			}
-
-			.day-content {
-				flex-grow: 1;
-				position: relative;
-
-				.now {
-					position: absolute;
-					width: 100%;
-					border-bottom: 1px solid hsl(0 33 var(--fg-light));
-					z-index: 9;
-					pointer-events: none;
-
-					&::before {
-						content: '';
-						position: absolute;
-						left: -0.25em;
-						top: -0.25em;
-						width: 0.5em;
-						height: 0.5em;
-						border-radius: 50%;
-						background-color: hsl(0 33 var(--fg-light));
-					}
-				}
-			}
-		}
-	}
-</style>

package/routes/calendar/cal.css

@@ -0,0 +1,255 @@
+body:has(#cal-app) {
+	top: 5em;
+}
+
+#cal-app {
+	display: grid;
+	grid-template-rows: 3em 1fr;
+	grid-template-columns: 15em 1fr;
+	inset: 0;
+	position: absolute;
+
+	h3,
+	h4 {
+		margin: 0;
+	}
+}
+
+button.event-init {
+	margin: 0.5em;
+	background-color: var(--bg-alt);
+	text-align: center;
+	justify-content: center;
+}
+
+form {
+	div:has(label ~ input),
+	div:has(label ~ textarea),
+	div:has(label ~ select) {
+		display: flex;
+		flex-direction: row;
+		gap: 0.5em;
+	}
+}
+
+div.event-times-container,
+div.attendees-container {
+	display: flex;
+	flex-direction: row;
+	gap: 0.5em;
+}
+
+div.event-times,
+div.attendees {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5em;
+	flex-grow: 1;
+}
+
+#event-init form {
+	.event-time-options {
+		display: flex;
+		align-items: center;
+		gap: 0.5em;
+
+		.spacing,
+		select {
+			flex: auto;
+		}
+
+		label {
+			flex: none;
+		}
+	}
+
+	input,
+	select,
+	textarea {
+		flex-grow: 1;
+	}
+
+	textarea {
+		padding: 0.5em;
+		font-size: 16px;
+	}
+}
+
+.bar {
+	display: flex;
+	gap: 1em;
+	align-items: center;
+	font-weight: bold;
+
+	@media (width < 700px) {
+		margin: 0 1em;
+
+		.label {
+			flex-grow: 1;
+		}
+	}
+}
+
+:where(#cal-sidebar) {
+	display: flex;
+	flex-direction: column;
+	gap: 1em;
+	grid-column: 1;
+	padding: 1em;
+	border-radius: 1em;
+
+	.cal-sidebar-header,
+	.cal-sidebar-item {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+}
+
+#cal {
+	display: flex;
+	width: 100%;
+	height: 100%;
+	padding: 1em;
+	border-radius: 1em;
+	background-color: var(--bg-menu);
+
+	.cal-content {
+		display: flex;
+		width: 100%;
+		height: 100%;
+		justify-content: space-around;
+	}
+}
+
+#hours {
+	display: flex;
+	flex-direction: column;
+	align-items: stretch;
+	text-align: right;
+	justify-content: space-around;
+	overflow-x: visible;
+	margin-top: 5em;
+
+	.hour {
+		position: relative;
+		padding-right: 1em;
+	}
+
+	.hour:not(.empty)::after {
+		content: '';
+		position: absolute;
+		left: calc(100% - 0.5em);
+		width: calc(100vw - 22em);
+		border-bottom: var(--border-accent);
+		top: 50%;
+		z-index: 0;
+		pointer-events: none;
+
+		@media (width < 700px) {
+			width: calc(100vw - 5em);
+		}
+	}
+}
+
+.day {
+	width: 100%;
+	height: 100%;
+	border-left: var(--border-accent);
+	display: flex;
+	flex-direction: column;
+}
+
+.day-header {
+	display: flex;
+	text-align: center;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5em;
+	user-select: none;
+	height: 5.9em;
+	flex-shrink: 0;
+
+	@media (width < 700px) {
+		flex-direction: column;
+	}
+}
+
+.day-number {
+	border-radius: 0.3em;
+	width: 2em;
+	height: 2em;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+
+	&.today {
+		border: var(--border-accent);
+		color: var(--fg-accent);
+	}
+}
+
+.day-content {
+	flex-grow: 1;
+	position: relative;
+
+	.now {
+		position: absolute;
+		width: 100%;
+		border-bottom: 1px solid hsl(0 33 var(--fg-light));
+		z-index: 9;
+		pointer-events: none;
+
+		&::before {
+			content: '';
+			position: absolute;
+			left: -0.25em;
+			top: -0.25em;
+			width: 0.5em;
+			height: 0.5em;
+			border-radius: 50%;
+			background-color: hsl(0 33 var(--fg-light));
+		}
+	}
+}
+
+@media (width < 700px) {
+	#cal-app {
+		grid-template-columns: 1fr;
+	}
+
+	#cal-sidebar {
+		container-type: inline-size;
+		position: absolute;
+		inset: 3em 0 0;
+		z-index: 10;
+		background-color: var(--bg-menu);
+		font-size: clamp(0.95rem, 0.5rem + 3cqw, 1.35rem);
+		translate: -100% 0;
+		opacity: 0;
+		visibility: hidden;
+		pointer-events: none;
+
+		.CalendarSelect {
+			width: 100%;
+		}
+
+		&.active {
+			translate: 0 0;
+			opacity: 1;
+			visibility: visible;
+			pointer-events: auto;
+		}
+
+		@media not (prefers-reduced-motion) {
+			transition:
+				translate 0.25s ease,
+				opacity 0.25s ease,
+				visibility 0s linear 0.25s;
+
+			&.active {
+				transition-delay: 0s;
+			}
+		}
+	}
+}