[B-000] Fix bug: CategoryLines

Author: aaronryu

src/templates/archive/main-category.tsx

@@ -5,25 +5,26 @@ import * as React from "react"
 import { CategoryArticle } from "."
 import SubCategoryArticles from "./sub-category"
 
-export const CategoryLine = styled(`div`)<{ size: 'main' | 'sub' | 'nested' ,top: number, left: number, plusHeight: number }>(
-  ({ size, top, left, plusHeight: minusHeight }) => ({
-    content: '""',
-    position: 'absolute',
-    top: `${top}px`,
-    left: `${left}px`,
-    height: `calc(100% + ${minusHeight}px)`,
-    width: '2px',
-    backgroundColor: 'var(--text-link)',
-    '@media only screen and (max-width: 700px)': {
-      top: `${top + (size === 'nested' ? 2 : (size === 'sub' ? 5 : 2))}px`,
-      height: `calc(100% + ${minusHeight - (size === 'nested' ? 2 : (size === 'sub' ? 36 : 6))}px)`,
-    },
-    '@media only screen and (max-width: 600px)': {
-      top: `${top + (size === 'nested' ? 4 : (size === 'sub' ? 7 : 3))}px`,
-      height: `calc(100% + ${minusHeight - (size === 'nested' ? 4 : (size === 'sub' ? 77 : 6))}px)`,
-    },
-  })
-)
+export const CategoryLine = styled(`div`)({
+  content: '""',
+  position: 'absolute',
+  width: '2px',
+  backgroundColor: 'var(--text-link)',
+})
+
+const CategoryMainLine = styled(CategoryLine)({
+  left: `14px`,
+  top: `-0.2rem`,
+  height: `calc(100% + 1.5rem + 0.3rem)`,
+  '@media only screen and (max-width: 700px)': {
+    top: `0px`,
+    height: `calc(100% + 1.5rem)`,
+  },
+  '@media only screen and (max-width: 600px)': {
+    top: `0px`,
+    height: `calc(100% + 1.5rem)`,
+  },
+})
 
 export const sliceStringWithMax = (str: string, max: number) => 
   (str.length >= max)
@@ -39,7 +40,7 @@ const MainCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, ca
         <MainCategoryBox key={mainCategory}>
           <MainCategoryTitle category={mainCategory} articleCount={each.count} />
           <ul css={styles.articles} key={mainCategory}>
-            {hasSubCategory && <CategoryLine size="main" top={-4} left={14} plusHeight={30} />}
+            {hasSubCategory && <CategoryMainLine />}
             {each.articles.map(article => (
               <li css={styles.article} key={article.title}>
                 <Link css={styles.articleTitle} to={article.link}>
@@ -133,7 +134,7 @@ export const styles = {
   `,
   articles: css`
     position: relative;
-    top: -12px;
+    top: -0.8rem;
     margin-bottom: -6px;
   `,
   nestedArticles: css`

src/templates/archive/nested-category.tsx

@@ -1,9 +1,39 @@
 import { css } from "@emotion/react"
+import styled from "@emotion/styled"
 import { Link } from "gatsby"
 import * as React from "react"
 import { CategoryArticle } from "."
 import { CategoryLine, sliceStringWithMax, styles } from "./main-category"
 
+const CategoryMainConnectedNestedLine = styled(CategoryLine)({
+  left: `-20px`,
+  top: `-1.1rem`,
+  height: `calc(100% + 1.5rem + 1.5rem)`,
+  // | -1.0rem + 1.3rem | = 2.6rem -> CategoryMainLine
+  '@media only screen and (max-width: 700px)': {
+    top: `-1.0rem`,
+    height: `calc(100% + 1.5rem + 1.3rem)`,
+  },
+  '@media only screen and (max-width: 600px)': {
+    top: `-1.0rem`,
+    height: `calc(100% + 1.5rem + 1.3rem)`,
+  },
+})
+
+const CategorySubConnectedNestedLine = styled(CategoryLine)({
+  left: `21px`,
+  top: `-1.1rem`,
+  height: `calc(100% + 1.5rem + 1.1rem)`,
+  '@media only screen and (max-width: 700px)': {
+    top: `-1.0rem`,
+    height: `calc(100% + 1.5rem + 1.0rem)`,
+  },
+  '@media only screen and (max-width: 600px)': {
+    top: `-1.0rem`,
+    height: `calc(100% + 1.5rem + 1.2rem)`,
+  },
+})
+
 const NestedCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, categories: Array<CategoryArticle> }> = ({ maxTitleLength, categories }) => (
   <React.Fragment>
     {categories.map((each, index) => {
@@ -13,7 +43,8 @@ const NestedCategoryArticles: React.FunctionComponent<{ maxTitleLength: number,
         <NestedCategoryBox key={subCategory}>
           <NestedCategoryTitle category={subCategory} articleCount={each.count} />
           <ul css={styles.nestedArticles} key={subCategory}>
-            {notLastNestedCategory && <CategoryLine size="nested" top={-21} left={21} plusHeight={44} />}
+            <CategoryMainConnectedNestedLine />
+            {notLastNestedCategory && <CategorySubConnectedNestedLine />}
             {each.articles.map(article => (
               <li css={[styles.article, css`position: relative; left: 24px;`]} key={article.title}>
                 <Link css={styles.articleTitle} to={article.link}>

src/templates/archive/sub-category.tsx

@@ -1,10 +1,40 @@
 import { css } from "@emotion/react"
+import styled from "@emotion/styled"
 import { Link } from "gatsby"
 import * as React from "react"
 import { CategoryArticle } from "."
 import { CategoryLine, sliceStringWithMax, styles } from "./main-category"
 import NestedCategoryArticles from "./nested-category"
 
+const CategoryMainConnectedSubLine = styled(CategoryLine)({
+  left: `14px`,
+  top: `-1.5rem`,
+  height: `calc(100% + 1.5rem + 1.5rem)`,
+  // | -1.1rem + 1.2rem | = 2.6rem -> CategoryMainLine
+  '@media only screen and (max-width: 700px)': {
+    top: `-1.1rem`,
+    height: `calc(100% + 1.5rem + 1.2rem)`,
+  },
+  '@media only screen and (max-width: 600px)': {
+    top: `-1.1rem`,
+    height: `calc(100% + 1.5rem + 1.2rem)`,
+  },
+})
+
+const CategorySubLine = styled(CategoryLine)({
+  left: `55px`,
+  top: `-0.2rem`,
+  height: `calc(100% + 1.5rem + 0.0rem)`,
+  '@media only screen and (max-width: 700px)': {
+    top: `-0.1rem`,
+    height: `calc(100% + 1.5rem - 0.1rem)`,
+  },
+  '@media only screen and (max-width: 600px)': {
+    top: `-0.1rem`,
+    height: `calc(100% + 1.5rem + 0.0rem)`,
+  },
+})
+
 const SubCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, categories: Array<CategoryArticle> }> = ({ maxTitleLength, categories }) => (
   <React.Fragment>
     {categories.map((each, index) => {
@@ -24,8 +54,8 @@ const SubCategoryArticles: React.FunctionComponent<{ maxTitleLength: number, cat
         <SubCategoryBox key={subCategory}>
           <SubCategoryTitle category={subCategory} articleCount={each.count} />
           <ul css={styles.articles} key={subCategory}>
-            {hasNestedCategory && <CategoryLine size="nested" top={-4} left={55} plusHeight={25} />}
-            {notLastSubCategory && <CategoryLine size="sub" top={-23} left={14} plusHeight={(66 + nestedHeightCorrection)} />}
+            {hasNestedCategory && <CategorySubLine />}
+            {notLastSubCategory && <CategoryMainConnectedSubLine />}
             {each.articles.map(article => (
               <li css={[styles.article, css`position: relative; left: 40px;`]} key={article.title}>
                 <Link css={styles.articleTitle} to={article.link}>