Update people and news

sarchlab · Oct 11, 2024 · cd707e4 · cd707e4
1 parent af33466
commit cd707e4
Show file tree

Hide file tree

Showing 4 changed files with 103 additions and 41 deletions.
diff --git a/src/app.css b/src/app.css
@@ -77,7 +77,9 @@
 
     body {
         @apply bg-background text-foreground;
-        font-feature-settings: 'rlig' 1, 'calt' 1;
+        font-feature-settings:
+            'rlig' 1,
+            'calt' 1;
     }
 
     .sec-title {
@@ -118,19 +120,20 @@
     .main-container {
         @apply flex flex-col px-8 gap-4 items-start;
         @apply md:flex-row md:justify-center;
-        @apply md:container md:mx-auto;
+        @apply md:container md:mx-auto md:h-auto;
         @apply justify-center;
         @apply max-w-screen-2xl;
     }
 
     .main-container > .two-col-left {
         @apply w-full;
-        @apply md:w-9/12;
+        @apply md:w-9/12 md:h-auto;
     }
 
     .main-container > .two-col-right {
         @apply hidden;
-        @apply md:w-3/12 md:flex;
+        @apply md:w-3/12  md:overflow-y-auto;
+        @apply md:flex;
     }
 
     .block-container {

diff --git a/src/lib/components/news.svelte b/src/lib/components/news.svelte
@@ -1,7 +1,53 @@
-<script>
+<script lang="ts">
+    import { onMount } from 'svelte'
+
+    export let maxItems = 6
+
+    let box: HTMLDivElement | null = null
+    let folded = false
+    let foldedItems: Element[] = []
+
+    let moreNewsButton = onMount(() => {
+        if (maxItems > 0) {
+            foldNews(null)
+        }
+
+        box?.classList.remove('invisible')
+    })
+
+    const toggleFold = (event: Event) => {
+        if (folded) {
+            unfoldNews(event.target)
+        } else {
+            foldNews(event.target)
+        }
+    }
+
+    const foldNews = (btn: EventTarget | null) => {
+        folded = true
+        foldedItems = [...document.querySelectorAll('ul li')]
+        foldedItems.slice(maxItems).forEach((item) => {
+            ;(item as HTMLElement).style.display = 'none'
+        })
+
+        if (btn) {
+            ;(btn as HTMLElement).innerHTML = 'More news ...'
+        }
+    }
+
+    const unfoldNews = (btn: EventTarget | null) => {
+        folded = false
+        foldedItems.forEach((item) => {
+            ;(item as HTMLElement).style.display = 'list-item'
+        })
+
+        if (btn) {
+            ;(btn as HTMLElement).innerHTML = 'Less news'
+        }
+    }
 </script>
 
-<div>
+<div class="invisible" bind:this={box}>
     <h2 class="sec-title">Lab News</h2>
     <ul>
         <li>
@@ -103,6 +149,11 @@
             >.
         </li>
     </ul>
+    <div>
+        <button class="mt-4" on:click|preventDefault={toggleFold}
+            >More news</button
+        >
+    </div>
 </div>
 
 <style lang="postcss">

diff --git a/src/lib/components/publication_list.svelte b/src/lib/components/publication_list.svelte
@@ -56,8 +56,6 @@
                 publication
             )
         }
-
-        console.log(publicationByYear)
     })
 </script>
 

diff --git a/src/routes/(lab)/people/+page.svelte b/src/routes/(lab)/people/+page.svelte
@@ -87,16 +87,6 @@
             <div><b>Email:</b> [email protected]</div>
         </Member>
 
-        <Member
-            name="Yexi Zheng"
-            profile_img="/yexi_zheng.jpg"
-            link="https://www.linkedin.com/in/yexi-zheng-201894225/"
-        >
-            <div>Undergraduate Researcher</div>
-            <div>2023/11 -</div>
-            <div><b>Email:</b> [email protected]</div>
-        </Member>
-
         <Member name="Xuzhong Wang" profile_img="" link="">
             <div>Undergraduate Researcher</div>
             <div>2024/5 -</div>
@@ -112,11 +102,6 @@
 
     <h2 class="sec-title">External Research Interns</h2>
     <div class="person-container lightweight">
-        <Member name="Shaoyu Wang" lightweight>
-            <div>2022/3 -</div>
-            <div>Huazhong U. of Sci. and Tech.</div>
-        </Member>
-
         <Member name="Chen Gong" lightweight>
             <div>2023/4 -</div>
             <div>Huazhong U. of Sci. and Tech.</div>
@@ -127,29 +112,11 @@
             <div>Nanjing University</div>
         </Member>
 
-        <Member name="Yuchao Su" lightweight>
-            <div>2023/8 -</div>
-            <div>Northeastern University</div>
-        </Member>
-
-        <Member name="Bei Pei" lightweight>
-            <div>2023/8 -</div>
-            <div>University of California, San Diego</div>
-        </Member>
-
-        <Member name="Jijie Zhou" lightweight>
-            <div>2023/11 -</div>
-        </Member>
-
         <Member name="Yuanhuan Deng" lightweight>
             <div>2024/4 -</div>
             <div>Brandeis University</div>
         </Member>
 
-        <Member name="Jiaojiao Cheng" lightweight>
-            <div>2024/4 -</div>
-        </Member>
-
         <Member name="Shiyuan Li" lightweight>
             <div>2024/7 -</div>
             <div>Oregon State University</div>
@@ -186,6 +153,49 @@
                 initiated project Yuzawa, laying out the technical foundations.
             </div>
         </Member>
+
+        <Member name="Shaoyu Wang" lightweight>
+            <div>Research Intern</div>
+            <div>2022/3 - 2024/8</div>
+            <div>Huazhong U. of Sci. and Tech.</div>
+            <div class="member-description">
+                Shaoyu joined the development Vis4Mesh with Hang and led the
+                user evaluation of Vis4Mesh. He published the paper
+                <i>
+                    Visual Exploratory Analysis for Designing Large-Scale
+                    Network-on-Chip Architectures: A Domain Expert-Led Design
+                    Study
+                </i>
+                as a co-first-author.
+            </div>
+        </Member>
+
+        <Member
+            name="Yexi Zheng"
+            profile_img="/yexi_zheng.jpg"
+            link="https://www.linkedin.com/in/yexi-zheng-201894225/"
+            lightweight
+        >
+            <div>Undergraduate Researcher</div>
+            <div>2023/11 - 2024/10</div>
+        </Member>
+
+        <Member name="Yuchao Su" lightweight>
+            <div>Research Intern</div>
+            <div>2023/8 - 2024/8</div>
+            <div>North Carolina State University</div>
+        </Member>
+
+        <Member name="Bei Pei" lightweight>
+            <div>Research Intern</div>
+            <div>2023/8 - 2024/8</div>
+            <div>University of California, San Diego</div>
+        </Member>
+
+        <Member name="Jijie Zhou" lightweight>
+            <div>Research Intern</div>
+            <div>2023/11 - 2024/11</div>
+        </Member>
     </div>
 </div>
 <div class="two-col-right">
-Original file line number
+Diff line change
@@ Expand Up / @@ -56,8 +56,6 @@ @@
                     publication
                 )
             }
-            console.log(publicationByYear)
         })
     </script>
@@ Expand Down @@