Frontend: Added projects-popup component, added showPopup(), added popup writeable, added multiple slide sizes, adjusted z-indexes.
This commit is contained in:
parent
f023dd8e69
commit
5e9a8399fb
8 changed files with 264 additions and 53 deletions
81
frontend/src/lib/components/projects-popup.svelte
Normal file
81
frontend/src/lib/components/projects-popup.svelte
Normal 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>
|
||||||
|
|
@ -1,56 +1,74 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||||
import { mdiCalendarRange, mdiPlus, mdiAccount, mdiSchool } from "@mdi/js";
|
import { mdiCalendarRange, mdiPlus, mdiAccount, mdiSchool } from "@mdi/js";
|
||||||
import "$lib/css/slide.css";
|
import "$lib/css/slide.css";
|
||||||
import { formatMonth } from "$lib/js/date.js";
|
import { formatMonth } from "$lib/js/date.js";
|
||||||
|
import { showPopup } from "$lib/js/popup.js";
|
||||||
|
|
||||||
export let active = false;
|
export let active = false;
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
const title = data.title;
|
const title = data.title;
|
||||||
const description = data.description;
|
const description = data.description;
|
||||||
const issued_date = formatMonth(data.date_done).charAt(0).toUpperCase()+formatMonth(data.date_done).slice(1);
|
const issued_date =
|
||||||
const project_type = data.type_project;
|
formatMonth(data.date_done).charAt(0).toUpperCase() +
|
||||||
let picture;
|
formatMonth(data.date_done).slice(1);
|
||||||
onMount(async () => {
|
const project_type = data.type_project;
|
||||||
picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
|
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>
|
</script>
|
||||||
|
|
||||||
<div class="slide-container">
|
<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">
|
<div class="slide-img-container">
|
||||||
<img class="slide-img" src={picture} alt="Projects" />
|
<img class="slide-img" src={picture} alt="Projects" />
|
||||||
</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="Projects" />
|
|
||||||
</div>
|
|
||||||
<div class="slide-subtitle-container">
|
|
||||||
<SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
|
|
||||||
<p class="slide-subtitle slide-aftericon">
|
|
||||||
{issued_date}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide-subtitle-container">
|
|
||||||
<SvgIcon size="35" path={project_type == "School" ? mdiSchool : mdiAccount} type="mdi" />
|
|
||||||
<p class="slide-subtitle slide-aftericon">
|
|
||||||
{project_type}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide-subtitle-container">
|
|
||||||
<p class="slide-subtitle slide-text slide-overflow slide-justify">
|
|
||||||
{description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="slide-button-container">
|
|
||||||
<button class="slide-button">
|
|
||||||
<SvgIcon size="20" path={mdiPlus} type="mdi" />
|
|
||||||
More</button
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</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="Projects" />
|
||||||
|
</div>
|
||||||
|
<div class="slide-subtitle-container">
|
||||||
|
<SvgIcon size="35" path={mdiCalendarRange} type="mdi" />
|
||||||
|
<p class="slide-subtitle slide-aftericon">
|
||||||
|
{issued_date}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="slide-subtitle-container">
|
||||||
|
<SvgIcon
|
||||||
|
size="35"
|
||||||
|
path={project_type == "School" ? mdiSchool : mdiAccount}
|
||||||
|
type="mdi"
|
||||||
|
/>
|
||||||
|
<p class="slide-subtitle slide-aftericon">
|
||||||
|
{project_type}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="slide-subtitle-container">
|
||||||
|
<p class="slide-subtitle slide-text slide-overflow slide-justify">
|
||||||
|
{description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="slide-button-container">
|
||||||
|
<button
|
||||||
|
class="slide-button"
|
||||||
|
on:click={() => showPopup(true, popDataObject)}
|
||||||
|
>
|
||||||
|
<SvgIcon size="20" path={mdiPlus} type="mdi" />
|
||||||
|
More</button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -67,7 +67,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 15rem;
|
height: 15rem;
|
||||||
background-color: var(--color-text);
|
background-color: var(--color-text);
|
||||||
z-index: 3;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
@ -111,7 +110,6 @@
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 20rem;
|
height: 20rem;
|
||||||
background-color: var(--color-text);
|
background-color: var(--color-text);
|
||||||
z-index: 3;
|
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
||||||
84
frontend/src/lib/css/project-popup.css
Normal file
84
frontend/src/lib/css/project-popup.css
Normal 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;
|
||||||
|
}
|
||||||
|
|
@ -93,13 +93,17 @@
|
||||||
border-radius: 0.4rem;
|
border-radius: 0.4rem;
|
||||||
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
|
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
|
||||||
background-color: var(--color-background);
|
background-color: var(--color-background);
|
||||||
min-height: 35rem;
|
min-height: 30rem;
|
||||||
width: 90dvw;
|
width: 90dvw;
|
||||||
margin-left: 5dvw;
|
margin-left: 5dvw;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
transition: all .3s ease 0s;
|
transition: all .3s ease 0s;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.slide-more {
|
||||||
|
min-height: 37rem !important;
|
||||||
|
}
|
||||||
|
|
||||||
.slide-img-mobile-container {
|
.slide-img-mobile-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@
|
||||||
@media screen and (min-width: 1000px)
|
@media screen and (min-width: 1000px)
|
||||||
{
|
{
|
||||||
.slideshow_btn {
|
.slideshow_btn {
|
||||||
z-index: 5;
|
z-index: 3;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-right: 2.5rem;
|
margin-right: 2.5rem;
|
||||||
|
|
@ -29,7 +29,7 @@
|
||||||
@media screen and (max-width: 1000px)
|
@media screen and (max-width: 1000px)
|
||||||
{
|
{
|
||||||
.slideshow_btn {
|
.slideshow_btn {
|
||||||
z-index: 5;
|
z-index: 3;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
margin-right: 1rem;
|
margin-right: 1rem;
|
||||||
|
|
|
||||||
24
frontend/src/lib/js/popup.js
Normal file
24
frontend/src/lib/js/popup.js
Normal 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);
|
||||||
|
|
@ -29,6 +29,7 @@
|
||||||
import SlideShow from "$lib/components/slideshow.svelte";
|
import SlideShow from "$lib/components/slideshow.svelte";
|
||||||
import Pill from "$lib/components/pill.svelte"
|
import Pill from "$lib/components/pill.svelte"
|
||||||
import FlagComponent from "$lib/components/flag-component.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 { mdiSchool, mdiBriefcase, mdiWrench, mdiPencil } from "@mdi/js";
|
||||||
import { onMount } from "svelte";
|
import { onMount } from "svelte";
|
||||||
|
|
||||||
|
|
@ -75,6 +76,7 @@
|
||||||
<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
|
<svelte:window bind:scrollY bind:innerHeight bind:innerWidth on:scroll={sidebarScrollingHandler} on:resize={mobileCheck} />
|
||||||
|
|
||||||
{#if data.status == 0}
|
{#if data.status == 0}
|
||||||
|
<ProjectsPopup/>
|
||||||
<div class="container-cv">
|
<div class="container-cv">
|
||||||
<!-- SIDEBAR DIV (LEFT) -->
|
<!-- SIDEBAR DIV (LEFT) -->
|
||||||
<div class="sidebar" bind:this={sidebar}>
|
<div class="sidebar" bind:this={sidebar}>
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue