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

ChatPage: allow selecting a chat on mobile

Browse source
This commit is contained in:
Alex Gleason 2022-09-19 15:12:18 -05:00
parent 19ef0fee20
commit 9dc1a0caec
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 11 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
app/soapbox/features/chats/components/chat-page/chat-page.tsx
View file

@ -1,21 +1,30 @@
import classNames from 'clsx';
import React from 'react';
import { Card, Stack } from 'soapbox/components/ui';
import { useChatContext } from 'soapbox/contexts/chat-context';
import ChatPageMain from './components/chat-page-main';
import ChatPageSidebar from './components/chat-page-sidebar';
const ChatPage = () => {
const { chat } = useChatContext();
return (
<Card className='p-0 h-[calc(100vh-109px)] sm:h-[calc(100vh-176px)] overflow-hidden' variant='rounded'>
<div className='grid grid-cols-9 overflow-hidden h-full dark:divide-x-2 dark:divide-solid dark:divide-gray-800'>
<Stack
className='col-span-9 sm:col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset'
className={classNames('col-span-9 sm:col-span-3 p-6 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
'hidden sm:block': chat,
})}
>
<ChatPageSidebar />
</Stack>
<Stack className='hidden sm:block col-span-6 h-full overflow-hidden'>
<Stack className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
'hidden sm:block': !chat,
})}
>
<ChatPageMain />
</Stack>
</div>