Frontend: Some tweaks for the containers of the slides, mainly pictures focused. Added formatDateMobile().
This commit is contained in:
parent
bb42cd9c2b
commit
524bb88a4c
5 changed files with 145 additions and 132 deletions
|
|
@ -1,54 +1,59 @@
|
|||
<script>
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiMapMarker, mdiCog } from "@mdi/js";
|
||||
import "$lib/css/slide.css";
|
||||
import { formatYear } from "$lib/js/date.js"
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiMapMarker, mdiCog } from "@mdi/js";
|
||||
import "$lib/css/slide.css";
|
||||
import { formatYear } from "$lib/js/date.js";
|
||||
|
||||
export let active = false;
|
||||
export let data;
|
||||
export let active = false;
|
||||
export let data;
|
||||
|
||||
const title = data.school;
|
||||
const location = data.school_location;
|
||||
const speciality = data.speciality;
|
||||
const option = data.school_options;
|
||||
const picture = data.picture_url;
|
||||
const end_year = data.end_year === null ? '' : formatYear(data.end_year);
|
||||
const start_year = data.start_year === null ? '' : (data.end_year === null ? formatYear(data.start_year) : '-'+formatYear(data.start_year));
|
||||
const title = data.school;
|
||||
const location = data.school_location;
|
||||
const speciality = data.speciality;
|
||||
const option = data.school_options;
|
||||
const picture = data.picture_url;
|
||||
const end_year = data.end_year === null ? "" : formatYear(data.end_year);
|
||||
const start_year =
|
||||
data.start_year === null
|
||||
? ""
|
||||
: data.end_year === null
|
||||
? formatYear(data.start_year)
|
||||
: "-" + formatYear(data.start_year);
|
||||
</script>
|
||||
|
||||
<div class="slide-container">
|
||||
<div class="slide-main {active ? '' : 'slide-unactive'}">
|
||||
<div class="slide-img-container">
|
||||
<img class="slide-img" src={picture} alt="Education" />
|
||||
</div>
|
||||
<div class="slide-text-container">
|
||||
<h1 class="slide-title">{title}</h1>
|
||||
<div class="slide-img-mobile-container">
|
||||
<img class="slide-img-mobile" src={picture} alt="Education" />
|
||||
</div>
|
||||
{#if location}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{location}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if speciality}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiCog} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{speciality}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if option}
|
||||
<p class="slide-subtitle">{option}</p>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="slide-main {active ? '' : 'slide-unactive'}">
|
||||
<div class="slide-img-container">
|
||||
<img class="slide-img" src={picture} alt="Education" />
|
||||
</div>
|
||||
<div class="slide-time">
|
||||
<div class="slide-bubble" />
|
||||
<h2 class="slide-date">{`${end_year}${start_year}`}</h2>
|
||||
<div class="slide-text-container">
|
||||
<h1 class="slide-title">{title}</h1>
|
||||
<div class="slide-img-mobile-container">
|
||||
<img class="slide-img-mobile" src={picture} alt="Education" />
|
||||
</div>
|
||||
{#if location}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{location}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if speciality}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiCog} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{speciality}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if option}
|
||||
<p class="slide-subtitle">{option}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-time">
|
||||
<div class="slide-bubble" />
|
||||
<h2 class="slide-date">{`${end_year}${start_year}`}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,61 +1,74 @@
|
|||
<script>
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiMapMarker, mdiOfficeBuilding } from "@mdi/js";
|
||||
import "$lib/css/slide.css";
|
||||
import { formatDate } from "$lib/js/date.js";
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiMapMarker, mdiOfficeBuilding } from "@mdi/js";
|
||||
import "$lib/css/slide.css";
|
||||
import { formatDate,formatDateMobile } from "$lib/js/date.js";
|
||||
|
||||
export let active = false;
|
||||
export let data;
|
||||
export let active = false;
|
||||
export let data;
|
||||
|
||||
const enterprise = data.enterprise;
|
||||
const location = data.enterprise_location;
|
||||
const description = data.job_description;
|
||||
const position = data.job_position;
|
||||
const end_year = data.end_year === null ? "" : formatDate(data.end_year);
|
||||
const start_year =
|
||||
data.start_year === null
|
||||
? ""
|
||||
: data.end_year === null
|
||||
? formatDate(data.start_year)
|
||||
: " - " + formatDate(data.start_year);
|
||||
const enterprise = data.enterprise;
|
||||
const location = data.enterprise_location;
|
||||
const description = data.job_description;
|
||||
const position = data.job_position;
|
||||
const end_year = data.end_year === null ? "" : formatDate(data.end_year);
|
||||
const start_year =
|
||||
data.start_year === null
|
||||
? ""
|
||||
: data.end_year === null
|
||||
? formatDate(data.start_year)
|
||||
: " - " + formatDate(data.start_year);
|
||||
const mobile_end_year =
|
||||
data.end_year === null ? "" : formatDateMobile(data.end_year);
|
||||
const mobile_start_year =
|
||||
data.start_year === null
|
||||
? ""
|
||||
: data.end_year === null
|
||||
? formatDateMobile(data.start_year)
|
||||
: "-" + formatDateMobile(data.start_year);
|
||||
const picture = data.picture_url;
|
||||
|
||||
// mobile version
|
||||
let windowWidth = 0;
|
||||
</script>
|
||||
|
||||
<svelte:window bind:innerWidth={windowWidth} />
|
||||
|
||||
<div class="slide-container">
|
||||
<div class="slide-main {active ? '' : 'slide-unactive'}">
|
||||
<div class="slide-img-container">
|
||||
<img class="slide-img" src={picture} alt="Experience" />
|
||||
</div>
|
||||
<div class="slide-text-container">
|
||||
<h1 class="slide-title">{position}</h1>
|
||||
<div class="slide-img-mobile-container">
|
||||
<img class="slide-img-mobile" src={picture} alt="Experience" />
|
||||
</div>
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{enterprise}
|
||||
</p>
|
||||
</div>
|
||||
{#if location}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{location}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if description}
|
||||
<div class="slide-subtitle-container">
|
||||
<p class="slide-subtitle">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="slide-main {active ? '' : 'slide-unactive'}">
|
||||
<div class="slide-img-container">
|
||||
<img class="slide-img" src={picture} alt="Experience" />
|
||||
</div>
|
||||
<div class="slide-time">
|
||||
<div class="slide-bubble" />
|
||||
<h2 class="slide-date">{`${end_year}${start_year}`}</h2>
|
||||
<div class="slide-text-container">
|
||||
<h1 class="slide-title">{position}</h1>
|
||||
<div class="slide-img-mobile-container">
|
||||
<img class="slide-img-mobile" src={picture} alt="Experience" />
|
||||
</div>
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiOfficeBuilding} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{enterprise}
|
||||
</p>
|
||||
</div>
|
||||
{#if location}
|
||||
<div class="slide-subtitle-container">
|
||||
<SvgIcon size="35" path={mdiMapMarker} type="mdi" />
|
||||
<p class="slide-subtitle slide-aftericon">
|
||||
{location}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
{#if description}
|
||||
<div class="slide-subtitle-container">
|
||||
<p class="slide-subtitle">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-time">
|
||||
<div class="slide-bubble" />
|
||||
<h2 class="slide-date">{`${windowWidth > 1000 ? end_year : mobile_end_year}${windowWidth > 1000 ? start_year : mobile_start_year}`}</h2>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@
|
|||
</p>
|
||||
</div>
|
||||
<div class="slide-subtitle-container">
|
||||
<p class="slide-subtitle slide-text slide-overflow slide-o2 slide-justify">
|
||||
<p class="slide-subtitle slide-text slide-overflow slide-justify">
|
||||
{description}
|
||||
</p>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -73,6 +73,11 @@
|
|||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
/* Add it to any text that may overflow. (long texts)*/
|
||||
.slide-text {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px)
|
||||
|
|
@ -88,7 +93,7 @@
|
|||
border-radius: 0.4rem;
|
||||
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
|
||||
background-color: var(--color-background);
|
||||
height: 70dvh;
|
||||
height: 60dvh;
|
||||
width: 90dvw;
|
||||
margin-left: 5dvw;
|
||||
z-index: 1;
|
||||
|
|
@ -98,13 +103,15 @@
|
|||
.slide-img-mobile-container {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
height: 30dvh;
|
||||
}
|
||||
|
||||
.slide-img-mobile {
|
||||
max-width: 76dvw;
|
||||
max-height: 30dvh;
|
||||
max-height: 100%;
|
||||
margin-top: 1.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.slide-img-container{
|
||||
|
|
@ -117,7 +124,7 @@
|
|||
color: var(--color-text);
|
||||
font-family: 'Gabarito', sans-serif;
|
||||
font-weight: 600;
|
||||
font-size: 2rem;
|
||||
font-size: 3vmax;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
|
@ -126,7 +133,7 @@
|
|||
color: var(--color-text);
|
||||
font-family: 'Gabarito', sans-serif;
|
||||
font-weight: 500;
|
||||
font-size: 1.25rem;
|
||||
font-size: 1.75vmax;
|
||||
margin-top: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
|
|
@ -149,6 +156,18 @@
|
|||
right: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slide-text {
|
||||
font-size: 1.5vmax;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-overflow {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.slide-subtitle-container {
|
||||
|
|
@ -166,37 +185,6 @@
|
|||
text-align: justify;
|
||||
text-justify:auto;
|
||||
}
|
||||
/* Add it to any text that may overflow. (long texts)*/
|
||||
.slide-text {
|
||||
font-size: 1.25rem !important;
|
||||
}
|
||||
|
||||
.slide-overflow {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.slide-o1 {
|
||||
-webkit-line-clamp: 1;
|
||||
}
|
||||
|
||||
.slide-o2 {
|
||||
-webkit-line-clamp: 2;
|
||||
}
|
||||
|
||||
.slide-o3 {
|
||||
-webkit-line-clamp: 3;
|
||||
}
|
||||
|
||||
.slide-o4 {
|
||||
-webkit-line-clamp: 4;
|
||||
}
|
||||
|
||||
.slide-o5 {
|
||||
-webkit-line-clamp: 5;
|
||||
}
|
||||
|
||||
/* Every button are centered to the right side of the component */
|
||||
.slide-button {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,13 @@ export function formatDate(date) {
|
|||
return formattedDate;
|
||||
}
|
||||
|
||||
export function formatDateMobile(date) {
|
||||
const options = { month: 'numeric', year: 'numeric' };
|
||||
const cool_date = new Date(date);
|
||||
const formattedDate = cool_date.toLocaleString('fr-FR', options);
|
||||
return formattedDate;
|
||||
}
|
||||
|
||||
export function formatMonth(date) {
|
||||
const options = { month: 'long', year: 'numeric' };
|
||||
const cool_date = new Date(date);
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue