Sveskejuice
/
deprived-main-website
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update timelineItem.svelte

This commit is contained in:
BOT Alex 2024-12-31 17:43:29 +01:00
parent 8ff7ef5a0f
commit 473c4307d3
1 changed files with 98 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

196
src/comps/timeline/timelineItem.svelte
View File

@ -1,99 +1,99 @@
<script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte";
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: 0.5%;
display: inline-flex;
position: relative;
background-color: rgb(178, 178, 178);
}
<script lang="ts">
import HorizonalStack from "../Utils/HorizonalStack.svelte";
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: 0.5%;
display: inline-flex;
position: relative;
background-color: rgb(178, 178, 178);
}
</style>