Backend: Updated database for Education with a picture URL. Frontend: Slideshow logic is now independent of the width of each slide.

backend/src/db.rs

@@ -21,6 +21,7 @@ pub struct Education {
     pub speciality: Option<String>,
     pub school_location: Option<String>,
     pub school_options: Option<String>,
+    pub picture_url: Option<String>
 }
 
 #[derive(Deserialize, Serialize)]

backend/src/main.rs

@@ -51,7 +51,7 @@ async fn info(State(pool): State<PgPool>) -> Result<Json<Vec<Info>>> {
 async fn education(State(pool): State<PgPool>) -> Result<Json<Vec<Education>>> {
     let datas = sqlx::query_as!(
         Education,
-        "SELECT id, start_year, end_year, school, speciality, school_location, school_options FROM public.education"
+        "SELECT * FROM public.education"
     )
     .fetch_all(&pool)
     .await?;

frontend/src/lib/components/education.svelte

@@ -5,13 +5,12 @@
 
     export let active = false;
     export let data;
-    export let picture =
-        "https://bib.insa-toulouse.fr/_resource/info_pratiques/INSA-Venir-Bib-photo-8_0.jpg";
     
     const title = data.school;
     const location = data.school_location;
     const speciality = data.speciality;
     const option = data.school_options;
+    const picture = data.picture_url;
 </script>
 
 <div class="education-main {active ? '' : 'education-unactive'}">

frontend/src/lib/components/slideshow.svelte

@@ -17,14 +17,16 @@
             slideshow_hidden.push(slideshow_index);
             slideshow_index++;
         }
-        let transformValue;
-        slideshowElements.forEach((element, id) => {
-            if (slideshow_hidden.includes(id)) {
-                transformValue = slideshow_index * 60;
-            } else {
-                transformValue = slideshow_index * 54.75;
+        let transformValue = 0;
+        for (const id of slideshow_hidden) {
+                transformValue += (slideshowElements[id].clientWidth+(5*16));
             }
-            element.style.transform = `translateX(-${transformValue}rem)`;
+        slideshowElements.forEach((element, id) => {
+            let newtransformValue = transformValue;
+            if(slideshow_hidden.includes(id)) {
+                newtransformValue*=1.1;
+            }
+            element.style.transform = `translateX(-${newtransformValue}px)`;
         });
     }
 </script>

frontend/src/lib/css/education.css

@@ -18,7 +18,8 @@
 }
 
 .education-img {
-    max-height: 12.5rem;
+    max-height: 15rem;
+    min-width: 20rem;
 }
 
 .education-text-container {