admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Feat/improve mobile display (#843)

Browse Source 
* Ok 1

* Finished

* Fix PR

* Fix PR

* Fix desktop

* Fix

* Fix absolute listen click outside

* console.log

* Fix according to code review

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-23 19:53:35 +02:00
committed by GitHub
parent 742791bd92
commit 21d5133564
45 changed files with 464 additions and 315 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -1,13 +1,23 @@
import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/hooks/useIsMobile';
export const ShowPageLeftContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
border-bottom-left-radius: 8px;
border-right: 1px solid ${({ theme }) => theme.border.color.medium};
border-right: 1px solid
${({ theme }) => {
const isMobile = useIsMobile();
return !isMobile ? theme.border.color.medium : 0;
}};
border-top-left-radius: 8px;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
padding: 0px ${({ theme }) => theme.spacing(3)};
width: 320px;
width: ${({ theme }) => {
const isMobile = useIsMobile();
return isMobile ? `calc(100% - ${theme.spacing(6)})` : '320px';
}};
`;