feat(event-detail): restructure layout and enhance styles for better responsiveness

src/app/features/store/pages/event-detail-page/event-detail-page.component.html

@@ -1,6 +1,6 @@
 @if (event(); as item) {
-  <div class="event-detail row gx-sm-4 gx-lg-5">
+  <div class="event-detail">
-    <aside class="event-detail__sidebar col-12 col-sm-4">
+    <aside class="event-detail__sidebar">
       <div class="event-detail__image" [class.event-detail__image--placeholder]="!item.image">
         @if (item.image) {
           <img [src]="item.image" [alt]="item.title" />
@@ -12,37 +12,9 @@
       @if (item.starts_at) {
         <app-counter-to [startsAt]="item.starts_at" />
       }
-
-      @if (item.description) {
-        <section class="event-detail__description" aria-labelledby="event-description-title">
-          <h2 id="event-description-title">Descripción</h2>
-          <p>{{ item.description }}</p>
-        </section>
-      }
-
-      @if (item.social_media?.length) {
-        <section class="event-detail__social" aria-labelledby="event-social-title">
-          <h2 id="event-social-title">Información</h2>
-          @for (social of item.social_media; track social.code) {
-            <a [href]="social.url" target="_blank" rel="noopener noreferrer">
-              <i [class]="socialIcon(social.code)" aria-hidden="true"></i>
-              <span>{{ socialLabel(social.code) }}</span>
-            </a>
-          }
-        </section>
-      }
-
-      @if (mapLocations().length) {
-        <app-location-map
-          class="event-detail__map"
-          [locations]="mapLocations()"
-          ariaLabel="Ubicación del evento"
-          mapStyle="standard"
-        />
-      }
     </aside>
 
-    <main class="event-detail__main col-12 col-sm-8">
+    <main class="event-detail__main">
       <header class="event-detail__header">
         <h1>{{ item.title }}</h1>
         @if (item.subtitle) { <p class="event-detail__subtitle">{{ item.subtitle }}</p> }
@@ -105,6 +77,36 @@
         }
       </section>
     </main>
+
+    <aside class="event-detail__details">
+      @if (item.description) {
+        <section class="event-detail__description" aria-labelledby="event-description-title">
+          <h2 id="event-description-title">Descripción</h2>
+          <p>{{ item.description }}</p>
+        </section>
+      }
+
+      @if (item.social_media?.length) {
+        <section class="event-detail__social" aria-labelledby="event-social-title">
+          <h2 id="event-social-title">Información</h2>
+          @for (social of item.social_media; track social.code) {
+            <a [href]="social.url" target="_blank" rel="noopener noreferrer">
+              <i [class]="socialIcon(social.code)" aria-hidden="true"></i>
+              <span>{{ socialLabel(social.code) }}</span>
+            </a>
+          }
+        </section>
+      }
+
+      @if (mapLocations().length) {
+        <app-location-map
+          class="event-detail__map"
+          [locations]="mapLocations()"
+          ariaLabel="Ubicación del evento"
+          mapStyle="standard"
+        />
+      }
+    </aside>
   </div>
 } @else if (!loading()) {
   <p role="alert">No encontramos este evento.</p>

src/app/features/store/pages/event-detail-page/event-detail-page.component.scss

@@ -1,6 +1,9 @@
 :host { display: block; color: #666666; }
-.event-detail { margin-bottom: 3rem; }
+.event-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: 1.5rem; margin-bottom: 3rem; }
 .event-detail__sidebar, .event-detail__main { min-width: 0; }
+.event-detail__sidebar { grid-column: 1; grid-row: 1; }
+.event-detail__main { grid-column: 2; grid-row: 1 / span 2; }
+.event-detail__details { min-width: 0; grid-column: 1; grid-row: 2; }
 .event-detail__image { background: #e7e8e9; }
 .event-detail__image--placeholder { aspect-ratio: 1.43; display: grid; place-items: center; }
 .event-detail__image img { width: 100%; height: auto; display: block; }
@@ -34,15 +37,37 @@
 .event-detail__buttons { display: flex; justify-content: flex-end; gap: .5rem; margin-top: 1.6rem; }
 .event-detail__buttons app-button { min-width: 0; flex: 0 0 36%; }
 .event-detail__empty { color: #7c8286; font-size: .85rem; }
+@media (min-width: 992px) {
+  .event-detail { column-gap: 3rem; }
+}
 @media (max-width: 575.98px) {
+  .event-detail { grid-template-columns: minmax(0, 1fr); }
+  .event-detail__sidebar, .event-detail__main, .event-detail__details { grid-column: 1; grid-row: auto; }
   .event-detail__main { margin-top: 2rem; }
   .event-detail__description, .event-detail__social { margin-top: 1.5rem; }
   .event-detail__header { min-height: 0; margin-bottom: 2rem; }
   .event-detail__header h1 { font-size: 20px; }
-  .event-detail__product h3 { font-size: 13px; }
+  .event-detail__product-list { gap: 42px; }
-  .event-detail__price { font-size: 14px; }
+  .event-detail__product {
-  .event-detail__total { font-size: 13px; }
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) 118px 72px;
+    column-gap: 26px;
+    margin-inline: 0;
+  }
+  .event-detail__product > * { width: auto; margin-top: 0; padding-inline: 0; }
+  .event-detail__product h3 { align-self: center; font-size: 13px; }
+  .event-detail__product-action { margin-left: 0 !important; }
+  .event-detail__product-action app-quantity-selector {
+    --quantity-selector-width: 118px;
+    --quantity-selector-button-width: 34px;
+    --quantity-selector-value-font-size: 20px;
+  }
+  .event-detail__price { align-self: center; font-size: 14px; }
+  .event-detail__total { margin-top: 44px; padding-top: 25px; font-size: 13px; }
   .event-detail__total strong { font-size: 20px; }
-  .event-detail__buttons { flex-wrap: wrap; }
+  .event-detail__buttons { gap: 10px; margin-top: 44px; }
-  .event-detail__buttons app-button { flex: 1 1 100%; }
+  .event-detail__buttons app-button {
+    --app-button-min-height: 50px;
+    flex: 1 1 0;
+  }
 }

src/app/shared/components/button/button.component.scss

@@ -4,7 +4,7 @@
 }
 
 .btn {
-  min-height: 40px;
+  min-height: var(--app-button-min-height, 40px);
   font-weight: 700;
   font-size: 15px;
   width: 100%;

src/app/shared/components/quantity-selector/quantity-selector.component.scss

@@ -4,14 +4,14 @@
 
 .quantity-selector {
   border: 1px solid var(--border-color);
-  width: 78px;
+  width: var(--quantity-selector-width, 78px);
   height: 40px;
   min-height: 40px;
   background-color: #ffffff;
   box-sizing: border-box;
 
   &__button {
-    width: 24px;
+    width: var(--quantity-selector-button-width, 24px);
     height: 100%;
     font-size: 20px;
     color: #6f6f6f;
@@ -34,7 +34,7 @@
   }
 
   &__value {
-    font-size: 16px;
+    font-size: var(--quantity-selector-value-font-size, 16px);
     color: #6f6f6f;
   }