Frontend: Added sliding for all objects. Removed buttons for mobile. Updated project button and added index.
This commit is contained in:
parent
96a8e4d23f
commit
26443d63ea
7 changed files with 79 additions and 50 deletions
6
frontend/package-lock.json
generated
6
frontend/package-lock.json
generated
|
|
@ -16,6 +16,7 @@
|
|||
"highlightjs-svelte": "^1.0.6",
|
||||
"sass": "^1.69.5",
|
||||
"simple-icons": "^9.21.0",
|
||||
"svelte-gestures": "^1.5.2",
|
||||
"svelte-markdown": "^0.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
|
@ -1883,6 +1884,11 @@
|
|||
"node": ">=16"
|
||||
}
|
||||
},
|
||||
"node_modules/svelte-gestures": {
|
||||
"version": "1.5.2",
|
||||
"resolved": "https://registry.npmjs.org/svelte-gestures/-/svelte-gestures-1.5.2.tgz",
|
||||
"integrity": "sha512-bXGFqpNAAYCM4XsxjaHMAoPQC3IRjrgGS+Sm/pE1ZftYu9gGRWvDF8g6cwl2b751R2kN1SwNEd6XV7zVh9mcew=="
|
||||
},
|
||||
"node_modules/svelte-hmr": {
|
||||
"version": "0.15.3",
|
||||
"resolved": "https://registry.npmjs.org/svelte-hmr/-/svelte-hmr-0.15.3.tgz",
|
||||
|
|
|
|||
|
|
@ -25,6 +25,7 @@
|
|||
"highlightjs-svelte": "^1.0.6",
|
||||
"sass": "^1.69.5",
|
||||
"simple-icons": "^9.21.0",
|
||||
"svelte-gestures": "^1.5.2",
|
||||
"svelte-markdown": "^0.4.1"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
|
||||
export let active = false;
|
||||
export let data;
|
||||
export let max = 0;
|
||||
export let actualnum = 0;
|
||||
|
||||
const title = data.title;
|
||||
const short_description = data.short_description;
|
||||
|
|
@ -55,6 +57,11 @@
|
|||
{short_description}
|
||||
</p>
|
||||
</div>
|
||||
<div class="slide-count-container">
|
||||
<div class="slide-count">
|
||||
{`${actualnum}/${max}`}
|
||||
</div>
|
||||
</div>
|
||||
<div class="slide-button-container">
|
||||
<button class="slide-button" on:click={() => showPopup(true, data.id)}>
|
||||
<SvgIcon size="20" path={mdiPlus} type="mdi" />
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { swipe } from "svelte-gestures";
|
||||
import SvgIcon from "@jamescoyle/svelte-icon";
|
||||
import { mdiArrowRight, mdiArrowLeft, mdiRestore } from "@mdi/js";
|
||||
import "$lib/css/slideshow.css";
|
||||
|
|
@ -16,6 +17,7 @@
|
|||
export let type;
|
||||
export let timeline = false;
|
||||
export let reverse = false;
|
||||
export let show_max_index = false;
|
||||
if (reverse) {
|
||||
data = data.reverse();
|
||||
}
|
||||
|
|
@ -163,6 +165,12 @@
|
|||
});
|
||||
}
|
||||
|
||||
// Mobile swipe
|
||||
function mobileSwipe(event) {
|
||||
if (slideshow_index > 0 || event.detail.direction == "left")
|
||||
slideCards(event.detail.direction == "left");
|
||||
}
|
||||
|
||||
async function changeSize() {
|
||||
if (timeline && !resizing) {
|
||||
resizing = true;
|
||||
|
|
@ -178,7 +186,12 @@
|
|||
|
||||
<svelte:window on:resize={changeSize} bind:innerWidth={windowWidth} />
|
||||
|
||||
<div class="slideshow" bind:this={slideshow}>
|
||||
<div
|
||||
class="slideshow"
|
||||
use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: "pan-y" }}
|
||||
on:swipe={mobileSwipe}
|
||||
bind:this={slideshow}
|
||||
>
|
||||
<button
|
||||
class={slideshow_index >= 1
|
||||
? "slideshow_btn"
|
||||
|
|
@ -208,10 +221,20 @@
|
|||
/>
|
||||
</button>
|
||||
{#each data as selected_data, index (index)}
|
||||
<svelte:component
|
||||
this={type}
|
||||
data={selected_data}
|
||||
active={index == slideshow_index ? true : false}
|
||||
/>
|
||||
{#if show_max_index}
|
||||
<svelte:component
|
||||
this={type}
|
||||
data={selected_data}
|
||||
active={index == slideshow_index ? true : false}
|
||||
max={data.length}
|
||||
actualnum={index + 1}
|
||||
/>
|
||||
{:else}
|
||||
<svelte:component
|
||||
this={type}
|
||||
data={selected_data}
|
||||
active={index == slideshow_index ? true : false}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -74,6 +74,10 @@
|
|||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.slide-count-container {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Add it to any text that may overflow. (long texts)*/
|
||||
.slide-text {
|
||||
font-size: 1.25rem !important;
|
||||
|
|
@ -160,6 +164,12 @@
|
|||
position: absolute;
|
||||
}
|
||||
|
||||
.slide-count-container {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.slide-text {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -210,24 +220,37 @@
|
|||
background-color: var(--color-special);
|
||||
font-family: 'Urbanist', sans-serif;
|
||||
font-weight: 700;
|
||||
border: 0.05rem solid;
|
||||
border-color: rgba(0, 0, 0, 0);
|
||||
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0px 8px 18px -1px #0174BE60;
|
||||
transition: all .3s ease 0s;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.slide-button:hover {
|
||||
color: var(--color-special);
|
||||
transition: all .3s ease 0s;
|
||||
background-color: var(--color-background);
|
||||
box-shadow: 0 0.7px 3px -1px rgba(150,170,180,0.5);
|
||||
border: 0.05rem solid;
|
||||
border-color: var(--color-special);
|
||||
color: var(--color-special);
|
||||
}
|
||||
|
||||
.slide-button:active {
|
||||
transform: translateY(0.25rem);
|
||||
background-color: var(--color-subtitle);
|
||||
transform: translateY(3px);
|
||||
box-shadow: 0px 4px 12px -1px #0174BE70;
|
||||
}
|
||||
|
||||
.slide-count {
|
||||
padding-right: 1rem;
|
||||
padding-left: 1rem;
|
||||
padding-top: 0.5rem;
|
||||
padding-bottom: 0.5rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-radius: 5rem;
|
||||
color: var(--color-text);
|
||||
background-color: var(--color-code);
|
||||
font-family: 'Urbanist', sans-serif;
|
||||
font-weight: 700;
|
||||
box-shadow: 0px 8px 18px -1px #261C2C60;
|
||||
}
|
||||
|
||||
/* Timeline stuff */
|
||||
|
|
|
|||
|
|
@ -5,8 +5,7 @@
|
|||
position: relative;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1000px)
|
||||
{
|
||||
@media screen and (min-width: 1000px) {
|
||||
.slideshow_btn {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
|
|
@ -40,45 +39,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1000px)
|
||||
{
|
||||
@media screen and (max-width: 1000px) {
|
||||
.slideshow_btn {
|
||||
z-index: 2;
|
||||
position: absolute;
|
||||
margin-right: 1rem;
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
background-color: var(--color-special);
|
||||
box-shadow: 0px 2px 5px -1px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: var(--color-background);
|
||||
border: 0;
|
||||
transition: all .3s ease 0s;
|
||||
cursor: pointer;
|
||||
top: calc(15rem - 4rem);
|
||||
right: 0;
|
||||
opacity: 100%;
|
||||
}
|
||||
|
||||
.slideshow_btn_center {
|
||||
top: 15rem;
|
||||
}
|
||||
|
||||
.slideshow_btn_low {
|
||||
top: calc(15rem + 4rem);
|
||||
}
|
||||
|
||||
.slideshow_btn_disabled {
|
||||
opacity: 0;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.slideshow_btn:hover {
|
||||
transform: translateY(-0.25rem);
|
||||
box-shadow: 0 0.7px 3px -1px rgba(150,170,180,0.5) !important;
|
||||
box-shadow: 0 0.7px 3px -1px rgba(150, 170, 180, 0.5) !important;
|
||||
}
|
||||
|
||||
.slideshow_btn:active {
|
||||
|
|
|
|||
|
|
@ -134,7 +134,7 @@
|
|||
reverse="true"
|
||||
/>
|
||||
<Section icon={mdiWrench} title={text.projects} />
|
||||
<SlideShow data={cv.skills.project} type={Projects} />
|
||||
<SlideShow data={cv.skills.project} type={Projects} show_max_index={true} />
|
||||
<Section icon={mdiPencil} title={text.skills} />
|
||||
<SubSection icon={mdiXml} title={text.programming_languages} />
|
||||
<div class="subsection">
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue