Various responsive fixes + price slider color

rapidez · Dec 20, 2024 · 2cb1bdf · 2cb1bdf
1 parent 3f97927
commit 2cb1bdf
Show file tree

Hide file tree

Showing 6 changed files with 10 additions and 10 deletions.
diff --git a/resources/css/components/price-slider.css b/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 {

diff --git a/resources/views/components/productlist.blade.php b/resources/views/components/productlist.blade.php
@@ -27,7 +27,7 @@
                     <div class="relative" 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">
+                                <div ref="slider" class="*:sm:w-1/2 *:lg:w-1/3 *:px-0.5 *:sm:px-2 *:shrink-0 *:snap-start -mx-2 mt-5 flex snap-x snap-mandatory overflow-x-auto scroll-smooth scrollbar-hide">
                                     <template v-for="item in data">
                                         @include('rapidez::listing.partials.item', ['slider' => true])
                                     </template>

diff --git a/resources/views/listing/partials/item.blade.php b/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">

diff --git a/resources/views/listing/partials/stats.blade.php b/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>

diff --git a/resources/views/listing/products.blade.php b/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 -mx-4 sm:-mx-1 overflow-hidden"
     :pagination="true"
     v-on:page-click="scrollToElement('#products')"
     :size="isNaN(parseInt(listingSlotProps.pageSize)) ? 10000 : parseInt(listingSlotProps.pageSize)"

diff --git a/resources/views/product/overview.blade.php b/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-md: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'))