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