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

enhancement for mobile web #5596

Merged
merged 1 commit into from
Dec 10, 2022
Merged

enhancement for mobile web #5596

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
164 changes: 103 additions & 61 deletions website/src/components/layout/header.tsx
View file
Open in desktop
Expand Up @@ -437,51 +437,55 @@ const DeveloperNavItem: FC<DeveloperNavItemProps> = ({ products, tools }) => {
const [subNav, navHandlers, linkHandlers] = useSubNav((hideSubNav) => (
<>
<SubNavMain>
<SubNavTitle>Documentation</SubNavTitle>
{products.map((product, index) => (
<SubNavLink
key={index}
to={`/docs/${product!.path!}/`}
onClick={hideSubNav}
>
<IconContainer size={16}>
<AngleRightIconSvg />
<SubNavGroup>
<SubNavTitle>Documentation</SubNavTitle>
{products.map((product, index) => (
<SubNavLink
key={index}
to={`/docs/${product!.path!}/`}
onClick={hideSubNav}
>
<IconContainer size={16}>
<AngleRightIconSvg />
</IconContainer>
{product!.title}
</SubNavLink>
))}
</SubNavGroup>
<SubNavSeparator />
<SubNavGroup>
<SubNavTitle>More Resources</SubNavTitle>
<SubNavLink to="/blog" onClick={hideSubNav}>
<IconContainer size={20}>
<NewspaperIconSvg />
</IconContainer>
{product!.title}
Blog
</SubNavLink>
))}
<SubNavSeparator />
<SubNavTitle>More Resources</SubNavTitle>
<SubNavLink to="/blog" onClick={hideSubNav}>
<IconContainer size={20}>
<NewspaperIconSvg />
</IconContainer>
Blog
</SubNavLink>
<SubNavLink to={tools.slack!} onClick={hideSubNav}>
<IconContainer size={20}>
<SlackIconSvg />
</IconContainer>
Slack / Community
</SubNavLink>
<SubNavLink to={tools.twitter!} onClick={hideSubNav}>
<IconContainer size={20}>
<TwitterIconSvg />
</IconContainer>
Twitter
</SubNavLink>
<SubNavLink to={tools.youtube!} onClick={hideSubNav}>
<IconContainer size={20}>
<YouTubeIconSvg />
</IconContainer>
YouTube Channel
</SubNavLink>
<SubNavLink to={tools.github!} onClick={hideSubNav}>
<IconContainer size={20}>
<GithubIconSvg />
</IconContainer>
GitHub
</SubNavLink>
<SubNavLink to={tools.slack!} onClick={hideSubNav}>
<IconContainer size={20}>
<SlackIconSvg />
</IconContainer>
Slack / Community
</SubNavLink>
<SubNavLink to={tools.twitter!} onClick={hideSubNav}>
<IconContainer size={20}>
<TwitterIconSvg />
</IconContainer>
Twitter
</SubNavLink>
<SubNavLink to={tools.youtube!} onClick={hideSubNav}>
<IconContainer size={20}>
<YouTubeIconSvg />
</IconContainer>
YouTube Channel
</SubNavLink>
<SubNavLink to={tools.github!} onClick={hideSubNav}>
<IconContainer size={20}>
<GithubIconSvg />
</IconContainer>
GitHub
</SubNavLink>
</SubNavGroup>
</SubNavMain>
<SubNavAdditionalInfo>
<SubNavTitle>Upcoming Workshop</SubNavTitle>
Expand Down Expand Up @@ -544,11 +548,8 @@ const ServicesNavItem: FC = () => {
Our expertise.
</TeaserHero>
<TeaserDescription>
<p>
<strong>ChilliCream</strong> helps you unlock the full potential
of your technology investments, fulfilling its promise to
transform your company.
</p>
<strong>ChilliCream</strong> helps you unlock your full potential,
delivering on its promise to transform your business.
</TeaserDescription>
</TeaserLink>
</SubNavAdditionalInfo>
Expand Down Expand Up @@ -721,6 +722,7 @@ const SubNav = styled.div`
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 100%;
border-radius: var(--border-radius);
background-color: ${THEME_COLORS.background};
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
Expand All @@ -738,29 +740,44 @@ const SubNavMain = styled.div`
display: flex;
flex: 1 1 55%;
flex-direction: column;
padding: 15px 0;
`;

const SubNavGroup = styled.div`
margin: 10px 0;

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
margin: 15px 0;
}
`;

const SubNavTitle = styled.h1`
margin: 5px 30px 10px;
margin: 5px 15px 10px;
font-size: 0.75em;
font-weight: 600;
letter-spacing: 0.05em;
color: ${THEME_COLORS.heading};
transition: color 0.2s ease-in-out;

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
margin: 5px 30px 10px;
}
`;

const SubNavSeparator = styled.div`
margin: 10px 20px;
margin: 0 10px;
height: 1px;
background-color: ${THEME_COLORS.backgroundAlt};

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
margin: 5px 20px;
}
`;

const SubNavLink = styled(Link)`
display: flex;
flex-direction: row;
align-items: center;
margin: 6px 30px;
margin: 5px 15px;
font-size: 0.833em;
color: ${THEME_COLORS.text};
transition: color 0.2s ease-in-out;
Expand All @@ -781,6 +798,10 @@ const SubNavLink = styled(Link)`
fill: ${THEME_COLORS.primary};
}
}

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
margin: 5px 30px;
}
`;

const TileLinkTitle = styled.h1`
Expand All @@ -801,11 +822,11 @@ const TileLinkDescription = styled.p`
const TileLink = styled(Link)`
display: flex;
flex-direction: column;
margin: 5px 20px;
margin: 5px 10px;
border-radius: var(--border-radius);
width: auto;
min-height: 60px;
padding: 10px;
padding: 5px 10px;
background-color: ${THEME_COLORS.background};
transition: background-color 0.2s ease-in-out;

Expand All @@ -817,15 +838,24 @@ const TileLink = styled(Link)`
color: ${THEME_COLORS.background};
}
}

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
margin: 5px 20px;
padding: 10px;
}
`;

const SubNavAdditionalInfo = styled.div`
display: flex;
flex: 1 1 45%;
flex-direction: column;
border-radius: 0 var(--border-radius) var(--border-radius) 0;
padding: 25px 0;
padding: 10px 0;
background-color: ${THEME_COLORS.backgroundAlt};

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
padding: 25px 0;
}
`;

const TeaserHero = styled.h1`
Expand All @@ -835,18 +865,23 @@ const TeaserHero = styled.h1`
text-align: center;
font-size: 1em;
line-height: 1.5em;
max-width: 400px;
max-width: 80%;
margin: auto;
aspect-ratio: 16/9;
border-radius: var(--border-radius);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
transition: box-shadow 0.2s ease-in-out;
color: ${THEME_COLORS.textContrast};
background-color: ${THEME_COLORS.primary};
background: linear-gradient(180deg, ${THEME_COLORS.primary} 0%, #3d5f9f 100%);

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
max-width: 400px;
}
`;

const TeaserLink = styled(Link)`
margin: 5px 30px;
margin: 5px 15px;

.gatsby-image-wrapper {
pointer-events: none;
Expand All @@ -866,16 +901,26 @@ const TeaserLink = styled(Link)`
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
}
}

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
margin: 5px 30px;
}
`;

const TeaserImage = styled.div`
overflow: visible;
max-width: 80%;
margin: auto;

.gatsby-image-wrapper {
border-radius: var(--border-radius);
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.25);
transition: box-shadow 0.2s ease-in-out;
}

@media only screen and ((min-width: 600px) and (min-height: 430px)) {
max-width: fit-content;
}
`;

const TeaserMetadata = styled.div`
Expand All @@ -889,17 +934,14 @@ const TeaserMetadata = styled.div`
`;

const TeaserTitle = styled.h2`
margin: 0 0 15px;
margin: 0;
font-size: 1em;
line-height: 1.5em;
color: ${THEME_COLORS.text};
transition: color 0.2s ease-in-out;
`;

const TeaserDescription = styled.div`
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0 7px;
font-size: 0.833em;
line-height: 1.5em;
Expand Down