bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'site-banner-rtl' into 'main'

Browse source 
SiteBanner: support RTL

Closes #1560

See merge request soapbox-pub/soapbox!2802
This commit is contained in:
Alex Gleason 2023-10-12 21:58:07 +00:00
commit c3673638d7
2 changed files with 13 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/features/landing-timeline/components/logo-text.tsx
View file

@ -1,13 +1,16 @@
import React from 'react';
interface ILogoText {
interface ILogoText extends Pick<React.HTMLAttributes<HTMLHeadingElement>, 'dir'> {
children: React.ReactNode;
}
/** Big text in site colors, for displaying the site name. Resizes itself according to the screen size. */
const LogoText: React.FC<ILogoText> = ({ children }) => {
const LogoText: React.FC<ILogoText> = ({ children, dir }) => {
return (
<h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:leading-none lg:text-6xl xl:text-7xl'>
<h1
className='-my-5 overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold !leading-normal text-transparent lg:text-6xl xl:text-7xl'
dir={dir}
>
{children}
</h1>
);

9
src/features/landing-timeline/components/site-banner.tsx
View file

@ -3,19 +3,24 @@ import React from 'react';
import Markup from 'soapbox/components/markup';
import { Stack } from 'soapbox/components/ui';
import { useInstance } from 'soapbox/hooks';
import { getTextDirection } from 'soapbox/utils/rtl';
import { LogoText } from './logo-text';
const SiteBanner: React.FC = () => {
const instance = useInstance();
const description = instance.short_description || instance.description;
return (
<Stack space={3}>
<LogoText>{instance.title}</LogoText>
<LogoText dir={getTextDirection(instance.title)}>
{instance.title}
</LogoText>
<Markup
size='lg'
dangerouslySetInnerHTML={{ __html: instance.short_description || instance.description }}
dangerouslySetInnerHTML={{ __html: description }}
direction={getTextDirection(description)}
/>
</Stack>
);