Мобильная версияВот как он выглядит в Chrome:
Изображение Chrome
И вот как это выглядит в Safari:
Изображение Safari
Мой первый инстинкт подумал, что причиной этого является проблема с высотой заголовка временной шкалы. чтобы опустить все элементы ниже него. Однако при дальнейшей проверке оказалось, что в Safari точка имеет больше места сверху и снизу по сравнению с Chrome.
Для большего контекста: приложение было создано с использованием Astro, а компонент был создан с помощью React. . Выполнение client:only="react" также не работает, поскольку оно еще больше нарушает макет. Если бы кто-нибудь мог указать мне правильное направление, это было бы здорово. Спасибо!
History.astro
---
import { Image } from "astro:assets";
import {
Timeline,
TimelineContent,
TimelineDot,
TimelineHeading,
TimelineItem,
TimelineLine,
} from "@/components/ui/timeline";
import gihay_launch from "@/assets/about/gihay_launch.jpeg";
import gihay_first_workshop from "@/assets/about/gihay_first_workshop.jpeg";
import gihay_thousand_cores from "@/assets/about/gihay_thousand_cores.jpeg";
import gihay_seventy from "@/assets/about/gihay_seventy.jpeg";
import gihay_ramon_distribution from "@/assets/about/gihay_ramon_distribution.jpg";
import gihay_purras_distribution from "@/assets/about/gihay_purras_distribution.jpeg";
import gihay_hundred from "@/assets/about/gihay_hundred.jpeg";
import gihay_calma_distribution from "@/assets/about/gihay_calma_distribution.jpeg";
import gihay_umapad_distribution from "@/assets/about/gihay_umapad_distribution.jpeg";
import gihay_my_refuge from "@/assets/about/gihay_my_refuge.png";
---
Origin
Gihay
Initiative
March 3, 2022
Launched during Women's Month, the Gihay Initiative empowers
underprivileged menstruating individuals in Cebu by providing them
with sustainable, reusable napkins. This initiative, spearheaded by
passionate Carolinian youth, aims to address menstrual hygiene
accessibility while promoting environmental sustainability.
June 22 - July 7, 2022
Over three weeks, the Gihay Initiative held its first Volunteer
Workshop and Orientation, attracting 35 dynamic volunteers committed
to the cause. These sessions included training on the production and
distribution of reusable menstrual products, reinforcing our
community's commitment to women's health.
August 11, 2022
A significant achievement: the organization alone crafted over 1,000
reusable cores, marking a major milestone in our commitment to
sustainability and support for menstrual health.
September 1, 2022
The initiative received 70 kilograms of cloth donations and mobilized
40 dedicated youth volunteers. This substantial support has greatly
enhanced our production capabilities and outreach efforts.
December 5, 2022
Hosted a Period Poverty Awareness and Menstrual Health Seminar at
Ramon Duterte National High School to educate and empower students.
This event highlighted the importance of menstrual health and provided
valuable information to hundreds of students.
December 19, 2022
Expanded our educational outreach with a Menstrual Health Seminar in
Sitio Purras, emphasizing proper menstrual health practices. This
seminar provided in-depth education on menstrual health management,
impacting numerous lives in the community.
January 21, 2023
Continued our mission in Sitio Calma, conducting a seminar focused on
Period Poverty Awareness and promoting menstrual health awareness.
This seminar is part of our ongoing efforts to educate and support
underprivileged communities.
June 19, 2023
Celebrating another major donation milestone with 100 kilograms of
cloth received, alongside the mobilization of 55 inspired youth
volunteers. These donations have been instrumental in expanding our
reach and increasing our impact.
August 5, 2023
Held a transformative Menstrual Health Seminar in Sitio Paglaum,
fostering discussions on menstrual health and hygiene. This event
furthered our goal of reducing period poverty and promoting health
education.
January 19, 2024
Successfully facilitated the turnover of 'With Thought of Twin Hearts'
and 'Priyanka Annuncia' projects to My Refuge House, marking a
significant collaboration. This partnership aims to amplify our
efforts and reach more beneficiaries.
timeline.tsx
import React from "react";
import { type VariantProps, cva } from "class-variance-authority";
import { Check, Circle, X } from "lucide-react";
import { cn } from "@/lib/utils";
const timelineVariants = cva("flex flex-col items-stretch", {
variants: {
positions: {
left: "[&>li]:grid-cols-[0_min-content_1fr]",
right: "[&>li]:grid-cols-[1fr_min-content]",
center: "[&>li]:grid-cols-[1fr_min-content_1fr]",
},
},
defaultVariants: {
positions: "left",
},
});
interface TimelineProps
extends React.HTMLAttributes,
VariantProps {}
const Timeline = React.forwardRef(
({ children, className, positions, ...props }, ref) => {
return (
- className={cn(timelineVariants({ positions }), className)}
ref={ref}
{...props}
>
{children}
}
);
Timeline.displayName = "Timeline";
const timelineItemVariants = cva("grid gap-x-2", {
variants: {
status: {
done: "text-primary",
default: "text-muted-foreground",
},
},
defaultVariants: {
status: "default",
},
});
interface TimelineItemProps
extends React.HTMLAttributes,
VariantProps {}
const TimelineItem = React.forwardRef(
({ className, status, ...props }, ref) => (
)
);
TimelineItem.displayName = "TimelineItem";
const timelineDotVariants = cva(
"col-start-2 col-end-3 row-start-1 row-end-1 flex size-4 items-center justify-center rounded-full border border-current",
{
variants: {
status: {
default: "[&>*]:hidden",
current:
"[&>*:not(.lucide-circle)]:hidden [&>.lucide-circle]:fill-current [&>.lucide-circle]:text-current",
done: "bg-primary [&>*:not(.lucide-check)]:hidden [&>.lucide-check]:text-background",
error:
"border-destructive bg-destructive [&>*:not(.lucide-x)]:hidden [&>.lucide-x]:text-background",
custom: "[&>*:not(:nth-child(4))]:hidden [&>*:nth-child(4)]:block",
},
},
defaultVariants: {
status: "default",
},
}
);
interface TimelineDotProps
extends React.HTMLAttributes,
VariantProps {
customIcon?: React.ReactNode;
}
const TimelineDot = React.forwardRef(
({ className, status, customIcon, ...props }, ref) => (
role="status"
className={cn("m-auto h-fit", timelineDotVariants({ status }), className)}
ref={ref}
{...props}
>
{customIcon}
)
);
TimelineDot.displayName = "TimelineDot";
const timelineContentVariants = cva(
"row-start-2 row-end-2 pb-8 text-muted-foreground",
{
variants: {
side: {
right: "col-start-3 col-end-4 mr-auto text-left",
left: "col-start-1 col-end-2 ml-auto text-right",
},
},
defaultVariants: {
side: "right",
},
}
);
interface TimelineContentProps
extends React.HTMLAttributes,
VariantProps {}
const TimelineContent = React.forwardRef<
HTMLParagraphElement,
TimelineContentProps
>(({ className, side, ...props }, ref) => (
));
TimelineContent.displayName = "TimelineContent";
const timelineHeadingVariants = cva(
"row-start-1 row-end-1 line-clamp-1 max-w-full truncate h-fit",
{
variants: {
side: {
right: "col-start-3 col-end-4 mr-auto text-left",
left: "col-start-1 col-end-2 ml-auto text-right",
},
variant: {
primary: "text-base font-medium text-primary",
secondary: "text-sm font-light text-muted-foreground",
},
},
defaultVariants: {
side: "right",
variant: "primary",
},
}
);
interface TimelineHeadingProps
extends React.HTMLAttributes,
VariantProps {}
const TimelineHeading = React.forwardRef<
HTMLParagraphElement,
TimelineHeadingProps
>(({ className, side, variant, ...props }, ref) => (
));
TimelineHeading.displayName = "TimelineHeading";
interface TimelineLineProps extends React.HTMLAttributes {
done?: boolean;
}
const TimelineLine = React.forwardRef(
({ className, done = false, ...props }, ref) => {
return (
);
}
);
TimelineLine.displayName = "TimelineLine";
export {
Timeline,
TimelineDot,
TimelineItem,
TimelineContent,
TimelineHeading,
TimelineLine,
};
Подробнее здесь: https://stackoverflow.com/questions/784 ... and-safari
