Etheryo/curriculum-vitae
1
0
Fork 0
Code Issues 2 Pull requests Projects Releases 1 Packages Wiki Activity Actions

Frontend: Added projects-popup component, added showPopup(), added popup writeable, added multiple slide sizes, adjusted z-indexes.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-27 23:24:43 +01:00
parent f023dd8e69
commit 5e9a8399fb
8 changed files with 264 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
frontend/src/lib/components/projects-popup.svelte Normal file
View file

@ -0,0 +1,81 @@
<script>
import { onDestroy } from "svelte";
import "$lib/css/project-popup.css";
import "$lib/css/slide.css";
import { showPopup, popupDatas } from "$lib/js/popup.js";
import SvgIcon from "@jamescoyle/svelte-icon";
import {
mdiClose,
mdiSchool,
mdiAccount,
mdiCalendarRange,
mdiTextBox,
} from "@mdi/js";
const unsubscribe = popupDatas.subscribe(popupShowed);
let title = "Title";
let date = "Date";
let type_project = "Type of project";
let picture;
let description = "Description";
async function popupShowed(data) {
/**
* Checking if when this function is called data is not equal to 0.
* It could call the next lines which involve modifying undeclared data
* or using import statements that cannot be fullfilled because the document
* is not yet loaded.
*/
if (data != 0) {
const superData = data;
title = superData.title;
date = data.date;
type_project = data.type_project;
picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
description = data.description;
}
}
onDestroy(() => {
unsubscribe();
});
</script>
<div id="project-popup-main">
<!--Closing button-->
<button class="project-popup-close" on:click={() => showPopup(false, null)}>
<SvgIcon size="25" path={mdiClose} type="mdi" />
</button>
<div class="project-popup-container">
<!-- Information -->
<div class="project-popup-info-container">
<h1 class="slide-title">{title}</h1>
<div class="project-popup-img-container">
<img class="project-popup-img" src={picture} alt="Project Popup" />
</div>
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
<p class="slide-subtitle slide-aftericon">{date}</p>
</div>
<div class="slide-subtitle-container">
<SvgIcon
size="35"
path={type_project == "School" ? mdiSchool : mdiAccount}
type="mdi"
/>
<p class="slide-subtitle slide-aftericon">{type_project}</p>
</div>
</div>
<!-- Text -->
<div class="project-popup-text-container">
<div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiTextBox} type="mdi" />
<p class="slide-subtitle slide-aftericon">Description</p>
</div>
<p class="slide-subtitle project-popup-text">{description}</p>
</div>
</div>
</div>
<div id="project-popup-background"></div>

26
frontend/src/lib/components/projects.svelte
View file

@ -4,22 +4,33 @@
import { mdiCalendarRange, mdiPlus, mdiAccount, mdiSchool } from "@mdi/js";
import "$lib/css/slide.css";
import { formatMonth } from "$lib/js/date.js";
import { showPopup } from "$lib/js/popup.js";
export let active = false;
export let data;
const title = data.title;
const description = data.description;
const issued_date = formatMonth(data.date_done).charAt(0).toUpperCase()+formatMonth(data.date_done).slice(1);
const issued_date =
formatMonth(data.date_done).charAt(0).toUpperCase() +
formatMonth(data.date_done).slice(1);
const project_type = data.type_project;
let picture;
const popDataObject = {
title: data.title,
date: issued_date,
type_project: data.type_project,
description: data.description,
picture_name: data.picture_name,
};
onMount(async () => {
picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
});
</script>
<div class="slide-container">
<div class="slide-main {active ? '' : 'slide-unactive'}">
<div class="slide-more slide-main {active ? '' : 'slide-unactive'}">
<div class="slide-img-container">
<img class="slide-img" src={picture} alt="Projects" />
</div>
@ -35,7 +46,11 @@
</p>
</div>
<div class="slide-subtitle-container">
<SvgIcon size="35" path={project_type == "School" ? mdiSchool : mdiAccount} type="mdi" />
<SvgIcon
size="35"
path={project_type == "School" ? mdiSchool : mdiAccount}
type="mdi"
/>
<p class="slide-subtitle slide-aftericon">
{project_type}
</p>
@ -46,7 +61,10 @@
</p>
</div>
<div class="slide-button-container">
<button class="slide-button">
<button
class="slide-button"
on:click={() => showPopup(true, popDataObject)}
>
<SvgIcon size="20" path={mdiPlus} type="mdi" />
More</button
>

2
frontend/src/lib/css/cv.css
View file

@ -67,7 +67,6 @@
display: flex;
height: 15rem;
background-color: var(--color-text);
z-index: 3;
justify-content: center;
align-items: center;
flex-direction: column;
@ -111,7 +110,6 @@
display: flex;
height: 20rem;
background-color: var(--color-text);
z-index: 3;
justify-content: center;
align-items: center;
flex-direction: column;

84
frontend/src/lib/css/project-popup.css Normal file
View file

@ -0,0 +1,84 @@
#project-popup-main {
height: 80dvh;
top: calc(10vh - 1.5rem);
/* 100-height/2 */
width: 50dvw;
left: calc(25vw - 1.5rem);
/* 100-width/2 */
border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
position: fixed;
background-color: var(--color-background);
z-index: 5;
padding: 1.5rem;
visibility: hidden;
}
#project-popup-background {
height: 100%;
width: 100%;
position: fixed;
background-color: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(1.5rem);
z-index: 4;
visibility: hidden;
}
.project-popup-close {
min-width: 2.2rem;
min-height: 2.2rem;
background-color: var(--color-background);
color: var(--color-text);
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 0;
position: absolute;
right: 0.5rem;
top: 0.5rem;
}
.project-popup-close:hover {
background-color: var(--color-special);
color: var(--color-background);
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
}
.project-popup-close:active {
background-color: var(--color-special);
color: var(--color-background);
box-shadow: 0px 3px 3px -1px rgba(0, 0, 0, 0.2);
transform: translateY(2px);
}
.project-popup-img-container {
display: flex;
justify-content: center;
height: 17.25rem;
}
.project-popup-img {
max-width: 20dvw;
/* Because the width of the popup is 50dvw and the picture has to take maximum half of the popup*/
max-height: 100%;
margin-top: 1.5rem;
margin-bottom: 1.5rem;
object-fit: cover;
}
.project-popup-container {
display: flex;
flex-direction: row;
}
/* style for child of container */
.project-popup-container>div {
width: 50%;
margin: 0.5rem;
}
.project-popup-text {
font-size: 1rem !important;
text-align: justify;
}

6
frontend/src/lib/css/slide.css
View file

@ -93,13 +93,17 @@
border-radius: 0.4rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background);
min-height: 35rem;
min-height: 30rem;
width: 90dvw;
margin-left: 5dvw;
z-index: 1;
transition: all .3s ease 0s;
}
.slide-more {
min-height: 37rem !important;
}
.slide-img-mobile-container {
display: flex;
justify-content: center;

4
frontend/src/lib/css/slideshow.css
View file

@ -8,7 +8,7 @@
@media screen and (min-width: 1000px)
{
.slideshow_btn {
z-index: 5;
z-index: 3;
position: absolute;
right: 0;
margin-right: 2.5rem;
@ -29,7 +29,7 @@
@media screen and (max-width: 1000px)
{
.slideshow_btn {
z-index: 5;
z-index: 3;
position: absolute;
right: 0;
margin-right: 1rem;

24
frontend/src/lib/js/popup.js Normal file
View file

@ -0,0 +1,24 @@
import {writable} from 'svelte/store';
export function showPopup(show, popupObject) {
const background = document.getElementById('project-popup-background');
const mainPopup = document.getElementById('project-popup-main');
const body = document.getElementsByTagName('body');
if (show === true) {
body[0].style.overflow = 'hidden';
background.style.visibility = 'visible';
mainPopup.style.visibility = 'visible';
} else {
body[0].style.overflow = '';
background.style.visibility = 'hidden';
mainPopup.style.visibility = 'hidden';
}
if (popupObject != null) {
popupDatas.update(() => {
return popupObject;
});
}
}
export let popupDatas = writable(0);

2
frontend/src/routes/+page.svelte
View file

@ -29,6 +29,7 @@
import SlideShow from "$lib/components/slideshow.svelte";
import Pill from "$lib/components/pill.svelte"
import FlagComponent from "$lib/components/flag-component.svelte"
import ProjectsPopup from "$lib/components/projects-popup.svelte"
import { mdiSchool, mdiBriefcase, mdiWrench, mdiPencil } from "@mdi/js";
import { onMount } from "svelte";
@ -75,6 +76,7 @@
<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
{#if data.status == 0}
<ProjectsPopup/>
<div class="container-cv">
<!-- SIDEBAR DIV (LEFT) -->
<div class="sidebar" bind:this={sidebar}>