feat(directory): performance and style optimization

2023-02-26 13:45:49 -05:00
parent 81ee2d2170
commit 5c80834c30
9 changed files with 103 additions and 83 deletions
--- a/directory/src/App.css
+++ b/directory/src/App.css
@@ -4,6 +4,7 @@

 :root {
  --text-color: rgba(255, 255, 255, 0.87);
+  --secondary-text-color: #686a72;
  --date-color: rgba(255, 255, 255, 0.2);
  --border-color: #707070;
  --link-highlight-color: #33b5e5;
@@ -16,16 +17,12 @@

  font-family: "Geometos", "Noto Sans SC", sans-serif;
  font-size: 16px;
-  line-height: 24px;
+  line-height: 1.1em;
  font-weight: 400;

  color: var(--text-color);
  background-color: var(--root-background-color);
  min-height: 100vh;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-
 }

 #root {
--- a/directory/src/component/main_border.jsx
+++ b/directory/src/component/main_border.jsx
@@ -2,6 +2,8 @@ import './main_border.css';

 export default function MainBorder(props) {
  return (
-    <section className="main-border"/>
+    <section className="main-border">
+      {props.children}
+    </section>
  )
 }
--- a/directory/src/component/popup.css
+++ b/directory/src/component/popup.css
@@ -41,18 +41,18 @@
 .popup .title {
    font-size: 3rem;
    font-weight: 700;
-    border-bottom: 1px solid var(--border-color);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-content: center;
    align-items: center;
-    padding-bottom: 1rem;
+    text-transform: uppercase;
+    font-family: "Geometos", "Noto Sans SC", sans-serif;
 }

 .popup .content {
-  line-height: 1.5rem;
-  padding: 1rem;
+  line-height: 1.3em;
+  padding: 1rem 1rem 0 1rem;
 }

 .popup .overlay {
--- a/directory/src/component/popup.jsx
+++ b/directory/src/component/popup.jsx
@@ -4,6 +4,7 @@ import {
 } from 'react'
 import './popup.css'
 import ReturnButton from '@/component/return_button';
+import MainBorder from '@/component/main_border';

 export default function Popup(props) {
  const [hidden, setHidden] = useState(true)
@@ -20,6 +21,7 @@ export default function Popup(props) {
            <span>{props.title}</span>
            <ReturnButton onClick={toggle} className="return-button"/>
          </section>
+          <MainBorder/>
          <section className='content'>
            {props.children}
          </section>
--- a/directory/src/context/useConfigContext.jsx
+++ b/directory/src/context/useConfigContext.jsx
@@ -3,7 +3,7 @@ import { createContext, useState, useEffect } from "react"
 export const ConfigContext = createContext()

 export function ConfigProvider(props) {
-  const [config, setConfig] = useState(null)
+  const [config, setConfig] = useState([])

  useEffect(() => {
    fetch("/_assets/directory.json").then(res => res.json()).then(data => {
--- a/directory/src/routes/path/home.css
+++ b/directory/src/routes/path/home.css
@@ -24,8 +24,16 @@
    background-image: repeating-linear-gradient(90deg, var(--home-item-background-linear-gradient-color) 0, var(--home-item-background-linear-gradient-color) 1px, transparent 1px, transparent 5px);
 }

+.home .item-group .item .item-background-filler {
+    border-right: 1px solid var(--home-item-background-linear-gradient-color);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: -1px;
+    bottom: 0;
+}
+
 .home .item-group .item .item-outline {
-    content: "";
    display: block;
    position: absolute;
    opacity: 0;
@@ -94,20 +102,23 @@
    font-weight: bold;
 }

-.home .item-group .item .item-info .item-title-container .item-title,
-.home .item-group .item .item-info .item-text-wrapper {
+.home .item-group .item .item-info .item-title-container .item-title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
 }

+.home .item-group .item .item-info .item-title-container .item-title {
+    line-height: 1.1em;
+    height: 1.25rem;
+}
+
 .home .item-group .item .item-info .item-title-container .item-type {
    width: 1.5rem;
    fill: var(--text-color)
 }

 .home .item-group .item .item-info .item-text {
-    color: var(--text-color);
    font-size: 0.75rem;
    font-family: "Geometos";
    margin-top: 1rem; 
@@ -124,3 +135,9 @@
    transition: all cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
    background-image: linear-gradient(70deg, transparent 40%, currentColor 150%);
 }
+
+.home .item-group .item .item-info .item-text-wrapper {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: var(--secondary-text-color);
+}
--- a/directory/src/routes/path/home.jsx
+++ b/directory/src/routes/path/home.jsx
@@ -19,7 +19,7 @@ export default function Home() {
  const _trackEvt = useUmami('/')
  const {
    setTitle,
-    setTabs,
+    tabs, setTabs,
    currentTab, setCurrentTab } = useContext(HeaderContext)
  const { config } = useContext(ConfigContext)
  const {
@@ -28,6 +28,7 @@ export default function Home() {
    alternateLang,
    i18n
  } = useContext(LanguageContext)
+  const [content, setContent] = useState([])

  useEffect(() => {
    setTitle('dynamic_compile')
@@ -46,41 +47,33 @@ export default function Home() {
    setCurrentTab('all')
  }, [])

-  const renderContent = () => {
-    const list = config?.filter((v) => currentTab === 'all' || currentTab === v.type)
-    const content = []
-    if (list) {
-      console.log(list)
-      let items = {}
-      list.forEach(element => {
-        if (items[element.date]) {
-          items[element.date].push(toItemEl(element))
+  useEffect(() => {
+    const value = config.reduce((acc, cur) => {
+      const date = cur.date
+      if (acc[date]) {
+        acc[date].push(cur)
      } else {
-          items[element.date] = [toItemEl(element)]
+        acc[date] = [cur]
      }
-      });
-      items = Object.keys(items).sort().reverse().reduce((r, k) => {
-        r[k] = items[k]
-        return r
+      return acc
    }, {})
-      for (const [date, group] of Object.entries(items)) {
-        content.push(
-          <section className="item-group-wrapper" key={date}>
-            <section className="item-group">
-              {group.map((v) => v)}
-              <section className='item-group-date'>{date}</section>
-            </section>
-            <MainBorder />
-          </section>
-        )
-      }
-    }
-    return content
-  }
-  const toItemEl = (item) => {
+    setContent(Object.values(value).sort((a, b) => new Date(b[0].date) - new Date(a[0].date)))
+  }, [config])
+
+  const isShown = (type) => currentTab === 'all' || currentTab === type
+
  return (
-      <Link reloadDocument to={`/${item.link}`} className="item" key={item.link}>
-        <section className="item-outline"/>
+    <section className="home">
+      {
+        content.map((v) => {
+          const length = v.filter((v) => isShown(v.type)).length
+          return (
+            <section className="item-group-wrapper" key={v[0].date} hidden={length === 0}>
+              <section className="item-group">
+                {v.map(item => {
+                  return (<Link reloadDocument to={`/${item.link}`} className="item" key={item.link} hidden={!isShown(item.type)}>
+                    <section className="item-background-filler" />
+                    <section className="item-outline" />
                    <section className="item-img">
                      <img src={`/${item.link}/assets/${item.fallback_name.replace("#", "%23")}_portrait.png`} alt={item.codename[language]} />
                    </section>
@@ -102,14 +95,15 @@ export default function Home() {
                        color: item.color
                      }} />
                    </section>
-      </Link>
+                  </Link>)
+                })}
+                <section className='item-group-date'>{v[0].date}</section>
+              </section>
+              <MainBorder />
+            </section>
          )
+        })
      }
-  const content = useMemo(() => renderContent(), [currentTab, config, language])
-
-  return (
-    <section className="home">
-      {content}
    </section>
  )
 }
--- a/directory/src/routes/root.css
+++ b/directory/src/routes/root.css
@@ -140,6 +140,7 @@
  font-size: 3rem;
  font-weight: 700;
  text-transform: uppercase;
+  line-height: 1.1em;
 }

 .main .main-header .main-tab {
@@ -150,7 +151,7 @@

 .main .main-header .main-tab .main-tab-item {
    font-size: 1em;
-    line-height: 3rem;
+    line-height: 3em;
    font-weight: 700;
    padding: 0 1rem;
    text-transform: uppercase;
@@ -164,15 +165,21 @@
    border-bottom-color: var(--link-highlight-color);
 }

-.main .main-header .return-button {
+.main .return-button {
    position: absolute;
    right: -4rem;
-    bottom: -1.5rem;
+    bottom: -24px;
    color: #666;
    transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
 }

-.main .main-header .return-button:hover {
+@media (max-width: 768px) {
+    .main .main-header .return-button {
+        right: -3.4rem;
+    }
+}
+
+.main .return-button:hover {
    color: var(--text-color);
 }

--- a/directory/src/routes/root.jsx
+++ b/directory/src/routes/root.jsx
@@ -141,14 +141,15 @@ export default function Root(props) {
          <section className='main-tab'>
            {headerTabs}
          </section>
+        </section>
+        <MainBorder>
          <ReturnButton
            className='return-button'
            onClick={() => {
              navigate("/")
            }}
          />
-        </section>
-        <MainBorder />
+        </MainBorder>
        <Outlet />
      </main>
      <footer className='footer'>