169 lines
3.2 KiB
Svelte
169 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
import MarkdownIt from 'markdown-it';
|
|
const md = new MarkdownIt({
|
|
html: true,
|
|
xhtmlOut: true,
|
|
typographer: true,
|
|
breaks: true,
|
|
linkify: true
|
|
});
|
|
import type { Job } from '$lib/model/job';
|
|
import type { CurrentLanguage } from '$lib/types';
|
|
export let job: Job;
|
|
export let currentLanguage: CurrentLanguage = 'it';
|
|
const dialogs: { [k: string]: HTMLDialogElement } = {};
|
|
export let modalOpen: boolean;
|
|
</script>
|
|
|
|
{#each job.images as image}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<dialog
|
|
bind:this={dialogs[window.btoa(image)]}
|
|
on:scroll|preventDefault
|
|
on:click={() => {
|
|
dialogs[window.btoa(image)].close();
|
|
modalOpen = false;
|
|
}}
|
|
>
|
|
<img
|
|
src={image}
|
|
alt={image}
|
|
loading="lazy"
|
|
on:scroll={(e) => {
|
|
console.log(e);
|
|
}}
|
|
/>
|
|
</dialog>
|
|
{/each}
|
|
|
|
<div class="job-container">
|
|
<h3>{job.title[currentLanguage]}</h3>
|
|
<div class="image-container">
|
|
{#each job.images as image}
|
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
|
<img
|
|
src={image}
|
|
alt={image}
|
|
loading="lazy"
|
|
on:click={() => {
|
|
dialogs[window.btoa(image)].showModal();
|
|
modalOpen = true;
|
|
}}
|
|
/>
|
|
{/each}
|
|
</div>
|
|
<div class="text-content">
|
|
{@html md.render(job.content[currentLanguage])}
|
|
</div>
|
|
<div class="added-info">
|
|
{#if job.year}
|
|
Date: {job.year.start}{#if job.year.end.length != 0}; {job.year.end} {/if}
|
|
{/if}
|
|
<div>
|
|
{#if job.collaborators.length != 0}
|
|
Collab:
|
|
{/if}
|
|
{#each job.collaborators as collaborator, index}
|
|
<a href={collaborator.ref}>{collaborator.name} {collaborator.surname}</a>{index !=
|
|
job.collaborators.length - 1
|
|
? ', '
|
|
: ''}
|
|
{/each}
|
|
</div>
|
|
<div>
|
|
{#if job.languages.length != 0}
|
|
Lang:
|
|
{/if}
|
|
{#each job.languages as language, index}
|
|
{language}{index != job.languages.length - 1 ? ', ' : ''}
|
|
{/each}
|
|
</div>
|
|
<div>
|
|
{#if job.technologies.length != 0}
|
|
Tech:
|
|
{/if}
|
|
{#each job.technologies as tecnology, index}
|
|
{tecnology}{index != job.technologies.length - 1 ? ', ' : ''}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
@import '../../app.scss';
|
|
.text-content {
|
|
margin: auto;
|
|
text-align: justify;
|
|
}
|
|
.added-info {
|
|
text-align: left;
|
|
font-size: smaller;
|
|
}
|
|
.job-container {
|
|
width: 100%;
|
|
img {
|
|
background-color: $text-color;
|
|
cursor: zoom-in;
|
|
}
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
}
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
.modal {
|
|
display: flex;
|
|
position: fixed;
|
|
position: -webkit-sticky;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 999;
|
|
background-color: rgba($color: #000000, $alpha: 0.4);
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
}
|
|
.modal-open {
|
|
overflow-y: hidden;
|
|
}
|
|
.modal-closed {
|
|
overflow-y: unset;
|
|
}
|
|
dialog {
|
|
img {
|
|
max-width: 80vw;
|
|
max-height: 80vh;
|
|
height: auto;
|
|
margin: auto;
|
|
background-color: $text-color;
|
|
}
|
|
}
|
|
dialog::backdrop {
|
|
background: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
dialog[open] {
|
|
animation: zoom 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
|
|
}
|
|
@keyframes zoom {
|
|
from {
|
|
transform: scale(0.95);
|
|
}
|
|
to {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
dialog[open]::backdrop {
|
|
animation: fade 0.2s ease-out;
|
|
}
|
|
@keyframes fade {
|
|
from {
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
</style>
|