From f30c5019484c7f7eb5fb8b7ef1b2452f00fdc789 Mon Sep 17 00:00:00 2001 From: vincent Date: Fri, 15 Apr 2022 11:50:53 +0200 Subject: [PATCH] (wip) React component [EventCard] --- .../components/events/event-card.tsx | 30 ++++----- .../src/stylesheets/modules/events/event.scss | 62 +++++++++++-------- app/frontend/templates/events/index.html | 43 +++---------- app/frontend/templates/home/events.html | 46 +------------- 4 files changed, 61 insertions(+), 120 deletions(-) diff --git a/app/frontend/src/javascript/components/events/event-card.tsx b/app/frontend/src/javascript/components/events/event-card.tsx index 1eaf3938a..064a7034b 100644 --- a/app/frontend/src/javascript/components/events/event-card.tsx +++ b/app/frontend/src/javascript/components/events/event-card.tsx @@ -13,9 +13,9 @@ interface EventCardProps { cardType: 'sm' | 'md' | 'lg' } -export const EventCard: React.FC = ({ event, cardType = 'sm' }) => { +export const EventCard: React.FC = ({ event, cardType = 'md' }) => { const { t } = useTranslation('public'); - console.log(event); + /** * Format description to remove HTML tags and set a maximum character count */ @@ -23,10 +23,10 @@ export const EventCard: React.FC = ({ event, cardType = 'sm' }) text = text.replace(/(<\/p>|<\/h4>|<\/h5>|<\/h6>|<\/pre>|<\/blockquote>)/g, '\n'); text = text.replace(//g, '\n'); text = text.replace(/<\/?\w+[^>]*>/g, ''); - text = text.replace(/\n+/g, '
'); if (text.length > count) { - return text.slice(0, count) + '...'; + text = text.slice(0, count) + '…'; } + text = text.replace(/\n+/g, '
'); return text; }; @@ -51,28 +51,30 @@ export const EventCard: React.FC = ({ event, cardType = 'sm' }) }; /** - * Link to event by id + * TODO: Link to event by id ? */ const showEvent = (id: number) => { - // TODO: ??? - console.log(id); + console.log(window.location.href + '/' + id); }; return (
showEvent(event.id)}> -
- {event.event_image - ? - : - } -
+ {event.event_image + ?
+ +
+ : cardType !== 'sm' && +
+ +
+ }

{event?.title}

{event.category.name}
{cardType !== 'sm' && -

+

}
diff --git a/app/frontend/src/stylesheets/modules/events/event.scss b/app/frontend/src/stylesheets/modules/events/event.scss index b2c4ddc08..2bedd8a46 100644 --- a/app/frontend/src/stylesheets/modules/events/event.scss +++ b/app/frontend/src/stylesheets/modules/events/event.scss @@ -6,8 +6,10 @@ color: var(--gray-hard-darkest); &:hover { color: var(--gray-hard-darkest); + border-color: var(--gray-hard); cursor: pointer; - & .event-card-picture {opacity: 0.7;} + .event-card-picture, + .event-card-info { border-color: var(--gray-hard); } } &-picture { @@ -17,7 +19,6 @@ background-color: #fff; font-size: 8rem; color: var(--gray-soft-light); - transition: opacity 0.4s ease-out; img { width: 100%; height: 100%; @@ -43,7 +44,7 @@ } &-info { margin-top: auto; - padding: 15px 30px; + padding: 15px 20px; .grid { display: grid; grid-template-columns: repeat(2, 1fr); @@ -55,7 +56,7 @@ i { width: 16px; height: 16px; - margin-right: 15px; + margin-right: 10px; font-size: 16px; text-align: center; color: var(--main); @@ -117,7 +118,35 @@ border-top: 1px solid var(--gray-soft-dark); } } - &-card--lg {} + &-card--lg { + border: 1px solid var(--gray-hard); + .event-card-info { + padding-top: 0; + & > p { + font-size: 1.8rem; + font-weight: 600; + color: var(--main); + } + } + .event-card-picture { + border-bottom: 1px solid var(--gray-hard); + img { max-height: 300px; } + } + + @media (min-width: 992px) { + grid-column: span 2; + display: grid; + grid-template-columns: 3fr 2fr; + .event-card-desc { grid-area: 1/1/2/2; } + .event-card-info { grid-area: 2/1/3/2; } + .event-card-picture { + grid-area: 1/2/3/3; + border-bottom: none; + border-left: 1px solid var(--gray-hard); + img { max-height: none; } + } + } + } // layout specific &-home { @@ -142,35 +171,14 @@ &-focus { display: grid; margin-bottom: 50px; - .event-card { - border: 1px solid var(--gray-hard); - &-info { padding-top: 0; } - &-picture { - border-bottom: 1px solid var(--gray-hard); - img { max-height: 300px; } - } - } @media (min-width: 992px) { grid-template-columns: repeat(auto-fill, minmax(425px, 1fr)); gap: 15px; - .event-card { - grid-column: span 2; - display: grid; - grid-template-columns: 3fr 2fr; - &-desc { grid-area: 1/1/2/2; } - &-info { grid-area: 2/1/3/2; } - &-picture { - grid-area: 1/2/3/3; - border-bottom: none; - border-left: 1px solid var(--gray-hard); - img { max-height: none; } - } - } } } - &-month-list { + &-monthList { display: grid; grid-template-columns: 1fr; gap: 15px; diff --git a/app/frontend/templates/events/index.html b/app/frontend/templates/events/index.html index f261f3b14..1ea6e9e72 100644 --- a/app/frontend/templates/events/index.html +++ b/app/frontend/templates/events/index.html @@ -40,43 +40,20 @@
+
+ + + +
+

{{monthNames[month.split(',')[0] - 1]}}, {{month.split(',')[1]}}

-
- -
-
{{event.category.name}}
-

{{event.title}}

-

{{event.start_date | amDateFormat:'L'}}

-

{{event.start_date | amDateFormat:'L'}} {{ 'app.public.events_list.to_date' }} {{event.end_date | amDateFormat:'L'}}

- -
{{ 'app.public.events_list.free_admission' }}
-
{{ 'app.public.events_list.full_price_' | translate }} {{event.amount | currency}} / {{ price.category.name }} {{price.amount | currency}}
- -
- - {{theme.name}} - - {{event.age_range.name}} -
- -
- {{event.nb_free_places}} {{ 'app.public.events_list.still_available' | translate }} - {{ 'app.public.events_list.sold_out' }} - {{ 'app.public.events_list.cancelled' }} - {{ 'app.public.events_list.without_reservation' }} -
-
- - -
- -
- - +
+
+
@@ -88,5 +65,3 @@ - - diff --git a/app/frontend/templates/home/events.html b/app/frontend/templates/home/events.html index 12e491f23..45a549b93 100644 --- a/app/frontend/templates/home/events.html +++ b/app/frontend/templates/home/events.html @@ -6,52 +6,8 @@ -
-
-
- - -
- -
-

{{event.title}}

- {{event.category.name}} -

-
- -
-
- -
{{ 'app.public.home.from_date_to_date' | translate:{START:(event.start_date | amDateFormat:'L'), END:(event.end_date | amDateFormat:'L')} }}
-
{{ 'app.public.home.on_the_date' | translate:{DATE:(event.start_date | amDateFormat:'L')} }}
-
-
- -
- {{ 'app.public.home.all_day' }} - {{ 'app.public.home.from_time_to_time' | translate:{START:(event.start_date | amDateFormat:'LT'), END:(event.end_date | amDateFormat:'LT')} }} -
-
-
- -
- {{ 'app.public.home.still_available' | translate }} {{event.nb_free_places}} - {{ 'app.public.home.without_reservation' }} - {{ 'app.public.home.event_full' }} -
-
-
- -
- {{ 'app.public.home.free_admission' }} - {{ 'app.public.home.full_price' | translate }} {{event.amount | currency}} -
-
-
-
-
-
+