Skip to content

Commit

Permalink
Fixes the error that caused the side not being scrollable #3415 (#3658)
Browse files Browse the repository at this point in the history
Co-authored-by: Frederic Birke <fred@freds.garden>
  • Loading branch information
rstaib and fredericbirke authored May 4, 2021
1 parent 49ab59b commit 476d6d6
Show file tree
Hide file tree
Showing 30 changed files with 238 additions and 216 deletions.
12 changes: 3 additions & 9 deletions website/.storybook/main.js
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials"
]
}
stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
};
4 changes: 4 additions & 0 deletions website/.vscode/settings.json
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
{
"editor.codeActionsOnSave": {
"source.organizeImports": true
},
"editor.defaultFormatter": "esbenp.prettier-vscode",
"editor.formatOnSave": true,
"editor.renderWhitespace": "all",
"editor.rulers": [0, 80],
Expand Down
2 changes: 1 addition & 1 deletion website/gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ module.exports = {
options: {
maxWidth: 800,
quality: 90,
backgroundColor: 'transparent',
backgroundColor: "transparent",
},
},
],
Expand Down
3 changes: 2 additions & 1 deletion website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,8 @@
"react-redux": "^7.2.1",
"react-responsive-carousel": "^3.2.11",
"react-share": "^4.2.1",
"styled-components": "^5.2.0"
"redux-devtools-extension": "^2.13.9",
"styled-components": "^5.2.3"
},
"devDependencies": {
"@babel/core": "^7.12.10",
Expand Down
17 changes: 8 additions & 9 deletions website/src/components/articles/article-elements.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import styled from "styled-components";
import { IsPhablet, IsSmallDesktop } from "../../shared-style";
import { IsSmallDesktop } from "../../shared-style";

export const ArticleHeader = styled.header`
export const ArticleHeader = styled.header<{ readonly kind: "blog" | "doc" }>`
position: relative;
${IsSmallDesktop(`
padding-top: 54px;
`)}
${IsPhablet(`
padding-top: 20px;
`)}
${({ kind }) =>
kind === "doc"
? IsSmallDesktop(`
padding-top: 60px;
`)
: ""}
@media only screen and (min-width: 820px) {
> .gatsby-image-wrapper {
Expand Down
16 changes: 11 additions & 5 deletions website/src/components/articles/article-sections.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,17 +37,23 @@ export const ArticleSections: FunctionComponent<ArticleSectionsProperties> = ({
.map((item) => ({
id: item.url,
position:
(document.getElementById(item.url.substring(1))?.offsetTop ?? 80) - 80,
(document.getElementById(item.url.substring(1))?.offsetTop ?? 80) -
80,
}))
.reverse();

setHeadings(result);
}, [data]);

useEffect(() => {
setActiveHeadingId(
headings.find((id) => yScrollPosition >= id.position)?.id
const activeHeading = headings.find((id) => yScrollPosition >= id.position)
?.id;
window.history.pushState(
undefined,
activeHeading ?? "ChilliCream Docs",
"./" + (activeHeading ?? "")
);
setActiveHeadingId(activeHeading);
}, [headings, yScrollPosition]);

const tocItems: TableOfContentItem[] = data.tableOfContents.items ?? [];
Expand Down Expand Up @@ -125,8 +131,8 @@ const Title = styled.h6`
`;

const TocItemContainer = styled.ul`
display: flex;
flex-direction: column;
position: absolute;
display: block;
margin: 0;
padding: 0 25px 10px;
list-style-type: none;
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/blog-article/blog-article.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const BlogArticle: FunctionComponent<BlogArticleProperties> = ({
<BlogArticleSharebar data={data} tags={existingTags} />
<ArticleWrapper>
<Article>
<ArticleHeader>
<ArticleHeader kind="blog">
{featuredImage && <Img fluid={featuredImage} />}
<ArticleTitle>{title}</ArticleTitle>
<BlogArticleMetadata data={mdx!} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,5 +39,4 @@ export const ArticleWrapperElement = styled.div`
grid-template-columns: 1fr;
`)}
grid-template-rows: 1fr;
padding: 6px;
`;
1 change: 1 addition & 0 deletions website/src/components/doc-page/doc-page-aside.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,7 @@ export const DocPageAside: FunctionComponent = ({ children }) => {
export const Aside = styled.aside<{ calculatedHeight: string }>`
${DocPageStickySideBarStyle}
height: 100%;
margin-left: 0;
transition: transform 250ms;
background-color: white;
Expand Down
2 changes: 1 addition & 1 deletion website/src/components/doc-page/doc-page-elements.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const DocPageStickySideBarStyle = `
export const BodyStyle = createGlobalStyle<{ disableScrolling: boolean }>`
body {
overflow-y: ${({ disableScrolling }) =>
disableScrolling ? "hidden" : "initial"};
disableScrolling ? "hidden" : "initial"};
@media only screen and (min-width: 600px) {
overflow-y: initial;
Expand Down
19 changes: 9 additions & 10 deletions website/src/components/doc-page/doc-page-navigation.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
? "active"
: ""
: isActive(selectedPath, itemPath)
? "active"
: ""
? "active"
: ""
}
onClick={handleClickNavigationItem}
>
Expand Down Expand Up @@ -256,16 +256,15 @@ export const DocPageNavigation: FunctionComponent<DocPageNavigationProperties> =
title: item!.title!,
items: item!.items
? item?.items
.filter((item) => !!item)
.map<Item>((item) => ({
path: item!.path!,
title: item!.title!,
}))
.filter((item) => !!item)
.map<Item>((item) => ({
path: item!.path!,
title: item!.title!,
}))
: undefined,
})),
`/docs/${activeProduct!.path!}${activeVersion?.path?.length && activeVersion.path.length > 0
? "/" + activeVersion.path!
: ""
`/docs/${activeProduct!.path!}${
!!activeVersion?.path?.length ? "/" + activeVersion.path! : ""
}`
)}
</MostProminentSection>
Expand Down
77 changes: 21 additions & 56 deletions website/src/components/doc-page/doc-page.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,9 @@
import { graphql } from "gatsby";
import { MDXRenderer } from "gatsby-plugin-mdx";
import React, { FunctionComponent, useCallback } from "react";
import { useDispatch, useSelector } from "react-redux";
import styled from "styled-components";
import { DocPageFragment } from "../../../graphql-types";
import { toggleAside, toggleTOC } from "../../state/common";
import { ArticleComments } from "../articles/article-comments";
import {
ArticleContent,
ArticleHeader,
ArticleTitle,
} from "../articles/article-elements";
import { ArticleSections } from "../articles/article-sections";
import { Aside, DocPageAside } from "./doc-page-aside";
import { DocPageCommunity } from "./doc-page-community";
import { DocPageLegacy } from "./doc-page-legacy";
import { DocPageNavigation, Navigation } from "./doc-page-navigation";

import ListAltIconSvg from "../../images/list-alt.svg";
import NewspaperIconSvg from "../../images/newspaper.svg";
import {
Expand All @@ -25,13 +13,24 @@ import {
IsSmallDesktop,
IsTablet,
} from "../../shared-style";
import { State } from "../../state";
import { toggleAside, toggleTOC } from "../../state/common";
import { Article } from "../articles/article";
import { ArticleComments } from "../articles/article-comments";
import {
ArticleContent,
ArticleHeader,
ArticleTitle,
} from "../articles/article-elements";
import { ArticleSections } from "../articles/article-sections";
import {
ArticleWrapper,
ArticleWrapperElement,
} from "./doc-page-article-wrapper";
import { State } from "../../state";
import { MDXRenderer } from "gatsby-plugin-mdx";
import { Aside, DocPageAside } from "./doc-page-aside";
import { DocPageCommunity } from "./doc-page-community";
import { DocPageLegacy } from "./doc-page-legacy";
import { DocPageNavigation, Navigation } from "./doc-page-navigation";

interface DocPageProperties {
data: DocPageFragment;
Expand Down Expand Up @@ -76,11 +75,8 @@ export const DocPage: FunctionComponent<DocPageProperties> = ({
<ArticleContainer>
<Article>
{false && <DocPageLegacy />}
<ArticleHeader>
<ArticleHeader kind="doc">
<ResponsiveMenuWrapper>
<ResponsiveMenuBackground
hasScrolled={hasScrolled}
></ResponsiveMenuBackground>
<ResponsiveMenu hasScrolled={hasScrolled}>
<Button onClick={handleToggleTOC} className="toc-toggle">
<ListAltIconSvg /> Table of contents
Expand Down Expand Up @@ -143,7 +139,6 @@ const ArticleContainer = styled.div`
${IsSmallDesktop(`
grid-column: 1;
margin-top: 10px;
`)};
${IsPhablet(`
Expand Down Expand Up @@ -201,26 +196,27 @@ const Container = styled.div`
}
`;

const ResponsiveMenu = styled.div<{ hasScrolled: boolean }>`
const ResponsiveMenu = styled.div<{ readonly hasScrolled: boolean }>`
position: fixed;
transition: all 100ms linear 0s;
top: 100px;
${(state) => (state.hasScrolled ? "top: 60px;" : "")}
${({ hasScrolled }) => (hasScrolled ? "top: 60px;" : "top: 80px;")}
box-sizing: border-box;
z-index: 3;
display: flex;
flex-direction: row;
align-items: center;
border-radius: 4px 4px 0 0;
background: linear-gradient(
180deg,
#ffffff 30%,
rgba(255, 255, 255, 0.75) 100%
);
width: 800px;
width: 820px;
height: 60px;
margin-left: auto;
margin-right: auto;
padding: 20px;
padding: 0 20px;
${IsPhablet(`
left: 0;
Expand Down Expand Up @@ -248,37 +244,6 @@ const ResponsiveMenu = styled.div<{ hasScrolled: boolean }>`
`)}
`;

const ResponsiveMenuBackground = styled.div<{ hasScrolled: boolean }>`
display: ${(state) => (state.hasScrolled ? "initial" : "none")};
position: fixed;
height: 60px;
top: 60px;
box-sizing: border-box;
z-index: 2;
background: linear-gradient(
180deg,
#ffffff 30%,
rgba(255, 255, 255, 0.75) 100%
);
width: 800px;
margin-left: auto;
margin-right: auto;
padding: 20px;
${IsPhablet(`
left: 0;
width: auto;
right: 0;
margin-left: 0;
margin-right: 0;
`)}
${IsDesktop(`
display: none;
`)}
`;

const Button = styled.button`
display: flex;
flex-direction: row;
Expand Down
9 changes: 2 additions & 7 deletions website/src/components/misc/page-top.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React, { createRef, FunctionComponent } from "react";
import { useSelector } from "react-redux";
import styled from "styled-components";

import ArrowUpIconSvg from "../../images/arrow-up.svg";
import { useSelector } from "react-redux";
import { State } from "../../state";

export const PageTop: FunctionComponent<{ onTopScroll: () => void }> = ({
Expand All @@ -29,11 +28,10 @@ const JumpToTop = styled.button`
&.show {
display: initial;
}
position: fixed;
right: 50px;
bottom: 50px;
z-index: 20;
z-index: 29;
display: none;
border-radius: 50%;
padding: 8px;
Expand All @@ -43,16 +41,13 @@ const JumpToTop = styled.button`
opacity: 0.6;
box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.25);
transition: opacity 0.2s ease-in-out;
&:hover {
opacity: 1;
}
svg {
width: 30px;
height: 30px;
}
@media only screen and (min-width: 1600px) {
right: calc(((100vw - 1320px) / 2) - 100px);
}
Expand Down
13 changes: 6 additions & 7 deletions website/src/components/structure/header.tsx
Original file line number Diff line number Diff line change
@@ -1,20 +1,19 @@
import { graphql, useStaticQuery } from "gatsby";
import React, { FunctionComponent, useState } from "react";
import { useSelector } from "react-redux";
import styled, { createGlobalStyle } from "styled-components";
import { GetHeaderDataQuery } from "../../../graphql-types";
import { IconContainer } from "../misc/icon-container";
import { Link } from "../misc/link";
import { Search } from "../misc/search";

import BarsIconSvg from "../../images/bars.svg";
import GithubIconSvg from "../../images/github.svg";
import LogoIconSvg from "../../images/chillicream-winking.svg";
import LogoTextSvg from "../../images/chillicream-text.svg";
import LogoIconSvg from "../../images/chillicream-winking.svg";
import GithubIconSvg from "../../images/github.svg";
import SlackIconSvg from "../../images/slack.svg";
import TimesIconSvg from "../../images/times.svg";
import TwitterIconSvg from "../../images/twitter.svg";
import { useSelector } from "react-redux";
import { State } from "../../state";
import { IconContainer } from "../misc/icon-container";
import { Link } from "../misc/link";
import { Search } from "../misc/search";

export const Header: FunctionComponent = () => {
const showShadow = useSelector<State, boolean>(
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ export const MainContentContainer: FunctionComponent = ({ children }) => {

useEffect(() => {
ref.current?.addEventListener("scroll", handleScroll);
return () => ref.current?.removeEventListener("scroll", handleScroll);
return () => {
ref.current?.removeEventListener("scroll", handleScroll);
};
}, []);

useEffect(() => {
Expand Down
Loading

0 comments on commit 476d6d6

Please sign in to comment.