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

pl-fe: fix read more styles for quoted posts/posts with polls

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-09-11 18:01:14 +02:00
parent 7c3cb6a6eb
commit ec8a442d3e
2 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
packages/pl-fe/src/components/quoted-status.tsx
View file

@ -76,7 +76,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
<OutlineBox <OutlineBox
data-testid='quoted-status' data-testid='quoted-status'
className={clsx('cursor-pointer', { className={clsx('cursor-pointer', {
'hover:bg-gray-100 dark:hover:bg-gray-800': !compose, 'group hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
})} })}
> >
<Stack <Stack

13
packages/pl-fe/src/components/status-content.tsx
View file

@ -26,14 +26,16 @@ const BIG_EMOJI_LIMIT = 10;
interface IReadMoreButton { interface IReadMoreButton {
onClick: React.MouseEventHandler; onClick: React.MouseEventHandler;
quote?: boolean; quote?: boolean;
poll?: boolean;
} }
/** Button to expand a truncated status (due to too much content) */ /** Button to expand a truncated status (due to too much content) */
const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick, quote }) => ( const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick, quote, poll }) => (
<div className='relative -mt-4'> <div className='relative -mt-4'>
<div <div
className={clsx('absolute -top-16 h-16 w-full bg-gradient-to-b from-transparent to-white black:to-black dark:to-primary-900', { className={clsx('absolute -top-16 h-16 w-full bg-gradient-to-b from-transparent to-white black:to-black dark:to-primary-900', {
'hover:to-gray-100 black:hover-to-gray-800 dark:hover:to-gray-800': quote, 'group-hover:to-gray-100 black:group-hover:to-gray-800 dark:group-hover:to-gray-800': quote,
'to-gray-100 dark:to-primary-800': poll,
})} })}
/> />
<button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}> <button className='flex items-center border-0 bg-transparent p-0 pt-2 text-gray-900 hover:underline active:underline dark:text-gray-300' onClick={onClick}>
@ -236,14 +238,13 @@ const StatusContent: React.FC<IStatusContent> = React.memo(({
</Markup>, </Markup>,
); );
const hasPoll = !!status.poll_id;
if (collapsed) { if (collapsed) {
output.push(<ReadMoreButton onClick={onClick} key='read-more' quote={quote} />); output.push(<ReadMoreButton onClick={onClick} key='read-more' quote={quote} poll={hasPoll} />);
} }
let hasPoll = false;
if (status.poll_id) { if (status.poll_id) {
hasPoll = true;
output.push(<Poll id={status.poll_id} key='poll' status={status} />); output.push(<Poll id={status.poll_id} key='poll' status={status} />);
} }