SebinNyshkim/viktor-reference
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor: use icons instead of timestamps in Timeline component

Browse source
This commit is contained in:
Sebin Nyshkim 2022-09-29 02:33:46 +02:00
parent 936f3e7057
commit 0bf2fb9de2
2 changed files with 40 additions and 45 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/TimelineItem.vue
View file

@ -1,37 +1,12 @@
<script setup lang="ts">
import { computed } from "vue";
interface Props {
datetime: string;
}
const props = defineProps<Props>();
const dateLabels = computed<Record<string, string>>(() => {
const date = new Date(props.datetime);
const locale = "de-DE";
const dates = {
year: date.toLocaleDateString(locale, { year: "numeric" }),
month: date.toLocaleDateString(locale, { month: "short" }),
day: date.toLocaleDateString(locale, { day: "numeric" }),
};
return dates;
});
</script>
<template>
<li class="timeline-item">
<time class="timeline-item__datetime" :datetime="datetime">
<div class="timeline-item__label">{{ dateLabels.day }}</div>
<div class="timeline-item__label">{{ dateLabels.month }}</div>
<div class="timeline-item__label">{{ dateLabels.year }}</div>
</time>
<div class="timeline-item__icon">
<slot name="icon"></slot>
</div>
<section class="timeline-item__content">
<h1 class="timeline-item__headline">
<h2 class="timeline-item__headline">
<slot name="headline"></slot>
</h1>
</h2>
<div class="timeline-item__text">
<slot name="content"></slot>
@ -73,7 +48,7 @@ const dateLabels = computed<Record<string, string>>(() => {
right: var(--timeline-stroke-position-horizontal);
}
.timeline-item__datetime {
.timeline-item__icon {
order: 1;
}
@ -84,25 +59,26 @@ const dateLabels = computed<Record<string, string>>(() => {
}
}
&__datetime {
font-size: var(--timeline-circle-font-size);
text-align: center;
line-height: 1.1;
background-color: var(--timeline-circle-background);
&__icon {
flex: 0 0 var(--timeline-circle-size);
display: flex;
align-items: center;
justify-content: center;
width: var(--timeline-circle-size);
height: var(--timeline-circle-size);
background-color: var(--timeline-circle-background);
margin: 0;
border: var(--timeline-stroke-thickness) solid
var(--timeline-stroke-color);
border-radius: 100%;
padding: var(--timeline-circle-padding);
}
&__label {
svg {
fill: var(--timeline-icon-color);
}
}
&__content {

29
src/views/CareerPathView.vue
View file

@ -1,11 +1,26 @@
<script setup lang="ts">
import TimelineList from "@/components/TimelineList.vue";
import TimelineItem from "@/components/TimelineItem.vue";
import WhiskeyGlassIcon from "@/assets/icons/WhiskeyGlassIcon.vue";
import TreeIcon from "@/assets/icons/TreeIcon.vue";
import CarIcon from "@/assets/icons/CarIcon.vue";
import HelmetSafetyIcon from "@/assets/icons/HelmetSafetyIcon.vue";
import BoxesIcon from "@/assets/icons/BoxesIcon.vue";
import TextBlock from "@/components/TextBlock.vue";
</script>
<template>
<TextBlock>
<h1>{{ $route.meta.title }}</h1>
<p>
Viktor's had many different jobs in the past, some of which where very
formative, other's just paid the bills.
</p>
</TextBlock>
<TimelineList>
<TimelineItem datetime="2011-11-11">
<TimelineItem>
<template #icon><WhiskeyGlassIcon /></template>
<template #headline>Bartender</template>
<template #content>
<p>
@ -22,7 +37,8 @@ import TimelineItem from "@/components/TimelineItem.vue";
</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><TreeIcon /></template>
<template #headline>Lumberjack</template>
<template #content>
<p>
@ -32,7 +48,8 @@ import TimelineItem from "@/components/TimelineItem.vue";
</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><CarIcon /></template>
<template #headline>Car Mechanic</template>
<template #content>
<p>
@ -41,13 +58,15 @@ import TimelineItem from "@/components/TimelineItem.vue";
</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><HelmetSafetyIcon /></template>
<template #headline>Construction Worker</template>
<template #content>
<p>Later, he worked as a construction worker.</p>
</template>
</TimelineItem>
<TimelineItem datetime="2012-12-12">
<TimelineItem>
<template #icon><BoxesIcon /></template>
<template #headline>Werehouse Worker</template>
<template #content>
<p>