100 lines
No EOL
2.1 KiB
Svelte
100 lines
No EOL
2.1 KiB
Svelte
<script lang="ts">
|
|
import HorizonalStack from "../Utils/HorizonalStack.svelte";
|
|
import Img from '@zerodevx/svelte-img'
|
|
import VerticalStack from "../Utils/VerticalStack.svelte";
|
|
import ZSpacer from "../Utils/ZSpacer.svelte";
|
|
import MediaQuery from 'svelte-media-queries';
|
|
|
|
// Set these when using the component
|
|
export let date: string = "null";
|
|
export let imagePath: string = "null";
|
|
export let title: string = "null";
|
|
export let desc: string = "null";
|
|
|
|
const timelineCollapseThreshhold : string = '1000px';
|
|
let timelineCollaped: boolean = false;
|
|
</script>
|
|
|
|
<MediaQuery query='(max-width: {timelineCollapseThreshhold})' bind:matches={timelineCollaped} />
|
|
|
|
<div class="flexStart timelineItemContainer" style="overflow: auto;">
|
|
<div style="padding-top: 10px;">
|
|
{#if imagePath !== "null"}
|
|
<div class="imageContainer">
|
|
<img src={imagePath} class="image" alt="nothing"/>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
<div class="ItemStrip"/>
|
|
<div class="noPadding">
|
|
<div class="title">{@html title}</div>
|
|
<div class="DateText">{@html date}</div>
|
|
<div class="bodyText">{@html desc}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.imageContainer {
|
|
position: relative;
|
|
z-index: -1;
|
|
|
|
width: 10vw;
|
|
height: 10vw;
|
|
|
|
overflow: hidden;
|
|
}
|
|
|
|
.imageContainer img{
|
|
position: absolute;
|
|
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
min-width: 100%;
|
|
min-height: 100%;
|
|
}
|
|
|
|
.timelineItemContainer{
|
|
column-gap: 3vw;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.noPadding{
|
|
padding: 0;
|
|
}
|
|
|
|
.flexStart{
|
|
display: flex;
|
|
justify-content: start;
|
|
}
|
|
|
|
.title {
|
|
font-size: 200%;
|
|
|
|
display: flex;
|
|
align-content: center;
|
|
}
|
|
|
|
.bodyText{
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.DateText{
|
|
margin: 0;
|
|
margin-bottom: 0.5rem;
|
|
|
|
color: darkgray;
|
|
|
|
display: flex;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.ItemStrip{
|
|
min-width: 5px;
|
|
display: inline-flex;
|
|
|
|
position: relative;
|
|
|
|
background-color: rgb(178, 178, 178);
|
|
}
|
|
</style> |