Skip to content

Commit

Permalink
enhancement for mobile web (#5596)
Browse files Browse the repository at this point in the history
  • Loading branch information
@artola
artola committed Dec 10, 2022
1 parent 46a1b22 commit 4fee729
Showing 1 changed file with 103 additions and 61 deletions.
164 changes: 103 additions & 61 deletions website/src/components/layout/header.tsx
View file
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

0 comments on commit 4fee729

Please sign in to comment.