mirror of
https://github.com/supabase/supabase.git
synced 2026-10-09 11:25:06 +03:00
fix: sections now looking good on mobile and tablet
This commit is contained in:
Jonathan Summers-Muir committed
1 parent
fba38cdaa3
commit
326d0bc2be
1 file changed
+84
-66
@@ -15,10 +15,78 @@ export const LaunchSection = (props: WeekDayProps) => {
|
||||
const nextDayNotShipped = props.shipped && !days[props.index + 1]?.shipped
|
||||
const [videoVisible, setVideoVisible] = useState(false)
|
||||
|
||||
interface ClassNameComponent {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Header = ({ className }: ClassNameComponent) => (
|
||||
<div className={['flex flex-col gap-3', className].join(' ')}>
|
||||
{/* START timeline dot */}
|
||||
<div
|
||||
className={[
|
||||
'absolute mt-[4px] -ml-[21px] h-3 w-3 rounded-full border md:-ml-[37px] lg:-ml-[37.5px]',
|
||||
props.shipped ? 'border-brand-900 bg-brand-400' : 'border-purple-900 bg-purple-300',
|
||||
].join(' ')}
|
||||
></div>
|
||||
{/* END timeline dot */}
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-scale-1100 text-sm">{props.date}</span>
|
||||
{props.shipped ? (
|
||||
<Badge>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4">
|
||||
<TruckIcon />
|
||||
</div>{' '}
|
||||
Shipped
|
||||
</div>
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge color="purple">Not shipped yet</Badge>
|
||||
)}
|
||||
</div>
|
||||
<h4 className="text-scale-1200 text-2xl md:text-3xl lg:text-4xl">
|
||||
{props.shipped ? props.title : props.dd + ' 08:00 PT | 11:00 ET'}
|
||||
</h4>
|
||||
|
||||
{/* {props.shipped && props.announcements && (
|
||||
<div>
|
||||
{props.announcements.map((announcement: Announcement) => (
|
||||
<Announcement {...announcement} />
|
||||
))}
|
||||
</div>
|
||||
)} */}
|
||||
{props.shipped && <p className="text-scale-1100 text-base">{props.description}</p>}
|
||||
</div>
|
||||
)
|
||||
|
||||
const TimelineLine = ({ className }: ClassNameComponent) => {
|
||||
return (
|
||||
<>
|
||||
{/* START timeline line */}
|
||||
{props.index !== days.length - 1 && (
|
||||
<div
|
||||
className={[
|
||||
'launch-week-timeline-border absolute left-0 top-[4px] h-full border-l',
|
||||
nextDayNotShipped
|
||||
? 'launch-week-timeline-border--approaching'
|
||||
: props.shipped
|
||||
? 'border-brand-900'
|
||||
: 'border-purple-700',
|
||||
className,
|
||||
].join(' ')}
|
||||
></div>
|
||||
)}
|
||||
{/* END timeline line */}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid grid-cols-12" id={`launch-week-5-day-${props.d}`}>
|
||||
<div className="relative grid grid-cols-12" id={`launch-week-5-day-${props.d}`}>
|
||||
<TimelineLine className="block lg:hidden" />
|
||||
{props.shippingHasStarted && (
|
||||
<div className="col-span-12 pb-16 lg:col-span-6 lg:pr-8">
|
||||
<div className="col-span-12 pb-8 pl-4 md:pl-8 lg:col-span-6 lg:pb-16 lg:pl-0 lg:pr-8">
|
||||
<Header className="mb-8 flex lg:hidden" />
|
||||
{!props.shipped ? (
|
||||
<div className="relative overflow-hidden rounded-xl">
|
||||
<img
|
||||
@@ -38,15 +106,15 @@ export const LaunchSection = (props: WeekDayProps) => {
|
||||
<div
|
||||
onClick={() => setVideoVisible(true)}
|
||||
className="
|
||||
absolute
|
||||
top-0
|
||||
left-0
|
||||
flex
|
||||
h-full
|
||||
w-full
|
||||
items-center
|
||||
justify-center
|
||||
"
|
||||
absolute
|
||||
top-0
|
||||
left-0
|
||||
flex
|
||||
h-full
|
||||
w-full
|
||||
items-center
|
||||
justify-center
|
||||
"
|
||||
>
|
||||
<PlayIcon
|
||||
strokeWidth={1.5}
|
||||
@@ -63,7 +131,6 @@ export const LaunchSection = (props: WeekDayProps) => {
|
||||
header={
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="text-scale-1200">{props.title}</span>
|
||||
|
||||
<XIcon
|
||||
className="text-scale-900 hover:text-scale-1200 w-4 cursor-pointer transition"
|
||||
onClick={() => setVideoVisible(false)}
|
||||
@@ -91,66 +158,17 @@ export const LaunchSection = (props: WeekDayProps) => {
|
||||
className={[
|
||||
`relative col-span-12 flex flex-col
|
||||
gap-8
|
||||
pl-4
|
||||
md:pl-8
|
||||
lg:pl-8
|
||||
`,
|
||||
props.shipped ? 'border-brand-900' : 'border-purple-700',
|
||||
props.shippingHasStarted && 'lg:col-span-6',
|
||||
!lastIndex && 'pb-16',
|
||||
!lastIndex && 'pb-8 lg:pb-16',
|
||||
].join(' ')}
|
||||
>
|
||||
{/* START timeline line */}
|
||||
{props.index !== days.length - 1 && (
|
||||
<div
|
||||
className={[
|
||||
'launch-week-timeline-border absolute left-0 top-[4px] h-full border-l',
|
||||
nextDayNotShipped
|
||||
? 'launch-week-timeline-border--approaching'
|
||||
: props.shipped
|
||||
? 'border-brand-900'
|
||||
: 'border-purple-700',
|
||||
].join(' ')}
|
||||
></div>
|
||||
)}
|
||||
{/* END timeline line */}
|
||||
|
||||
<div className="flex flex-col gap-4 pl-4 lg:pl-0">
|
||||
{/* START timeline dot */}
|
||||
<div
|
||||
className={[
|
||||
'absolute mt-[4px] -ml-[21px] h-3 w-3 rounded-full border lg:-ml-[37.5px]',
|
||||
props.shipped ? 'border-brand-900 bg-brand-400' : 'border-purple-900 bg-purple-300',
|
||||
].join(' ')}
|
||||
></div>
|
||||
{/* END timeline dot */}
|
||||
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-scale-1100 text-sm">{props.date}</span>
|
||||
{props.shipped ? (
|
||||
<Badge>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className="w-4">
|
||||
<TruckIcon />
|
||||
</div>{' '}
|
||||
Shipped
|
||||
</div>
|
||||
</Badge>
|
||||
) : (
|
||||
<Badge color="purple">Not shipped yet</Badge>
|
||||
)}
|
||||
</div>
|
||||
<h4 className="text-scale-1200 text-2xl md:text-3xl lg:text-4xl">
|
||||
{props.shipped ? props.title : props.dd + ' 08:00 PT | 11:00 ET'}
|
||||
</h4>
|
||||
|
||||
{/* {props.shipped && props.announcements && (
|
||||
<div>
|
||||
{props.announcements.map((announcement: Announcement) => (
|
||||
<Announcement {...announcement} />
|
||||
))}
|
||||
</div>
|
||||
)} */}
|
||||
{props.shipped && <p className="text-scale-1100 text-base">{props.description}</p>}
|
||||
</div>
|
||||
<TimelineLine className="hidden lg:block" />
|
||||
<Header className="hidden lg:flex" />
|
||||
{props.shipped && (
|
||||
<div className="flex flex-col gap-12">
|
||||
{props.articles &&
|
||||
|
||||
Reference in new issue
Block a user