Switch event and venue details content order when using small screen

apps/sports-helsinki/src/domain/venue/venueContent/VenueContent.tsx

@@ -28,7 +28,7 @@ const VenueContent: React.FC<Props> = ({ venue, className }) => {
   const { description } = venue;
   const shortDescription = null;
   return (
-    <PageSection className={classNames(styles.eventContent, className)}>
+    <PageSection className={classNames(styles.venueContent, className)}>
       <ContentContainer>
         <div className={styles.contentWrapper}>
           <div className={styles.leftEmpty} />
@@ -54,12 +54,14 @@ const VenueContent: React.FC<Props> = ({ venue, className }) => {
               </div>
             )}
             <VenueOtherInfo venue={venue} />
-            <ShareLinks title={t('venue:shareLinks.title')} />
-            <VenueLocation venue={venue} />
           </div>
-          <aside>
+          <aside className={styles.sidebar}>
             <VenueInfo venue={venue} />
           </aside>
+          <div className={styles.secondaryContent}>
+            <ShareLinks title={t('venue:shareLinks.title')} />
+            <VenueLocation venue={venue} />
+          </div>
         </div>
       </ContentContainer>
     </PageSection>

apps/sports-helsinki/src/domain/venue/venueContent/venueContent.module.scss

@@ -1,29 +1,67 @@
 @use '../../../styles/breakpoints' as breakpoints;
 
-.eventContent {
+.venueContent {
   --description-font-size: var(--fontsize-body-l);
   background-color: var(--color-white);
-  // margin-bottom: var(--spacing-4-xl); // Not needed when similar events are used
 
   .contentWrapper {
     display: grid;
     grid-template-columns: unset;
     position: relative;
 
-    @include breakpoints.respond-above(m) {
-      display: grid;
-      grid-template-columns: auto 2fr 1fr;
-      grid-template-rows: unset;
-    }
-
     .leftEmpty {
       padding: var(--spacing-m) calc(var(--spacing-4-xl) + 40px)
         var(--spacing-m) 0;
+    }
 
-      @include breakpoints.respond-below(m) {
+    /* 
+    When using bigger than mobile sized screen, the content order would be: 
+    1. venue description
+    2. share buttons, 
+    3. map, 
+    4. sidebar
+    5. venue events, footer, etc...
+    */
+    @include breakpoints.respond-below(m) {
+      .leftEmpty {
         position: absolute;
         padding: 0;
       }
+      .sidebar {
+        padding-top: var(--spacing-xl);
+      }
+    }
+    /* 
+    When using mobile sized screen, switch the sidebar with 
+    secondary data (location / map, share buttons...) in main content,
+    so in mobile the order would be: 
+    1. venue description
+    2. sidebar
+    3. share buttons, 
+    4. map, 
+    5. venue events, footer, etc...
+    */
+    @include breakpoints.respond-above(m) {
+      grid-template-columns: auto 2fr 1fr;
+      grid-template-rows: auto 1fr;
+
+      .mainContent  {
+        grid-column: 2;
+      }
+
+      .sidebar {
+        grid-column: 3;
+        grid-row: 1 / span 2;
+      }
+
+      .secondaryContent {
+        grid-column: 2;
+      }
+
+      .leftEmpty {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+      }
     }
   }
 }
@@ -35,9 +73,9 @@
 
 .description {
   line-height: 1.5;
-  white-space: pre-line;
-  font-size: var(--description-font-size);
+
   p {
+    font-size: var(--description-font-size);
     margin: 1rem 0;
   }
 

packages/components/src/components/domain/event/eventContent/EventContent.tsx

@@ -50,7 +50,7 @@ const EventContent: React.FC<Props> = ({
           )}
         >
           <div className={styles.leftEmpty} />
-          <div>
+          <div className={styles.mainContent}>
             {description && (
               <>
                 <h2 className={styles.descriptionTitle}>
@@ -84,11 +84,13 @@ const EventContent: React.FC<Props> = ({
                 )}
               </>
             )}
-            <ShareLinks title={t('event:shareLinks.title')} />
-            {!isInternetEvent && <EventLocation event={event} />}
           </div>
-          <div>
+          <aside className={styles.sidebar}>
             <EventInfo event={event} superEvent={superEvent} />
+          </aside>
+          <div className={styles.secondaryContent}>
+            <ShareLinks title={t('event:shareLinks.title')} />
+            {!isInternetEvent && <EventLocation event={event} />}
           </div>
         </div>
       </ContentContainer>

packages/components/src/components/domain/event/eventContent/eventContent.module.scss

@@ -3,31 +3,69 @@
 .eventContent {
   --description-font-size: var(--fontsize-body-l);
   background-color: var(--color-white);
-  // margin-bottom: var(--spacing-4-xl); // Not needed when similar events are used
 
   .contentWrapper {
     display: grid;
     grid-template-columns: unset;
     position: relative;
 
-    @include breakpoints.respond-above(m) {
-      display: grid;
-      grid-template-columns: auto 2fr 1fr;
-      grid-template-rows: unset;
-    }
-
     &.noSimilarEvents {
       margin-bottom: 120px;
     }
 
     .leftEmpty {
       padding: var(--spacing-m) calc(var(--spacing-4-xl) + 40px)
         var(--spacing-m) 0;
+    }
 
-      @include breakpoints.respond-below(m) {
+    /* 
+    When using bigger than mobile sized screen, the content order would be: 
+    1. event description
+    2. share buttons, 
+    3. map, 
+    4. sidebar
+    5. other events, footer, etc...
+    */
+    @include breakpoints.respond-below(m) {
+      .leftEmpty {
         position: absolute;
         padding: 0;
       }
+      .sidebar {
+        padding-top: var(--spacing-xl);
+      }
+    }
+    /* 
+    When using mobile sized screen, switch the sidebar with 
+    secondary data (location / map, share buttons...) in main content,
+    so in mobile the order would be: 
+    1. event description
+    2. sidebar
+    3. share buttons, 
+    4. map, 
+    5. other events, footer, etc...
+    */
+    @include breakpoints.respond-above(m) {
+      grid-template-columns: auto 2fr 1fr;
+      grid-template-rows: auto 1fr;
+
+      .mainContent  {
+        grid-column: 2;
+      }
+
+      .sidebar {
+        grid-column: 3;
+        grid-row: 1 / span 2;
+      }
+
+      .secondaryContent {
+        grid-column: 2;
+      }
+
+      .leftEmpty {
+        grid-column: 1;
+        grid-row: 1 / span 2;
+      }
     }
   }
 }