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

feat: add RecordRelationFieldCardSection (#3176)

Browse Source 
Closes #3123

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Thaïs
2024-01-05 07:02:02 -03:00
committed by GitHub
parent 80c1c9aacc
commit db46dd4497
17 changed files with 296 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx
View File

@ -1,4 +1,4 @@
import { ReactElement } from 'react';
import { ReactNode } from 'react';
import styled from '@emotion/styled';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
@ -7,28 +7,23 @@ import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
const StyledOuterContainer = styled.div`
background: ${({ theme }) => theme.background.secondary};
border-bottom-left-radius: 8px;
border-right: ${({ theme }) => {
const isMobile = useIsMobile();
return !isMobile ? `1px solid ${theme.border.color.medium}` : 'none';
}};
border-right: ${({ theme }) =>
useIsMobile() ? 'none' : `1px solid ${theme.border.color.medium}`};
border-top-left-radius: 8px;
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
z-index: 10;
`;
const StyledInnerContainer = styled.div`
display: flex;
flex-direction: column;
padding: 0px ${({ theme }) => theme.spacing(2)} 0px
${({ theme }) => theme.spacing(3)};
width: ${({ theme }) => {
const isMobile = useIsMobile();
return isMobile ? `calc(100% - ${theme.spacing(5)})` : '320px';
}};
gap: ${({ theme }) => theme.spacing(6)};
padding: ${({ theme }) => theme.spacing(3)};
padding-right: ${({ theme }) => theme.spacing(2)};
width: ${({ theme }) =>
useIsMobile() ? `calc(100% - ${theme.spacing(5)})` : '320px'};
`;
const StyledIntermediateContainer = styled.div`
@ -38,7 +33,7 @@ const StyledIntermediateContainer = styled.div`
`;
export type ShowPageLeftContainerProps = {
children: ReactElement;
children: ReactNode;
};
export const ShowPageLeftContainer = ({

3
packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
View File

@ -25,8 +25,7 @@ const StyledShowPageSummaryCard = styled.div`
flex-direction: column;
gap: ${({ theme }) => theme.spacing(3)};
justify-content: center;
padding: ${({ theme }) => theme.spacing(6)} ${({ theme }) => theme.spacing(3)}
${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(3)};
padding: ${({ theme }) => theme.spacing(3)};
`;
const StyledInfoContainer = styled.div`