Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

MQ Facepaint introduced #4169

Merged
merged 2 commits into from
Feb 24, 2024
Merged

MQ Facepaint introduced #4169

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
b2c6c84
MQ Facepaint introduced
Kanav-Arora Feb 24, 2024
d7f93dd
Remove useDeviceType
FelixMalfait Feb 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
"@stoplight/elements": "^8.0.5",
"@swc/jest": "^0.2.29",
"@tabler/icons-react": "^2.44.0",
"@types/facepaint": "^1.2.5",
"@types/lodash.camelcase": "^4.3.7",
"@types/lodash.merge": "^4.6.7",
"@types/mailparser": "^3.4.4",
Expand All @@ -79,6 +80,7 @@
"dotenv-cli": "^7.2.1",
"drizzle-orm": "^0.29.3",
"esbuild-plugin-svgr": "^2.1.0",
"facepaint": "^1.2.1",
"file-type": "16.5.4",
"framer-motion": "^10.12.17",
"googleapis": "105",
Expand Down
22 changes: 0 additions & 22 deletions packages/twenty-website/src/app/_components/client-utils/useDeviceType.ts
View file
Open in desktop

This file was deleted.

65 changes: 32 additions & 33 deletions packages/twenty-website/src/app/_components/ui/layout/Breadcrumbs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,15 @@ import styled from '@emotion/styled';
import { IconChevronLeft } from '@tabler/icons-react';
import Link from 'next/link';

import {
DeviceType,
useDeviceType,
} from '@/app/_components/client-utils/useDeviceType';
import mq from '@/app/_components/ui/theme/mq';
import { Theme } from '@/app/_components/ui/theme/theme';

const Container = styled.div`
display: flex;
gap: ${Theme.spacing(2)};
color: #b3b3b3;
${mq({
display: ['none', 'flex', 'flex'],
gap: `${Theme.spacing(2)}`,
color: '#b3b3b3',
})};
`;

const InternalLinkItem = styled(Link)`
Expand Down Expand Up @@ -45,12 +44,14 @@ const StyledSection = styled.div`
`;

const StyledMobileContainer = styled.div`
display: flex;
flex-direction: row;
align-items: center;
gap: ${Theme.spacing(1)};
color: ${Theme.text.color.quarternary};
font-size: ${Theme.font.size.sm};
${mq({
display: ['flex', 'none', 'none'],
flexDirection: 'row',
alignItems: 'center',
gap: `${Theme.spacing(1)}`,
color: `${Theme.text.color.quarternary}`,
fontSize: `${Theme.font.size.sm}`,
})};
`;

interface BreadcrumbsProps {
Expand All @@ -68,31 +69,29 @@ export const Breadcrumbs = ({
activePage,
separator,
}: BreadcrumbsProps) => {
const isMobile = useDeviceType() === DeviceType.MOBILE;
if (isMobile) {
const lastItem = items[items.length - 1];
return (
const lastItem = items[items.length - 1];

return (
<div>
<StyledMobileContainer>
<IconChevronLeft size={Theme.icon.size.md} />
<InternalLinkItem href={lastItem.uri}>
{lastItem.label}
</InternalLinkItem>
</StyledMobileContainer>
);
}
return (
<Container>
{items.map((item, index) => (
<StyledSection key={`${item?.uri ?? 'item'}-${index}`}>
{item.isExternal ? (
<ExternalLinkItem href={item.uri}>{item.label}</ExternalLinkItem>
) : (
<InternalLinkItem href={item.uri}>{item.label}</InternalLinkItem>
)}
<div>{separator}</div>
</StyledSection>
))}
<ActivePage>{activePage}</ActivePage>
</Container>
<Container>
{items.map((item, index) => (
<StyledSection key={`${item?.uri ?? 'item'}-${index}`}>
{item.isExternal ? (
<ExternalLinkItem href={item.uri}>{item.label}</ExternalLinkItem>
) : (
<InternalLinkItem href={item.uri}>{item.label}</InternalLinkItem>
)}
<div>{separator}</div>
</StyledSection>
))}
<ActivePage>{activePage}</ActivePage>
</Container>
</div>
);
};
7 changes: 7 additions & 0 deletions packages/twenty-website/src/app/_components/ui/theme/mq.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
import facepaint from 'facepaint';

const breakpoints = [810, 1200];

const mq = facepaint(breakpoints.map((bp) => `@media (min-width: ${bp}px)`));

export default mq;
29 changes: 11 additions & 18 deletions packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,20 @@
import React from 'react';
import styled from '@emotion/styled';

import {
DeviceType,
useDeviceType,
} from '@/app/_components/client-utils/useDeviceType';
import { Breadcrumbs } from '@/app/_components/ui/layout/Breadcrumbs';
import mq from '@/app/_components/ui/theme/mq';
import { Theme } from '@/app/_components/ui/theme/theme';
import { FileContent } from '@/app/_server-utils/get-posts';

const StyledContainer = styled.div<{ devicetype: string }>`
width: ${({ devicetype }) =>
devicetype === DeviceType.TABLET
? '70%'
: devicetype === DeviceType.DESKTOP
? '60%'
: '100%'};
display: flex;
flex-direction: row;
justify-content: center;
font-family: ${Theme.font.family};
border-bottom: 1px solid ${Theme.background.transparent.medium};
const StyledContainer = styled('div')`
${mq({
width: ['100%', '70%', '60%'],
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
borderBottom: `1px solid ${Theme.background.transparent.medium}`,
fontFamily: `${Theme.font.family}`,
})};
`;

const StyledWrapper = styled.div`
Expand Down Expand Up @@ -74,9 +68,8 @@ export default function UserGuideContent({ item }: { item: FileContent }) {
label: 'User Guide',
},
];
const deviceType = useDeviceType();
return (
<StyledContainer devicetype={deviceType}>
<StyledContainer>
<StyledWrapper>
<StyledHeader>
<Breadcrumbs
Expand Down
63 changes: 24 additions & 39 deletions packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
'use client';
import styled from '@emotion/styled';

import {
DeviceType,
useDeviceType,
} from '@/app/_components/client-utils/useDeviceType';
import mq from '@/app/_components/ui/theme/mq';
import { Theme } from '@/app/_components/ui/theme/theme';
import UserGuideCard from '@/app/_components/user-guide/UserGuideCard';
import { UserGuideHomeCards } from '@/content/user-guide/constants/UserGuideHomeCards';

const StyledContainer = styled.div<{ isMobile: boolean }>`
width: ${({ isMobile }) => (isMobile ? '100%' : '60%')};
display: flex;
flex-direction: row;
justify-content: center;
const StyledContainer = styled.div`
${mq({
width: ['100%', '60%', '60%'],
display: 'flex',
flexDirection: 'row',
justifyContent: 'center',
})};
`;

const StyledWrapper = styled.div`
Expand Down Expand Up @@ -46,47 +45,33 @@ const StyledSubHeading = styled.h1`
color: ${Theme.text.color.tertiary};
`;

const StyledContentGrid = styled.div`
width: 100%;
padding-top: ${Theme.spacing(6)};
display: grid;
grid-template-rows: auto auto;
grid-template-columns: auto auto;
gap: ${Theme.spacing(6)};
`;

const StyledContentFlex = styled.div`
width: 100%;
padding-top: ${Theme.spacing(6)};
display: flex;
flex-direction: column;
gap: ${Theme.spacing(6)};
const StyledContent = styled.div`
${mq({
width: '100%',
paddingTop: `${Theme.spacing(6)}`,
display: ['flex', 'flex', 'grid'],
flexDirection: 'column',
gridTemplateRows: 'auto auto',
gridTemplateColumns: 'auto auto',
gap: `${Theme.spacing(6)}`,
})};
`;

export default function UserGuideMain() {
const deviceType = useDeviceType();
return (
<StyledContainer isMobile={deviceType === DeviceType.MOBILE}>
<StyledContainer>
<StyledWrapper>
<StyledHeader>
<StyledHeading>User Guide</StyledHeading>
<StyledSubHeading>
A brief guide to grasp the basics of Twenty
</StyledSubHeading>
</StyledHeader>
{deviceType === DeviceType.DESKTOP ? (
<StyledContentGrid>
{UserGuideHomeCards.map((card) => {
return <UserGuideCard key={card.title} card={card} />;
})}
</StyledContentGrid>
) : (
<StyledContentFlex>
{UserGuideHomeCards.map((card) => {
return <UserGuideCard key={card.title} card={card} />;
})}
</StyledContentFlex>
)}
<StyledContent>
{UserGuideHomeCards.map((card) => {
return <UserGuideCard key={card.title} card={card} />;
})}
</StyledContent>
</StyledWrapper>
</StyledContainer>
);
Expand Down
28 changes: 13 additions & 15 deletions packages/twenty-website/src/app/_components/user-guide/UserGuideSidebar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,24 +3,23 @@
import styled from '@emotion/styled';
import { useRouter } from 'next/navigation';

import {
DeviceType,
useDeviceType,
} from '@/app/_components/client-utils/useDeviceType';
import { IconBook } from '@/app/_components/ui/icons';
import mq from '@/app/_components/ui/theme/mq';
import { Theme } from '@/app/_components/ui/theme/theme';
import UserGuideSidebarSection from '@/app/_components/user-guide/UserGuideSidebarSection';
import { UserGuideIndex } from '@/content/user-guide/constants/UserGuideIndex';

const StyledContainer = styled.div<{ isTablet: boolean }>`
width: ${({ isTablet }) => (isTablet ? '30%' : '20%')};
background: ${Theme.background.secondary};
display: flex;
flex-direction: column;
border-right: 1px solid ${Theme.background.transparent.medium};
border-bottom: 1px solid ${Theme.background.transparent.medium};
padding: ${Theme.spacing(10)} ${Theme.spacing(3)};
gap: ${Theme.spacing(6)};
const StyledContainer = styled.div`
${mq({
width: ['20%', '30%', '20%'],
display: ['none', 'flex', 'flex'],
flexDirection: 'column',
background: `${Theme.background.secondary}`,
borderRight: `1px solid ${Theme.background.transparent.medium}`,
borderBottom: `1px solid ${Theme.background.transparent.medium}`,
padding: `${Theme.spacing(10)} ${Theme.spacing(3)}`,
gap: `${Theme.spacing(6)}`,
})};
`;

const StyledHeading = styled.div`
Expand Down Expand Up @@ -55,9 +54,8 @@ const StyledHeadingText = styled.div`

const UserGuideSidebar = () => {
const router = useRouter();
const isTablet = useDeviceType() === DeviceType.TABLET;
return (
<StyledContainer isTablet={isTablet}>
<StyledContainer>
<StyledHeading>
<StyledIconContainer>
<IconBook size={Theme.icon.size.md} />
Expand Down
22 changes: 14 additions & 8 deletions packages/twenty-website/src/app/_components/user-guide/UserGuideTableContents.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,23 @@
import styled from '@emotion/styled';
import { useRouter } from 'next/navigation';

import mq from '@/app/_components/ui/theme/mq';
import { Theme } from '@/app/_components/ui/theme/theme';

const StyledContainer = styled.div`
width: 20%;
background: ${Theme.background.secondary};
display: flex;
flex-direction: column;
border-left: 1px solid ${Theme.background.transparent.medium};
border-bottom: 1px solid ${Theme.background.transparent.medium};
padding: ${Theme.spacing(10)} ${Theme.spacing(6)};
gap: ${Theme.spacing(6)};
${mq({
width: '20%',
display: ['none', 'none', 'flex'],
flexDirection: 'column',
background: `${Theme.background.secondary}`,
borderLeft: `1px solid ${Theme.background.transparent.medium}`,
borderBottom: `1px solid ${Theme.background.transparent.medium}`,
padding: `${Theme.spacing(10)} ${Theme.spacing(6)}`,
gap: `${Theme.spacing(6)}`,
'body nav': {
display: ['none', 'none', ''],
},
})};
`;

const StyledContent = styled.div`
Expand Down
6 changes: 6 additions & 0 deletions packages/twenty-website/src/app/layout.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,12 @@ a {
}
}

@media (max-width: 1199px) {
nav {
display: none;
}
}

nav.toc {
width: 20%;
position: fixed;
Expand Down
Loading
Loading