quirinecker/dayplanner
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

improved calendar styles, switched profile pic, fixed dark mode

Browse Source
This commit is contained in:
quirinecker
2025-05-11 22:36:28 +02:00
parent 555aca0a99
commit db86f9323e
6 changed files with 25 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/assets/css/main.css
View File

@@ -24,22 +24,22 @@
.dark { .dark {
--ui-primary: #C02942; --ui-primary: #C02942;
--ui-text-dimmed: var(--ui-color-neutral-400); --ui-text-dimmed: var(--ui-color-neutral-500);
--ui-text-muted: var(--ui-color-neutral-500); --ui-text-muted: var(--ui-color-neutral-400);
--ui-text-toned: var(--ui-color-neutral-600); --ui-text-toned: var(--ui-color-neutral-300);
--ui-text: var(--ui-color-neutral-700); --ui-text: var(--ui-color-neutral-200);
--ui-text-highlighted: var(--ui-color-neutral-900); --ui-text-highlighted: var(--color-white);
--ui-text-inverted: var(--color-white); --ui-text-inverted: var(--ui-color-neutral-900);
--ui-bg: var(--color-white); --ui-bg: var(--ui-color-neutral-900);
--ui-bg-muted: var(--ui-color-neutral-50); --ui-bg-muted: var(--ui-color-neutral-800);
--ui-bg-elevated: var(--ui-color-neutral-100); --ui-bg-elevated: var(--ui-color-neutral-800);
--ui-bg-accented: var(--ui-color-neutral-200); --ui-bg-accented: var(--ui-color-neutral-700);
--ui-bg-inverted: var(--ui-color-neutral-900); --ui-bg-inverted: var(--color-white);
--ui-border: var(--ui-color-neutral-200); --ui-border: var(--ui-color-neutral-800);
--ui-border-muted: var(--ui-color-neutral-200); --ui-border-muted: var(--ui-color-neutral-700);
--ui-border-accented: var(--ui-color-neutral-300); --ui-border-accented: var(--ui-color-neutral-700);
--ui-border-inverted: var(--ui-color-neutral-900); --ui-border-inverted: var(--color-white);
} }

4
web/components/ui/Sidebar.vue
View File

@@ -56,8 +56,8 @@ defineProps<{
content: 'w-60' content: 'w-60'
}"> }">
<UButton variant="ghost" class="flex gap-1 items-center w-full text-text"> <UButton variant="ghost" class="flex gap-1 items-center w-full text-text">
<UAvatar src="https://github.com/benjamincanac.png" /> <UAvatar src="https://avatars.githubusercontent.com/u/33062936?s=400&u=9ee792d29ebcacccdbfb5af0539aab313d6d7185&v=4" />
Sebastian Peinbauer Quirin Ecker
</UButton> </UButton>
</UDropdownMenu> </UDropdownMenu>
</footer> </footer>

4
web/components/ui/calendar/Calendar.vue
View File

@@ -102,8 +102,8 @@ function quickCreate(date: Moment, timespan: Timespan) {
</script> </script>
<template> <template>
<div class="w-full h-full flex flex-col"> <div class="w-full h-full flex flex-col overflow-scroll">
<div class="calendar flex flex-row w-full flex-1 items-stretch"> <div class="calendar flex flex-row w-full flex-1 items-stretch divide-x divide-muted">
<CalendarHeader :seperators="seperators" /> <CalendarHeader :seperators="seperators" />
<CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events" <CalendarCollumn v-for="day in days" :seperators="seperators" :day="day.date" :events="day.events"

5
web/components/ui/calendar/CalendarCollumn.vue
View File

@@ -3,6 +3,7 @@ import { computed, ref, useTemplateRef } from 'vue';
import CalendarSeperator from './CalendarSeperator.vue'; import CalendarSeperator from './CalendarSeperator.vue';
import type { Moment } from 'moment'; import type { Moment } from 'moment';
import CalendarEvent from './CalendarEvent.vue'; import CalendarEvent from './CalendarEvent.vue';
import { Event } from '~/utils/event';
import moment from 'moment'; import moment from 'moment';
const props = defineProps<{ const props = defineProps<{
@@ -92,7 +93,7 @@ function dragDrop(_: DragEvent) {
<template> <template>
<div class="flex flex-col h-full grow"> <div class="flex flex-col h-full grow">
<div class="flex justify-center items-center flex-col h-18 border-b-2 border-text"> <div class="flex justify-center items-center flex-col h-18 border-b-1 border-muted">
<div>{{ props.day.format('dd').toUpperCase() }}</div> <div>{{ props.day.format('dd').toUpperCase() }}</div>
<div>{{ props.day.date() }}</div> <div>{{ props.day.date() }}</div>
</div> </div>
@@ -100,7 +101,7 @@ function dragDrop(_: DragEvent) {
<div id="col" ref="column" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mouseover" @dragover="dragover" <div id="col" ref="column" @mousedown="mousedown" @mouseup="mouseup" @mousemove="mouseover" @dragover="dragover"
@dragend="dragDrop" class="relative flex flex-col grow items-center"> @dragend="dragDrop" class="relative flex flex-col grow items-center">
<CalendarSeperator v-for="sep in seperators" :seperator="sep"> <CalendarSeperator v-for="sep in seperators" :seperator="sep">
<hr class="w-full"> <hr class="w-full border-muted">
</CalendarSeperator> </CalendarSeperator>
<div class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg" <div class="absolute w-11/12 top-20 bg-black opacity-45 rounded-lg"
:style="{ height: `${height}px`, top: `${top}px` }"></div> :style="{ height: `${height}px`, top: `${top}px` }"></div>

1
web/components/ui/calendar/CalendarEvent.vue
View File

@@ -1,5 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import { computed, ref } from 'vue'; import { computed, ref } from 'vue';
import type { Event } from '~/utils/event';
const props = defineProps<{ const props = defineProps<{
event: CollissionWrapper event: CollissionWrapper

4
web/components/ui/calendar/CalendarHeader.vue
View File

@@ -10,8 +10,8 @@ defineProps<{
</script> </script>
<template> <template>
<div class="flex flex-col h-full w-32"> <div class="flex flex-col h-full w-16">
<div class="flex justify-center items-center h-18 border-b-text border-b-2">vue-calendar <div class="flex justify-center items-center h-18 border-b-muted border-b-1">
</div> </div>
<div class="calendar-legend relative flex flex-col grow justify-evenly"> <div class="calendar-legend relative flex flex-col grow justify-evenly">
<CalendarSeperator v-for="sep in seperators" :seperator="sep"> <CalendarSeperator v-for="sep in seperators" :seperator="sep">