-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: ✨ add group carousel mobile styles * style: 🎨 restyle mobile tabs * feat: ✨ add timeline to scheduled meetings * feat: ✨ add meeting cards to timeline * feat: ✨ add responsiveness to scheduled meetings * style: 🎨 tweak styles of groups carousel * feat: ✨ make meeting cards ultrawide friendly :) * fix: 🐛 change desktop spacing for consistency * feat: ✨ add unscheduled meeting hi-fi design * refactor: ♻️ add style postcss lang
- Loading branch information
Showing
12 changed files
with
351 additions
and
178 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
src/lib/components/summary/ScheduledMeetings/AvailabilityIndicator.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <script lang="ts"> | ||
| import type { ScheduledMeeting } from "$lib/types/meetings"; | ||
| export let meeting: ScheduledMeeting; | ||
| </script> | ||
|
|
||
| <div class="dropdown h-fit"> | ||
| <button | ||
| tabindex="0" | ||
| class="btn m-0 my-1 flex h-fit min-h-0 flex-nowrap rounded-md border-gray-300 bg-gray-100 py-2 shadow-none outline-none hover:bg-gray-200" | ||
| > | ||
| <div | ||
| class:bg-success={meeting.attendance === "accepted"} | ||
| class:bg-error={meeting.attendance === "declined"} | ||
| class:bg-warning={meeting.attendance === "maybe"} | ||
| class:bg-slate-400={!meeting.attendance} | ||
| class="h-2 w-2 rounded-full" | ||
| /> | ||
| <span class="whitespace-nowrap text-xs font-semibold uppercase tracking-wider text-slate-400"> | ||
| {#if meeting.attendance} | ||
| {meeting.attendance} | ||
| {:else} | ||
| Not Stated | ||
| {/if} | ||
| </span> | ||
| </button> | ||
| <ul | ||
| class="menu dropdown-content z-[1] rounded-md border-[1px] border-gray-300 bg-slate-200 p-1 lg:right-0" | ||
| > | ||
| <li> | ||
| <button | ||
| class="rounded-[4px] pl-3 pr-10 hover:bg-slate-300" | ||
| class:bg-slate-100={meeting.attendance === "accepted"} | ||
| > | ||
| <div class="h-2 w-2 rounded-full bg-success" /> | ||
| <span class="text-xs font-semibold text-slate-400">ACCEPT</span></button | ||
| > | ||
| </li> | ||
| <li> | ||
| <button | ||
| class="rounded-[4px] pl-3 pr-10" | ||
| class:bg-slate-100={meeting.attendance === "declined"} | ||
| > | ||
| <div class="h-2 w-2 rounded-full bg-error" /> | ||
| <span class="text-xs font-semibold text-slate-400">DECLINE</span></button | ||
| > | ||
| </li> | ||
| <li> | ||
| <button class="rounded-[4px] pl-3 pr-10" class:bg-slate-100={meeting.attendance === "maybe"}> | ||
| <div class="h-2 w-2 rounded-full bg-warning" /> | ||
| <span class="text-xs font-semibold text-slate-400">MAYBE</span></button | ||
| > | ||
| </li> | ||
| </ul> | ||
| </div> |
45 changes: 45 additions & 0 deletions
45
src/lib/components/summary/ScheduledMeetings/ScheduledMeetingCard.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <script lang="ts"> | ||
| import AvailabilityIndicator from "$lib/components/summary/ScheduledMeetings/AvailabilityIndicator.svelte"; | ||
| import type { ScheduledMeeting } from "$lib/types/meetings"; | ||
| import { convertTo12HourFormat } from "$lib/utils/summary-helpers"; | ||
| import MaterialSymbolsGroupsOutline from "~icons/material-symbols/groups-outline"; | ||
| import MdiClockOutline from "~icons/mdi/clock-outline"; | ||
| import MdiLocationOutline from "~icons/mdi/location-outline"; | ||
| export let meeting: ScheduledMeeting; | ||
| </script> | ||
|
|
||
| <div | ||
| class="flex items-center gap-4 rounded-lg border-[1px] border-gray-300 bg-gray-50 bg-opacity-50 p-4 lg:max-w-7xl lg:p-6" | ||
| class:not-indicated={!meeting.attendance} | ||
| > | ||
| <div class="rounded-full border-[1px] border-gray-300 bg-slate-100 p-3 text-xl text-gray-500"> | ||
| <MaterialSymbolsGroupsOutline /> | ||
| </div> | ||
| <div class="flex flex-grow flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2"> | ||
| <div> | ||
| <a href={meeting.link} target="_blank" referrerpolicy="no-referrer"> | ||
| <p class="line-clamp-1 text-lg font-semibold lg:mb-0.5 lg:text-xl"> | ||
| {meeting.name} | ||
| </p> | ||
| </a> | ||
| <div class="flex flex-col gap-0.5 text-slate-400 lg:flex-row lg:gap-4"> | ||
| <p class="flex items-center gap-1 text-xs font-semibold"> | ||
| <MdiClockOutline /> | ||
| {convertTo12HourFormat(meeting.startTime)} - {convertTo12HourFormat(meeting.endTime)} | ||
| </p> | ||
| <p class="flex items-center gap-1 text-xs font-semibold"> | ||
| <MdiLocationOutline /> | ||
| {meeting.location} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <AvailabilityIndicator {meeting} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| <style lang="postcss"> | ||
| .not-indicated { | ||
| @apply border-2 border-dashed border-primary border-opacity-30; | ||
| } | ||
| </style> |
38 changes: 38 additions & 0 deletions
38
src/lib/components/summary/ScheduledMeetings/ScheduledMeetingsList.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| <script lang="ts"> | ||
| import ScheduledMeetingCard from "$lib/components/summary/ScheduledMeetings/ScheduledMeetingCard.svelte"; | ||
| import { scheduledMeetings } from "$lib/stores/summaryStores"; | ||
| import { | ||
| convertIsoToDate, | ||
| getWeekdayFromIso, | ||
| groupAndSortScheduledMeetings, | ||
| } from "$lib/utils/summary-helpers"; | ||
| const sortedMeetings = groupAndSortScheduledMeetings($scheduledMeetings); | ||
| </script> | ||
|
|
||
| <ul class="timeline timeline-vertical"> | ||
| {#each Object.entries(sortedMeetings) as [date, meetings] (date)} | ||
| <li | ||
| class="[--timeline-col-start:4rem] [--timeline-row-start:auto] lg:[--timeline-col-start:5rem]" | ||
| > | ||
| <hr class="!row-start-2 !w-0.5 bg-slate-300" /> | ||
| <div class="timeline-start !row-start-1 !row-end-3 m-0 pr-2 pt-1"> | ||
| <p class="text-center text-xs font-bold uppercase text-gray-500"> | ||
| {getWeekdayFromIso(date)} | ||
| </p> | ||
| <p class="text-center text-gray-400">{convertIsoToDate(date)}</p> | ||
| </div> | ||
| <div class="timeline-middle !row-start-1 !row-end-2"> | ||
| <div class="h-2 w-2 rounded-full bg-gray-400" /> | ||
| </div> | ||
| <div class="timeline-end !row-start-2 m-0 w-full p-2 pl-3"> | ||
| <div class="flex flex-col gap-2"> | ||
| {#each meetings as meeting (meeting.id)} | ||
| <ScheduledMeetingCard {meeting} /> | ||
| {/each} | ||
| </div> | ||
| </div> | ||
| <hr class="!row-start-3 !w-0.5 bg-slate-300" /> | ||
| </li> | ||
| {/each} | ||
| </ul> |
This file was deleted.
Oops, something went wrong.
74 changes: 74 additions & 0 deletions
74
src/lib/components/summary/UnscheduledMeetings/UnscheduledMeetingsList.svelte
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| <script lang="ts"> | ||
| import { unscheduledMeetings } from "$lib/stores/summaryStores"; | ||
| import { | ||
| convertIsoToDate, | ||
| convertTo12HourFormat, | ||
| sortUnscheduledMeetingsByDateAndTime, | ||
| } from "$lib/utils/summary-helpers"; | ||
| import MaterialSymbolsGroupsOutline from "~icons/material-symbols/groups-outline"; | ||
| import MdiCalendarBlankOutline from "~icons/mdi/calendar-blank-outline"; | ||
| import MdiClockOutline from "~icons/mdi/clock-outline"; | ||
| import MdiLocationOutline from "~icons/mdi/location-outline"; | ||
| const sortedMeetings = sortUnscheduledMeetingsByDateAndTime($unscheduledMeetings); | ||
| </script> | ||
|
|
||
| <div class="flex flex-col gap-4 p-4"> | ||
| {#each sortedMeetings as meeting (meeting.id)} | ||
| <div | ||
| class="flex items-center gap-4 rounded-lg border-[1px] border-gray-300 bg-gray-50 bg-opacity-50 p-4 lg:max-w-7xl lg:p-6" | ||
| class:not-indicated={!meeting.hasIndicated} | ||
| > | ||
| <div | ||
| class="mx-2 rounded-full border-[1px] border-gray-300 bg-slate-100 p-3 text-xl text-gray-500" | ||
| > | ||
| <MaterialSymbolsGroupsOutline /> | ||
| </div> | ||
| <div class="flex flex-grow flex-col lg:flex-row lg:items-center lg:justify-between lg:gap-2"> | ||
| <div class="w-full"> | ||
| <a href={meeting.link} target="_blank" referrerpolicy="no-referrer" class="block w-fit"> | ||
| <p class="line-clamp-1 py-1 text-lg font-semibold lg:mb-0.5 lg:p-0 lg:text-xl"> | ||
| {meeting.name} | ||
| </p> | ||
| </a> | ||
| <div class="flex flex-col gap-0.5 text-slate-400 lg:flex-row lg:gap-4"> | ||
| <p class="flex items-center gap-1 text-xs font-semibold"> | ||
| <MdiCalendarBlankOutline /> | ||
| {convertIsoToDate(meeting.startDate)} - {convertIsoToDate(meeting.endDate)} | ||
| </p> | ||
| <p class="flex items-center gap-1 text-xs font-semibold"> | ||
| <MdiClockOutline /> | ||
| {convertTo12HourFormat(meeting.startTime)} - {convertTo12HourFormat(meeting.endTime)} | ||
| </p> | ||
| <p class="flex items-center gap-1 text-xs font-semibold"> | ||
| <MdiLocationOutline /> | ||
| {meeting.location} | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <div class="flex items-center gap-2 p-1"> | ||
| <div | ||
| class:bg-success={meeting.hasIndicated} | ||
| class:bg-slate-400={!meeting.hasIndicated} | ||
| class="h-2 w-2 rounded-full" | ||
| /> | ||
| <span | ||
| class="whitespace-nowrap text-xs font-semibold uppercase tracking-wider text-slate-400" | ||
| > | ||
| {#if meeting.hasIndicated} | ||
| INDICATED | ||
| {:else} | ||
| NOT INDICATED | ||
| {/if} | ||
| </span> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| {/each} | ||
| </div> | ||
|
|
||
| <style lang="postcss"> | ||
| .not-indicated { | ||
| @apply border-2 border-dashed border-primary border-opacity-30; | ||
| } | ||
| </style> |
Oops, something went wrong.