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

Update timeline

Browse Source
This commit is contained in:
Tian Cheng (Riccardo) Xia
2023-01-24 19:49:31 +01:00
parent 1b003d34df
commit 99dc51414b
2 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/timeline/Timeline.vue
View File

@ -1,15 +1,16 @@
<template> <template>
<div class="w-full h-full" ref="container_timeline"> <div class="w-full h-full" ref="container_timeline">
<div class="flex justify-center w-full h-full" v-if="month_offset > 0 && min_date && max_date"> <div class="flex justify-center w-full h-full" v-if="month_offset > 0 && min_date && max_date">
<!-- Left side --> <!-- Left side -->
<ol class="relative border-r text-right w-1/2 border-zinc-200 dark:border-zinc-700"> <ol class="relative border-r text-right w-1/2 border-zinc-200 dark:border-zinc-700">
<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 + 10}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"></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 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].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>
<!-- 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>
@ -29,13 +30,13 @@
<!-- Right side --> <!-- Right side -->
<ol class="relative w-1/2 border-l border-zinc-200 dark:border-zinc-700"> <ol class="relative w-1/2 border-l border-zinc-200 dark:border-zinc-700">
<li class="ml-4 absolute left-0" v-for="event in right_events" :key="props.right[event.index].title" :style="`top: ${event.offset*month_offset + 10}px`"> <li class="ml-4 absolute left-0" v-for="event in right_events" :key="props.right[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="left: -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="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 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="!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>
<!-- 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>
@ -50,8 +51,8 @@
</div> </div>
</li> </li>
</ol> </ol>
</div>
</div>
</div> </div>
</template> </template>
@ -61,7 +62,7 @@
interface Event { interface Event {
title: string, description: string, time_label: string, title: string, description: string, time_label: string,
start: Date, end: Date start: Date, end: Date, current?: boolean
}; };
const props = defineProps({ const props = defineProps({
right: { right: {

2
src/views/resume/ExperienceTimeline.vue
View File

@ -12,7 +12,7 @@
{ {
title: t('bachelor'), time_label: '2020 - 2023', title: t('bachelor'), time_label: '2020 - 2023',
description: t('bachelor description'), description: t('bachelor description'),
start: new Date(2020, september, 1), end: new Date(2023, december, 1) start: new Date(2020, september, 1), end: new Date(), current: true
} }
]" ]"
:left="[ :left="[