fix(vue-demo-store): adjust styles (#466)

* fix(vue-demo-store): adjust styles * fix(vue-demo-store): adjust styles
shopware · Nov 20, 2023 · 543d18d · 543d18d · vercel · Nov 20, 2023
1 parent 0e031ef
commit 543d18d
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/.changeset/cool-seals-speak.md b/.changeset/cool-seals-speak.md
@@ -0,0 +1,5 @@
+---
+"vue-demo-store": patch
+---
+
+Adjust product listing page styles
diff --git a/packages/cms-base/components/SwProductCard.vue b/packages/cms-base/components/SwProductCard.vue
@@ -179,13 +179,15 @@ const srcPath = computed(() => {
       <p
         v-for="option in product?.options"
         :key="option.id"
-        class="items-center px-1 py-0 line-clamp-2 rounded-md bg-gray-50 ring-1 ring-inset ring-gray-500/10 text-xs font-medium text-gray-600"
+        class="items-center line-clamp-2 rounded-md text-xs font-medium text-gray-600 mt-3"
       >
         {{ (option as PropertyGroupOption).group.name }}:
-        {{ (option as PropertyGroupOption).name }}
+        <span class="font-bold"
+          >{{ (option as PropertyGroupOption).name }}
+        </span>
       </p>
     </div>
-    <div class="px-4 pb-4 h-52 md:h-32">
+    <div class="px-4 pb-4">
       <RouterLink
         class="line-clamp-2"
         :to="buildUrlPrefix(getProductRoute(product), urlPrefix)"
@@ -197,20 +199,19 @@ const srcPath = computed(() => {
           {{ getProductName({ product }) }}
         </h5>
       </RouterLink>
-      <div class="md:flex items-center justify-between">
-        <div class="">
-          <SwListingProductPrice
-            :product="product"
-            class="ml-auto"
-            data-testid="product-box-product-price"
-          />
-        </div>
 
+      <SwListingProductPrice
+        :product="product"
+        class="ml-auto"
+        data-testid="product-box-product-price"
+      />
+
+      <div>
         <button
           v-if="!fromPrice"
           type="button"
           @click="addToCartProxy"
-          class="justify-center w-full md:w-auto my-8 md-m-0 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transform transition duration-400 md:hover:scale-120 flex"
+          class="w-full justify-center my-8 md-m-0 py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transform transition duration-400 flex"
           :class="{
             'text-white bg-blue-600 hover:bg-blue-700': !isInCart,
             'text-gray-600 bg-gray-100': isInCart,
@@ -229,7 +230,7 @@ const srcPath = computed(() => {
           class=""
         >
           <div
-            class="justify-center w-full md:w-auto my-8 md-m-0 py-2 px-3 border border-transparent shadow-sm text-sm 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 transform transition duration-400 hover:scale-120"
+            class="text-center justify-center w-full md:w-auto my-8 md-m-0 py-2 px-3 border border-transparent shadow-sm text-sm 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 transform transition duration-400"
           >
             <span data-testid="product-box-product-show-details">Details</span>
           </div>

diff --git a/packages/cms-base/components/public/cms/element/CmsElementProductListing.vue b/packages/cms-base/components/public/cms/element/CmsElementProductListing.vue
@@ -53,13 +53,15 @@ setInitialListing(props?.content?.data?.listing);
   <div class="bg-white">
     <div class="max-w-2xl mx-auto lg:max-w-full">
       <div v-if="getElements.length" class="mt-6">
-        <div class="flex flex-wrap justify-center sm:justify-between">
+        <div
+          class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-6 lg:gap-8 p-4 md:p-6 lg:p-8"
+        >
           <SwProductCard
             v-for="product in getElements"
             :key="product.id"
             :product="product"
             :isProductListing="isProductListing"
-            class="w-full sm:w-3/7 lg:w-2/7 mb-8"
+            class="p-4 border rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 ease-in-out"
           />
         </div>
         <div class="mt-10">