From c90eb122cac83b1d9da334dfd5c80f93e16de03f Mon Sep 17 00:00:00 2001 From: Kiril Videlov Date: Sat, 18 Feb 2023 00:29:50 +0100 Subject: [PATCH] Improve project week page and layout styling - Add a WeekBlockEntry component to `src/lib/components/week/index.ts` - Update the body class and remove the `
` tag from `src/app.html` - Add type `Week` with properties `start` and `end` to `src/lib/week.ts` - Add `week` module to `src/lib/index.ts` - Add a new WeekBlockEntry component and functions to [src/lib/components/week/index.ts] - Add `WeekBlockEntry` component to `src/lib/components/week/index.ts` [src/app.html] - Change the body class to `fixed h-full w-full overflow-hidden font-sans antialiased` - Remove the `
` tag around the `%sveltekit.body%` [src/lib/week.ts] - Add type `Week` with properties `start` and `end` - Add methods to `Week` type to get the next, previous and nth day of the week [src/lib/index.ts] - Add `week` module to `src/lib/index.ts` [src/lib/components/week/WeekBlockEntry.svelte] - Add a new WeekBlockEntry component - Add functions to convert time and date to grid row and column - Add a span calculation for the WeekBlockEntry component - Add a link with label and href attributes for the WeekBlockEntry component [src/routes/projects/[projectId]/week/+page.svelte] - Add a week page for projects - Add navigation for the week page - Add a grid for the week page - Show the date of each day in the week - Show the time of each hour in the day - Display a list of sessions for the week - Add a link to each session in the list [src/routes/projects/[projectId]/+layout.svelte] - Change the contextProjectStore setter from `getContext('project')` to `getContext("project")` - Change the nav class from `h-12 p-3 flex justify-between space-x-3 text-zinc-500 text-lg select-none border-b border-zinc-700` to `flex flex-none justify-between h-12 p-3 space-x-3 text-lg border-b select-none [src/routes/+layout.svelte] - Change the styling of the header element - Remove the flex-1 overflow-y-auto div - Update the footer text - Add an element with the id `foo` --- src/app.html | 4 +- src/lib/components/week/WeekBlockEntry.svelte | 46 +++ src/lib/components/week/index.ts | 1 + src/lib/index.ts | 1 + src/lib/week.ts | 33 +++ src/routes/+layout.svelte | 12 +- .../projects/[projectId]/+layout.svelte | 18 +- .../projects/[projectId]/week/+page.svelte | 271 ++++++++++++++++++ 8 files changed, 370 insertions(+), 16 deletions(-) create mode 100644 src/lib/components/week/WeekBlockEntry.svelte create mode 100644 src/lib/components/week/index.ts create mode 100644 src/lib/week.ts create mode 100644 src/routes/projects/[projectId]/week/+page.svelte diff --git a/src/app.html b/src/app.html index 396e6f960..241adf90c 100644 --- a/src/app.html +++ b/src/app.html @@ -7,7 +7,7 @@ %sveltekit.head% - -
%sveltekit.body%
+ + %sveltekit.body% diff --git a/src/lib/components/week/WeekBlockEntry.svelte b/src/lib/components/week/WeekBlockEntry.svelte new file mode 100644 index 000000000..f6d9fe9cd --- /dev/null +++ b/src/lib/components/week/WeekBlockEntry.svelte @@ -0,0 +1,46 @@ + + +
  • + +

    {label}

    +     +
    • diff --git a/src/lib/components/week/index.ts b/src/lib/components/week/index.ts new file mode 100644 index 000000000..1ae2fd5db --- /dev/null +++ b/src/lib/components/week/index.ts @@ -0,0 +1 @@ +export { default as WeekBlockEntry } from "./WeekBlockEntry.svelte"; diff --git a/src/lib/index.ts b/src/lib/index.ts index b1b371608..cc30dd5ad 100644 --- a/src/lib/index.ts +++ b/src/lib/index.ts @@ -2,3 +2,4 @@ export * as deltas from "./deltas"; export * as projects from "./projects"; export * as log from "./log"; export * as sessions from "./sessions"; +export * as week from "./week"; diff --git a/src/lib/week.ts b/src/lib/week.ts new file mode 100644 index 000000000..231389f1d --- /dev/null +++ b/src/lib/week.ts @@ -0,0 +1,33 @@ +export type Week = { + start: Date; + end: Date; +}; +export namespace Week { + export const from = (date: Date): Week => { + const start = new Date(date); + start.setHours(0, 0, 0, 0); + start.setDate(start.getDate() - start.getDay() + 1); // Start on Monday + const end = new Date(start); + end.setDate(end.getDate() + 7); + return { start, end }; + }; + export const next = (week: Week): Week => { + const start = new Date(week.start); + start.setDate(start.getDate() + 7); + const end = new Date(week.end); + end.setDate(end.getDate() + 7); + return { start, end }; + }; + export const previous = (week: Week): Week => { + const start = new Date(week.start); + start.setDate(start.getDate() - 7); + const end = new Date(week.end); + end.setDate(end.getDate() - 7); + return { start, end }; + }; + export const nThDay = (week: Week, n: number): Date => { + const date = new Date(week.start); + date.setDate(date.getDate() + n); + return date; + }; +} diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index c5d907888..826448f53 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -20,7 +20,7 @@
    @@ -32,12 +32,12 @@ >
    -
    -
    + + -
    @@ -45,5 +45,5 @@
    Up to date
    -
    +
    -->
    diff --git a/src/routes/projects/[projectId]/+layout.svelte b/src/routes/projects/[projectId]/+layout.svelte index dba455d12..af9fb8b34 100644 --- a/src/routes/projects/[projectId]/+layout.svelte +++ b/src/routes/projects/[projectId]/+layout.svelte @@ -1,6 +1,6 @@