Skip to content

Commit 01bd249

Browse files
MRita443MRita443
committed
Added top margin and voerflow scroll on body
2 parents de2f9de + 1d31676 commit 01bd249

File tree

12 files changed

+550
-3563
lines changed

12 files changed

+550
-3563
lines changed

‎codecov.yaml

+4
Original file line numberDiff line numberDiff line change
@@ -5,3 +5,7 @@ coverage:
55
default:
66
target: 80%
77
threshold: 5%
8+
patch:
9+
default:
10+
target: 80%
11+
threshold: 5%

‎package-lock.json

+352-3,550
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+9-9
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@
2424
"build-storybook": "storybook build"
2525
},
2626
"devDependencies": {
27-
"@storybook/addon-a11y": "^8.0.8",
27+
"@storybook/addon-a11y": "^8.4.2",
2828
"@storybook/addon-coverage": "^1.0.1",
29-
"@storybook/addon-essentials": "^8.0.8",
30-
"@storybook/addon-interactions": "^8.0.8",
31-
"@storybook/addon-links": "^8.0.8",
32-
"@storybook/blocks": "^8.0.8",
29+
"@storybook/addon-essentials": "^8.4.2",
30+
"@storybook/addon-interactions": "^8.4.2",
31+
"@storybook/addon-links": "^8.4.2",
32+
"@storybook/blocks": "^8.4.2",
3333
"@storybook/jest": "^0.2.3",
34-
"@storybook/svelte": "^8.0.8",
35-
"@storybook/sveltekit": "^8.0.8",
36-
"@storybook/test": "^8.0.8",
34+
"@storybook/svelte": "^8.4.2",
35+
"@storybook/sveltekit": "^8.4.2",
36+
"@storybook/test": "^8.4.2",
3737
"@storybook/test-runner": "^0.17.0",
3838
"@storybook/testing-library": "^0.2.2",
3939
"@sveltejs/adapter-auto": "^3.2.0",
@@ -57,7 +57,7 @@
5757
"prettier-plugin-tailwindcss": "^0.5.13",
5858
"react": "^18.2.0",
5959
"react-dom": "^18.2.0",
60-
"storybook": "^8.0.8",
60+
"storybook": "^8.4.2",
6161
"svelte": "^4.2.13",
6262
"svelte-check": "^3.6.9",
6363
"svelte-icons-pack": "^3.1.3",

‎src/lib/components/hexagons/hexagon-grid.svelte

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script lang="ts">
2+
import type EventHexagon from './EventHexagon.svelte';
23
import type TeamMemberHexagon from '@/routes/(app)/team/_components/team-member-hexagon.svelte';
34
45
// Inspired by https://github.com/sveltejs/svelte-virtual-list/blob/master/VirtualList.svelte
@@ -9,7 +10,7 @@
910
1011
export let gap: 'small' | 'medium' | 'big' = 'medium';
1112
export let orientation: 'horizontal' | 'vertical';
12-
export let component: typeof TeamMemberHexagon;
13+
export let component: typeof TeamMemberHexagon | typeof EventHexagon;
1314
1415
const gridColumnsStyle =
1516
orientation === 'horizontal'

‎src/routes/(app)/+layout.svelte

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
<ModeWatcher defaultMode="dark" />
1212
<Sidebar />
1313
<Navbar />
14-
<main class="bg-ni-primary flex-grow">
14+
<main class="bg-ni-primary my-20 flex-grow">
1515
<BackgroundHexagon position="right" />
1616
<slot />
1717
</main>
@@ -22,12 +22,14 @@
2222
:global(html) {
2323
height: 100%;
2424
min-height: 100vh;
25+
overflow: scroll;
2526
}
2627
2728
:global(body) {
2829
height: 100%;
2930
min-height: 100vh;
3031
display: flex;
3132
flex-direction: column;
33+
overflow: scroll;
3234
}
3335
</style>

‎src/routes/(app)/contacts/+page.svelte

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
import Icons from '$lib/components/icons/icons';
66
</script>
77

8-
<section class="-10 my-20 flex flex-col justify-center">
8+
<section class="flex flex-col justify-center">
99
<section class="mb-4 flex flex-col text-center font-raleway text-white">
1010
<h1 class="text-2xl font-bold">&lt; Contacta-nos /&gt;</h1>
1111
</section>

‎src/routes/(app)/events/_components/event-hexagon.stories.ts

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
import EventHexagon from './event-hexagon.svelte';
2+
3+
export default {
4+
title: 'Atoms/Hexagons/Event Hexagon',
5+
component: EventHexagon,
6+
parameters: {
7+
layout: 'centered',
8+
controls: { exclude: ['orientation', 'event'] }
9+
}
10+
};
11+
12+
export const DateIntervalHexagon = {
13+
args: {
14+
title: { control: 'text' },
15+
data: {
16+
title: 'Jantar de Curso',
17+
description: 'Muito fixe',
18+
teamMemberIds: [],
19+
registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
20+
dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2024-01-01') },
21+
location: 'Cervejaria Diu',
22+
thumbnailPath: 'images/previews/evento.png'
23+
}
24+
}
25+
};
26+
27+
export const SingleDateHexagon = {
28+
args: {
29+
data: {
30+
title: 'Jantar de Curso',
31+
description: 'Muito fixe',
32+
teamMemberIds: [],
33+
registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
34+
dateInterval: { startDate: new Date('2023-12-10') },
35+
location: 'Cervejaria Diu',
36+
thumbnailPath: 'images/previews/evento.png'
37+
}
38+
}
39+
};
40+
41+
export const HoveredHexagon = {
42+
args: {
43+
title: { control: 'text' },
44+
data: {
45+
title: 'Jantar de Curso',
46+
description: 'Muito fixe',
47+
teamMemberIds: [],
48+
registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
49+
dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2024-01-01') },
50+
location: 'Cervejaria Diu',
51+
thumbnailPath: 'images/previews/evento.png'
52+
}
53+
},
54+
parameters: {
55+
pseudo: { hover: true }
56+
}
57+
};
58+
59+
export const MobileHexagon = {
60+
parameters: {
61+
viewport: {
62+
defaultViewport: 'mobile2'
63+
}
64+
},
65+
args: {
66+
title: { control: 'text' },
67+
data: {
68+
title: 'Jantar de Curso',
69+
description: 'Muito fixe',
70+
teamMemberIds: [],
71+
registerUrl: 'https://www.google.com/intl/pt-PT/forms/about/',
72+
dateInterval: { startDate: new Date('2023-12-10'), endDate: new Date('2023-12-05') },
73+
location: 'Cervejaria Diu',
74+
thumbnailPath: 'images/previews/evento.png'
75+
}
76+
}
77+
};

‎src/routes/(app)/events/_components/event-hexagon.svelte

+63
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<script lang="ts">
2+
import Hexagon from '@/lib/components/hexagons/hexagon.svelte';
3+
import type { Event } from '@/types/event.ts';
4+
5+
export let data;
6+
export const orientation = 'vertical';
7+
export let event = data as Event;
8+
</script>
9+
10+
<Hexagon orientation="vertical">
11+
<div
12+
class="group relative box-content flex h-full w-full justify-center md:shadow-black/[.58] md:text-shadow"
13+
data-testid="event-hexagon"
14+
>
15+
<div class="flex w-fit flex-col content-center justify-center">
16+
<p
17+
class="z-20 w-full whitespace-nowrap px-8 text-center text-xs text-gray-100 sm:text-xs md:text-sm lg:text-base xl:text-lg"
18+
>
19+
{#if !event.dateInterval.endDate}
20+
{event.dateInterval.startDate
21+
.toLocaleString('pt', {
22+
day: 'numeric',
23+
month: 'long',
24+
year: 'numeric'
25+
})
26+
.replaceAll(/(de\s)|(\.)/gi, '')}
27+
{:else}
28+
{event.dateInterval.startDate
29+
.toLocaleString('pt', {
30+
day: 'numeric',
31+
month: 'short',
32+
year: '2-digit'
33+
})
34+
.replaceAll(/(de\s)|(\.)/gi, '') +
35+
' - ' +
36+
event.dateInterval.endDate
37+
.toLocaleDateString('pt', {
38+
day: 'numeric',
39+
month: 'short',
40+
year: '2-digit'
41+
})
42+
.replaceAll(/(de\s)|(\.)/gi, '')}
43+
{/if}
44+
</p>
45+
<p
46+
class="z-20 my-1.5 w-full bg-taupe-200 text-center text-sm font-semibold text-rose-950 outline outline-2 outline-offset-2 outline-taupe-200 transition-colors ease-in group-hover:bg-taupe-200 group-hover:text-rose-950 group-hover:outline-taupe-200 group-hover:text-shadow-none sm:bg-transparent sm:text-sm sm:text-gray-100 sm:outline-transparent md:text-base lg:text-lg xl:text-xl"
47+
>
48+
{event.title}
49+
</p>
50+
<p
51+
class="z-20 w-full whitespace-nowrap text-center text-xs text-gray-100 transition-all sm:text-xs md:text-sm lg:text-base xl:text-lg"
52+
>
53+
{event.location}
54+
</p>
55+
</div>
56+
<div class="absolute inset-0 z-10 h-full w-full bg-vivid-red-950/[.62] text-lg" />
57+
<img
58+
src={event.thumbnailPath}
59+
alt="Event thumbnail"
60+
class="absolute inset-0 z-0 h-full w-full object-cover"
61+
/>
62+
</div>
63+
</Hexagon>

‎src/types/date-interval.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export type DateInterval = {
2+
startDate: Date;
3+
endDate?: Date;
4+
};

‎src/types/event.ts

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { DateInterval } from './date-interval.ts';
2+
3+
export type Event = {
4+
title: string;
5+
description: string;
6+
teamMemberIds: bigint[];
7+
registerUrl: string;
8+
dateInterval: DateInterval;
9+
location?: string;
10+
category?: string;
11+
thumbnailPath: string;
12+
slug?: string;
13+
};

‎static/images/previews/evento.png

572 KB
Loading

‎tailwind.config.cjs

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
/** @type {import('tailwindcss').Config} */
2+
3+
const plugin = require('tailwindcss/plugin');
4+
25
module.exports = {
36
content: ['./src/**/*.{html,js,svelte,ts,stories.js,stories.ts}'],
47
theme: {
@@ -82,8 +85,26 @@ module.exports = {
8285
},
8386
fontSize: {
8487
huge: '10rem'
88+
},
89+
90+
textShadow: {
91+
none: '0 0 0 var(--tw-shadow-color)',
92+
sm: '0 2px 4px var(--tw-shadow-color)',
93+
DEFAULT: '0 4px 6px var(--tw-shadow-color)',
94+
lg: '0 8px 16px var(--tw-shadow-color)'
8595
}
8696
}
8797
},
88-
plugins: []
98+
plugins: [
99+
plugin(function ({ matchUtilities, theme }) {
100+
matchUtilities(
101+
{
102+
'text-shadow': (value) => ({
103+
textShadow: value
104+
})
105+
},
106+
{ values: theme('textShadow') }
107+
);
108+
})
109+
]
89110
};

0 commit comments

Comments
 (0)