notxia/notxia.github.io
1
0
Fork 0
mirror of https://github.com/NotXia/notxia.github.io.git synced 2025-12-14 19:01:51 +01:00
Code Issues Packages Projects Releases Wiki Activity

Fix timeline

Browse Source
This commit is contained in:
Tian Cheng (Riccardo) Xia
2024-12-29 17:55:59 +01:00
parent c9d4ecbb9d
commit dc095f7fa7
2 changed files with 29 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
components/Timeline.vue
View File

@ -11,10 +11,10 @@
<li class="mr-4 absolute right-0" v-for="event in left_events" :key="props.left[event.index].title" :style="`top: ${event.offset*month_offset}px`"> <li class="mr-4 absolute right-0" v-for="event in left_events" :key="props.left[event.index].title" :style="`top: ${event.offset*month_offset}px`">
<div class="relative"> <div class="relative">
<!-- Start point --> <!-- Start point -->
<div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem"></div> <div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem; bottom: 0"></div>
<div v-if="monthDifference(props.left[event.index].start, props.left[event.index].end) > 0" > <div v-if="monthDifference(props.left[event.index].start, props.left[event.index].end) > 0" >
<!-- End point --> <!-- End point -->
<div v-if="!props.left[event.index].current" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem; bottom: 0"></div> <div v-if="props.left[event.index].end <= new Date()" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="right: -1.43rem"></div>
<!-- Interval line --> <!-- Interval line -->
<div class="absolute rounded-full border-l-2 border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; right: -1.12rem"></div> <div class="absolute rounded-full border-l-2 border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; right: -1.12rem"></div>
</div> </div>
@ -40,7 +40,7 @@
<div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem; bottom: 0"></div> <div class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem; bottom: 0"></div>
<div v-if="monthDifference(props.right[event.index].start, props.right[event.index].end) > 0"> <div v-if="monthDifference(props.right[event.index].start, props.right[event.index].end) > 0">
<!-- End point --> <!-- End point -->
<div v-if="!props.right[event.index].current" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem"></div> <div v-if="props.right[event.index].end <= new Date()" class="absolute w-3 h-3 z-10 bg-gray-400 rounded-full border border-white dark:border-gray-900 dark:bg-gray-500" style="left: -1.43rem"></div>
<!-- Interval line --> <!-- Interval line -->
<div class="absolute rounded-full border-l-2 border-we border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; left: -1.12rem"></div> <div class="absolute rounded-full border-l-2 border-we border-gray-400 dark:border-gray-500" style="height: 100%; top: 0; left: -1.12rem"></div>
</div> </div>
@ -64,7 +64,7 @@
<script setup lang="ts"> <script setup lang="ts">
interface Event { interface Event {
title: string, description: string, time_label: string, title: string, description: string, time_label: string,
start: Date, end: Date, current?: boolean start: Date, end: Date
}; };
const props = defineProps({ const props = defineProps({
@ -92,6 +92,10 @@
return end_date.getMonth() - start_date.getMonth() + (12 * (end_date.getFullYear() - start_date.getFullYear())); return end_date.getMonth() - start_date.getMonth() + (12 * (end_date.getFullYear() - start_date.getFullYear()));
} }
function dateClip(date: Date): Date {
return date > new Date() ? new Date() : date
}
function updateTimelineSize():void { function updateTimelineSize():void {
const available_space:number = container_timeline.value?.clientHeight ?? 0; const available_space:number = container_timeline.value?.clientHeight ?? 0;
let events_min_date:Date = new Date(), let events_min_date:Date = new Date(),
@ -104,7 +108,7 @@
}); });
min_date.value = events_min_date; min_date.value = events_min_date;
max_date.value = events_max_date; max_date.value = dateClip(events_max_date);
month_offset.value = Math.floor( available_space / (monthDifference(events_min_date, events_max_date)) ); month_offset.value = Math.floor( available_space / (monthDifference(events_min_date, events_max_date)) );
} }
@ -113,14 +117,23 @@
updateTimelineSize(); updateTimelineSize();
// Computes the offset w.r.t. the end of the time interval // Computes the offset w.r.t. the end of the time interval
right_events.value = props.right.map((event, index) => ({ right_events.value = props.right
offset: monthDifference(event.end, max_date.value), .map((event, index) => ({
index: index offset: monthDifference(dateClip(event.end), max_date.value),
})); index: index,
left_events.value = props.left.map((event, index) => ({ }))
offset: monthDifference(event.end, max_date.value), .filter((event) => (
index: index props.right[event.index].start <= new Date()
})); ));
left_events.value = props.left
.map((event, index) => ({
offset: monthDifference(dateClip(event.end), max_date.value),
index: index,
}))
.filter((event) => (
props.left[event.index].start <= new Date()
));
new ResizeObserver(updateTimelineSize).observe(document.querySelector("html") as Element) new ResizeObserver(updateTimelineSize).observe(document.querySelector("html") as Element)
}) })

5
components/resume/ExperienceTimeline.vue
View File

@ -20,12 +20,12 @@
{ {
title: $t('bs in cs'), time_label: '2020 - 2023', title: $t('bs in cs'), time_label: '2020 - 2023',
description: $t('unibo'), description: $t('unibo'),
start: new Date(2020, september, 21), end: new Date(2023, october, 11), current: false start: new Date(2020, september, 21), end: new Date(2023, october, 11)
}, },
{ {
title: $t('ms in ai'), time_label: '2023 - 2025', title: $t('ms in ai'), time_label: '2023 - 2025',
description: $t('unibo'), description: $t('unibo'),
start: new Date(2023, september, 18), end: new Date(), current: true start: new Date(2023, september, 18), end: current
} }
]" ]"
:left="[ :left="[
@ -55,6 +55,7 @@
import { initTooltips } from "flowbite"; import { initTooltips } from "flowbite";
const january = 0, february = 1, march = 2, april = 3, may = 4, june = 5, july = 6, august = 7, september = 8, october = 9, november = 10, december = 11; const january = 0, february = 1, march = 2, april = 3, may = 4, june = 5, july = 6, august = 7, september = 8, october = 9, november = 10, december = 11;
const current = new Date(Date.now() + 24*60*60*1000)
onMounted(() => { onMounted(() => {
initTooltips(); initTooltips();