maxmustermann/hydrogen
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: update collections page styling

Browse source
This commit is contained in:
Ben Wolfram 2021-11-05 12:39:13 -05:00
parent aef3d9db69
commit 28b4dae91e
2 changed files with 17 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
packages/dev/src/components/ProductCard.server.jsx
View file

@ -10,32 +10,38 @@ export default function ProductCard({product}) {
return (
<div className="text-lg mb-4 relative">
<Link to={`/products/${product.handle}`}>
{!selectedVariant?.availableForSale && (
<div className="absolute text-xs bg-black text-white p-3 z-50">
Out of stock
</div>
)}
<div className="border-2 border-black mb-2 relative flex items-center justify-center overflow-hidden object-cover h-96">
<div className="rounded-lg border-2 border-gray-200 mb-2 relative flex items-center justify-center overflow-hidden object-cover h-96">
<Image
className="bg-white absolute w-full h-full transition-all duration-500 ease-in-out transform bg-center bg-cover object-center object-contain hover:scale-110"
image={selectedVariant.image}
/>
{!selectedVariant?.availableForSale && (
<div className="absolute top-3 left-3 rounded-3xl text-xs bg-black text-white py-3 px-4">
Out of stock
</div>
)}
</div>
<span className="text-black font-medium">{product.title}</span>
<span className="text-black font-semibold mb-0.5">{product.title}</span>
{product.vendor && (
<p className="text-gray-900 font-medium text-sm mb-0.5">
{product.vendor}
</p>
)}
<div className="flex ">
{selectedVariant.compareAtPriceV2 && (
<Money money={selectedVariant.compareAtPriceV2}>
{({amount, currencyNarrowSymbol}) => (
<span className="line-through mr-2.5 text-gray-500">
<span className="line-through text-lg mr-2.5 text-gray-500">
{currencyNarrowSymbol}
{amount}
</span>
)}
</Money>
)}
<Money className="text-black" money={selectedVariant.priceV2}>
<Money className="text-black text-lg" money={selectedVariant.priceV2}>
{({amount, currencyNarrowSymbol, currencyCode}) => (
<>
{currencyCode}
@ -46,9 +52,6 @@ export default function ProductCard({product}) {
</Money>
</div>
</Link>
{!selectedVariant.availableForSale && (
<p className="text-xs mt-2">Avaliable in 2-3 weeks</p>
)}
</div>
);
}

4
packages/dev/src/pages/collections/[handle].server.jsx
View file

@ -37,11 +37,11 @@ export default function Collection({
return (
<Layout>
<h1 className="font-black text-4xl md:text-5xl text-black mb-6 mt-6">
<h1 className="font-bold text-4xl md:text-5xl text-gray-900 mb-6 mt-6">
{collection.title}
</h1>
<RawHtml string={collection.descriptionHtml} className="text-2xl" />
<p className="text-sm text-gray-900 mt-5 mb-5">
<p className="text-sm text-gray-500 mt-5 mb-5">
{products.length} {products.length > 1 ? 'products' : 'product'}
</p>