(ui) Events dashboard layout

app/frontend/src/javascript/components/events/event-reservation-item.tsx

@@ -30,10 +30,10 @@ export const EventReservationItem: React.FC<EventReservationItemProps> = ({ rese
   const buildTicket = (ticket) => {
     return (
       <>
-        <div>{t('app.logged.event_reservation_item.NUMBER_of_NAME_places_reserved', { NUMBER: ticket.booked, NAME: ticket.price_category.name })}</div>
+        <label>{t('app.logged.event_reservation_item.NUMBER_of_NAME_places_reserved', { NUMBER: ticket.booked, NAME: ticket.price_category.name })}</label>
         {reservation.booking_users_attributes.filter(u => u.event_price_category_id === ticket.event_price_category_id).map(u => {
           return (
-            <div key={u.id}>{u.name}</div>
+            <p key={u.id} className='name'>{u.name}</p>
           );
         })}
       </>
@@ -58,25 +58,30 @@ export const EventReservationItem: React.FC<EventReservationItemProps> = ({ rese
   return (
     <div className="event-reservation-item">
       <div className="event-reservation-item__event">
-        <div className="event-reservation-item__event__label">{t('app.logged.event_reservation_item.event')}</div>
+        <div className="infos">
-        <div className="event-reservation-item__event__title">{reservation.event_title}</div>
+          <label>{t('app.logged.event_reservation_item.event')}</label>
-        {reservation.event_type === 'family' &&
+          <p>{reservation.event_title}</p>
-          <span className="">{t('app.logged.event_reservation_item.family')}</span>
+          <span className='date'>{formatDate()}</span>
-        }
+        </div>
-        {reservation.event_type === 'nominative' &&
+        <div className="types">
-          <span className="">{t('app.logged.event_reservation_item.nominative')}</span>
+          {/* {reservation.event_type === 'family' &&
-        }
+            <span className="">{t('app.logged.event_reservation_item.family')}</span>
-        {reservation.event_pre_registration &&
+          }
-          <span className="">{t('app.logged.event_reservation_item.pre_registration')}</span>
+          {reservation.event_type === 'nominative' &&
-        }
+            <span className="">{t('app.logged.event_reservation_item.nominative')}</span>
-        <span>{formatDate()}</span>
+          } */}
+          {reservation.event_pre_registration &&
+            // eslint-disable-next-line fabmanager/no-bootstrap, fabmanager/no-utilities
+            <span className="badge text-xs bg-info">{t('app.logged.event_reservation_item.pre_registration')}</span>
+          }
+        </div>
       </div>
       <div className="event-reservation-item__reservation">
-        <div>
+        <div className='list'>
-          <div>{t('app.logged.event_reservation_item.NUMBER_normal_places_reserved', { NUMBER: reservation.nb_reserve_places })}</div>
+          <label>{t('app.logged.event_reservation_item.NUMBER_normal_places_reserved', { NUMBER: reservation.nb_reserve_places })}</label>
           {reservation.booking_users_attributes.filter(u => !u.event_price_category_id).map(u => {
             return (
-              <div key={u.id}>{u.name}</div>
+              <p key={u.id} className='name'>{u.name}</p>
             );
           })}
           {reservation.tickets.map(ticket => {
@@ -84,9 +89,9 @@ export const EventReservationItem: React.FC<EventReservationItemProps> = ({ rese
           })}
         </div>
         {reservation.event_pre_registration &&
-          <div>
+          <div className='status'>
-            <div>{t('app.logged.event_reservation_item.tracking_your_reservation')}</div>
+            <label>{t('app.logged.event_reservation_item.tracking_your_reservation')}</label>
-            {preRegistrationStatus()}
+            <p className="">{preRegistrationStatus()}</p>
           </div>
         }
       </div>

app/frontend/src/stylesheets/application.scss

@@ -47,11 +47,13 @@
 @import "modules/dashboard/reservations/prepaid-packs-panel";
 @import "modules/dashboard/reservations/reservations-dashboard";
 @import "modules/dashboard/reservations/reservations-panel";
-@import "modules/events/event";
-@import "modules/events/events";
 @import "modules/events/event-form";
+@import "modules/events/event-reservation";
+@import "modules/events/event";
+@import "modules/events/events-dashboard";
+@import "modules/events/events-settings";
+@import "modules/events/events";
 @import "modules/events/update-recurrent-modal";
-@import "modules/events/events-settings.scss";
 @import "modules/family-account/child-form";
 @import "modules/family-account/child-item";
 @import "modules/family-account/children-dashboard";

app/frontend/src/stylesheets/modules/events/event-reservation.scss

@@ -0,0 +1,60 @@
+.event-reservation {
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+
+  &-item {
+    padding: 1.6rem 1.6rem 0;
+    display: flex;
+    flex-direction: column;
+    background-color: var(--gray-soft-lightest);
+    border-radius: var(--border-radius);
+
+    label {
+      margin: 0;
+      @include text-xs;
+      color: var(--gray-hard-light);
+    }
+    p {
+      margin: 0;
+      @include text-base(600);
+    }
+    .date { @include text-sm; }
+
+    &__event {
+      padding-bottom: 1.2rem;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      gap: 1.6rem;
+      border-bottom: 1px solid var(--gray-soft-dark);
+    }
+
+    &__reservation {
+      display: flex;
+
+      & > div {
+        padding: 1.2rem 1.6rem 1.2rem 0;
+        flex: 1;
+      }
+      .list {
+        display: flex;
+        flex-direction: column;
+        row-gap: 0.5rem;
+        label:not(:first-of-type) {
+          margin-top: 1rem;
+        }
+      }
+      .name { @include text-sm(500); }
+
+      .status {
+        padding-left: 1.6rem;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        border-left: 1px solid var(--gray-soft-dark);
+      }
+    }
+
+  }
+}

app/frontend/src/stylesheets/modules/events/events-dashboard.scss

@@ -0,0 +1,5 @@
+.events-dashboard {
+  max-width: 1600px;
+  margin: 0 auto;
+  padding-bottom: 6rem;
+}

app/frontend/templates/dashboard/events.html

@@ -8,7 +8,7 @@
   </section>
 
 
-  <div class="row no-gutter">
+  <div class="row events-dashboard">
 
     <div class="col-md-6">
       <div class="widget panel b-a m m-t-lg">
@@ -16,8 +16,8 @@
           <h4 class="text-u-c"><i class="fa fa-tag m-r-xs"></i> {{ 'app.logged.dashboard.events.your_next_events' | translate }}</h4>
         </div>
         <div class="widget-content bg-light wrapper r-b">
-          <div class="list-unstyled" ng-if="user.events_reservations.length > 0">
+          <div class="list-unstyled event-reservation" ng-if="user.events_reservations.length > 0">
-            <div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'" class="m-b">
+            <div ng-repeat="r in user.events_reservations | eventsReservationsFilter:'future'">
               <event-reservation-item reservation="r"></event-reservation-item>
             </div>
           </div>