From 8c6d4f1af37d91baee1bb20bc4dccd7850709f46 Mon Sep 17 00:00:00 2001
From: Anthony Tarlao <anthony.tarlao@gmail.com>
Date: Mon, 23 Sep 2024 15:56:30 +0200
Subject: [PATCH] Homepage style for tablet and mobile

---
 .gitignore                                    |  1 +
 .../home-page/ui/src/index.scss               | 12 ++-
 .../book-preview-widget/ui/src/index.js       | 36 ++++-----
 .../book-preview-widget/ui/src/index.scss     |  7 +-
 .../highlight-items-widget/ui/src/index.scss  | 76 +++++++++++++++----
 .../highlight-items-widget/views/widget.html  |  2 +-
 6 files changed, 95 insertions(+), 39 deletions(-)

diff --git a/.gitignore b/.gitignore
index df18993..a7d3956 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,6 +2,7 @@ package-lock.json
 /locales
 npm-debug.log
 /data
+server/data
 server/public/uploads
 server/public/apos-minified
 server/public/modules
diff --git a/server/modules/@apostrophecms/home-page/ui/src/index.scss b/server/modules/@apostrophecms/home-page/ui/src/index.scss
index 2ddcdfc..d9e9e66 100644
--- a/server/modules/@apostrophecms/home-page/ui/src/index.scss
+++ b/server/modules/@apostrophecms/home-page/ui/src/index.scss
@@ -43,7 +43,7 @@
   display: flex;
 
   @media (min-width: map-get($breakpoints, 'sm')) {
-    height: 532px;
+    height: 510px;
   }
   @media (min-width: map-get($breakpoints, 'md')) {
     height: 1873px;
@@ -183,11 +183,11 @@
 .pdl-home__discover {
   background: black;
   color: white;
-  padding: 15px 12px;
+  padding: 12px;
   font-size: 18px;
   border-radius: 4px;
   position: sticky;
-  top: calc(100% - 80px);
+  top: calc(100% - 67px);
   margin-bottom: 30px;
   margin-left: auto;
   margin-right: auto;
@@ -197,7 +197,8 @@
   align-items: center;
 
   @media (min-width: map-get($breakpoints, 'md')) {
-    top: calc(100% - 90px);
+    padding: 16px 12px;
+    top: calc(100% - 85px);
   }
 
   &:not(:hover) {
@@ -243,6 +244,7 @@
     padding-right: 15px;
     padding-bottom: 19px;
     letter-spacing: -1px;
+    line-height: 49px;
 
     @media (min-width: map-get($breakpoints, 'sm')) {
       letter-spacing: 0;
@@ -256,6 +258,7 @@
       padding-left: 32px;
       padding-right: 155px;
       padding-bottom: 40px;
+      line-height: 82px;
     }
   }
 
@@ -280,6 +283,7 @@
       font-size: 26px;
       padding: 20px 24px;
       margin-left: 32px;
+      margin-top: 3px;
     }
 
     svg {
diff --git a/server/modules/book-preview-widget/ui/src/index.js b/server/modules/book-preview-widget/ui/src/index.js
index 09dd57d..d6a66a9 100644
--- a/server/modules/book-preview-widget/ui/src/index.js
+++ b/server/modules/book-preview-widget/ui/src/index.js
@@ -2,12 +2,12 @@ export default () => {
   apos.util.widgetPlayers['book-preview-widget'] = {
     selector: '[data-book-preview-widget]',
     player: function (el) {
-      addPreviewSpacing()
+      if (window.innerWidth < 1025) {
+        addPreviewSpacing()
 
-      window.addEventListener('resize', addPreviewSpacing)
+        // window.addEventListener('resize', addPreviewSpacing)
 
-      function addPreviewSpacing () {
-        if (screen.width < 1025) {
+        function addPreviewSpacing () {
           const formatsLists = el.querySelectorAll('.pdl-book-preview__formats')
           if (formatsLists?.length) {
             for (const formatsList of formatsLists) {
@@ -27,23 +27,23 @@ export default () => {
             }
           }
         }
-      }
 
-      const body = document.querySelector('body')
-      body.addEventListener('click', removePreviewSpacing)
+        const body = document.querySelector('body')
+        body.addEventListener('click', removePreviewSpacing)
 
-      function removePreviewSpacing () {
-        const previewContainers = document.querySelectorAll('.pdl-book-preview')
-        if (previewContainers?.length) {
-          for (const previewContainer of previewContainers) {
-            previewContainer.classList.remove('pdl-book-preview--big-space')
+        function removePreviewSpacing () {
+          const previewContainers = document.querySelectorAll('.pdl-book-preview')
+          if (previewContainers?.length) {
+            for (const previewContainer of previewContainers) {
+              previewContainer.classList.remove('pdl-book-preview--big-space')
 
-            const displayList = previewContainer.querySelector('[data-book-formats-list]')
-            if (displayList) {
-              const secondFormat = previewContainer.querySelector('.pdl-book-preview__format--second')
-              const thirdFormat = previewContainer.querySelector('.pdl-book-preview__format--third')
-              secondFormat.classList.remove('pdl-book-preview__format--visible')
-              thirdFormat.classList.remove('pdl-book-preview__format--visible')
+              const displayList = previewContainer.querySelector('[data-book-formats-list]')
+              if (displayList) {
+                const secondFormat = previewContainer.querySelector('.pdl-book-preview__format--second')
+                const thirdFormat = previewContainer.querySelector('.pdl-book-preview__format--third')
+                secondFormat.classList.remove('pdl-book-preview__format--visible')
+                thirdFormat.classList.remove('pdl-book-preview__format--visible')
+              }
             }
           }
         }
diff --git a/server/modules/book-preview-widget/ui/src/index.scss b/server/modules/book-preview-widget/ui/src/index.scss
index 495d966..ccec1eb 100644
--- a/server/modules/book-preview-widget/ui/src/index.scss
+++ b/server/modules/book-preview-widget/ui/src/index.scss
@@ -8,9 +8,14 @@
     margin-top: 0;
   }
   .pdl-book-previews {
-    margin-bottom: 10px;
+    margin-bottom: 24px;
   }
   .pdl-book-preview__title {
     min-height: 44px;
   }
+  &:hover .pdl-book-preview__formats {
+    @media (min-width: map-get($breakpoints, 'md')) {
+      transform: translateY(-80px);
+    }
+  }
 }
diff --git a/server/modules/highlight-items-widget/ui/src/index.scss b/server/modules/highlight-items-widget/ui/src/index.scss
index d02a47e..0adb439 100644
--- a/server/modules/highlight-items-widget/ui/src/index.scss
+++ b/server/modules/highlight-items-widget/ui/src/index.scss
@@ -24,8 +24,15 @@ body { overflow: hidden; }
   flex-direction: row;
   overflow: hidden;
   width: 100%;
-  height: 767px;
+  height: auto;
   scroll-behavior: smooth;
+
+  @media (min-width: map-get($breakpoints, 'sm')) {
+    height: 380px;
+  }
+  @media (min-width: map-get($breakpoints, 'md')) {
+    height: 767px;
+  }
 }
 
 .pdl-highlight-widget__items {
@@ -71,39 +78,48 @@ body { overflow: hidden; }
     }
   }
 
-  h1 {
-    font-size: 36px;
+  .pdl-highlight-widget__title {
+    font-size: 63px;
     font-weight: 450;
+    line-height: 58px;
     text-align: left;
     margin: 0;
 
     @media (min-width: map-get($breakpoints, 'md')) {
-      font-size: 82.5px;
+      font-size: 112px;
+      line-height: 101px;
     }
   }
 
   .pdl-highlight-widget__image {
     display: block;
     min-width: 50vw;
-    max-width: fit-content;
-    height: 100%;
+    height: 380px;
     mix-blend-mode: multiply;
     filter: grayscale(1);
     object-fit: cover;
+
+    @media (min-width: map-get($breakpoints, 'sm')) {
+      height: 100%;
+    }
   }
 
   .pdl-highlight-widget__container {
-    margin: 16px 20px 27px;
     display: flex;
     flex-direction: column;
-    position: relative;
-    height: 100%;
+    width: 92%;
+    height: calc(100% - 68px);
+    margin: 16px 20px 52px;
 
     @media (min-width: map-get($breakpoints, 'sm')) {
+      width: calc(50% - 35px);
+      height: calc(100% - 35px);
       margin: 20px 20px 15px;
     }
 
     @media (min-width: map-get($breakpoints, 'md')) {
+      width: calc(50% - 65px);
+      height: calc(100% - 40px);
       margin: 20px 30px;
     }
   }
@@ -128,6 +144,13 @@ body { overflow: hidden; }
     font-size: 30px;
     font-weight: 500;
     text-align: left;
+    position: relative;
+    margin-top: 11px;
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      margin-top: 10px;
+      width: auto;
+    }
   }
 
   .pdl-highlight-widget__date {
@@ -135,7 +158,14 @@ body { overflow: hidden; }
     align-items: center;
     position: relative;
     left: -5px;
-    top: -5px;
+    top: 7px;
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      top: -5px;
+    }
+    @media (min-width: map-get($breakpoints, 'sm')) {
+      top: 5px;
+    }
 
     svg {
       position: relative;
@@ -183,29 +213,45 @@ body { overflow: hidden; }
     gap: 9px;
     align-items: center;
     justify-content: center;
+    margin-top: 22px;
 
     @media (min-width: map-get($breakpoints, 'md')) {
       gap: 16px;
       font-size: 26px;
       padding: 20px 24px;
+      margin-top: 20px;
+    }
+
+    svg {
+      width: 12px;
+
+      @media (min-width: map-get($breakpoints, 'md')) {
+        width: 24px;
+      }
     }
   }
 
   .pdl-highlight-widget__slider {
     cursor: pointer;
     position: absolute;
-    bottom: 30px;
+    bottom: 20px;
+    display: flex;
+    gap: 8px;
+
+    @media (min-width: map-get($breakpoints, 'md')) {
+      bottom: 40px;
+    }
 
     .slider__navlink {
       border: 1px solid black;
-      background-color: black;
+      background-color: transparent;
       border-radius: 2px;
       display: inline-block;
-      height: 10px;
-      width: 10px;
+      height: 11px;
+      width: 11px;
 
       &--active {
-        background-color: transparent;
+        background-color: black;
       }
     }
   }
diff --git a/server/modules/highlight-items-widget/views/widget.html b/server/modules/highlight-items-widget/views/widget.html
index 2d14969..7d0746b 100644
--- a/server/modules/highlight-items-widget/views/widget.html
+++ b/server/modules/highlight-items-widget/views/widget.html
@@ -7,7 +7,7 @@
       <img class="pdl-highlight-widget__image pdl-image-widget" src="{{ image._urls['one-half'] }}" alt="{{ image._alt if image._alt or image.title }}" width="{{ apos.attachment.getWidth(image) }}" height="{{ apos.attachment.getHeight(image) }}">
 
       <div class="pdl-highlight-widget__container">
-        <h1>{{ item.title }}</h1>
+        <div class="pdl-highlight-widget__title">{{ item.title }}</div>
 
         {% if item.year %}
           <div class="pdl-highlight-widget__date">