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 {