From 97078054982ef567ceb7214bf9a5ed0de76e3031 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Duarte?= Date: Wed, 9 Aug 2023 16:06:51 +0100 Subject: [PATCH 1/5] HTML first prototype --- src/lib/layout/HorizontalTimeline.svelte | 26 ++++++++++++++++++++++++ src/routes/team/+page.svelte | 8 ++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/lib/layout/HorizontalTimeline.svelte create mode 100644 src/routes/team/+page.svelte diff --git a/src/lib/layout/HorizontalTimeline.svelte b/src/lib/layout/HorizontalTimeline.svelte new file mode 100644 index 00000000..3f5aab99 --- /dev/null +++ b/src/lib/layout/HorizontalTimeline.svelte @@ -0,0 +1,26 @@ + + +
+ +
+ +
+
+

19/20

+
+
+
+
+

20/21

+
+
+
+
+

21/22

+
+
+
+
+
\ No newline at end of file diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte new file mode 100644 index 00000000..ef99f195 --- /dev/null +++ b/src/routes/team/+page.svelte @@ -0,0 +1,8 @@ + +
+

< Equipa />

+ +
\ No newline at end of file From 9facec36651288a296cd30ef2d0e9731949d9b46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Duarte?= Date: Sun, 24 Sep 2023 23:00:25 +0100 Subject: [PATCH 2/5] Finish prototype of horizontaltimeline --- src/lib/component/Icons.ts | 7 +- src/lib/layout/HorizontalTimeline.stories.ts | 19 ++++++ src/lib/layout/HorizontalTimeline.svelte | 71 ++++++++++++++------ src/model/Generation.ts | 3 + 4 files changed, 80 insertions(+), 20 deletions(-) create mode 100644 src/lib/layout/HorizontalTimeline.stories.ts create mode 100644 src/model/Generation.ts diff --git a/src/lib/component/Icons.ts b/src/lib/component/Icons.ts index 888fb701..1cfa03a8 100644 --- a/src/lib/component/Icons.ts +++ b/src/lib/component/Icons.ts @@ -8,6 +8,8 @@ import FaSolidUser from 'svelte-icons-pack/fa/FaSolidUser'; import FaBars from 'svelte-icons-pack/fa/FaSolidBars'; import FaTimes from 'svelte-icons-pack/fa/FaSolidTimes'; import FaSolidGlobe from 'svelte-icons-pack/fa/FaSolidGlobe'; +import CgChevronLeft from "svelte-icons-pack/cg/CgChevronLeft"; +import CgChevronRight from "svelte-icons-pack/cg/CgChevronRight"; const Icons = { Instagram: FaBrandsInstagram, @@ -19,7 +21,10 @@ const Icons = { User: FaSolidUser, Bars: FaBars, Times: FaTimes, - Globe: FaSolidGlobe + Globe: FaSolidGlobe, + AngleRight: CgChevronRight, + AngleLeft: CgChevronLeft + }; export default Icons; diff --git a/src/lib/layout/HorizontalTimeline.stories.ts b/src/lib/layout/HorizontalTimeline.stories.ts new file mode 100644 index 00000000..a4fc4920 --- /dev/null +++ b/src/lib/layout/HorizontalTimeline.stories.ts @@ -0,0 +1,19 @@ +import HorizontalTimeline from "./HorizontalTimeline.svelte" + +export default { + title: 'Atoms/Timelines/HorizontalTimeline', + component: HorizontalTimeline, + +}; + +export const HorizontalTimelineArea = { + args : { + generations: [ + {schoolYear: "18/19"}, + {schoolYear: "19/20"}, + {schoolYear: "20/21"}, + {schoolYear: "21/22"}, + {schoolYear: "22/23"}, + ] + } +}; \ No newline at end of file diff --git a/src/lib/layout/HorizontalTimeline.svelte b/src/lib/layout/HorizontalTimeline.svelte index 3f5aab99..b38b499b 100644 --- a/src/lib/layout/HorizontalTimeline.svelte +++ b/src/lib/layout/HorizontalTimeline.svelte @@ -1,26 +1,59 @@ -
- -
- -
-
-

19/20

-
-
-
-
-

20/21

-
-
-
-
-

21/22

-
-
+
+ +
+ +
+ +
+ {#each displayedGenerations as generation} + {#if generation == selectedGeneration} + + {:else} + + {/if} + {/each}
+
\ No newline at end of file diff --git a/src/model/Generation.ts b/src/model/Generation.ts new file mode 100644 index 00000000..961bf286 --- /dev/null +++ b/src/model/Generation.ts @@ -0,0 +1,3 @@ +export type Generation = { + schoolYear: String +}; \ No newline at end of file From 911837708c73d23c582eb7d0ad8ab1c3084dcfa2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Duarte?= Date: Sun, 24 Sep 2023 23:01:00 +0100 Subject: [PATCH 3/5] Change team page --- src/routes/team/+page.svelte | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte index ef99f195..8df62203 100644 --- a/src/routes/team/+page.svelte +++ b/src/routes/team/+page.svelte @@ -4,5 +4,13 @@

< Equipa />

- +
\ No newline at end of file From 5fe76681403a2c7c3444b9650aa010e2312d0a17 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Duarte?= Date: Tue, 10 Oct 2023 09:37:42 +0100 Subject: [PATCH 4/5] Make arrows have different colors when it reaches one of the ends --- src/lib/layout/HorizontalTimeline.svelte | 110 ++++++++++++----------- 1 file changed, 60 insertions(+), 50 deletions(-) diff --git a/src/lib/layout/HorizontalTimeline.svelte b/src/lib/layout/HorizontalTimeline.svelte index b38b499b..527aa024 100644 --- a/src/lib/layout/HorizontalTimeline.svelte +++ b/src/lib/layout/HorizontalTimeline.svelte @@ -1,59 +1,69 @@ -
- -
- -
- -
- {#each displayedGenerations as generation} - {#if generation == selectedGeneration} - - {:else} - - {/if} - {/each} -
+
+ +
+ +
+ +
+ {#each displayedGenerations as generation} + {#if generation == selectedGeneration} + + {:else} + + {/if} + {/each}
- -
\ No newline at end of file +
+ +
From 5b34800e970f4f8e21d7ceabbd59e59989b899a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lu=C3=ADs=20Duarte?= Date: Tue, 10 Oct 2023 09:50:57 +0100 Subject: [PATCH 5/5] Format files and fix accesability issues --- src/lib/component/Icons.ts | 5 ++- src/lib/layout/HorizontalTimeline.stories.ts | 27 ++++++++--------- src/lib/layout/HorizontalTimeline.svelte | 18 ++++++++--- src/model/Generation.ts | 4 +-- src/routes/team/+page.svelte | 32 +++++++++++--------- 5 files changed, 48 insertions(+), 38 deletions(-) diff --git a/src/lib/component/Icons.ts b/src/lib/component/Icons.ts index 1cfa03a8..7bcb06cb 100644 --- a/src/lib/component/Icons.ts +++ b/src/lib/component/Icons.ts @@ -8,8 +8,8 @@ import FaSolidUser from 'svelte-icons-pack/fa/FaSolidUser'; import FaBars from 'svelte-icons-pack/fa/FaSolidBars'; import FaTimes from 'svelte-icons-pack/fa/FaSolidTimes'; import FaSolidGlobe from 'svelte-icons-pack/fa/FaSolidGlobe'; -import CgChevronLeft from "svelte-icons-pack/cg/CgChevronLeft"; -import CgChevronRight from "svelte-icons-pack/cg/CgChevronRight"; +import CgChevronLeft from 'svelte-icons-pack/cg/CgChevronLeft'; +import CgChevronRight from 'svelte-icons-pack/cg/CgChevronRight'; const Icons = { Instagram: FaBrandsInstagram, @@ -24,7 +24,6 @@ const Icons = { Globe: FaSolidGlobe, AngleRight: CgChevronRight, AngleLeft: CgChevronLeft - }; export default Icons; diff --git a/src/lib/layout/HorizontalTimeline.stories.ts b/src/lib/layout/HorizontalTimeline.stories.ts index a4fc4920..8634e97b 100644 --- a/src/lib/layout/HorizontalTimeline.stories.ts +++ b/src/lib/layout/HorizontalTimeline.stories.ts @@ -1,19 +1,18 @@ -import HorizontalTimeline from "./HorizontalTimeline.svelte" +import HorizontalTimeline from './HorizontalTimeline.svelte'; export default { - title: 'Atoms/Timelines/HorizontalTimeline', - component: HorizontalTimeline, - + title: 'Atoms/Timelines/HorizontalTimeline', + component: HorizontalTimeline }; export const HorizontalTimelineArea = { - args : { - generations: [ - {schoolYear: "18/19"}, - {schoolYear: "19/20"}, - {schoolYear: "20/21"}, - {schoolYear: "21/22"}, - {schoolYear: "22/23"}, - ] - } -}; \ No newline at end of file + args: { + generations: [ + { schoolYear: '18/19' }, + { schoolYear: '19/20' }, + { schoolYear: '20/21' }, + { schoolYear: '21/22' }, + { schoolYear: '22/23' } + ] + } +}; diff --git a/src/lib/layout/HorizontalTimeline.svelte b/src/lib/layout/HorizontalTimeline.svelte index 527aa024..982d4593 100644 --- a/src/lib/layout/HorizontalTimeline.svelte +++ b/src/lib/layout/HorizontalTimeline.svelte @@ -7,7 +7,7 @@ // by default we select the last generation but we can change it to any generation // that is on the list export let selectedGeneration: Generation | undefined = generations.at(-1); - + //TODO (luisd): make this size reactive? const displayedSize = 3; let offset = @@ -26,12 +26,15 @@ } offset += i; }; - -
-
@@ -63,7 +66,12 @@ {/each}
-
diff --git a/src/model/Generation.ts b/src/model/Generation.ts index 961bf286..bda0df2c 100644 --- a/src/model/Generation.ts +++ b/src/model/Generation.ts @@ -1,3 +1,3 @@ export type Generation = { - schoolYear: String -}; \ No newline at end of file + schoolYear: String; +}; diff --git a/src/routes/team/+page.svelte b/src/routes/team/+page.svelte index 8df62203..5f544934 100644 --- a/src/routes/team/+page.svelte +++ b/src/routes/team/+page.svelte @@ -1,16 +1,20 @@ -
-

< Equipa />

- -
\ No newline at end of file + +
+

+ < Equipa /> +

+ +