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
class={`max-w-md pt-1 ${
class={`pt-1 ${
index !== items.length - 1 ? "pb-8" : ""
}`}
>

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

@ -1,54 +1,59 @@
---
import WidgetWrapper from "~/components/ui/WidgetWrapper.astro";
import Timeline from "~/components/ui/Timeline.astro";
import Headline from "~/components/ui/Headline.astro";
import WidgetWrapper from '~/components/ui/WidgetWrapper.astro';
import Timeline from '~/components/ui/Timeline.astro';
import Headline from '~/components/ui/Headline.astro';
import Image from '~/components/common/Image.astro';
import type { Steps } from "~/types";
import type { Steps } from '~/types';
const {
title = await Astro.slots.render("title"),
subtitle = await Astro.slots.render("subtitle"),
tagline = await Astro.slots.render("tagline"),
title = await Astro.slots.render('title'),
subtitle = await Astro.slots.render('subtitle'),
tagline = await Astro.slots.render('tagline'),
items = [],
image = await Astro.slots.render("image"),
image = await Astro.slots.render('image'),
isReversed = false,
id,
isDark = false,
classes = {},
bg = await Astro.slots.render("bg"),
bg = await Astro.slots.render('bg'),
} = Astro.props as Steps;
---
<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="md:py-4 md:basis-1/2 md:self-center">
<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-reverse': isReversed }, { 'md:flex-row': image}]}>
<div class:list={["md:py-4 md:self-center", { 'md:basis-1/2': image }, { "w-full": !image}]}>
<Headline
title={title}
subtitle={subtitle}
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 {}} />
</div>
<div class="relative md:basis-1/2">
{
image &&
(typeof image === 'string' ? (
<Fragment set:html={image} />
{
image && (
<div class="relative md:basis-1/2">
{(typeof image === 'string' ? (
<Fragment set:html={image} />
) : (
<Image
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
width={432}
height={768}
layout="cover"
src={image?.src}
alt={image?.alt || ""}
/>
))
}
</div>
<Image
class="inset-0 object-cover object-top w-full rounded-md shadow-lg md:absolute md:h-full bg-gray-400 dark:bg-slate-700"
widths={[400, 768]}
sizes="(max-width: 768px) 100vw, 432px"
width={432}
height={768}
layout="cover"
src={image?.src}
alt={image?.alt || ''}
/>
))}
</div>
)
}
</div>
</WidgetWrapper>