From 6315efacd6212a347877102a68f430fffa4ca4ac Mon Sep 17 00:00:00 2001 From: Armand Philippot Date: Mon, 10 Jan 2022 18:17:40 +0100 Subject: refactor(sidebar): use a component to avoid styles repetition I also fix some overflow/sticky issues. I have to set overflow auto only when there is no button-like links otherwise, with translate, the button is cropped on hover. --- src/components/PostsList/PostsList.tsx | 2 +- src/components/Sidebar/Sidebar.module.scss | 36 +++++++++++++++++++++++ src/components/Sidebar/Sidebar.tsx | 12 ++++++++ src/components/ToC/ToC.module.scss | 24 ++++++++++++--- src/components/Widget/Sharing/Sharing.module.scss | 11 +++---- src/pages/article/[slug].tsx | 5 ++-- src/pages/blog/index.tsx | 5 ++-- src/pages/contact.tsx | 5 ++-- src/pages/cv.tsx | 5 ++-- src/styles/pages/Listing.module.scss | 32 ++++++++++---------- src/styles/pages/Page.module.scss | 17 ----------- 11 files changed, 102 insertions(+), 52 deletions(-) create mode 100644 src/components/Sidebar/Sidebar.module.scss create mode 100644 src/components/Sidebar/Sidebar.tsx (limited to 'src') diff --git a/src/components/PostsList/PostsList.tsx b/src/components/PostsList/PostsList.tsx index 3354dd5..f401d83 100644 --- a/src/components/PostsList/PostsList.tsx +++ b/src/components/PostsList/PostsList.tsx @@ -63,7 +63,7 @@ const PostsList = ({ }); }; - return <>{showYears ? getPostsListByYear() : getPostsList()}; + return
{showYears ? getPostsListByYear() : getPostsList()}
; }; export default PostsList; diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss new file mode 100644 index 0000000..544a733 --- /dev/null +++ b/src/components/Sidebar/Sidebar.module.scss @@ -0,0 +1,36 @@ +@use "@styles/abstracts/mixins" as mix; + +.wrapper { + grid-column: 2; + + @include mix.media("screen") { + @include mix.dimensions("md") { + grid-column: 3; + grid-row: 2; + align-self: stretch; + display: flex; + flex-flow: column nowrap; + position: relative; + visibility: hidden; + + &:hover { + visibility: visible; + } + + > * { + visibility: visible; + } + } + } +} + +.body { + @include mix.media("screen") { + @include mix.dimensions("md") { + align-self: flex-start; + width: 100%; + position: sticky; + top: 0; + } + } +} diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx new file mode 100644 index 0000000..8c9fa1d --- /dev/null +++ b/src/components/Sidebar/Sidebar.tsx @@ -0,0 +1,12 @@ +import { FunctionComponent } from 'react'; +import styles from './Sidebar.module.scss'; + +const Sidebar: FunctionComponent = ({ children }) => { + return ( + + ); +}; + +export default Sidebar; diff --git a/src/components/ToC/ToC.module.scss b/src/components/ToC/ToC.module.scss index 27e79ad..0f08b87 100644 --- a/src/components/ToC/ToC.module.scss +++ b/src/components/ToC/ToC.module.scss @@ -1,9 +1,25 @@ +@use "@styles/abstracts/mixins" as mix; + .wrapper { - max-height: 100vh; padding-bottom: var(--spacing-sm); - position: sticky; - top: 0; - overflow-y: auto; + + @include mix.media("screen") { + @include mix.dimensions("lg") { + max-height: 100vh; + position: sticky; + top: 0; + overflow: auto; + visibility: hidden; + + > * { + visibility: visible; + } + + &:hover { + visibility: visible; + } + } + } } .list { diff --git a/src/components/Widget/Sharing/Sharing.module.scss b/src/components/Widget/Sharing/Sharing.module.scss index a1ba094..7ecb5ff 100644 --- a/src/components/Widget/Sharing/Sharing.module.scss +++ b/src/components/Widget/Sharing/Sharing.module.scss @@ -3,12 +3,13 @@ @use "@styles/abstracts/placeholders"; .wrapper { - width: min-content; - max-height: 100vh; padding-bottom: var(--spacing-sm); - position: sticky; - top: 0; - overflow-y: auto; + + @include mix.media("screen") { + @include mix.dimensions("md") { + width: min-content; + } + } } .list { diff --git a/src/pages/article/[slug].tsx b/src/pages/article/[slug].tsx index 7d25843..fb79b41 100644 --- a/src/pages/article/[slug].tsx +++ b/src/pages/article/[slug].tsx @@ -18,6 +18,7 @@ import { ParsedUrlQuery } from 'querystring'; import { useEffect } from 'react'; import styles from '@styles/pages/Page.module.scss'; import { Sharing } from '@components/Widget'; +import Sidebar from '@components/Sidebar/Sidebar'; const SingleArticle: NextPageWithLayout = ({ post }) => { const { @@ -67,9 +68,9 @@ const SingleArticle: NextPageWithLayout = ({ post }) => { dangerouslySetInnerHTML={{ __html: content }} > - +
diff --git a/src/pages/blog/index.tsx b/src/pages/blog/index.tsx index db4b7a8..1bd6c62 100644 --- a/src/pages/blog/index.tsx +++ b/src/pages/blog/index.tsx @@ -14,6 +14,7 @@ import { getPublishedPosts } from '@services/graphql/queries'; import PostHeader from '@components/PostHeader/PostHeader'; import styles from '@styles/pages/Listing.module.scss'; import { ThematicsList, TopicsList } from '@components/Widget'; +import Sidebar from '@components/Sidebar/Sidebar'; const Blog: NextPageWithLayout = ({ fallback }) => { const getKey = (pageIndex: number, previousData: PostsListData) => { @@ -59,10 +60,10 @@ const Blog: NextPageWithLayout = ({ fallback }) => { position="center" >{t`Load more?`} )} - + ); diff --git a/src/pages/contact.tsx b/src/pages/contact.tsx index d9c4e4f..5e6d138 100644 --- a/src/pages/contact.tsx +++ b/src/pages/contact.tsx @@ -12,6 +12,7 @@ import { FormEvent, useState } from 'react'; import PostHeader from '@components/PostHeader/PostHeader'; import styles from '@styles/pages/Page.module.scss'; import { SocialMedia } from '@components/Widget'; +import Sidebar from '@components/Sidebar/Sidebar'; const ContactPage: NextPageWithLayout = () => { const [name, setName] = useState(''); @@ -112,14 +113,14 @@ const ContactPage: NextPageWithLayout = () => { - + ); diff --git a/src/pages/cv.tsx b/src/pages/cv.tsx index 025d554..c771bb2 100644 --- a/src/pages/cv.tsx +++ b/src/pages/cv.tsx @@ -11,6 +11,7 @@ import { ArticleMeta } from '@ts/types/articles'; import styles from '@styles/pages/Page.module.scss'; import { CVPreview, SocialMedia } from '@components/Widget'; import { t } from '@lingui/macro'; +import Sidebar from '@components/Sidebar/Sidebar'; const CV: NextPageWithLayout = () => { const dates = { @@ -38,14 +39,14 @@ const CV: NextPageWithLayout = () => {
- + ); diff --git a/src/styles/pages/Listing.module.scss b/src/styles/pages/Listing.module.scss index fdad3f5..db826d7 100644 --- a/src/styles/pages/Listing.module.scss +++ b/src/styles/pages/Listing.module.scss @@ -10,23 +10,37 @@ grid-column: 1 / -1; } - > section { + > div { grid-column: 1 / 3; } > button { grid-column: 2; } + + > aside > div { + max-height: 100vh; + overflow: auto; + } } .body { + --column-3: 0; + --grid-gap: 0; + grid-column: 2; + composes: grid from "@styles/layout/_grid.scss"; + align-items: first baseline; @include mix.media("screen") { @include mix.dimensions("md") { grid-row: 2; } } + + > * { + grid-column: 2; + } } .list { @@ -36,19 +50,3 @@ li.item { margin: 0 0 var(--spacing-md) 0; } - -.aside { - grid-column: 2; - margin-top: var(--spacing-lg); - - @include mix.media("screen") { - @include mix.dimensions("md") { - grid-column: 3; - grid-row: 2; - max-height: 100vh; - position: sticky; - top: 0; - overflow-y: auto; - } - } -} diff --git a/src/styles/pages/Page.module.scss b/src/styles/pages/Page.module.scss index 41172a3..fb19906 100644 --- a/src/styles/pages/Page.module.scss +++ b/src/styles/pages/Page.module.scss @@ -37,23 +37,6 @@ } } -.aside { - grid-column: 2; - - @include mix.media("screen") { - @include mix.dimensions("md") { - grid-column: 3; - grid-row: 2 / 5; - align-self: stretch; - padding: 0 var(--spacing-sm); - } - - @include mix.dimensions("lg") { - grid-row: 2 / 4; - } - } -} - .comments { grid-column: 1 / -1; composes: grid from "@styles/layout/_grid.scss"; -- cgit v1.2.3