Standardize card layout

2024-11-29 10:24:20 +01:00 · 2022-04-19 16:59:48 +02:00 · 2022-04-19 16:59:48 +02:00 · 103bf80e81
commit 103bf80e81
parent f30c501948
5 changed files with 80 additions and 59 deletions
--- a/app/frontend/src/javascript/components/events/event-card.tsx
+++ b/app/frontend/src/javascript/components/events/event-card.tsx
@ -13,7 +13,7 @@ interface EventCardProps {
  cardType: 'sm' | 'md' | 'lg'
 }

-export const EventCard: React.FC<EventCardProps> = ({ event, cardType = 'md' }) => {
+export const EventCard: React.FC<EventCardProps> = ({ event, cardType }) => {
  const { t } = useTranslation('public');

  /**
@ -34,31 +34,27 @@ export const EventCard: React.FC<EventCardProps> = ({ event, cardType = 'md' })
   * Return the formatted localized date of the event
   */
  const formatDate = (): string => {
-    // FIXME: typeof event.all_day = sting ?
-    return event.all_day === 'true'
-      ? t('app.public.home.from_date_to_date', { START: FormatLib.date(event.start_date), END: FormatLib.date(event.end_date) })
-      : t('app.public.home.on_the_date', { DATE: FormatLib.date(event.start_date) });
+    const startDate = new Date(event.start_date);
+    const endDate = new Date(event.end_date);
+    const singleDayEvent = startDate.getFullYear() === endDate.getFullYear() &&
+    startDate.getMonth() === endDate.getMonth() &&
+    startDate.getDate() === endDate.getDate();
+    return singleDayEvent
+      ? t('app.public.home.on_the_date', { DATE: FormatLib.date(event.start_date) })
+      : t('app.public.home.from_date_to_date', { START: FormatLib.date(event.start_date), END: FormatLib.date(event.end_date) });
  };

  /**
   * Return the formatted localized hours of the event
   */
  const formatTime = (): string => {
-    // FIXME: typeof event.all_day = sting ?
-    return event.all_day === 'true'
+    return event.all_day
      ? t('app.public.home.all_day')
      : t('app.public.home.from_time_to_time', { START: FormatLib.time(event.start_date), END: FormatLib.time(event.end_date) });
  };

-  /**
-   * TODO: Link to event by id ?
-   */
-  const showEvent = (id: number) => {
-    console.log(window.location.href + '/' + id);
-  };
-
  return (
-    <div className={`event-card event-card--${cardType}`} onClick={() => showEvent(event.id)}>
+    <div className={`event-card event-card--${cardType}`}>
      {event.event_image
        ? <div className="event-card-picture">
            <img src={event.event_image} alt="" />
@ -70,17 +66,22 @@ export const EventCard: React.FC<EventCardProps> = ({ event, cardType = 'md' })
      }
      <div className="event-card-desc">
        <header>
-          <p className='title'>{event?.title}</p>
          <span className={`badge bg-${event.category.slug}`}>{event.category.name}</span>
+          <p className='title'>{event?.title}</p>
        </header>
        {cardType !== 'sm' &&
          <p dangerouslySetInnerHTML={{ __html: formatText(event.description, cardType === 'md' ? 500 : 400) }}></p>
        }
      </div>
      <div className="event-card-info">
-        {cardType !== 'md' && <p>{formatDate()}</p> }
+        {cardType !== 'md' &&
+          <p>
+            {formatDate()}
+            <span>{formatTime()}</span>
+          </p>
+        }
        <div className="grid">
-          {cardType === 'sm' &&
+          {cardType !== 'md' &&
            event.event_themes.map(theme => {
              return (<div key={theme.name} className="grid-item">
                <i className="fa fa-tags"></i>
@ -88,33 +89,34 @@ export const EventCard: React.FC<EventCardProps> = ({ event, cardType = 'md' })
              </div>);
            })
          }
-          {(cardType === 'sm' && event.age_range) &&
+          {(cardType !== 'md' && event.age_range) &&
            <div className="grid-item">
              <i className="fa fa-users"></i>
              <h6>{event.age_range?.name}</h6>
            </div>
          }
          {cardType === 'md' &&
-            <div className="grid-item">
-              <i className="fa fa-calendar"></i>
-              <h6>{formatDate()}</h6>
-            </div>
+            <>
+              <div className="grid-item">
+                <i className="fa fa-calendar"></i>
+                <h6>{formatDate()}</h6>
+              </div>
+              <div className="grid-item">
+                <i className="fa fa-clock"></i>
+                <h6>{formatTime()}</h6>
+              </div>
+            </>
          }
          <div className="grid-item">
-            {cardType !== 'sm' && <i className="fa fa-clock"></i>}
-            <h6>{formatTime()}</h6>
-          </div>
-          <div className="grid-item">
-            {cardType !== 'sm' && <i className="fa fa-user"></i>}
+            <i className="fa fa-user"></i>
            {event.nb_free_places > 0 && <h6>{t('app.public.home.still_available') + event.nb_free_places}</h6>}
            {event.nb_total_places > 0 && event.nb_free_places <= 0 && <h6>{t('app.public.home.event_full')}</h6>}
            {!event.nb_total_places && <h6>{t('app.public.home.without_reservation')}</h6>}
          </div>
          <div className="grid-item">
-            {cardType !== 'sm' && <i className="fa fa-bookmark"></i>}
+            <i className="fa fa-bookmark"></i>
            {event.amount === 0 && <h6>{t('app.public.home.free_admission')}</h6>}
-            {/* TODO: Display currency ? */}
-            {event.amount > 0 && <h6>{t('app.public.home.full_price') + event.amount}</h6>}
+            {event.amount > 0 && <h6>{t('app.public.home.full_price') + FormatLib.price(event.amount)}</h6>}
          </div>
        </div>
      </div>
--- a/app/frontend/src/stylesheets/modules/events/event.scss
+++ b/app/frontend/src/stylesheets/modules/events/event.scss
@ -28,9 +28,6 @@
    &-desc {
      padding: 15px 15px 30px;
      header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
        margin-bottom: 1rem;
        p {
          margin: 0;
@ -39,18 +36,38 @@
          line-height: 1.3;
          text-transform: uppercase;
        }
+        .badge {
+          min-width: auto;
+          max-width: min(16ch, 33%);
+          white-space: normal;
+          word-break: break-word;
+          margin: 0 0 10px 15px;
+          float: right;
+        }
      }
      p { margin: 0; }
    }
    &-info {
-      margin-top: auto;
      padding: 15px 20px;
+      & > p {
+        font-size: 1.8rem;
+        font-weight: 600;
+        color: var(--main);
+        span {
+          display: block;
+          font-size: 0.75em;
+          font-weight: 400;
+          line-height: 1.2;
+          text-transform: lowercase;
+        }
+      }
      .grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
+        align-items: baseline;
        gap: 15px;
        &-item {
-          height: 20px;
+          min-height: 20px;
          display: flex;
          align-items: center;
          i {
@ -61,6 +78,7 @@
            text-align: center;
            color: var(--main);
          }
+          h6 { margin: 0; }
        }
      }
    }
@ -69,11 +87,15 @@
  // Card size specific
  &-card--sm {
    display: grid;
+    grid-template-rows: max-content 1fr;
    grid-template-columns: 1fr max-content;
    .event-card-desc {
      grid-area: 1/1/2/2;
      padding-bottom: 10px;
-      header p { font-size: 1.6rem; }
+      header {
+        margin-bottom: 0;
+        p { font-size: 1.6rem; }
+      }
    }
    .event-card-picture {
      grid-area: 1/2/3/3;
@ -87,21 +109,15 @@
    .event-card-info {
      grid-area: 2/1/3/2;
      padding: 0 15px 15px;
-      & > p {
-        font-size: 1.8rem;
-        font-weight: 600;
-        color: var(--main);
-      }
      .grid {
-        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
-        gap: 5px 10px;
+        gap: 10px 15px;
        &-item i {
          width: 12px;
          height: 12px;
-          margin-right: 6px;
+          //margin-right: 6px;
          font-size: 12px;
          text-align: center;
-          color: var(--gray-hard-light);
+          //color: var(--gray-hard-light);
        }
      }
    }
@ -114,6 +130,7 @@
      border-bottom: 1px solid var(--gray-soft-dark);
    }
    .event-card-info {
+      margin-top: auto;
      padding-bottom: 30px;
      border-top: 1px solid var(--gray-soft-dark);
    }
@ -122,11 +139,6 @@
    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);
@ -184,7 +196,7 @@
    gap: 15px;
    margin-bottom: 2rem;
    @media (min-width: 768px) {
-      grid-template-columns: repeat(auto-fill, minmax(425px, 1fr));
+      grid-template-columns: repeat(auto-fill, minmax(430px, 1fr));
    }
  }
 }
--- a/app/frontend/templates/events/index.html
+++ b/app/frontend/templates/events/index.html
@ -42,16 +42,19 @@

    <div class="event-focus">
      <!-- TODO: get focus event -->
-      <!-- FIXME: get [card-type] in React component's props -->
-      <!--<event-card style="display: contents" event="" card-type="lg" />-->
+      <!--<event-card style="display: contents" event="" card-type="'lg'" />-->
    </div>

    <div ng-repeat="month in monthOrder">
      <h1>{{monthNames[month.split(',')[0] - 1]}}, {{month.split(',')[1]}}</h1>

      <div class="event-monthList" ng-repeat="event in (eventsGroupByMonth[month].length/3 | array)">
-        <!-- FIXME: get [card-type] in React component's props -->
-        <event-card style="display: contents" event="event" card-type="sm" ng-repeat="event in eventsGroupByMonth[month].slice(3*$index, 3*$index + 3)" />
+        <event-card style="display: contents"
+                    event="event"
+                    card-type="'sm'"
+                    ng-repeat="event in eventsGroupByMonth[month].slice(3*$index, 3*$index + 3)"
+                    ui-sref="app.public.events_show({id: event.id})">
+        </event-card>
      </div>

    </div>
--- a/app/frontend/templates/home/events.html
+++ b/app/frontend/templates/home/events.html
@ -7,7 +7,11 @@
  </h4>

  <div class="event-home-list" ng-repeat="event in (upcomingEvents.length/3 | array)">
-    <!-- FIXME: get [card-type] in React component's props -->
-    <event-card style="display: contents" event="event" card-type="md" ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)" />
+    <event-card style="display: contents"
+                event="event"
+                card-type="'md'"
+                ng-repeat="event in upcomingEvents.slice(3*$index, 3*$index + 3)"
+                ui-sref="app.public.events_show({id: event.id})">
+    </event-card>
  </div>
 </section>
--- a/app/views/api/events/_event.json.jbuilder
+++ b/app/views/api/events/_event.json.jbuilder
@ -32,7 +32,7 @@ json.end_time event.availability.end_at
 json.month t('date.month_names')[event.availability.start_at.month]
 json.month_id event.availability.start_at.month
 json.year event.availability.start_at.year
-json.all_day event.availability.start_at.hour.zero? ? 'true' : 'false'
+json.all_day event.availability.start_at.hour.zero?
 json.availability do
  json.id event.availability.id
  json.start_at event.availability.start_at