From ddd61cf17b2e2b35058e76a3648894f0859f9f6b Mon Sep 17 00:00:00 2001
From: Maciej <7597086+mdanilowicz@users.noreply.github.com>
Date: Wed, 20 Sep 2023 08:55:13 +0200
Subject: [PATCH] fix(vue-demo): product listing structure

---
 .changeset/blue-mice-switch.md                |   5 +
 .../components/SwProductListingFilters.vue    | 220 +++++++-----------
 .../public/cms/section/CmsSectionSidebar.vue  |  20 +-
 3 files changed, 97 insertions(+), 148 deletions(-)
 create mode 100644 .changeset/blue-mice-switch.md

diff --git a/.changeset/blue-mice-switch.md b/.changeset/blue-mice-switch.md
new file mode 100644
index 000000000..9254414da
--- /dev/null
+++ b/.changeset/blue-mice-switch.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Change product listing structure
diff --git a/packages/cms-base/components/SwProductListingFilters.vue b/packages/cms-base/components/SwProductListingFilters.vue
index 3aa63cc5e..a941dc430 100644
--- a/packages/cms-base/components/SwProductListingFilters.vue
+++ b/packages/cms-base/components/SwProductListingFilters.vue
@@ -176,154 +176,98 @@ const dropdownElement = ref(null);
 onClickOutside(dropdownElement, () => (isSortMenuOpen.value = false));
 </script>
 <template>
-  <ClientOnly>
-    <div class="bg-white">
-      <main class="mx-auto m-0 px-5">
-        <div
-          class="relative lg:flex lg:items-baseline lg:justify-between pt-6 pb-6 border-b border-gray-200"
-        >
-          <div>
-            <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
-              {{ getTranslatedProperty(category, "name") }}
-            </h1>
-          </div>
+  <div class="bg-white">
+    <main class="mx-auto m-0 px-5">
+      <div
+        class="relative lg:flex lg:items-baseline lg:justify-between pt-6 pb-6 border-b border-gray-200"
+      >
+        <div>
+          <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
+            {{ getTranslatedProperty(category, "name") }}
+          </h1>
+        </div>
 
-          <div class="flex items-center" ref="dropdownElement">
-            <div class="relative inline-block text-left">
-              <div>
+        <div class="flex items-center" ref="dropdownElement">
+          <div class="relative inline-block text-left">
+            <div>
+              <button
+                type="button"
+                @click="isSortMenuOpen = !isSortMenuOpen"
+                class="group inline-flex justify-center bg-transparent text-base font-medium text-gray-700 hover:text-gray-900"
+                id="menu-button"
+                aria-expanded="false"
+                aria-haspopup="true"
+              >
+                {{ translations.listing.sort }}
+                <div
+                  class="i-carbon-chevron-down h-5 w-5 ml-1"
+                  :class="{ hidden: isSortMenuOpen }"
+                ></div>
+                <div
+                  class="i-carbon-chevron-up h-5 w-5 ml-1"
+                  :class="{ hidden: !isSortMenuOpen }"
+                ></div>
+              </button>
+            </div>
+            <div
+              :class="[isSortMenuOpen ? 'absolute' : 'hidden']"
+              class="origin-top-left left-0 lg:origin-top-right lg:right-0 lg:left-auto mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-1000"
+              role="menu"
+              aria-orientation="vertical"
+              aria-labelledby="menu-button"
+              tabindex="-1"
+            >
+              <div class="py-1" role="none">
                 <button
-                  type="button"
-                  @click="isSortMenuOpen = !isSortMenuOpen"
-                  class="group inline-flex justify-center bg-transparent text-base font-medium text-gray-700 hover:text-gray-900"
-                  id="menu-button"
-                  aria-expanded="false"
-                  aria-haspopup="true"
+                  v-for="sorting in getSortingOrders"
+                  :key="sorting.key"
+                  @click="
+                    currentSortingOrder = sorting.key;
+                    isSortMenuOpen = false;
+                  "
+                  :class="[
+                    sorting.key === getCurrentSortingOrder
+                      ? 'font-medium text-gray-900'
+                      : 'text-gray-500',
+                  ]"
+                  class="block px-4 py-2 text-sm"
+                  role="menuitem"
+                  tabindex="-1"
                 >
-                  {{ translations.listing.sort }}
-                  <div
-                    class="i-carbon-chevron-down h-5 w-5 ml-1"
-                    :class="{ hidden: isSortMenuOpen }"
-                  ></div>
-                  <div
-                    class="i-carbon-chevron-up h-5 w-5 ml-1"
-                    :class="{ hidden: !isSortMenuOpen }"
-                  ></div>
+                  {{ sorting.label }}
                 </button>
               </div>
-              <div
-                :class="[isSortMenuOpen ? 'absolute' : 'hidden']"
-                class="origin-top-left left-0 lg:origin-top-right lg:right-0 lg:left-auto mt-2 w-40 rounded-md shadow-2xl bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-1000"
-                role="menu"
-                aria-orientation="vertical"
-                aria-labelledby="menu-button"
-                tabindex="-1"
-              >
-                <div class="py-1" role="none">
-                  <button
-                    v-for="sorting in getSortingOrders"
-                    :key="sorting.key"
-                    @click="
-                      currentSortingOrder = sorting.key;
-                      isSortMenuOpen = false;
-                    "
-                    :class="[
-                      sorting.key === getCurrentSortingOrder
-                        ? 'font-medium text-gray-900'
-                        : 'text-gray-500',
-                    ]"
-                    class="block px-4 py-2 text-sm"
-                    role="menuitem"
-                    tabindex="-1"
-                  >
-                    {{ sorting.label }}
-                  </button>
-                </div>
-              </div>
             </div>
           </div>
         </div>
+      </div>
 
-        <div class="flex flex-wrap" v-if="getInitialFilters.length">
-          <div
-            v-for="filter in getInitialFilters"
-            :key="`${filter?.id || filter?.code}`"
-            class="mb-2 w-full"
-          >
-            <SwProductListingFilter
-              @selectFilterValue="onOptionSelectToggle"
-              :selectedFilters="getCurrentFilters"
-              :filter="filter"
-              class="relative"
-            />
-          </div>
-          <div class="mx-auto mt-4 mb-2">
-            <button
-              class="w-full justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
-              @click="invokeCleanFilters"
-              type="button"
-            >
-              {{ translations.listing.resetFilters
-              }}<span
-                class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
-              ></span>
-            </button>
-          </div>
+      <div class="flex flex-wrap" v-if="getInitialFilters.length">
+        <div
+          v-for="filter in getInitialFilters"
+          :key="`${filter?.id || filter?.code}`"
+          class="mb-2 w-full"
+        >
+          <SwProductListingFilter
+            @selectFilterValue="onOptionSelectToggle"
+            :selectedFilters="getCurrentFilters"
+            :filter="filter"
+            class="relative"
+          />
         </div>
-      </main>
-    </div>
-    <template #placeholder>
-      <div class="bg-white">
-        <main class="mx-auto">
-          <div
-            class="relative flex items-baseline justify-between pt-6 pb-6 border-b border-gray-200"
+        <div class="mx-auto mt-4 mb-2">
+          <button
+            class="w-full justify-center py-2 px-6 border border-transparent shadow-sm text-md font-medium rounded-md text-white bg-black hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500"
+            @click="invokeCleanFilters"
+            type="button"
           >
-            <div>
-              <h1 class="text-4xl font-extrabold tracking-tight text-gray-900">
-                {{ getTranslatedProperty(category, "name") }}
-              </h1>
-            </div>
-
-            <div class="text-sm font-medium text-gray-700 hover:text-gray-900">
-              {{ translations.listing.sort }}
-            </div>
-            <div class="i-carbon-chevron-down h-5 w-5 ml-1"></div>
-          </div>
-          <div class="flex flex-wrap" v-show="!getInitialFilters.length">
-            <div class="flex pl-2 flex-wrap">
-              <div class="py-3 mb-2 mr-4 max-w-sm animate-pulse">
-                <div
-                  class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-                ></div>
-              </div>
-              <div class="py-3 max-w-sm animate-pulse">
-                <div
-                  class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-25 h-12 text-gray-400 hover:text-gray-500 rounded"
-                ></div>
-              </div>
-              <div class="py-3 ml-4 mb-2 max-w-sm animate-pulse">
-                <div
-                  class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-25 h-12 text-gray-400 hover:text-gray-500 rounded"
-                ></div>
-              </div>
-              <div class="py-3 mb-2 max-w-sm animate-pulse">
-                <div
-                  class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-                ></div>
-              </div>
-              <div class="py-3 mb-2 max-w-sm animate-pulse">
-                <div
-                  class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-                ></div>
-              </div>
-              <div class="py-3 mb-2 max-w-sm animate-pulse">
-                <div
-                  class="border-1 bg-gray-200 dark:bg-gray-700px-2 py-3 w-42 h-12 text-gray-400 hover:text-gray-500 rounded"
-                ></div>
-              </div>
-            </div>
-          </div>
-        </main>
+            {{ translations.listing.resetFilters
+            }}<span
+              class="w-6 h-6 i-carbon-close-filled inline-block align-middle ml-2"
+            ></span>
+          </button>
+        </div>
       </div>
-    </template>
-  </ClientOnly>
+    </main>
+  </div>
 </template>
diff --git a/packages/cms-base/components/public/cms/section/CmsSectionSidebar.vue b/packages/cms-base/components/public/cms/section/CmsSectionSidebar.vue
index 9a4884180..e36cce372 100644
--- a/packages/cms-base/components/public/cms/section/CmsSectionSidebar.vue
+++ b/packages/cms-base/components/public/cms/section/CmsSectionSidebar.vue
@@ -15,10 +15,18 @@ const mobileBehavior = computed(() => props.content.mobileBehavior);
 </script>
 
 <template>
-  <div class="cms-section-sidebar flex flex-col md:block">
+  <div class="cms-section-sidebar grid grid-cols-12 md:grid">
+    <div class="col-span-12 md:col-span-9 order-2 md:order-2">
+      <CmsGenericBlock
+        v-for="cmsBlock in mainBlocks"
+        class="overflow-auto"
+        :key="cmsBlock.id"
+        :content="cmsBlock"
+      />
+    </div>
     <div
       :class="{
-        'inline-block align-top w-12/12 md:w-3/12 order-2 md:order-1':
+        'align-top col-span-12 md:col-span-3 order-1 md:order-1':
           mobileBehavior !== 'hidden',
         'hidden md:block': mobileBehavior === 'hidden',
       }"
@@ -30,13 +38,5 @@ const mobileBehavior = computed(() => props.content.mobileBehavior);
         :content="cmsBlock"
       />
     </div>
-    <div class="inline-block w-12/12 md:w-9/12 order-1 md:order-2">
-      <CmsGenericBlock
-        v-for="cmsBlock in mainBlocks"
-        class="overflow-auto"
-        :key="cmsBlock.id"
-        :content="cmsBlock"
-      />
-    </div>
   </div>
 </template>