Skip to content

Endret på utseendet til slideshow på mobilvisning (#101) #106

Merged
merged 1 commit into from
Oct 15, 2026
Merged

Endret på utseendet til slideshow på mobilvisning (#101) #106

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 22 additions & 15 deletions client/src/components/slideshow/RecipeSlideshow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ type RecipeSlideshowProps = {
export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
// emblaRef kobler Embla opp til vinduet, også brukes emblaAPI til å styre slideshowet.
const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
Autoplay({ delay: 5000, stopOnMouseEnter: true, stopOnFocusIn: true}),
Autoplay({ delay: 5000, stopOnMouseEnter: true, stopOnFocusIn: true, stopOnInteraction: false}),
]);
// Husker hvilken av sidene i slideshowet som vises, sånn at riktig prikk blir farget inn.
const [selectedIndex, setSelectedIndex] = useState(0);
Expand Down Expand Up @@ -51,40 +51,47 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
}, [emblaApi]);

return (
<section aria-label="Utvalgte oppskrifter" className="relative px-16">
<section aria-label="Utvalgte oppskrifter" className="relative md:px-16">
{/* Vinduet: det skjuler slidene som ikke vises */}
<div className="overflow-hidden" ref={emblaRef}>
{/* Raden med alle slidene som Embla flytter sidelengs */}
<div className="flex">
{recipes.map((recipe) => (
// Én slide som bruker hele bredden i vinduet
<div key={recipe.id} className="min-w-0 flex-[0_0_100%]">
<div className="grid md:grid-cols-2 gap-8">
<div className="py-8 pr-8 flex flex-col justify-center gap-4 text-olive-dark">
<div className="flex items-center gap-4 text-sm tracking-widest">
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
<div className="md:hidden order-first flex items-center gap-4 text-sm tracking-widest text-olive-dark">
<span>UKENS OPPSKRIFT</span>
<span aria-hidden="true" className="h-px flex-1 bg-olive-dark opacity-40" />
<span>
{String(selectedIndex + 1).padStart(2, '0')} / {String(recipes.length).padStart(2, '0')}
</span>
</div>
<h3 className="font-heading text-4xl md:text-5xl">{recipe.title}</h3>
<p>{recipe.description}</p>
<div className="flex gap-6">
<p className="flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
<p className="flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
<div className="py-4 md:py-8 pr-8 flex flex-col justify-center gap-4 text-olive-dark">
<div className="hidden md:flex items-center gap-4 text-sm tracking-widest">
<span>UKENS OPPSKRIFT</span>
<span aria-hidden="true" className="h-px flex-1 bg-olive-dark opacity-40" />
<span>
{String(selectedIndex + 1).padStart(2, '0')} / {String(recipes.length).padStart(2, '0')}
</span>
</div>
<h3 className="order-first md:order-0 font-heading text-4xl md:text-5xl">{recipe.title}</h3>
<p className="hidden md:block">{recipe.description}</p>
<div className="flex gap-2 md:gap-6">
<p className="flex items-center gap-1 whitespace-nowrap"><AccessTimeIcon/>{recipe.prepTimeMinutes} min</p>
<p className="flex items-center gap-1 whitespace-nowrap"><RestaurantIcon/>{recipe.servings} porsjoner</p>
</div>
<ul className="flex flex-wrap gap-2 mb-4">
<ul className="flex flex-wrap gap-2 md:mb-4">
{recipe.tags.map((tag) => (
<li className="rounded-full border border-olive-dark text-olive-dark px-3 py-1 text-sm" key={tag.id}>
<li className="hidden md:block rounded-full border border-olive-dark text-olive-dark px-3 py-1 text-sm" key={tag.id}>
{tag.name}
</li>
))}
</ul>
<Link to={`/recipes/${recipe.id}`} className="self-start rounded-full bg-olive-dark text-background px-6 py-3 hover:opacity-90 flex items-center gap-1">Se oppskrift<ArrowForwardIcon/></Link>
</div>
{/* Tomt alternativ for bildet, ettersom tittelen allerede står rett ved siden av bildet. */}
<img className="w-full h-80 md:h-full object-cover rounded-lg" src={recipe.imageUrl ?? '/images/placeholder.webp'} alt=""/>
<img className="bg-olive-dark/10 order-first md:order-0 w-full h-80 md:h-full object-cover rounded-lg " src={recipe.imageUrl ?? '/images/placeholder.webp'} alt=""/>
</div>
</div>
))}
Expand All @@ -96,15 +103,15 @@ export function RecipeSlideshow({ recipes }: RecipeSlideshowProps) {
type="button"
aria-label="Forrige oppskrift"
onClick={() => emblaApi?.scrollPrev()}
className="absolute left-0 top-1/2 -translate-y-1/2 flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
className="absolute left-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
>
<ArrowBackIcon/>
</button>
<button
type="button"
aria-label="Neste oppskrift"
onClick={() => emblaApi?.scrollNext()}
className="absolute right-0 top-1/2 -translate-y-1/2 flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
className="absolute right-0 top-1/2 -translate-y-1/2 hidden md:flex h-12 w-12 items-center justify-center rounded-full bg-background/80 hover:bg-background focus-visible:outline-2 focus-visible:outline-primary"
>
<ArrowForwardIcon/>
</button>
Expand Down