feat: stylizing timeline with color

Signed-off-by: Ruihang Xia <[email protected]>
waynexia · Aug 6, 2024 · f708c47 · f708c47
1 parent 5c875b7
commit f708c47
Show file tree

Hide file tree

Showing 5 changed files with 91 additions and 48 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -3,6 +3,7 @@ import caster from './assets/caster.avif'
 import { build_list, mock_list } from './list'
 import { person_detail } from './fetch'
 import { wikipedia_link_of_page, wikipedia_link_of_year } from './utils'
+import Timeline from './timeline'
 
 function App() {
   const [list, setList] = useState<{ from: number, to: number, person_detail: { title: string, intro: string, imageUrl: string | null, imageTitle: string | null }, person: { desc: string, link: string | undefined, death: number | undefined }, other_people: { desc: string, link: string | undefined, death: number | undefined }[] }[]>([])
@@ -12,7 +13,7 @@ function App() {
   const [isUpdating, setIsUpdating] = useState(false)
   const [isFinished, setIsFinished] = useState(false)
 
-  // const currentYear = new Date().getFullYear()
+  const currentYear = new Date().getFullYear()
 
   // prepare (mock) data
   useEffect(() => {
@@ -33,8 +34,9 @@ function App() {
 
   const handleScroll: React.UIEventHandler<HTMLDivElement> = (e) => {
     const { scrollTop, scrollHeight, clientHeight } = e.target as HTMLDivElement
+    const scrollableHeight = scrollHeight * 1
     const position = Math.ceil(
-      (scrollTop / (scrollHeight - clientHeight)) * 1000,
+      (scrollTop / (scrollableHeight - clientHeight)) * 1000,
     )
     setCurrentTimelineHighlight(position)
 
@@ -68,7 +70,7 @@ function App() {
                   alt="image not available"
                 />
                 <br />
-                <div className="subtitle">image not available</div>
+                <div className="font-size-12px">image not available</div>
               </>
               )
             : (
@@ -78,7 +80,7 @@ function App() {
                   alt={list[currentIndex].person_detail.title}
                 />
                 <br />
-                <div className="subtitle">{list[currentIndex].person_detail.imageTitle}</div>
+                <div className="font-size-12px">{list[currentIndex].person_detail.imageTitle}</div>
               </>
               )
         }
@@ -107,35 +109,20 @@ function App() {
 
   return (
     <div className="gallery">
-      <div className="timeline" onScroll={handleScroll}>
-        <h3>Timeline</h3>
-        <table>
-          <tbody>
-            {Array.from({ length: 1000 }).map((_, index) => (
-              <tr key={index}>
-                <td className={`indicator ${currentTimelineHighlight === index ? 'highlight' : ''}`} />
-                <td>
-                  Year
-                  {' '}
-                  {index}
-                </td>
-              </tr>
-            ))}
-          </tbody>
-        </table>
-      </div>
+      <Timeline list={list} currentTimelineHighlight={currentTimelineHighlight} handleScroll={handleScroll} endYear={currentYear} />
 
       <div className="intro">
         {
           list.length === 0
             ? 'loading...'
             : (
               <>
-                <h1><a href={wikipedia_link_of_page(list[currentIndex].person.link!)}>{list[currentIndex].person_detail.title}</a></h1>
-                <h2>{`${list[currentIndex].from} ~ ${list[currentIndex].to} (aged ${list[currentIndex].to - list[currentIndex].from})`}</h2>
+                <h1 className="text-center m-5px"><a href={wikipedia_link_of_page(list[currentIndex].person.link!)}>{list[currentIndex].person_detail.title}</a></h1>
+                <h2 className="text-center m-5px">{`${list[currentIndex].from} ~ ${list[currentIndex].to} (aged ${list[currentIndex].to - list[currentIndex].from})`}</h2>
+                <p className="text-center">{list[currentIndex].person.desc}</p>
                 <p className="text-detail-container">{list[currentIndex].person_detail.intro}</p>
                 <div className="preview-next">
-                  <h1>{getNext()}</h1>
+                  <h1 className="text-center c-gray">{getNext()}</h1>
                 </div>
               </>
               )

diff --git a/src/index.css b/src/index.css
@@ -7,9 +7,12 @@ body {
     height: 100vh;
 }
 
+table {
+    border-collapse: collapse;
+}
+
 .timeline {
     flex: 1;
-    background-color: #f0f0f0;
 
     display: flex;
     flex-direction: column;
@@ -19,14 +22,31 @@ body {
     scrollbar-width: none;
 }
 
+.sticky {
+    position: fixed;
+    top: 0;
+    background-color: white;
+    margin: 0;
+    border: 1rem solid white;
+}
+
 td {
     text-align: center;
+    min-width: 10px;
+    height: 10px;
+    border: none;
 }
 
-.indicator {
-    width: 1.5rem;
-    border-radius: 50%;
-    background-color: #00000000;
+.inactive {
+    background-color: lightgray;
+}
+
+.left {
+    background-color: cyan;
+}
+
+.right {
+    background-color: orange;
 }
 
 .highlight {
@@ -44,16 +64,6 @@ td {
     flex-direction: column;
 }
 
-.intro h1 {
-    text-align: center;
-    margin: 5px;
-}
-
-.intro h2 {
-    text-align: center;
-    margin: 5px;
-}
-
 .text-detail-container {
     flex: 10;
     border-radius: 20px;
@@ -68,10 +78,6 @@ td {
     font-family: Arial, sans-serif;
 }
 
-.preview-next {
-    color: gray;
-}
-
 .photo {
     flex: 2;
     display: flex;
@@ -84,10 +90,6 @@ td {
     overflow: hidden;
 }
 
-.subtitle {
-    font-size: 12px;
-}
-
 .people-counter {
     margin: 1rem 0;
     font-size: 16px;

diff --git a/src/main.tsx b/src/main.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
 import App from './App.tsx'
+import 'uno.css'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root')!).render(

diff --git a/src/timeline.tsx b/src/timeline.tsx
@@ -0,0 +1,52 @@
+function Timeline({ list, currentTimelineHighlight, handleScroll, endYear }) {
+  const table = Array.from({ length: endYear }).map((_, _index) => { return { color1: 'inactive', color2: 'inactive', should_show_year: false } })
+
+  if (list.length === 0)
+    return 'loading'
+
+  for (let curr_index = 0; curr_index < list.length; curr_index++) {
+    for (let i = list[curr_index].from; i <= list[curr_index].to; i++) {
+      if (curr_index % 2 === 0) {
+        table[i].color1 = 'left'
+        if (table[i].color2 !== 'right')
+          table[i].color2 = 'white'
+      }
+      else {
+        table[i].color2 = 'right'
+        if (table[i].color1 !== 'left')
+          table[i].color1 = 'white'
+      }
+    }
+    table[list[curr_index].from].should_show_year = true
+    table[list[curr_index].to].should_show_year = true
+  }
+  table[0].should_show_year = true
+  table[currentTimelineHighlight].color1 = 'highlight'
+  table[currentTimelineHighlight].color2 = 'highlight'
+
+  return (
+    <div className="timeline" onScroll={handleScroll}>
+      <h3 className="sticky">Timeline</h3>
+      <h3> - </h3>
+      <div>
+        <table>
+          <tbody>
+            {Array.from({ length: 1000 }).map((_, index) => (
+              <tr key={index}>
+                <td className={table[index].color1} />
+                <td className={table[index].color2} />
+                <td>
+                  {' '}
+                  {table[index].should_show_year ? index : '' }
+                  {' '}
+                </td>
+              </tr>
+            ))}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  )
+}
+
+export default Timeline
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,8 @@
 import { defineConfig } from 'vite'
+import UnoCSS from 'unocss/vite'
 import react from '@vitejs/plugin-react-swc'
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), UnoCSS()],
 })