Merge pull request #46 from MikeCheek/dev

Fixing cookie banner size and removing bosco coste videos
MikeCheek · May 30, 2024 · 9fb802d · 9fb802d
2 parents 298bdd7 + a93ba7b
commit 9fb802d
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 30 deletions.
diff --git a/src/components/molecules/CookieBanner/index.module.scss b/src/components/molecules/CookieBanner/index.module.scss
@@ -20,19 +20,22 @@
   position: fixed;
   width: 100%;
   font-weight: 100;
-  gap: 10px;
   z-index: 99999;
-  padding: 30px 0;
+  padding: 10px 0;
 }
 
 .content {
-  margin: 10px 40px;
+  margin: 0 40px;
   text-align: center;
+  overflow-y: hidden;
   font-size: 0.7rem;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
+  p {
+    overflow-y: scroll;
+  }
   @media screen and (min-width: '768px') {
     font-size: 0.85rem;
   }

diff --git a/src/components/molecules/CookieBanner/index.tsx b/src/components/molecules/CookieBanner/index.tsx
@@ -45,12 +45,14 @@ const Index = ({ close }: CookieBannerProps) => {
       <div className={styles.shadow}></div>
       <div className={styles.banner}>
         <X className={styles.close} width={20} height={20} onClick={() => handleAcceptCookie(true)} />
-        <div className={styles.content}>
-          {t('CookiesText')}{' '}
-          <span className={styles.link} style={{ display: 'contents' }} onClick={openOptions}>
-            {t('CookiesTextCta')}
-          </span>
-          .
+        <div className={styles.content} style={showOptions ? {} : { maxHeight: '15vh' }}>
+          <p>
+            {t('CookiesText')}{' '}
+            <span className={styles.link} style={{ display: 'contents' }} onClick={openOptions}>
+              {t('CookiesTextCta')}
+            </span>
+            .
+          </p>
           {showOptions ? (
             <div className={styles.options}>
               <div className={styles.option}>

diff --git a/src/components/molecules/WhenAndWhere/index.tsx b/src/components/molecules/WhenAndWhere/index.tsx
@@ -11,6 +11,8 @@ import { useTranslation } from 'react-i18next';
 import LocationMap from '../../atoms/LocationMap';
 import Badge from '../../atoms/Badge';
 import { services } from '../../../utilities/location';
+import { mapsLink } from '../../../utilities/howToReach';
+import { StaticImage } from 'gatsby-plugin-image';
 
 const Index = () => {
   const { t } = useTranslation();
@@ -27,7 +29,6 @@ const Index = () => {
         <span>
           <h3>Bosco Coste, Grottole (MT)</h3>
           <p>{t('Date')}</p>
-          {/* <p className={styles.locDesc} dangerouslySetInnerHTML={{ __html: t('LocationDescription') }}></p> */}
         </span>
         <LocationMap />
       </ShowOnView>
@@ -42,32 +43,40 @@ const Index = () => {
       </ShowOnView> */}
       <SectionImageCTA
         text={t('LocationText1')}
-        // buttonText={t('LocationCta')}
-        // buttonHref={mapsLink}
+        buttonText={t('LocationCta')}
+        buttonHref={mapsLink}
         imageOrVideo={
-          <video height={500} muted autoPlay controls={false} loop playsInline>
-            {loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
-            Your browser doesn't support video tag
-          </video>
+          // <video height={500} muted autoPlay controls={false} loop playsInline>
+          //   {loadVideo ? <source src={BoscoCoste} type="video/mp4" /> : <></>}
+          //   Your browser doesn't support video tag
+          // </video>
+          <StaticImage
+            quality={80}
+            alt="Bosco coste"
+            src="../../../images/location/bosco-coste.JPG"
+            layout="constrained"
+            width={700}
+            height={500}
+          />
         }
       />
       <SectionImageCTA
         text={t('LocationText2')}
-        // buttonText={t('LocationCta')}
-        // buttonHref={mapsLink}
+        buttonText={t('LocationCta')}
+        buttonHref={mapsLink}
         imageOrVideo={
-          <video height={500} muted autoPlay controls={false} loop playsInline>
-            {loadVideo ? <source src={BoscoCoste1} type="video/mp4" /> : <></>}
-            Your browser doesn't support video tag
-          </video>
-          // <StaticImage
-          //   quality={80}
-          //   alt="Bosco coste"
-          //   src="../../../images/location/bosco-2.JPG"
-          //   layout="constrained"
-          //   width={700}
-          //   height={500}
-          // />
+          // <video height={500} muted autoPlay controls={false} loop playsInline>
+          //   {loadVideo ? <source src={BoscoCoste1} type="video/mp4" /> : <></>}
+          //   Your browser doesn't support video tag
+          // </video>
+          <StaticImage
+            quality={80}
+            alt="Bosco coste"
+            src="../../../images/location/bosco-2.JPG"
+            layout="constrained"
+            width={700}
+            height={500}
+          />
         }
         reversed
       />