mikeconrad/blog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Better layout when no image

Browse Source
This commit is contained in:
prototypa
2023-08-16 00:42:35 -04:00
parent fbabb01aae
commit 9e7462a77d
2 changed files with 37 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/Timeline.astro
View File

@ -49,7 +49,7 @@ const {
)} )}
</div> </div>
<div <div
class={`max-w-md pt-1 ${ class={`pt-1 ${
index !== items.length - 1 ? "pb-8" : "" index !== items.length - 1 ? "pb-8" : ""
}`} }`}
> >

43
src/components/widgets/Steps.astro
View File

@ -1,40 +1,44 @@
--- ---
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro"; import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Timeline from "~/components/ui/Timeline.astro"; import Timeline from '~/components/ui/Timeline.astro';
import Headline from "~/components/ui/Headline.astro"; import Headline from '~/components/ui/Headline.astro';
import Image from '~/components/common/Image.astro'; import Image from '~/components/common/Image.astro';
import type { Steps } from "~/types"; import type { Steps } from '~/types';
const { const {
title = await Astro.slots.render("title"), title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render("subtitle"), subtitle = await Astro.slots.render('subtitle'),
tagline = await Astro.slots.render("tagline"), tagline = await Astro.slots.render('tagline'),
items = [], items = [],
image = await Astro.slots.render("image"), image = await Astro.slots.render('image'),
isReversed = false, isReversed = false,
id, id,
isDark = false, isDark = false,
classes = {}, classes = {},
bg = await Astro.slots.render("bg"), bg = await Astro.slots.render('bg'),
} = Astro.props as Steps; } = Astro.props as Steps;
--- ---
<WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ""}`} bg={bg}> <WidgetWrapper id={id} isDark={isDark} containerClass={`max-w-5xl ${classes?.container ?? ''}`} bg={bg}>
<div class:list={["flex flex-col gap-8 md:gap-12 md:flex-row", { "md:flex-row-reverse": isReversed }]}> <div class:list={['flex flex-col gap-8 md:gap-12', { 'md:flex-row-reverse': isReversed }, { 'md:flex-row': image}]}>
<div class="md:py-4 md:basis-1/2 md:self-center"> <div class:list={["md:py-4 md:self-center", { 'md:basis-1/2': image }, { "w-full": !image}]}>
<Headline <Headline
title={title} title={title}
subtitle={subtitle} subtitle={subtitle}
tagline={tagline} tagline={tagline}
classes={{ container: "text-left rtl:text-right", title: "text-3xl lg:text-4xl", ...((classes?.headline as {}) ?? {}) }} classes={{
container: 'text-left rtl:text-right',
title: 'text-3xl lg:text-4xl',
...((classes?.headline as {}) ?? {}),
}}
/> />
<Timeline items={items} classes={classes?.items as {}} /> <Timeline items={items} classes={classes?.items as {}} />
</div> </div>
<div class="relative md:basis-1/2">
{ {
image && image && (
(typeof image === 'string' ? ( <div class="relative md:basis-1/2">
{(typeof image === 'string' ? (
<Fragment set:html={image} /> <Fragment set:html={image} />
) : ( ) : (
<Image <Image
@ -45,10 +49,11 @@ const {
height={768} height={768}
layout="cover" layout="cover"
src={image?.src} src={image?.src}
alt={image?.alt || ""} alt={image?.alt || ''}
/> />
)) ))}
</div>
)
} }
</div> </div>
</div>
</WidgetWrapper> </WidgetWrapper>