129 lines
2.9 KiB
Svelte
129 lines
2.9 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 { Schema } from 'src/model/job';
|
|
export let currentLanguage = '';
|
|
export let jobs:Schema[] = [];
|
|
</script>
|
|
<div class="jobsContainer">
|
|
{#each jobs as job }
|
|
<div class="job container">
|
|
<h3>{job.title[currentLanguage]}</h3>
|
|
<div class="job-content">
|
|
<div class="images-container">
|
|
{#each job.images as image }
|
|
<img src="{image}" alt="{image}"/>
|
|
{/each}
|
|
</div>
|
|
<div class="text-content">
|
|
{@html md.render(job.content[currentLanguage])}
|
|
</div>
|
|
</div>
|
|
<div class="added-info">
|
|
{#if job.year.lenght!=0}
|
|
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.tecnologies.length!=0}
|
|
Tech:
|
|
{/if}
|
|
{#each job.tecnologies as tecnology, index }
|
|
{tecnology}{index!=job.tecnologies.length-1?', ':''}
|
|
{/each}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
<style lang="scss">
|
|
@import './static/colors.scss';
|
|
.jobsContainer{
|
|
margin: auto;
|
|
background-color:$steel-blue;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
border-radius: 10px;
|
|
width: 90%;
|
|
border-radius: 10px;
|
|
box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
-webkit-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
-moz-box-shadow: -12px 26px 25px -14px $rich-black-fogra-29;
|
|
padding: 1vh;
|
|
}
|
|
.job{
|
|
background-color: $cultured;
|
|
text-align: center;
|
|
width: 98%;
|
|
border-radius: 10px;
|
|
margin-bottom: 1vh;
|
|
padding: 1vh;
|
|
background-color: $cultured;
|
|
border-style: solid;
|
|
border-width: 0.1px;
|
|
}
|
|
.job:last-child{
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.job-content{
|
|
padding: 2vh;
|
|
}
|
|
|
|
.added-info{
|
|
font-size: 13px;
|
|
text-align: left;
|
|
}
|
|
|
|
.text-content{
|
|
margin: auto;
|
|
text-align: justify;
|
|
width: 95%;
|
|
}
|
|
|
|
|
|
|
|
img{
|
|
width: auto;
|
|
max-width: 80%;
|
|
max-height: 20%;
|
|
background-color: $rich-black-fogra-29;
|
|
text-align: center;
|
|
}
|
|
|
|
@media screen and (min-width: 600px) {
|
|
.jobsContainer{
|
|
display: flex;
|
|
height: auto;
|
|
max-width: $cv-max-width;
|
|
width: 80vw;
|
|
}
|
|
|
|
.job-content{
|
|
flex-wrap: unset;
|
|
}
|
|
}
|
|
|
|
</style>
|