From 3b4a98b22f8e5ef000437b1a248527e78d80110e Mon Sep 17 00:00:00 2001
From: Yohan Boujon <yo.boujon@gmail.com>
Date: Wed, 7 Feb 2024 21:56:41 +0100
Subject: [PATCH] Frontend: Added mailto link, changing mail display, fixed
 sliding.

---
 .../lib/components/sidebar-component.svelte   | 33 +++++++++++--------
 frontend/src/lib/components/sidebar.svelte    |  2 +-
 frontend/src/lib/components/slideshow.svelte  |  2 +-
 frontend/src/lib/css/sidebar-component.css    |  2 ++
 4 files changed, 24 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/sidebar-component.svelte b/frontend/src/lib/components/sidebar-component.svelte
index 407ce11..a273003 100644
--- a/frontend/src/lib/components/sidebar-component.svelte
+++ b/frontend/src/lib/components/sidebar-component.svelte
@@ -1,20 +1,27 @@
 <script>
-    import "$lib/css/sidebar-component.css";
-    import SvgIcon from '@jamescoyle/svelte-icon'
-    import { mdiHelpCircle } from '@mdi/js';
+  import "$lib/css/sidebar-component.css";
+  import SvgIcon from "@jamescoyle/svelte-icon";
+  import { mdiHelpCircle } from "@mdi/js";
 
-    export let icon = mdiHelpCircle;
-    export let title = "";
-    export let description = "";
-    const descriptionArray = description.split(";");
+  export let icon = mdiHelpCircle;
+  export let title = "";
+  export let description = "";
+  export let maito = false;
+  const descriptionArray = description.split(";");
 </script>
 
 <div class="sc-container">
-    <div class="sc-icon">
-        <SvgIcon size="45" path={icon} type="mdi"/>
-    </div>
-    <h1 class="text sc-title">{title}</h1>
+  <div class="sc-icon">
+    <SvgIcon size="45" path={icon} type="mdi" />
+  </div>
+  <h1 class="text sc-title">{title}</h1>
+  {#if maito}
+    <a class="text sc-description" href={`mailto:${description}`}
+      >{description.replace("@", "[at]")}</a
+    >
+  {:else}
     {#each descriptionArray as text}
-        <h2 class="text sc-description">{text}</h2>
+      <h2 class="text sc-description">{text}</h2>
     {/each}
-</div>
\ No newline at end of file
+  {/if}
+</div>
diff --git a/frontend/src/lib/components/sidebar.svelte b/frontend/src/lib/components/sidebar.svelte
index 30f4e84..05994b4 100644
--- a/frontend/src/lib/components/sidebar.svelte
+++ b/frontend/src/lib/components/sidebar.svelte
@@ -91,7 +91,7 @@
         <SidebarComponent icon={mdiAccount} description={birth_year} />
       {/if}
       {#if info.email != null}
-        <SidebarComponent icon={mdiEmailOutline} description={info.email} />
+        <SidebarComponent icon={mdiEmailOutline} description={info.email} maito="true"/>
       {/if}
       {#if info.phone_number != null}
         <SidebarComponent icon={mdiPhone} description={info.phone_number} />
diff --git a/frontend/src/lib/components/slideshow.svelte b/frontend/src/lib/components/slideshow.svelte
index 836091e..b1a1263 100644
--- a/frontend/src/lib/components/slideshow.svelte
+++ b/frontend/src/lib/components/slideshow.svelte
@@ -181,7 +181,7 @@
 
 <div
   class="slideshow"
-  use:swipe={{ timeframe: 300, minSwipeDistance: 100, touchAction: "pan-y" }}
+  use:swipe={{ timeframe: 3000, minSwipeDistance: 10, touchAction: "pan-y" }}
   on:swipe={mobileSwipe}
   bind:this={slideshow}
 >
diff --git a/frontend/src/lib/css/sidebar-component.css b/frontend/src/lib/css/sidebar-component.css
index 452a884..240d7bf 100644
--- a/frontend/src/lib/css/sidebar-component.css
+++ b/frontend/src/lib/css/sidebar-component.css
@@ -32,4 +32,6 @@
     font-weight: 500;
     font-size: 1.2rem;
     margin-bottom: 0.25rem;
+    display: block;
+    text-decoration: none;
 }
\ No newline at end of file