Skip to content

Commit

Permalink
Restructured files and finetuning frontend (#11)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jordythevulder
jordythevulder authored May 14, 2024
1 parent 525206b commit 65ac86e
Show file tree
Hide file tree
Showing 4 changed files with 63 additions and 52 deletions.
93 changes: 41 additions & 52 deletions resources/views/compare.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,64 +8,53 @@
<h1 class="mb-5 text-3xl font-bold">@lang('Compare')</h1>
<product-compare v-slot="compare" v-cloak>
<div class="relative text-sm">
<div class="absolute left-0 top-0 bottom-5 w-1/2 sm:w-1/3 lg:w-1/4 xl:w-1/5 bg-white z-10 max-sm:hidden"></div>
<slider container-reference="container">
<div class="overflow-hidden" slot-scope="{ showLeft, showRight, currentSlide, navigate }">
<div class="absolute inset-0 top-14 sm:left-1/3 lg:left-1/4 xl:left-[20%] flex">
<button
class="sticky z-50 top-14 rounded-full border size-12 flex justify-center items-center bg-white hover:bg-inactive hover:text-white transition"
v-if="showLeft"
v-on:click="navigate(currentSlide - 1)"
>
<x-heroicon-o-arrow-left class="size-4"/>
</button>

<button
class="ml-auto sticky z-50 top-14 rounded-full border size-12 flex justify-center items-center bg-white hover:bg-inactive hover:text-white transition"
v-if="showRight"
v-on:click="navigate(currentSlide + 1)"
>
<x-heroicon-o-arrow-right class="size-4"/>
</button>
</div>
<div class="overflow-x-auto overflow-y-hidden pb-5 -mt-px max-sm:-ml-3 -mr-px snap-x" ref="slider">
<div class="flex flex-col">
<div class="flex *:px-3.5 *:pb-3 *:w-1/2 sm:*:w-1/3 *:lg:w-1/4 *:xl:w-1/5 *:shrink-0" ref="container">
<div></div>
<div
class="relative flex flex-col snap-end max-sm:-translate-x-full"
v-for="item, key in compare.items"
>
<button
class="absolute top-1 right-1 cursor-pointer p-2.5 hover:bg-inactive-100 transition rounded-full group"
v-on:click.prevent="compare.remove(item.uid)"
<template v-if="compare?.items?.length">
<div class="absolute left-0 top-0 bottom-5 w-1/2 sm:w-1/3 lg:w-1/4 xl:w-1/5 bg-white z-10 max-sm:hidden"></div>
<slider container-reference="container">
<div class="overflow-hidden" slot-scope="{ showLeft, showRight, currentSlide, navigate }">
@include('rapidez-compare::partials.next-prev-navigation')
<div class="overflow-x-auto overflow-y-hidden pb-5 -mt-px max-sm:-ml-3 -mr-px snap-x" ref="slider">
<div class="flex flex-col">
<div class="flex *:px-3.5 *:pb-3 *:w-1/2 sm:*:w-1/3 *:lg:w-1/4 *:xl:w-1/5 *:shrink-0" ref="container">
<div></div>
<div
class="relative flex flex-col snap-end max-sm:-translate-x-full"
v-for="item, key in compare.items"
>
<x-heroicon-o-x-mark stroke-width="3" class="size-4 text-inactive group-hover:text-neutral transition" />
</button>
<img class="object-contain h-28 sm:h-40" :src="item.product.image.url" :alt="item.product.image.name">
<a class="mt-1 font-semibold hover:underline" :href="item.product.url_key">
@{{ item.product.name }}
</a>
<button
class="absolute top-1 right-1 cursor-pointer p-2.5 hover:bg-inactive-100 transition rounded-full group"
v-on:click.prevent="compare.remove(item.uid)"
>
<x-heroicon-o-x-mark stroke-width="3" class="size-4 text-inactive group-hover:text-neutral transition" />
</button>
<img class="object-contain h-28 sm:h-40" :src="item.product.image.url" :alt="item.product.image.name">
<a class="mt-1 font-semibold hover:underline" :href="item.product.url_key">
@{{ item.product.name }}
</a>
</div>
</div>
</div>
<div
v-for="attribute, key in compare.attributes"
class="flex *:py-2.5 *:px-3.5 *:w-1/2 sm:*:w-1/3 *:lg:w-1/4 *:xl:w-1/5 *:shrink-0 *:border-t border-t *:-mt-px"
:class="{ '*:!border-t-0 !border-t-0 ': key === 0 }"
>
<strong class="absolute left-0 !pl-0 z-10 truncate block max-sm:pt-3.5 max-sm:w-auto max-sm:right-0 pointer-events-none font-semibold">
@{{ attribute.label }}
</strong>
<div></div>
<div v-for="product, key in compare.items" class="flex !px-0 !py-0 max-sm:-translate-x-full">
<div class="sticky w-px top-0 left-1/2 sm:left-1/3 lg:left-1/4 xl:left-[20%] bg-inactive-110 shrink-0 max-sm:hidden"></div>
<div class="pb-1.5 px-3 sm:py-2.5 sm:px-3.5 max-sm:mt-9 max-sm:border-l">@{{ product.attributes.find((attr) => attr.code === attribute.code)?.value }}</div>
<div
v-for="attribute, key in compare.attributes"
class="flex *:py-2.5 *:px-3.5 *:w-1/2 sm:*:w-1/3 *:lg:w-1/4 *:xl:w-1/5 *:shrink-0 *:border-t border-t *:-mt-px"
:class="{ '*:!border-t-0 !border-t-0 ': key === 0 }"
>
<strong class="absolute left-0 !pl-0 z-10 truncate block max-sm:pt-3.5 max-sm:w-auto max-sm:right-0 pointer-events-none">
@{{ attribute.label }}
</strong>
<div></div>
<div v-for="product, key in compare.items" class="flex !px-0 !py-0 max-sm:-translate-x-full">
<div class="sticky w-px top-0 left-1/2 sm:left-1/3 lg:left-1/4 xl:left-[20%] bg-inactive-110 shrink-0 max-sm:hidden"></div>
<div class="pb-1.5 px-3 sm:py-2.5 sm:px-3.5 max-sm:mt-9 max-sm:border-l">@{{ product.attributes.find((attr) => attr.code === attribute.code)?.value }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</slider>
</slider>
</template>
<template v-else>
@include('rapidez-compare::partials.no-results')
</template>
</div>
</product-compare>
</div>
Expand Down
1 change: 1 addition & 0 deletions resources/views/partials/button.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,3 +6,4 @@
</x-rapidez::button.outline>
</div>
</product-compare>

15 changes: 15 additions & 0 deletions resources/views/partials/next-prev-navigation.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<x-rapidez::button.primary
class="absolute top-10 sm:top-14 size-10 sm:left-1/3 lg:left-1/4 xl:left-[20%] z-10 rounded-full !p-0"
v-if="showLeft"
v-on:click="navigate(currentSlide - 1)"
>
<x-heroicon-o-arrow-left stroke-width="2" class="text-white size-4"/>
</x-rapidez::button.primary>

<x-rapidez::button.primary
class="absolute top-10 sm:top-14 right-0 size-10 flex z-10 rounded-full !p-0"
v-if="showRight"
v-on:click="navigate(currentSlide + 1)"
>
<x-heroicon-o-arrow-right stroke-width="2" class="text-white size-4"/>
</x-rapidez::button.primary>
6 changes: 6 additions & 0 deletions resources/views/partials/no-results.blade.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="flex flex-col gap-y-4 items-start">
<p>@lang('No products have been added to compare. Add products so you can compare them with each other.')</p>
<x-rapidez::button.outline href="/">
@lang('Back to home')
</x-rapidez::button.outline>
</div>

0 comments on commit 65ac86e

Please sign in to comment.