[3] Improve frontend 2

lang/nl.json

@@ -2,7 +2,7 @@
     ":count of the requested quantity will be backordered": ":count van de aangevraagde hoeveelheid zal worden nageleverd",
     "Accept cookies": "Accepteer cookies",
     "Account": "Account",
-    "Add to cart": "Toevoegen aan winkelwagen",
+    "Add to cart": "In winkelwagen",
     "Added": "Toegevoegd",
     "Adding": "Aan het toevoegen",
     "Addition": "Toevoeging",

resources/css/components/price-slider.css

@@ -4,7 +4,7 @@ div.vue-slider {
 
 div.vue-slider-process,
 div.vue-slider-rail {
-    @apply h-2 bg !important;
+    @apply h-2 bg-primary !important;
 }
 
 div.vue-slider-rail {

resources/views/components/listing.blade.php

@@ -35,7 +35,7 @@
 
                 {{ $before ?? '' }}
                 @if ($slot->isEmpty())
-                    <div class="flex flex-col lg:flex-row gap-x-4">
+                    <div class="flex flex-col lg:flex-row gap-x-6 gap-y-3">
                         <div class="xl:w-1/5">
                             @include('rapidez::listing.filters')
                         </div>

resources/views/components/productlist.blade.php

@@ -24,35 +24,37 @@
 
                     <div slot="renderNoResults"></div>
 
-                    <div class="relative" slot="render" slot-scope="{ data, loading }" v-if="!loading && data?.length">
+                    <div class="mt-5" slot="render" slot-scope="{ data, loading }" v-if="!loading && data?.length">
                         <slider>
                             <div slot-scope="{ navigate, showLeft, showRight, currentSlide, slidesTotal }">
-                                <div class="-mx-2 flex mt-5 overflow-x-auto snap-x scrollbar-hide scroll-smooth snap-mandatory" ref="slider">
-                                    <template v-for="item in data">
-                                        @include('rapidez::listing.partials.item', ['slider' => true])
-                                    </template>
+                                <div class="relative">
+                                    <div ref="slider" class="*:sm:w-1/2 *:md:w-1/3 *:xl:w-1/3 *:px-0.5 *:sm:px-2 *:shrink-0 *:snap-start -mx-2 -mx-4 flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-hide sm:-mx-1">
+                                        <template v-for="item in data">
+                                            @include('rapidez::listing.partials.item', ['slider' => true])
+                                        </template>
+                                    </div>
+                                    <x-rapidez::button.slider
+                                        class="absolute left-0 top-1/2 sm:-translate-x-1/2 -translate-y-1/2"
+                                        v-if="showLeft"
+                                        v-on:click="navigate(currentSlide - 1)"
+                                        :aria-label="__('Prev')"
+                                    >
+                                        <x-heroicon-o-chevron-left class="size-6 shrink-0"/>
+                                    </x-rapidez::button.slider>
+                                    <x-rapidez::button.slider
+                                        class="absolute right-0 top-1/2 sm:translate-x-1/2 -translate-y-1/2"
+                                        v-if="showRight"
+                                        v-on:click="navigate(currentSlide + 1)"
+                                        :aria-label="__('Next')"
+                                    >
+                                        <x-heroicon-o-chevron-right class="size-6 shrink-0"/>
+                                    </x-rapidez::button.slider>
                                 </div>
-                                <x-rapidez::button.slider
-                                    class="absolute left-0 top-1/2 sm:-translate-x-1/2 -translate-y-1/2"
-                                    v-if="showLeft"
-                                    v-on:click="navigate(currentSlide - 1)"
-                                    :aria-label="__('Prev')"
-                                >
-                                    <x-heroicon-o-chevron-left class="size-6 shrink-0"/>
-                                </x-rapidez::button.slider>
-                                <x-rapidez::button.slider
-                                    class="absolute right-0 top-1/2 sm:translate-x-1/2 -translate-y-1/2"
-                                    v-if="showRight"
-                                    v-on:click="navigate(currentSlide + 1)"
-                                    :aria-label="__('Next')"
-                                >
-                                    <x-heroicon-o-chevron-right class="size-6 shrink-0"/>
-                                </x-rapidez::button.slider>
                                 <div v-show="slidesTotal > 1" class="flex flex-row justify-center w-full mt-[35px]">
                                     <div
                                         v-for="slide, index in slidesTotal"
                                         v-on:click="navigate(index)"
-                                        class="relative bg-white rounded-full border w-[15px] h-[15px] mx-1 cursor-pointer"
+                                        class="relative bg rounded-full border size-4 mx-1 cursor-pointer"
                                         :class="{ 'bg-emphasis border-0': index === currentSlide }">
                                     </div>
                                 </div>

resources/views/layouts/partials/header/minicart.blade.php

@@ -1,10 +1,12 @@
 <toggler>
-    <div class="relative" v-if="hasCart" v-on-click-away="close" slot-scope="{ toggle, close, isOpen }" v-cloak>
+    <div class="relative" v-if="hasCart" v-on-click-away="close" slot-scope="{ toggle, close, isOpen }">
         <button class="flex my-1 focus:outline-none" v-on:click="toggle">
             <x-heroicon-o-shopping-cart class="size-6"/>
-            <span class="bg-secondary text-secondary-text rounded-full size-6 text-center" dusk="minicart-count">@{{ Math.round(cart.total_quantity) }}</span>
+            <span class="bg-secondary text-secondary-text rounded-full size-6 text-center" dusk="minicart-count" v-cloak>
+                <span>@{{ Math.round(cart.total_quantity) }}</span>
+            </span>
         </button>
-        <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 z-header-minicart">
+        <div v-if="isOpen" class="absolute right-0 bg-white border shadow rounded-xl p-5 z-header-minicart" v-cloak>
             <table class="w-full mb-3">
                 <tr v-for="item in cart.items" class="*:pb-3">
                     <td class="block w-48 truncate overflow-hidden">
@@ -34,7 +36,7 @@
             </div>
         </div>
     </div>
-    <a href="{{ route('cart') }}" aria-label="@lang('Cart')" class="my-1" v-else>
+    <a href="{{ route('cart') }}" aria-label="@lang('Cart')" class="my-1" v-else v-cloak>
         <x-heroicon-o-shopping-cart class="size-6"/>
     </a>
 </toggler>

resources/views/listing/filters.blade.php

@@ -18,6 +18,6 @@
     </div>
 </x-rapidez::slideover.mobile>
 
-<x-rapidez::button.secondary :for="$id" class="mb-3 w-full lg:hidden">
+<x-rapidez::button.secondary :for="$id" class="w-full lg:hidden">
     @lang('Filters')
 </x-rapidez::button.secondary>

resources/views/listing/partials/item.blade.php

@@ -1,5 +1,5 @@
 <template {!! isset($slider) ? '' : 'slot="renderItem" slot-scope="{ item, count }"' !!}>
-    <div class="my-0.5 w-full h-full shrink-0 snap-start px-0.5 sm:my-2 sm:px-2 sm:w-1/2 lg:w-1/3">
+    <div class="size-full">
         <div class="group relative flex flex-1 flex-col rounded border bg-white p-5" :key="item.entity_id">
             @if (App::providerIsLoaded('Rapidez\Wishlist\WishlistServiceProvider'))
                 <div class="group absolute right-0 top-0 z-10 p-2">

resources/views/listing/partials/stats.blade.php

@@ -1,10 +1,10 @@
-<div class="flex-wrap flex-1 gap-1 text-sm flex justify-between sm:text-base" slot="renderResultStats" slot-scope="{ numberOfResults, numberOfPages, currentPage, time }">
+<div class="flex-wrap flex-1 gap-1 text-sm items-center flex justify-between sm:text-base" slot="renderResultStats" slot-scope="{ numberOfResults, numberOfPages, currentPage, time }">
     @{{ numberOfResults }} @lang('products')
     <template v-if="numberOfPages > 1">
         (@lang('page'): @{{ currentPage + 1 }}/@{{ numberOfPages }})
     </template>
 
-    <div class="justify-self-end mr-5">
+    <div class="justify-self-end">
         <div class="flex items-center gap-1 flex-wrap">
             <label class="flex items-center gap-x-1.5">
                 <x-rapidez::label class="text-sm text-muted whitespace-nowrap mb-0">@lang('Items per page'):</x-rapidez::label>

resources/views/listing/products.blade.php

@@ -1,10 +1,10 @@
 @php $dropdownClasses = '!h-auto !py-3 !px-5 !border-solid !border !border-default !rounded-md !py-2 !ring-0 focus:!border-muted !text-sm !text !outline-none max-md:w-full' @endphp
 <reactive-list
     id="products"
-    class="*:flex-wrap *:max-sm:gap-y-3 *:max-md:justify-end"
+    class="*:flex-wrap *:gap-3 *:max-sm:gap-y-3 *:max-md:justify-end"
     component-id="products"
     data-field="name.keyword"
-    list-class="flex flex-wrap mt-5 -mx-4 sm:-mx-1 overflow-hidden"
+    list-class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-2 md:gap-5 mt-5 overflow-hidden"
     :pagination="true"
     v-on:page-click="scrollToElement('#products')"
     :size="isNaN(parseInt(listingSlotProps.pageSize)) ? 10000 : parseInt(listingSlotProps.pageSize)"

resources/views/product/overview.blade.php

@@ -11,11 +11,11 @@
         <div itemtype="https://schema.org/Product" itemscope>
             @include('rapidez::product.partials.microdata')
             @include('rapidez::product.partials.opengraph')
-            <div class="relative flex flex-col gap-8 sm:flex-row">
-                <div class="sm:w-1/2 flex flex-col shrink-0">
+            <div class="relative flex max-lg:flex-col gap-8">
+                <div class="flex-1 flex flex-col shrink-0">
                     @include('rapidez::product.partials.images')
                 </div>
-                <div class="flex flex-col gap-5 sm:w-1/2 shrink-0">
+                <div class="flex flex-col gap-5 flex-1 shrink-0">
                     @includeWhen($product->type_id == 'grouped', 'rapidez::product.partials.grouped')
                     @includeWhen($product->type_id !== 'grouped', 'rapidez::product.partials.addtocart')
                     @if (App::providerIsLoaded('Rapidez\Reviews\ReviewsServiceProvider'))

resources/views/product/partials/grouped.blade.php

@@ -1,31 +1,33 @@
-<div class="grid grid-cols-3 gap-3 grid-cols-[auto_max-content_max-content]">
+<div class="flex flex-wrap gap-3 justify-between">
     @foreach ($product->grouped as $groupedProduct)
-        <add-to-cart :product="config.product.grouped[{{ $groupedProduct->entity_id }}]" v-slot="addToCart" class="contents">
-            <form v-on:submit.prevent="addToCart.add" class="contents">
-                <div>
+        <add-to-cart :product="config.product.grouped[{{ $groupedProduct->entity_id }}]" v-slot="addToCart" class="w-full">
+            <form v-on:submit.prevent="addToCart.add" class="flex w-full justify-between max-lg:flex-wrap max-lg:gap-y-2">
+                <div class="lg:max-xl:max-w-36">
                     {{ $groupedProduct->name }}
-                    <div class="flex items-center space-x-3 font-bold">
+                    <div class="flex items-center space-x-3 font-bold mr-auto">
                         <div>{{ price($groupedProduct->special_price ?: $groupedProduct->price) }}</div>
                         @if ($groupedProduct->special_price)
                             <div class="line-through">{{ price($groupedProduct->price) }}</div>
                         @endif
                     </div>
                 </div>
 
-                @if (!$groupedProduct->in_stock)
-                    <p class="col-span-2 self-center text-red-600">
-                        @lang('Sorry! This product is currently out of stock.')
-                    </p>
-                @else
-                    <x-rapidez::quantity
-                        v-model.number="addToCart.qty"
-                        ::min="{{ $groupedProduct->min_sale_qty }}"
-                        ::step="{{ $groupedProduct->qty_increments }}"
-                        ::max="{{ $groupedProduct->max_sale_qty ?: 'null' }}"
-                    />
+                <div class="flex flex-wrap gap-2 lg:ml-auto">
+                    @if (!$groupedProduct->in_stock)
+                        <p class="col-span-2 self-center text-red-600">
+                            @lang('Sorry! This product is currently out of stock.')
+                        </p>
+                    @else
+                        <x-rapidez::quantity
+                            v-model.number="addToCart.qty"
+                            ::min="{{ $groupedProduct->min_sale_qty }}"
+                            ::step="{{ $groupedProduct->qty_increments }}"
+                            ::max="{{ $groupedProduct->max_sale_qty ?: 'null' }}"
+                        />
 
-                    <x-rapidez::button.cart/>
-                @endif
+                        <x-rapidez::button.cart class="self-start" />
+                    @endif
+                </div>
             </form>
         </add-to-cart>
     @endforeach