@asd20/ui 3.2.459 → 3.2.461

package/src/mixins/mockPageMixin.js

@@ -38,7 +38,7 @@ export default {
               'Donec id elit non mi porta gravida at eget metus.',
           }),
 
-          Array(3).fill({
+          Array(5).fill({
             category: 'Image Links',
             type: 'Link',
             id: 'edd36f00-2373-11eb-88e6-97a01f897919',

package/src/mixins/pageTemplateMixin.js

@@ -1,4 +1,7 @@
 export default {
+  data: () => ({
+    desktop: true,
+  }),
   props: {
     // Page meta
     id: { type: String, default: '' },
@@ -203,14 +206,13 @@ export default {
     widgetsSectionProps() {
       /*
       Rules:
-      - Sidebar only shown if more than one message, or the first message has bodyHtml
+      - Sidebar only shown if more than one message, or the first message has bodyHtml, or screen width is > 1024
       - Sidebar widgets move to Footer when sidebar is not present
-      - If both sidebar and footer widgets are shown, prefer placing them in sidebar
       - Full-width widgets are placed in the footer only
-      - If related links contain images, they become full-width
       */
 
-      const useSidebar = this.firstMessage && this.firstMessage.bodyHtml
+      const useSidebar =
+        this.firstMessage && this.firstMessage.bodyHtml && this.desktop
 
       const relatedLinksContainImages =
         this.relatedLinks.length && !!this.relatedLinks.find(l => !!l.imageUrl)
@@ -231,20 +233,21 @@ export default {
         filesFeedProps: this.filesFeedProps,
       }
 
-      if (!useSidebar) {
-        footer.relatedPages = this.relatedPages
-        footer.group = this.group
-        footer.events = this.events || []
-        footer.eventsFeedProps = this.eventsFeedProps
-      }
-
-      if (this.relatedLinks.length > 10 || !useSidebar) {
+      if (this.relatedLinks.length > 15 && relatedLinksContainImages) {
         footer.relatedLinks = this.relatedLinks.filter(l => l.imageUrl)
         sidebar.relatedLinks = this.relatedLinks.filter(l => !l.imageUrl)
       } else {
         sidebar.relatedLinks = this.relatedLinks || []
       }
 
+      if (!useSidebar) {
+        footer.relatedPages = this.relatedPages
+        footer.relatedLinks = this.relatedLinks
+        // footer.group = this.group
+        // footer.events = this.events || []
+        // footer.eventsFeedProps = this.eventsFeedProps
+      }
+
       const useFooter =
         footer.relatedPages.length ||
         footer.relatedLinks.length ||
@@ -301,4 +304,13 @@ export default {
       ]
     },
   },
+  mounted() {
+    this.desktop = window.innerWidth >= 1024
+    window.addEventListener('resize', this.handleResize)
+  },
+  methods: {
+    handleResize() {
+      this.desktop = window.innerWidth >= 1024
+    },
+  },
 }