Skip to content

Commit

Permalink
Merge pull request #114 from chingu-voyages/misc-fixes
Browse files Browse the repository at this point in the history
Misc fixes
  • Loading branch information
timDeHof authored Nov 13, 2023
2 parents 3ea9766 + 1044c8d commit 2be80ac
Show file tree
Hide file tree
Showing 8 changed files with 52 additions and 41 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -11,17 +11,21 @@ export const FeatureOfTheDay = () => {
<Heading
level="h1"
variant="watermelon"
className="text-center underline decoration-dashed decoration-tangerine-400 underline-offset-[24px]"
className="text-center underline decoration-dashed decoration-tangerine-400 underline-offset-[24px] balance"
>
Recipe of the day
</Heading>
<div className="flex flex-col items-center justify-center px-4 py-6 lg:space-x-6 lg:flex-row">
<img
src={FeatureChickenRecipe}
className="object-contain w-64 rounded-2xl"
className="object-contain w-64 rounded-2xl mb-8"
/>
<div className="flex flex-col max-w-lg text-left">
<Heading level="h3" variant="tangerine" className="tracking-tight">
<Heading
level="h3"
variant="tangerine"
className="tracking-tight balance"
>
Roasted Chicken And Sweet Potatoes Recipe
</Heading>
<p className="tracking-tight font-rasa">
Expand All @@ -33,10 +37,10 @@ export const FeatureOfTheDay = () => {
<Button
variant="primary"
size="large"
className="w-full mt-4 lg:w-1/2"
className="w-full mt-4 lg:w-1/2 mb-10"
onClick={handleNavigate}
>
See the Recipe
<span className="align-center w-full">See the Recipe</span>
<Icon name="right-arrow" className="transform scale-125" />
</Button>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ export const Description = ({ description }) => {
const body = words.slice(titleLength).join(" ");
console.log("body length:", body.length);
return description ? (
<div className="description pr-8 pt-2 pl-20">
<div className="description px-8 pt-2 md:pl-20">
<Heading level="h2" variant="lava" className="leading-none">
<span className={title.length > 10 ? "text-clamp-h3" : ""}>
{title}
Expand Down
4 changes: 2 additions & 2 deletions src/features/recipes/components/recipe-details/IntroCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ export const IntroCard = ({ name, imageUrl, description }) => {
<div className="absolute left-0 top-0 z-0 h-full overflow-hidden rounded-tl-[1rem] pt-[20rem] md:pt-0">
<PlantsTL
resolution="128"
className="select-none pointer-events-none block h-full w-[8rem] lg:w-[8rem] overflow-hidden lg:rounded-tl-[1rem]"
className="pointer-events-none hidden h-full w-[8rem] select-none overflow-hidden md:block lg:w-[8rem] lg:rounded-tl-[1rem]"
/>
</div>
<div className="intro-wrapper relative flex-row-reverse gap-4 md:flex">
Expand All @@ -30,7 +30,7 @@ export const IntroCard = ({ name, imageUrl, description }) => {
</Card>
);
return (
<div className="picture-wrapper md:col-start-1 md:col-end-13 md:row-start-3 lg:col-start-5 lg:row-start-1 2xl:col-start-4 overflow-hidden rounded-xl">
<div className="picture-wrapper overflow-hidden rounded-xl md:col-start-1 md:col-end-13 md:row-start-3 lg:col-start-5 lg:row-start-1 2xl:col-start-4">
<picture className="w-full">
<img
src={imageUrl}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const RecipeDetails = ({ recipe }) => {
<hr className="mb-1 mt-3 h-2 w-[40%] rounded-full border-none bg-gradient-tangerine-diagonal" />
</div>

<div className="p-5 page-body md:p-8 xl:p-10 md:grid md:grid-cols-12 md:grid-rows-10 md:gap-10">
<div className="page-body p-5 md:p-8 xl:p-10 md:grid md:grid-cols-12 md:grid-rows-10 md:gap-10">
<IntroCard
description={recipe.description}
imageUrl={recipe.thumbnail_url}
Expand All @@ -53,9 +53,7 @@ export const RecipeDetails = ({ recipe }) => {
renditions={recipe.renditions}
className="mb-12 outline-4 md:col-start-7 md:col-end-13 md:row-start-1 lg:col-start-1 lg:col-end-5 lg:row-start-3 lg:-mx-4 lg:-mb-4 2xl:col-end-4"
/>
<Card className="flex items-center difficulty-card md:col-start-7 md:col-end-13 md:row-start-2 lg:col-start-5 2xl:col-start-4">
<RecipeDifficultyCard tags={recipe.tags} />
</Card>
<RecipeDifficultyCard tags={recipe.tags} />
<Card
className="ingredients-card md:col-start-1 md:col-end-13 lg:col-start-5 lg:col-end-13 lg:row-span-2 2xl:col-start-4"
id="ingredients"
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import PropTypes from "prop-types";
import ChefCarrots from "@/assets/brand/chef-carrots/ChefCarrots";
import RecipeDifficultyDetail from "./RecipeDifficultyDetail";
import { Card } from "./Card";

export const RecipeDifficultyCard = ({ tags }) => {
// Available cards:
Expand Down Expand Up @@ -28,31 +29,39 @@ export const RecipeDifficultyCard = ({ tags }) => {
(tag) => tag.type === "difficulty" && tag.name === "5_ingredients_or_less",
);
return (
<div className="relative flex min-h-[6rem] sm:justify-center pl-28 md:pl-[5rem] align-middle">
<ChefCarrots
resolution="180"
className="pointer-events-none select-none w-36 h-56 md:h-auto max-w-[55%] md:bottom-[-3.75rem] md:left-[-4rem] -bottom-6 -left-4 absolute overflow-hidden"
/>
<div className="difficulty-card-wrapper flex flex-col sm:items-center md:items-start lg:items-center sm:flex-row md:flex-col lg:flex-row">
{easy && (
<RecipeDifficultyDetail
title="Easy"
icon="easy"
text="You've got this!"
(easy || quickText || simple) && (
<Card className="difficulty-card md:col-start-7 md:col-end-13 md:row-start-2 lg:col-start-5 2xl:col-start-4 flex items-center">
<div className="relative flex min-h-[6rem] sm:justify-center pl-28 md:pl-[5rem] align-middle">
<ChefCarrots
resolution="180"
className="pointer-events-none select-none w-36 h-56 md:h-auto max-w-[55%] md:bottom-[-3.75rem] md:left-[-4rem] -bottom-6 -left-4 absolute overflow-hidden"
/>
)}
{quickText && (
<RecipeDifficultyDetail title="Quick" icon="clock" text={quickText} />
)}
{simple && (
<RecipeDifficultyDetail
title="Simple"
icon="stars"
text="5 Ingredients or Less"
/>
)}
</div>
</div>
<div className="difficulty-card-wrapper flex flex-col sm:items-center md:items-start lg:items-center sm:flex-row md:flex-col lg:flex-row">
{easy && (
<RecipeDifficultyDetail
title="Easy"
icon="easy"
text="You've got this!"
/>
)}
{quickText && (
<RecipeDifficultyDetail
title="Quick"
icon="clock"
text={quickText}
/>
)}
{simple && (
<RecipeDifficultyDetail
title="Simple"
icon="stars"
text="5 Ingredients or Less"
/>
)}
</div>
</div>
</Card>
)
);
};

Expand Down
4 changes: 2 additions & 2 deletions src/features/recipes/components/recipe-details/Tags.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ export const Tags = ({ tags }) => {
return (
<span key={tag.name}>
<Link
to={`/search?q=${tag.name}`}
className="text-watermelon font-bold decoration-tangerine decoration-2 underline-offset-2 hover:underline"
to={`/search?q=${tag.display_name}`}
className="font-bold text-watermelon decoration-tangerine decoration-2 underline-offset-2 hover:underline"
key={tag.name + String(Math.random())}
>
{tag.display_name}
Expand Down
4 changes: 2 additions & 2 deletions src/features/recipes/components/recipe-details/Tips.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ export const Tips = ({ recipeId }) => {
showIndicators={true}
dynamicHeight={false}
stopOnHover={true}
className="bg-transparent mx-[-2.25rem] [&_.carousel-slider]:overflow-visible [&_.control-dots]:bottom-[-2rem]"
className="bg-transparent mx-[-2.25rem] [&_.carousel-slider]:overflow-visible [&_.control-dots]:bottom-[-2rem] [&_.control-dots]:px-6"
>
{tips.map((tip) => (
<div key={tip.tip_id}>
Expand Down Expand Up @@ -58,7 +58,7 @@ const TipCard = ({
return (
<div className="flex flex-col w-full p-5 cursor-pointer">
<div className="flex items-center gap-2">
<div>
<div className="w-6">
<img
src={author_avatar_url}
className="object-cover w-6 h-6 rounded-full"
Expand Down
2 changes: 1 addition & 1 deletion src/pages/Search.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const Search = () => {
>
YumYum Time!!
</Heading>
<SvgComponent className="w-full fill-sky-300" />
<SvgComponent className="w-full fill-sky-300 -mb-1" />
<div className="flex flex-col flex-shrink-0 w-full px-4 lg:px-20 bg-gradient-Search">
<div className="flex flex-wrap items-center justify-center my-5 lg:mx-2 lg:gap-x-2">
<div className="flex items-center w-1/3 lg:w-[20%]">
Expand Down

0 comments on commit 2be80ac

Please sign in to comment.