Frontend: Fixed some CSS. Backend: Added project_type field.

backend/db/project.sql

@@ -12,6 +12,7 @@ CREATE TABLE public.project (
 	github_link text NULL,
 	id_skills serial4 NOT NULL,
 	picture_name text NULL,
+	type_project text NULL,
 	CONSTRAINT project_pkey PRIMARY KEY (id),
 	CONSTRAINT project_fk FOREIGN KEY (id_skills) REFERENCES public.skills(id)
 );

backend/src/db.rs

@@ -44,7 +44,8 @@ pub struct Project {
     pub description: Option<String>,
     pub github_link: Option<String>,
     pub id_skills: i64,
-    pub picture_name: Option<String>
+    pub picture_name: Option<String>,
+    pub type_project: Option<String>
 }
 
 #[derive(Deserialize, Serialize)]

frontend/src/lib/components/projects.svelte

@@ -1,7 +1,7 @@
 <script>
     import { onMount } from "svelte";
     import SvgIcon from "@jamescoyle/svelte-icon";
-    import { mdiCalendarRange, mdiPlus } from "@mdi/js";
+    import { mdiCalendarRange, mdiPlus, mdiAccount, mdiSchool } from "@mdi/js";
     import "$lib/css/slide.css";
     import { formatMonth } from "$lib/js/date.js";
 
@@ -11,6 +11,7 @@
     const title = data.title;
     const description = data.description;
     const issued_date = formatMonth(data.date_done).charAt(0).toUpperCase()+formatMonth(data.date_done).slice(1);
+    const project_type = data.type_project;
     let picture;
     onMount(async () => {
         picture = (await import(`/src/lib/img/${data.picture_name}`)).default;
@@ -31,7 +32,13 @@
                 </p>
             </div>
             <div class="slide-subtitle-container">
-                <p class="slide-subtitle slide-text">
+                <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-o2 slide-justify">
                     {description}
                 </p>
             </div>

frontend/src/lib/css/slide.css

@@ -46,6 +46,7 @@
     font-family: 'Gabarito', sans-serif;
     font-weight: 600;
     font-size: 2rem;
+    margin-bottom: 0.5rem;
 }
 
 .slide-subtitle-container {
@@ -68,20 +69,44 @@
     margin-top: 0.75rem;
     margin-bottom: 0.75rem;
     width: 100%;
-    text-align: justify;
-    text-justify: auto;
 }
 
+.slide-justify {
+    text-align: justify;
+    text-justify:auto;
+}
 /* Add it to any text that may overflow. (long texts)*/
 .slide-text {
     font-size: 1.25rem !important;
+}
+
+.slide-overflow {
     overflow: hidden;
     display: -webkit-box;
-    -webkit-line-clamp: 4;
     -webkit-box-orient: vertical;
     text-overflow: ellipsis;
 }
 
+.slide-o1 {
+    -webkit-line-clamp: 1;
+}
+
+.slide-o2 {
+    -webkit-line-clamp: 2;
+}
+
+.slide-o3 {
+    -webkit-line-clamp: 3;
+}
+
+.slide-o4 {
+    -webkit-line-clamp: 4;
+}
+
+.slide-o5 {
+    -webkit-line-clamp: 5;
+}
+
 /* For button at the end of the container*/
 .slide-button-container {
     display: flex;