Skip to content

Commit

Permalink
In very screens, the picture is side to side with the text
Browse files Browse the repository at this point in the history
  • Loading branch information
@prorene
prorene authored and Daveed committed Jan 21, 2025
1 parent 92c91e3 commit b60d31a
Show file tree
Hide file tree
Showing 3 changed files with 124 additions and 17 deletions.
2 changes: 1 addition & 1 deletion src/layouts/Main.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const { props } = Astro;
</span>
</h1>
) : (
<h1>{props.pageTitle}</h1>
<strong>{props.pageTitle}</strong>
)
}
<p>{props.pageDesc}</p>
Expand Down
120 changes: 114 additions & 6 deletions src/pages/products/[slug].astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import { getCollection } from "astro:content";
import type Store from "@interfaces/Store";
import { slugifyStr } from "@utils/slugify";
import type Product from "@interfaces/Product";
import Hr from "@components/Hr.astro";
export interface Props {
currentPage: number;
Expand Down Expand Up @@ -75,17 +76,17 @@ const selectedImage =

<main class="lg:px-8 product-page px-4 py-12 sm:px-6">
<div class="mx-auto w-full px-6">
<div class="grid lg:gap-x-8 lg:items-start">
<div class="flex">
<div class="lg:grid lg:grid-cols-2 lg:gap-x-8 lg:items-start mb-10">
<div class="flex flex-row lg:flex-col">
<div
class="aspect-w-3 aspect-h-4 w-1/2 overflow-hidden rounded-l pr-3"
class="aspect-w-3 aspect-h-4 overflow-hidden rounded-l pr-3"
>
<HeroImage
title={product?.data?.Name as string}
image={selectedImage}
/>
</div>
<div class="flex flex-col w-1/2 justify-end">
<div class="flex flex-col w-1/2 lg:w-full lg:mt-10 justify-end">
{
product?.data?.Slides?.length > 0 && (
<div class="">
Expand Down Expand Up @@ -122,7 +123,7 @@ const selectedImage =
</div>

{/* Price selector */}
<div class="product-form-container mt-8">
<!-- <div class="product-form-container mt-8 flex lg:hidden">
<form
data-product-price={product?.data.id}
data-product-json={JSON.stringify(product?.data)}
Expand Down Expand Up @@ -226,7 +227,7 @@ const selectedImage =
</ol>
</div>
</form>
</div>
</div> -->
{/* Product metadata */}
<!-- <div class="mt-8 border-t border-gray-200 pt-8 dark:border-gray-700">
<div class="prose dark:prose-invert">
Expand All @@ -245,6 +246,113 @@ const selectedImage =
</div>
</div> -->
</div>

</div>
<Hr />
<div class="w-full mt-8">
<form
data-product-price={product?.data.id}
data-product-json={JSON.stringify(product?.data)}
>
<div class="flex items-center justify-between">
<h1 class="text-2xl font-medium text-gray-900 dark:text-white">
Available Options
</h1>
<span class="text-sm text-gray-500">
Select your preferred option
</span>
</div>
<div class="m-4">
<label for="price"><strong>Price Options</strong></label>
<select
id="price"
name="price"
data-input="product.prices"
class="block w-full rounded-md border-2 border-solid border-gray-300 py-2 pl-3 pr-10 text-base focus:border-accent-500 focus:outline-none focus:ring-accent-500 dark:border-gray-600 dark:bg-gray-700"
>
<option value=""></option>
{
prices.map((price: any) => (
<option
value={price.STRIPE_ID}
data-price-data={JSON.stringify(price)}
>
{price.Name.replace(/_/gi, " ")} - ${price.Price}{" "}
{price.Currency}
</option>
))
}
</select>
<p class="">
<em data-output="product.price.description"></em>
</p>
</div>
<div class="m-4">
<label for="quantity"><strong>Quantity</strong></label>
<input
type="number"
id="quantity"
value="1"
data-input="quantity"
class="w-full rounded-md border-2 border-solid border-gray-300 py-2 pl-3 pr-10 text-base focus:border-accent-500 focus:outline-none focus:ring-accent-500 dark:border-gray-600 dark:bg-gray-700"
style={{
// border: "1px solid #6b7280",
}}
/>
</div>
<div class="m-4">
<p>For tips, or custom price products, enter the number here</p>
<label for="custom-price"><strong>Custom Price</strong></label>
<input
data-input="custom-price"
type="number"
placeholder="0"
name="custom-price"
id="custom-price"
class="w-full rounded-md border-2 border-solid border-gray-300 py-2 pl-3 pr-10 text-base focus:border-accent-500 focus:outline-none focus:ring-accent-500 dark:border-gray-600 dark:bg-gray-700"
style={{
// border: "1px solid #6b7280",
}}
/>
</div>
<div class="m-4">
<label for="total"><strong>Total</strong></label>
<p class="text-4xl">$<span data-output="total">0</span></p>
</div>
<div class="m-4">
<button
disabled
data-action-button="submit"
type="submit"
class="flex w-full items-center justify-center rounded-md border border-transparent bg-sky-500 px-8 py-3 text-base font-medium text-white hover:bg-accent-700 focus:outline-none focus:ring-2 focus:ring-accent-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
>
Continue to Payment
</button>
<ol class="mt-4 text-sm text-gray-500">
<li class="mb-2">
We use Stripe to collect payments, and send payouts to the
artists
</li>
<li class="mb-2">
You'll be redirected to a Stripe page to continue, and we'll
notify the artists after a succesful transaction
</li>
<li class="mb-2">
Currently we don't support a shopping cart, you can get one
or multiple units of the same
<em>Price</em> per transaction
</li>
<li class="mb-2">
We notify the artist after a succesful transaction and
forward your shipping details and email to them
</li>
<li class="mb-2">
The artists will reach out with tracking details, or follow
up steps to complete the transaction
</li>
</ol>
</div>
</form>
</div>
</div>
</main>
Expand Down
19 changes: 9 additions & 10 deletions src/styles/base.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -201,8 +201,14 @@ button.brand-yellow:hover {


html[data-theme="light"] h3,
html[data-theme="light"] h1 {
color: #000;
font-weight: bold;
margin-bottom: 1.8em;
font-size: 1.3em;
}

html[data-theme="light"] h4,
html[data-theme="dark"] h1,
html[data-theme="light"] strong,
html[data-theme="light"] h2 {
color: #ff00cf !important;
Expand All @@ -211,24 +217,17 @@ html[data-theme="light"] h2 {
font-size: 1.3em;
}

html[data-theme="light"] h3,
html[data-theme="dark"] h1,
html[data-theme="dark"] h3,
html[data-theme="dark"] h1,
html[data-theme="dark"] h4,
html[data-theme="dark"] strong,
html[data-theme="dark"] h2 {
color: #000 !important;
color: #fbda0d !important;
font-weight: bold;
margin-bottom: 1.8em;
font-size: 1.1em;
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong{
color: #fbda0d !important;
}

html[data-theme="dark"] a {
color: #E4007C !important;
}
Expand Down

0 comments on commit b60d31a

Please sign in to comment.