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

Frontend: Adapted popup for mobile devices.

Browse source
This commit is contained in:
Yohan Boujon 2024-01-31 22:16:04 +01:00
parent f8ec7e427d
commit ea8053bf84
3 changed files with 150 additions and 66 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -112,7 +112,7 @@
<div class="project-popup-container"> <div class="project-popup-container">
<!-- Information --> <!-- Information -->
<div class="prout"> <div>
<h1 class="slide-title">{title}</h1> <h1 class="slide-title">{title}</h1>
<div class="project-popup-img-container"> <div class="project-popup-img-container">
<img class="project-popup-img" src={picture} alt="Project Popup" /> <img class="project-popup-img" src={picture} alt="Project Popup" />
@ -132,9 +132,16 @@
<p class="project-popup-subtitle slide-aftericon">{type_project}</p> <p class="project-popup-subtitle slide-aftericon">{type_project}</p>
</div> </div>
</div> </div>
<div class="popup-mobile">
<div class="popup-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>
<!-- Links --> <!-- Links -->
{#if report_link != null || github_link != null || archive_link != null || application_link != null} {#if report_link != null || github_link != null || archive_link != null || application_link != null}
<div class="slide-subtitle-container"> <div class="popup-subtitle-container">
<SvgIcon size="35" path={mdiLink} type="mdi" /> <SvgIcon size="35" path={mdiLink} type="mdi" />
<p class="slide-subtitle slide-aftericon">Links</p> <p class="slide-subtitle slide-aftericon">Links</p>
</div> </div>
@ -183,11 +190,11 @@
{/if} {/if}
<!-- Tags --> <!-- Tags -->
{#if filteredTags.length != 0} {#if filteredTags.length != 0}
<div class="slide-subtitle-container"> <div class="popup-subtitle-container">
<SvgIcon size="35" path={mdiTag} type="mdi" /> <SvgIcon size="35" path={mdiTag} type="mdi" />
<p class="slide-subtitle slide-aftericon">Tags</p> <p class="slide-subtitle slide-aftericon">Tags</p>
</div> </div>
<div class="project-popup-link-container"> <div class="project-popup-link-container project-popup-tag-container">
{#each filteredTags as tag} {#each filteredTags as tag}
<Pill <Pill
name={tag.lang} name={tag.lang}
@ -201,8 +208,8 @@
{/if} {/if}
</div> </div>
<!-- Text --> <!-- Text -->
<div> <div class="popup-desktop">
<div class="slide-subtitle-container"> <div class="popup-subtitle-container">
<SvgIcon size="35" path={mdiTextBox} type="mdi" /> <SvgIcon size="35" path={mdiTextBox} type="mdi" />
<p class="slide-subtitle slide-aftericon">Description</p> <p class="slide-subtitle slide-aftericon">Description</p>
</div> </div>

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

@ -15,7 +15,6 @@
formatMonth(data.date_done).charAt(0).toUpperCase() + formatMonth(data.date_done).charAt(0).toUpperCase() +
formatMonth(data.date_done).slice(1); formatMonth(data.date_done).slice(1);
const project_type = data.type_project; const project_type = data.type_project;
let picture;
onMount(async () => { onMount(async () => {
popupDatas.update((value) => { popupDatas.update((value) => {
@ -33,7 +32,7 @@
<div class="slide-text-container"> <div class="slide-text-container">
<h1 class="slide-title">{title}</h1> <h1 class="slide-title">{title}</h1>
<div class="slide-img-mobile-container"> <div class="slide-img-mobile-container">
<img class="slide-img-mobile" src={picture} alt="Projects" /> <img class="slide-img-mobile" src={data.picture_name} alt="Projects" />
</div> </div>
<div class="slide-subtitle-container"> <div class="slide-subtitle-container">
<SvgIcon size="35" path={mdiCalendarRange} type="mdi" /> <SvgIcon size="35" path={mdiCalendarRange} type="mdi" />

194
frontend/src/lib/css/project-popup.css
View file

@ -1,17 +1,139 @@
#project-popup-main { @media screen and (min-width: 1000px) {
height: 80dvh; #project-popup-main {
/* 100-height/2 */ height: 80dvh;
top: calc(10vh - 1.5rem); /* 100-height/2 */
width: 60dvw; top: calc(10vh - 1.5rem);
/* 100-width/2 */ width: 60dvw;
left: calc(20vw - 1.5rem); /* 100-width/2 */
border-radius: 0.4rem; left: calc(20vw - 1.5rem);
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2); border-radius: 0.4rem;
position: fixed; box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
background-color: var(--color-background); position: fixed;
z-index: 5; background-color: var(--color-background);
padding: 1.5rem; z-index: 5;
visibility: hidden; padding: 1.5rem;
visibility: hidden;
}
.project-popup-container {
display: flex;
flex-direction: row;
}
/* style for child of container */
.project-popup-container>div {
width: 50%;
margin: 0.5rem;
padding-left: 1rem;
padding-right: 1rem;
overflow-y: auto;
overflow-x: hidden;
height: 80dvh;
}
.project-popup-img {
max-height: 16rem;
max-width: 40dvh;
margin-top: 1.5rem;
margin-bottom: 1rem;
object-fit: cover;
}
.popup-mobile {
display: none;
}
.project-popup-subinfo-container {
display: flex;
flex-direction: row;
border-radius: 0.4rem;
box-shadow: rgba(50, 50, 93, 0.15) 0px 13px 27px -2px, rgba(0, 0, 0, 0.2) 0px 8px 16px -4px;
padding: 0.4rem;
justify-content: center;
width: fit-content;
margin-bottom: 1rem;
}
.popup-subtitle-container {
display: flex;
flex-direction: row;
align-items: center;
}
}
@media screen and (max-width: 1000px) {
#project-popup-main {
height: 87dvh;
top: calc(13dvh - 1.5rem);
width: 100dvw;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
box-shadow: 0px 20px 50px -10px rgba(0, 0, 0, 0.2);
position: fixed;
background-color: var(--color-background);
z-index: 5;
padding-top: 1.5rem;
visibility: hidden;
}
.project-popup-container {
display: flex;
flex-direction: column;
}
/* style for child of container */
.project-popup-container>div {
/* 100% - paddingMain - paddingDiv - marginDiv*/
width: calc(100dvw - 2*(3rem));
padding-left: 3rem;
padding-right: 3rem;
height: 87dvh;
overflow-y: auto;
overflow-x: hidden;
}
.project-popup-img {
max-width: 76dvw;
max-height: 100%;
margin-top: 1.5rem;
margin-bottom: 1rem;
object-fit: cover;
}
.popup-desktop {
display: none;
}
.project-popup-subinfo-container {
display: flex;
flex-direction: row;
border-radius: 0.4rem;
box-shadow: rgba(50, 50, 93, 0.15) 0px 13px 27px -2px, rgba(0, 0, 0, 0.2) 0px 8px 16px -4px;
padding: 0.4rem;
justify-content: center;
align-items: center;
width: 100%;
margin-bottom: 1rem;
}
.popup-subtitle-container {
display: flex;
flex-direction: row;
align-items: center;
padding-top: 0.8rem;
padding-bottom: 0.4rem;
}
.project-popup-tag-container {
margin-bottom: 3rem !important;
}
}
.project-popup-link-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0.25rem;
} }
#project-popup-background { #project-popup-background {
@ -56,43 +178,6 @@
.project-popup-img-container { .project-popup-img-container {
display: flex; display: flex;
justify-content: center; justify-content: center;
height: 30dvh;
}
.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: 1rem;
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;
padding-left: 1rem;
padding-right: 1rem;
overflow-y : scroll;
overflow-x: hidden;
height: 80dvh;
}
.project-popup-subinfo-container {
display: flex;
flex-direction: row;
border-radius: 0.4rem;
box-shadow: rgba(50, 50, 93, 0.15) 0px 13px 27px -2px, rgba(0, 0, 0, 0.2) 0px 8px 16px -4px;
padding: 0.4rem;
justify-content: center;
width: fit-content;
margin-bottom: 1rem;
} }
.project-popup-subinfo-container>div { .project-popup-subinfo-container>div {
@ -105,13 +190,6 @@
text-align: justify; text-align: justify;
} }
.project-popup-link-container {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin-bottom: 0.25rem;
}
.project-popup-subtitle { .project-popup-subtitle {
color: var(--color-text); color: var(--color-text);
font-family: 'Gabarito', sans-serif; font-family: 'Gabarito', sans-serif;