From 5ecc4ad3789aa5c93f06d0b7cabbaea84f4f5c47 Mon Sep 17 00:00:00 2001 From: Ady Beraud <102751374+ady-beraud@users.noreply.github.com> Date: Wed, 17 Apr 2024 11:18:18 +0300 Subject: [PATCH] Modify UI website and fix navbar issue on small devices (#4961) -Fixed scroll issue on navbar: https://github.com/twentyhq/twenty/assets/102751374/19f609f0-637d-483f-a695-f4a276155f2c -Modified various UI elements, including design and layout adjustments Example: **Before:** Screenshot 2024-04-14 at 18 45 04 **After:** Screenshot 2024-04-14 at 18 45 17 --------- Co-authored-by: Ady Beraud --- .../_components/oss-friends/Background.tsx | 4 ++++ .../app/_components/releases/StyledTitle.tsx | 1 - .../ui/layout/ContentContainer.tsx | 1 + .../_components/ui/layout/LoaderAnimation.tsx | 13 +++++++++++-- .../_components/ui/layout/header/styled.ts | 4 +++- .../user-guide/UserGuideContent.tsx | 3 +++ .../_components/user-guide/UserGuideMain.tsx | 3 +++ packages/twenty-website/src/app/layout.css | 19 ++++++++++++++++++- 8 files changed, 43 insertions(+), 5 deletions(-) diff --git a/packages/twenty-website/src/app/_components/oss-friends/Background.tsx b/packages/twenty-website/src/app/_components/oss-friends/Background.tsx index 06f472f48..6066f514c 100644 --- a/packages/twenty-website/src/app/_components/oss-friends/Background.tsx +++ b/packages/twenty-website/src/app/_components/oss-friends/Background.tsx @@ -39,6 +39,10 @@ const Container = styled.div` max-width: 100vw; z-index: 0; + @media (max-width: 810px) { + margin-top: 64px; + } + &::before { content: ''; position: absolute; diff --git a/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx b/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx index 569257ee1..9b85c91b3 100644 --- a/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx +++ b/packages/twenty-website/src/app/_components/releases/StyledTitle.tsx @@ -9,7 +9,6 @@ const StyledTitle = styled.div` @media (max-width: 810px) { font-size: 1em; - margin: 64px auto; } `; const StyledHeader = styled.h1` diff --git a/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx b/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx index 556401a28..7c0f0099e 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx +++ b/packages/twenty-website/src/app/_components/ui/layout/ContentContainer.tsx @@ -10,6 +10,7 @@ const Container = styled.div` @media (max-width: 809px) { width: 100%; padding: 0px 24px 0px 24px; + margin-top: 64px; } `; diff --git a/packages/twenty-website/src/app/_components/ui/layout/LoaderAnimation.tsx b/packages/twenty-website/src/app/_components/ui/layout/LoaderAnimation.tsx index 1b8849098..b7e096716 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/LoaderAnimation.tsx +++ b/packages/twenty-website/src/app/_components/ui/layout/LoaderAnimation.tsx @@ -1,6 +1,11 @@ import React from 'react'; +import styled from '@emotion/styled'; import { motion } from 'framer-motion'; +const StyledMotionDiv = styled(motion.div)` + max-width: 100%; +`; + const containerVariants = { hidden: { opacity: 0, y: 20 }, visible: { @@ -11,9 +16,13 @@ const containerVariants = { }; const MotionContainer = ({ children }: { children?: React.ReactNode }) => ( - + {children} - + ); export default MotionContainer; diff --git a/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts b/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts index 4b11cdb37..6a7f5e107 100644 --- a/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts +++ b/packages/twenty-website/src/app/_components/ui/layout/header/styled.ts @@ -28,7 +28,9 @@ export const MobileNav = styled.nav` align-items: center; overflow: visible; padding: 0 12px; - position: relative; + position: fixed; + z-index: 2; + background-color: white; transform-origin: 50% 50% 0px; border-bottom: 1px solid rgba(20, 20, 20, 0.08); height: 64px; diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx index bac56089f..dfdf41d03 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideContent.tsx @@ -16,6 +16,9 @@ const StyledContainer = styled('div')` borderBottom: `1px solid ${Theme.background.transparent.medium}`, fontFamily: `${Theme.font.family}`, })}; + @media (max-width: 810px) { + margin-top: 64px; + } `; const StyledWrapper = styled.div` diff --git a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx index 986a7b544..54007cbfc 100644 --- a/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx +++ b/packages/twenty-website/src/app/_components/user-guide/UserGuideMain.tsx @@ -13,6 +13,9 @@ const StyledContainer = styled.div` flexDirection: 'row', justifyContent: 'center', })}; + @media (max-width: 810px) { + margin-top: 64px; + } `; const StyledWrapper = styled.div` diff --git a/packages/twenty-website/src/app/layout.css b/packages/twenty-website/src/app/layout.css index b8370346b..49b9eba43 100644 --- a/packages/twenty-website/src/app/layout.css +++ b/packages/twenty-website/src/app/layout.css @@ -13,6 +13,17 @@ body { font-family: var(--font-gabarito); } +@media (max-width: 810px) { + body { + -ms-overflow-style: none; + scrollbar-width: none; + } + + body::-webkit-scrollbar { + display: none; + } +} + .container { display: flex; flex-direction: column; @@ -57,4 +68,10 @@ nav.toc a{ font-size: 15px; font-weight: 500; text-decoration: none; -} \ No newline at end of file +} + +code { + background: var(--Transparency-Lighter, #1414140a); + padding: 4px; + border-radius: 4px; + } \ No newline at end of file