twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-25 04:55:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Developers page is not optimised for mobile viewport (#7493)

Browse Source 
## Description

- This PR solves the issue #7483 
- optimised the developers page for all mobile viewports

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Harshit Singh 2024-10-10 11:53:37 +05:30 committed by GitHub
parent c57d8f1346
commit 656ab4ed95
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 62 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysFieldItemTableRow.tsx
View File

@ -1,6 +1,6 @@
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconChevronRight } from 'twenty-ui';
import { IconChevronRight, MOBILE_VIEWPORT } from 'twenty-ui';
import { ApiFieldItem } from '@/settings/developers/types/api-key/ApiFieldItem';
import { TableCell } from '@/ui/layout/table/components/TableCell';
@ -8,6 +8,10 @@ import { TableRow } from '@/ui/layout/table/components/TableRow';
export const StyledApisFieldTableRow = styled(TableRow)`
grid-template-columns: 312px auto 28px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 100%;
grid-template-columns: 12fr 4fr;
}
`;
const StyledNameTableCell = styled(TableCell)`

16
packages/twenty-front/src/modules/settings/developers/components/SettingsApiKeysTable.tsx
View File

@ -1,5 +1,3 @@
import styled from '@emotion/styled';
import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { SettingsApiKeysFieldItemTableRow } from '@/settings/developers/components/SettingsApiKeysFieldItemTableRow';
@ -10,15 +8,25 @@ import { Table } from '@/ui/layout/table/components/Table';
import { TableBody } from '@/ui/layout/table/components/TableBody';
import { TableHeader } from '@/ui/layout/table/components/TableHeader';
import { TableRow } from '@/ui/layout/table/components/TableRow';
import styled from '@emotion/styled';
import { MOBILE_VIEWPORT } from 'twenty-ui';
const StyledTableBody = styled(TableBody)`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
max-height: 260px;
overflow-y: auto;
@media (max-width: ${MOBILE_VIEWPORT}px) {
padding-top: ${({ theme }) => theme.spacing(3)};
display: flex;
justify-content: space-between;
scroll-behavior: smooth;
}
`;
const StyledTableRow = styled(TableRow)`
grid-template-columns: 312px auto 28px;
@media (max-width: ${MOBILE_VIEWPORT}px) {
width: 95%;
grid-template-columns: 20fr 2fr;
}
`;
export const SettingsApiKeysTable = () => {

16
packages/twenty-front/src/pages/settings/developers/SettingsDevelopers.tsx
View File

@ -1,5 +1,6 @@
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import styled from '@emotion/styled';
import { H2Title, IconPlus } from 'twenty-ui';
import { H2Title, IconPlus, MOBILE_VIEWPORT } from 'twenty-ui';
import { SettingsPageContainer } from '@/settings/components/SettingsPageContainer';
import { SettingsApiKeysTable } from '@/settings/developers/components/SettingsApiKeysTable';
@ -15,9 +16,20 @@ const StyledButtonContainer = styled.div`
display: flex;
justify-content: flex-end;
padding-top: ${({ theme }) => theme.spacing(2)};
@media (max-width: ${MOBILE_VIEWPORT}px) {
padding-top: ${({ theme }) => theme.spacing(5)};
}
`;
const StyledContainer = styled.div<{ isMobile: boolean }>`
display: flex;
flex-direction: column;
overflow: hidden;
gap: ${({ theme }) => theme.spacing(2)};
`;
export const SettingsDevelopers = () => {
const isMobile = useIsMobile();
return (
<SubMenuTopBarContainer
title="Developers"
@ -31,6 +43,7 @@ export const SettingsDevelopers = () => {
]}
>
<SettingsPageContainer>
<StyledContainer isMobile={isMobile}>
<Section>
<H2Title
title="API keys"
@ -63,6 +76,7 @@ export const SettingsDevelopers = () => {
/>
</StyledButtonContainer>
</Section>
</StyledContainer>
</SettingsPageContainer>
</SubMenuTopBarContainer>
);