Skip to content

Commit 4a90cac

Browse files
fforresfforres
committed
feat: doing UX improvements on the ticket page & general layout
1 parent 660fa72 commit 4a90cac

File tree

5 files changed

+48
-16
lines changed

5 files changed

+48
-16
lines changed

‎apps/jsconf/src/components/Footer/Footer.astro‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,10 +63,18 @@ import LogoJSConf from './LogoJSConf.astro';
6363
<style>
6464
footer {
6565
margin-block-start: 1rem;
66+
flex-shrink: 0;
6667
width: 100%;
6768
background-image: var(--gradient-footer);
6869
backdrop-filter: blur(1rem);
69-
padding-block-end: 1.5rem;
70+
/* padding-block-end: 1.5rem; */
71+
padding-top: 3rem;
72+
padding-bottom: 3rem;
73+
74+
@media (width >= 768px) {
75+
padding-top: 2rem;
76+
padding-bottom: 2rem;
77+
}
7078

7179
& .container {
7280
width: min(80rem, 100vw);

‎apps/jsconf/src/components/Navbar/Navbar.astro‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import Logo from './Logo.astro';
4545
.header {
4646
--nav-height: 4.5rem;
4747

48+
flex-shrink: 0;
4849
z-index: 1100;
4950
height: var(--nav-height);
5051
position: sticky;

‎apps/jsconf/src/components/StaffCard.astro‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -96,8 +96,6 @@ const staffImage = imgSrc || defaultImgSrc;
9696
flex-direction: column;
9797
justify-content: center;
9898
align-items: center;
99-
max-width: 25rem;
100-
width: fit-content;
10199
padding: 1.5rem;
102100
transition: transform 0.3s;
103101

‎apps/jsconf/src/layouts/Layout.astro‎

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,10 @@ interface Props {
1616
title: string;
1717
description: string;
1818
ogImg: string;
19+
noHorizontalPadding?: boolean;
1920
}
2021
21-
const { title, description, ogImg } = Astro.props;
22+
const { title, description, ogImg } = Astro.props as Props;
2223
2324
const site = import.meta.env.SITE;
2425
const ogURL = `${site}/og/${ogImg}`;
@@ -68,7 +69,7 @@ const ogURL = `${site}/og/${ogImg}`;
6869
</head>
6970
<body>
7071
<Navbar />
71-
<main class="container">
72+
<main class={`container ${Astro.props.noHorizontalPadding ? 'no-horizontal-padding' : ''}`}>
7273
<slot />
7374
</main>
7475
<Footer />
@@ -165,23 +166,41 @@ const ogURL = `${site}/og/${ogImg}`;
165166
padding: 0;
166167
box-sizing: border-box;
167168
}
169+
html,
170+
body {
171+
height: 100%;
172+
display: flex;
173+
flex-direction: column;
174+
}
168175
body {
169176
--scrollbar-size: 0.4rem;
170177

171178
font-family: 'Barlow', sans-serif;
172179
background: var(--bg-color);
173180
color: var(--white);
174181

182+
& main {
183+
display: flex;
184+
flex-direction: column;
185+
flex: 1;
186+
flex-shrink: 0;
187+
}
188+
175189
& main.container {
176190
width: min(80rem, 100vw);
177191
padding: 0 1rem 5rem;
178192
margin: 0 auto;
179193

180-
@media (width <= 768) {
194+
@media (width <= 768px) {
181195
padding: 0 1.5rem 4rem;
182196
}
183197
}
184198

199+
& main.no-horizontal-padding {
200+
padding-left: 0 !important;
201+
padding-right: 0 !important;
202+
}
203+
185204
&::-webkit-scrollbar {
186205
width: var(--scrollbar-size);
187206
height: var(--scrollbar-size);

‎apps/jsconf/src/pages/tickets.astro‎

Lines changed: 16 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,20 @@ import Layout from '@layouts/Layout.astro';
88
title="JSConf Chile 2024 | Tickets"
99
description="Compra tus tickets para JSConf Chile 2024. Asegura tu entrada a la conferencia de JavaScript del 5 al 7 de diciembre en Santiago. No te pierdas charlas, talleres y networking con expertos del sector."
1010
ogImg="tickets.png"
11+
noHorizontalPadding
1112
>
1213
<section class="ticket-section">
1314
<div class="ticket-3d-view">
1415
<LoadTicket client:load />
1516
</div>
1617
<div class="ticket-info">
18+
<Button
19+
variant="solid"
20+
color="yellow"
21+
size="large"
22+
link="https://tickets.communityos.io/events/7dfe393e-7c8f-4d5c-903d-aa65e28e4227/tickets"
23+
icon="arrow-up-right">Comprar Tickets</Button
24+
>
1725
<h2>
1826
Tu ticket a la JSConf Chile 2024 incluye acceso completo a la conferencia, sesiones con
1927
<span>charlistas de clase mundial, workshops, networking</span> y más.
@@ -22,32 +30,28 @@ import Layout from '@layouts/Layout.astro';
2230
Acceso a los 2 días de conferencia | <span>20 charlas de clase mundial</span> | Swag bag con
2331
temática de la JSConf Chile 2024 Coffee breaks los días del evento | Áreas de networking exclusivas
2432
</p>
25-
<Button
26-
variant="solid"
27-
color="yellow"
28-
size="large"
29-
link="https://tickets.communityos.io/events/7dfe393e-7c8f-4d5c-903d-aa65e28e4227/tickets"
30-
icon="arrow-up-right">Comprar Tickets</Button
31-
>
3233
</div>
3334
</section>
3435
</Layout>
3536

3637
<style>
3738
.ticket-section {
3839
display: flex;
40+
flex: 1;
3941
flex-direction: column;
4042
justify-content: center;
4143
align-items: center;
4244
gap: 2rem;
4345

4446
.ticket-3d-view {
4547
width: 100%;
46-
height: 600px;
48+
display: flex;
49+
flex: 1;
50+
min-height: 600px;
4751

4852
@media (max-width: 1080px) {
4953
order: -1;
50-
height: 80dvh;
54+
height: 75svh;
5155
width: 100%;
5256
}
5357
}
@@ -57,7 +61,9 @@ import Layout from '@layouts/Layout.astro';
5761
flex-direction: column;
5862
justify-content: center;
5963
align-items: center;
60-
gap: 1rem;
64+
gap: 2rem;
65+
padding-left: 3rem;
66+
padding-right: 3rem;
6167
text-align: center;
6268

6369
h2 {

0 commit comments

Comments
 (0)