moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use gaps between statuses even on mobile

This commit is contained in:
Alex Gleason 2022-05-04 22:58:34 -05:00
parent b1cdf93ec6
commit 435b7001a4
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
8 changed files with 13 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/soapbox/components/status.tsx
View File

@ -416,7 +416,7 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
); );
reblogElementMobile = ( reblogElementMobile = (
<div className='pt-4 px-4 sm:hidden truncate'> <div className='pb-5 -mt-2 sm:hidden truncate'>
<NavLink <NavLink
to={`/@${status.getIn(['account', 'acct'])}`} to={`/@${status.getIn(['account', 'acct'])}`}
onClick={(event) => event.stopPropagation()} onClick={(event) => event.stopPropagation()}
@ -610,7 +610,6 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
role='link' role='link'
> >
{prepend} {prepend}
{reblogElementMobile}
<div <div
className={classNames({ className={classNames({
@ -622,6 +621,8 @@ class Status extends ImmutablePureComponent<IStatus, IStatusState> {
})} })}
data-id={status.id} data-id={status.id}
> >
{reblogElementMobile}
<div className='mb-4'> <div className='mb-4'>
<HStack justifyContent='between' alignItems='start'> <HStack justifyContent='between' alignItems='start'>
<AccountContainer <AccountContainer

4
app/soapbox/components/status_list.js
View File

@ -224,10 +224,10 @@ export default class StatusList extends ImmutablePureComponent {
placeholderCount={20} placeholderCount={20}
ref={this.setRef} ref={this.setRef}
className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', { className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', {
'sm:divide-none': divideType !== 'border', 'divide-none': divideType !== 'border',
})} })}
itemClassName={classNames({ itemClassName={classNames({
'sm:pb-3': divideType !== 'border', 'pb-3': divideType !== 'border',
})} })}
{...other} {...other}
> >

2
app/soapbox/components/ui/card/card.tsx
View File

@ -34,7 +34,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant, size
{...filteredProps} {...filteredProps}
className={classNames({ className={classNames({
'space-y-4': true, 'space-y-4': true,
'bg-white dark:bg-slate-800 text-black dark:text-white sm:shadow-lg dark:sm:shadow-inset overflow-hidden': variant === 'rounded', 'bg-white dark:bg-slate-800 text-black dark:text-white shadow-lg dark:shadow-inset overflow-hidden': variant === 'rounded',
[sizes[size]]: true, [sizes[size]]: true,
}, className)} }, className)}
> >

2
app/soapbox/components/ui/column/column.tsx
View File

@ -42,7 +42,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
const renderChildren = () => { const renderChildren = () => {
if (transparent) { if (transparent) {
return <div className={classNames('bg-white dark:bg-slate-800 text-black dark:text-white sm:bg-transparent sm:dark:bg-transparent', className)}>{children}</div>; return <div className={classNames('text-black dark:text-white', className)}>{children}</div>;
} }
return ( return (

4
app/soapbox/features/bookmarks/index.tsx
View File

@ -38,7 +38,9 @@ const Bookmarks: React.FC = () => {
return ( return (
<Column transparent> <Column transparent>
<SubNavigation message={intl.formatMessage(messages.heading)} /> <div className='px-4 pt-4 sm:p-0'>
<SubNavigation message={intl.formatMessage(messages.heading)} />
</div>
<StatusList <StatusList
statusIds={statusIds} statusIds={statusIds}
scrollKey={'bookmarked_statuses'} scrollKey={'bookmarked_statuses'}

2
app/soapbox/pages/home_page.tsx
View File

@ -35,7 +35,7 @@ const HomePage: React.FC = ({ children }) => {
return ( return (
<> <>
<Layout.Main className='divide-y divide-gray-200 dark:divide-slate-700 divide-solid sm:divide-none'> <Layout.Main className='pt-4 sm:pt-0 divide-y divide-gray-200 dark:divide-slate-700 divide-solid space-y-4 divide-none'>
{me && ( {me && (
<Card variant='rounded' ref={composeBlock}> <Card variant='rounded' ref={composeBlock}>
<CardBody> <CardBody>

2
app/styles/components/detailed-status.scss
View File

@ -167,7 +167,7 @@
} }
.thread { .thread {
@apply sm:bg-white sm:dark:bg-slate-800 p-4 sm:shadow-xl sm:p-6 sm:rounded-xl; @apply bg-white dark:bg-slate-800 p-4 shadow-xl dark:shadow-inset sm:p-6 sm:rounded-xl;
&__status { &__status {
@apply relative pb-4; @apply relative pb-4;

2
app/styles/components/status.scss
View File

@ -227,7 +227,7 @@
} }
.status__wrapper { .status__wrapper {
@apply bg-white dark:bg-slate-800 px-4 py-6 sm:shadow-xl dark:sm:shadow-inset sm:p-5 sm:rounded-xl; @apply bg-white dark:bg-slate-800 px-4 py-6 shadow-xl dark:shadow-inset sm:p-5 sm:rounded-xl;
} }
[column-type=filled] .status__wrapper, [column-type=filled] .status__wrapper,