Skip to content

Commit

Permalink
refactor: address review comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@ferferga
ferferga authored Oct 22, 2024
1 parent 6663542 commit aa8406e
Show file tree
Hide file tree
Showing 3 changed files with 151 additions and 35 deletions.
10 changes: 5 additions & 5 deletions src/components/ui/ItemList.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import BSlot from '@/components/utils/BSlot.astro';
const { items = [], classes = {} } = Astro.props;
const {
container: containerClass = '',
container: containerClass = 'gap-10',
panel: panelClass = '',
title: titleClass = '',
description: descriptionClass = '',
Expand All @@ -23,9 +23,9 @@ const mergedIconClasses = twMerge('w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2', defaultIconC
<div
class={containerClass}>
{items.map(({ title, description, icon: IconElement, callsToAction, classes: itemClasses = {} }) => (
<div>
<div class={twMerge('flex flex-row max-w-md', panelClass, itemClasses?.panel)}>
<div class="flex justify-center">
<div class="mt-4">
<div class={twMerge('flex', panelClass, itemClasses?.panel)}>
<div class="flex justify-center items-center">
{IconElement
? <IconElement class={twMerge(mergedIconClasses, itemClasses?.icon)} />
: (
Expand All @@ -34,7 +34,7 @@ const mergedIconClasses = twMerge('w-7 h-7 mr-2 rtl:mr-0 rtl:ml-2', defaultIconC
</BSlot>
)}
</div>
<div class="mt-0.5">
<div>
{title && <h3 class={twMerge('text-xl font-bold', titleClass, itemClasses?.title)}>{title}</h3>}
{description && (
<p
Expand Down
8 changes: 4 additions & 4 deletions src/components/widgets/Pricing.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const iconClasses = 'w-5 h-5 font-bold p-1 text-white';
prices
&& prices.map(({ title, subtitle, pricing, items, callToAction, ribbonTitle }) => (
<div class="flex flex-1 justify-center min-w-80">
<div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col justify-between text-center">
<div class="rounded-lg backdrop-blur border border-gray-200 dark:border-gray-700 bg-white dark:bg-slate-900 shadow px-6 py-8 flex w-full max-w-sm flex-col text-center">
{ribbonTitle && (
<div class="absolute right-[-5px] 2xl:right-[-8px] rtl:right-auto rtl:left-[-8px] rtl:2xl:left-[-10px] top-[-5px] 2xl:top-[-10px] z-[1] h-[100px] w-[100px] overflow-hidden text-right">
<span class="absolute top-[19px] right-[-21px] rtl:right-auto rtl:left-[-21px] block w-full rotate-45 rtl:-rotate-45 bg-green-700 text-center text-[10px] font-bold uppercase leading-5 text-white shadow-[0_3px_10px_-5px_rgba(0,0,0,0.3)] before:absolute before:left-0 before:top-full before:z-[-1] before:border-[3px] before:border-r-transparent before:border-b-transparent before:border-l-green-800 before:border-t-green-800 before:content-[''] after:absolute after:right-0 after:top-full after:z-[-1] after:border-[3px] after:border-l-transparent after:border-b-transparent after:border-r-green-800 after:border-t-green-800 after:content-['']">
Expand All @@ -47,8 +47,8 @@ const iconClasses = 'w-5 h-5 font-bold p-1 text-white';
<div class="my-8">
{(pricing ?? []).map(p => (
<div class="flex items-center justify-center text-center mb-1">
<span class={p.variant === 'secondary' ? 'text-muted text-3xl' : 'text-6xl font-extrabold'}>{p.price}</span>
<span class={p.variant === 'secondary' ? 'text-2xl text-muted' : 'text-5xl'}>{p.currency}</span>
<span class={p.variant === 'secondary' ? 'text-muted text-xl' : 'text-4xl font-extrabold'}>{p.price}</span>
<span class={p.variant === 'secondary' ? 'text-lg text-muted' : 'text-3xl'}>{p.currency}</span>
</div>
<p class={`text-base lowercase text-gray-600 dark:text-slate-400 ${
p.variant === 'secondary' ? 'text-xs' : 'leading-6 '}`}>{p.period ?? ''}
Expand All @@ -73,7 +73,7 @@ const iconClasses = 'w-5 h-5 font-bold p-1 text-white';
</p>
)}
{description && (
<p class="text-gray-600 dark:text-slate-400">
<p class="text-gray-600 dark:text-slate-400 text-xs">
<Fragment set:html={description} />
</p>
)}
Expand Down
168 changes: 142 additions & 26 deletions src/pages/registration.astro
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,35 @@
---
import Layout from '@/layouts/PageLayout.astro';
import Pricing from '@/components/widgets/Pricing.astro';
import ITablerX from 'virtual:icons/tabler/x';
import WidgetWrapper from '@/components/ui/WidgetWrapper.astro';
import ItemList from '@/components/ui/ItemList.astro';
import Headline from '@/components/ui/Headline.astro';
// import Contact from '@/components/widgets/Contact.astro';
import ITablerX from 'virtual:icons/tabler/x';
import IClarityInfoStandardLine from 'virtual:icons/clarity/info-standard-line';
import ITablerFileCheck from 'virtual:icons/tabler/file-check';
import ITablerTicketOff from 'virtual:icons/tabler/ticket-off';
import ITablerCalendarMonth from 'virtual:icons/tabler/calendar-month';
import ITablerCreditCard from 'virtual:icons/tabler/credit-card';
import ITablerCreditCardRefund from 'virtual:icons/tabler/credit-card-refund';
import ITablerPigMoney from 'virtual:icons/tabler/pig-money';
import ITablerPigOff from 'virtual:icons/tabler/pig-off';
import ITablerPodium from 'virtual:icons/tabler/podium';
const currency = '€';
const disadvantage = {
icon: ITablerX,
classes: {
icon: 'bg-red-500'
}
};
const neutral = {
icon: IClarityInfoStandardLine,
classes: {
icon: 'bg-slate-500'
}
};
---

<Layout
Expand Down Expand Up @@ -47,19 +67,30 @@ const disadvantage = {
],
items: [
{
title: 'Assist a single day'
title: 'All workshop sessions',
description: '1st of September'
},
{
title: 'Assist multiple days',
description: 'Workshops only take place the 1st of September 2025',
title: 'All conference sessions',
description: '2nd-4th of September',
...disadvantage
},
{
title: 'Access to workshops'
title: 'Reception',
description: '1st of September'
},
{
title: 'Access to talks',
title: 'Guided tour',
description: '2nd of September',
...disadvantage
},
{
title: 'Conference dinner',
description: '3rd of September',
...disadvantage
},
{
title: 'Conference bag'
}
]
},
Expand All @@ -86,17 +117,28 @@ const disadvantage = {
],
items: [
{
title: 'Assist a single day'
title: 'All workshop sessions',
description: '1st of September',
...disadvantage
},
{
title: 'Assist multiple days'
title: 'All conference sessions',
description: '2nd-4th of September'
},
{
title: 'Access to workshops',
...disadvantage
title: 'Reception',
description: '1st of September'
},
{
title: 'Access to talks'
title: 'Guided tour',
description: '2nd of September'
},
{
title: 'Conference dinner',
description: '3rd of September'
},
{
title: 'Conference bag'
}
]
},
Expand Down Expand Up @@ -124,16 +166,27 @@ const disadvantage = {
ribbonTitle: 'Best value',
items: [
{
title: 'Assist a single day'
title: 'All workshop sessions',
description: '1st of September'
},
{
title: 'All conference sessions',
description: '2nd-4th of September'
},
{
title: 'Reception',
description: '1st of September'
},
{
title: 'Assist multiple days'
title: 'Guided tour',
description: '2nd of September'
},
{
title: 'Access to workshops'
title: 'Conference dinner',
description: '3rd of September'
},
{
title: 'Access to talks'
title: 'Conference bag'
}
]
},
Expand All @@ -148,24 +201,87 @@ const disadvantage = {
],
items: [
{
title: 'Assist a single day'
title: 'Conference sessions',
description: 'Only the day of the ticket',
...neutral
},
{
title: 'Assist multiple days',
...disadvantage
},
{
title: 'Access to workshops',
description: 'Not applicable: Purchase <i>Workshops Only</i> instead',
...disadvantage
},
{
title: 'Access to talks'
title: 'Social event',
description: 'Only the day of the ticket',
...neutral
}
]
}
]}
/>
<WidgetWrapper bg>
<Headline title="Additional information" />
<ItemList items={[
{
description: `
We offer a 100€ discount for students. If you register as a student, you must provide proof of your student status
(e.g. a student card including the academic year). You are eligible for the "Student fee" if you are a student in the academic year 2024-2025.
In case you are not able to provide a proof in time, your student registration will be automatically changed into a
regular registration, and you will be charged accordingly.
`,
icon: ITablerPigMoney
},
{
description: `
If you are a MSc/PhD student and the presenting author
(i.e., the only one among the authors who is present at the event) of a paper accepted at a workshop/co-located
event/main conference, then you need to buy a regular registration, regardless of whether or not you are a student.
`,
icon: ITablerPigOff
},
{
description: `
If you are a PhD student and you have been accepted to participate in the Doctoral Consortium,
the participation to the Doctoral Consortium is free of charge. If you want to attend the rest of the
workshops and/or conference, you can register as a student.
`,
icon: ITablerPodium
}
]} />
</WidgetWrapper>
<WidgetWrapper>
<Headline title="Cancellation policy" />
<ItemList items={[
{
description: 'The registration of participation is binding.',
icon: ITablerFileCheck
},
{
description: `
If you cancel your registration no later than 30 days before the start of the conference,
and you are not a presenting author of an accepted paper, you get 80% back of the registration fee.
In all other cases, the financial responsibilities of the participants remain fully effective.
`,
icon: ITablerTicketOff
},
{
description: `
The registration fees are owed upon registration and are payable within 7 days
following submission of the registration (but not later than 7 days before the starting day of the event).
`,
icon: ITablerCalendarMonth
},
{
description: `
Participation is not guaranteed until full payment of the registration fee is received.
`,
icon: ITablerCreditCard
},
{
description: `
Payments will be refunded if the conference is canceled by the organizer. In that case,
the organizer will have no further liability to the client.
In case the conference must be postponed, registrations remain valid.
`,
icon: ITablerCreditCardRefund
}
]} />
</WidgetWrapper>
{/* <Contact
id="form"
inputs={[
Expand Down

0 comments on commit aa8406e

Please sign in to comment.