chore: Minor css tweaks

woonuxt_base/app/components/cartElements/CartTrigger.vue

@@ -9,9 +9,9 @@ const { toggleCart, cart } = useCart();
       <Transition name="popIn" mode="out-in">
         <span
           v-if="cart?.contents?.itemCount > 0"
-          class="bg-primary rounded-full text-white leading-none min-w-[16px] p-[3px] -top-1 -right-1 md:-right-2 text-[10px] absolute inline-flex justify-center items-center"
-          >{{ cart?.contents?.itemCount }}</span
-        >
+          class="bg-primary rounded-full text-white leading-none min-w-[16px] p-[3px] -top-1 -right-1 md:-right-2 text-[10px] absolute inline-flex justify-center items-center">
+          {{ cart?.contents?.itemCount }}
+        </span>
       </Transition>
     </ClientOnly>
   </div>

woonuxt_base/app/components/productElements/ProductCard.vue

@@ -37,9 +37,9 @@ const imagetoDisplay = computed<string>(() => {
 </script>
 
 <template>
-  <div class="relative product-card">
+  <div class="relative group">
     <NuxtLink v-if="node.slug" :to="`/product/${decodeURIComponent(node.slug)}`" :title="node.name">
-      <SaleBadge :node="node" class="absolute top-2 right-2" />
+      <SaleBadge :node class="absolute top-2 right-2" />
       <NuxtImg
         v-if="imagetoDisplay"
         :width="imgWidth"
@@ -49,28 +49,16 @@ const imagetoDisplay = computed<string>(() => {
         :title="node.image?.title || node.name"
         :loading="index <= 3 ? 'eager' : 'lazy'"
         :sizes="`sm:${imgWidth / 2}px md:${imgWidth}px`"
+        class="rounded-lg object-top object-cover w-full aspect-9/8"
         placeholder
         placeholder-class="blur-xl" />
     </NuxtLink>
     <div class="p-2">
       <StarRating v-if="storeSettings.showReviews" :rating="node.averageRating" :count="node.reviewCount" />
       <NuxtLink v-if="node.slug" :to="`/product/${decodeURIComponent(node.slug)}`" :title="node.name">
-        <h2 class="mb-2 font-light leading-tight">{{ node.name }}</h2>
+        <h2 class="mb-2 font-light leading-tight group-hover:text-primary">{{ node.name }}</h2>
       </NuxtLink>
       <ProductPrice class="text-sm" :sale-price="node.salePrice" :regular-price="node.regularPrice" />
     </div>
   </div>
 </template>
-
-<style lang="postcss" scoped>
-.product-card img {
-  @apply rounded-lg object-top object-cover w-full;
-  aspect-ratio: 1/1.125;
-}
-
-.product-card:hover {
-  h2 {
-    @apply text-primary;
-  }
-}
-</style>

woonuxt_base/app/components/productElements/ProductImageGallery.vue

@@ -4,7 +4,7 @@ const { FALLBACK_IMG } = useHelpers();
 const props = defineProps({
   mainImage: { type: Object, required: true },
   gallery: { type: Object, required: true },
-  node: { type: Object, required: true },
+  node: { type: Object as PropType<Product>, required: true },
   activeVariation: { type: Object, required: false },
 });
 
@@ -41,7 +41,7 @@ const imgWidth = 640;
 
 <template>
   <div>
-    <SaleBadge :node="node" class="absolute text-base top-4 right-4" />
+    <SaleBadge :node class="absolute text-base top-4 right-4" />
     <NuxtImg
       class="rounded-xl object-contain w-full min-w-[350px]"
       :width="imgWidth"

woonuxt_base/app/components/shopElements/CountrySelect.vue

@@ -1,5 +1,4 @@
 <script setup>
-
 const props = defineProps({
   modelValue: { type: String, default: '' },
 });
@@ -17,16 +16,10 @@ function select(evt) {
 </script>
 
 <template>
-  <select :value="modelValue" @change="select" required>
+  <select :value="modelValue" @change="select" required class="h-[42px]">
     <option value="" disabled>Select a country</option>
     <option v-for="country in countriesToShow" :key="country.code" :value="country.code">
       {{ country.name }}
     </option>
   </select>
 </template>
-
-<style scoped lang="postcss">
-select {
-  height: 42px;
-}
-</style>

woonuxt_base/app/pages/categories.vue

@@ -11,7 +11,7 @@ useHead({
 
 <template>
   <main class="container">
-    <div v-if="productCategories && productCategories.length" class="grid grid-cols-2 gap-4 my-6 md:grid-cols-3 lg:gap-8 xl:grid-cols-4">
+    <div v-if="productCategories?.length" class="grid grid-cols-2 gap-4 my-6 md:grid-cols-3 lg:gap-8 xl:grid-cols-4">
       <CategoryCard v-for="(category, i) in productCategories" :key="i" :node="category" :image-loading="i <= 2 ? 'eager' : 'lazy'" />
     </div>
   </main>

woonuxt_base/app/pages/product/[slug].vue

@@ -97,7 +97,7 @@ const disabledAddToCart = computed(() => {
             <div class="flex-1">
               <h1 class="flex flex-wrap items-center gap-2 mb-2 text-2xl font-sesmibold">
                 {{ type.name }}
-                <WPAdminLink :link="`/wp-admin/post.php?post=${product.databaseId}&action=edit`">Edit</WPAdminLink>
+                <LazyWPAdminLink :link="`/wp-admin/post.php?post=${product.databaseId}&action=edit`">Edit</LazyWPAdminLink>
               </h1>
               <StarRating :rating="product.averageRating || 0" :count="product.reviewCount || 0" v-if="storeSettings.showReviews" />
             </div>

woonuxt_base/package.json

@@ -1,6 +1,6 @@
 {
   "name": "woonuxt",
-  "version": "4.1.2",
+  "version": "4.1.3",
   "main": "./nuxt.config.ts",
   "type": "module"
 }

woonuxt_base/tailwind.config.ts

@@ -15,6 +15,9 @@ export default <Partial<Config>>{
           dark: '#754fa3',
         },
       },
+      aspectRatio: {
+        '9/8': '1 / 1.125',
+      },
       screens: {
         '2xl': '1400px',
       },