feat: Update carousel, move to own component.

uwdata · Apr 27, 2024 · 3e56420 · 3e56420
1 parent 1b00358
commit 3e56420
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 51 deletions.
diff --git a/src/app.css b/src/app.css
@@ -168,28 +168,12 @@ strong, b {
  font-size: 20px;
 }
 
-.spotlight {
- position: relative;
- margin-bottom: 1.3em;
- height: 200px;
-}
-
 .spotlight a {
+ display: block;
  position: absolute;
  left: 0;
  top: 0;
  color: #000;
- display: none;
-}
-
-.spotlight .active {
- display: block;
-}
-
-.spotlight img {
- width: 780px;
- border-top-right-radius: 12px;
- border-bottom-left-radius: 12px;
 }
 
 .spotlight:hover img {
@@ -457,12 +441,12 @@ pre.bibtex {
  padding-right: 10px;
  padding-bottom: 10px;
  width: 123px;
- height: 176px;
+ height: 170px;
  overflow: hidden;
 }
 
 .group, .group img {
- width: 256px;
+ width: 242px;
 }
 
 .person a, .group a {
@@ -482,7 +466,7 @@ pre.bibtex {
 .person .nickname {
  position: absolute;
  z-index: 2;
- left: 14px;
+ left: 16px;
  bottom: 4px;
  color: black;
  font-size: 18px;

diff --git a/src/lib/carousel.svelte b/src/lib/carousel.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+ import { onDestroy, onMount } from 'svelte';
+ import { fade } from 'svelte/transition';
+ import type { Spotlight } from '../lib/app-types';
+ export let projects: Spotlight[];
+
+ let currentSpotlightIndex = 0;
+ function next() {
+ currentSpotlightIndex = (currentSpotlightIndex + 1) % projects.length;
+ }
+ $: projectName = projects[currentSpotlightIndex].title;
+ $: projectLink = `papers/${projects[currentSpotlightIndex].paper}`;
+
+ let timer: any;
+ const timeout = 5000;
+ onMount(() => {
+ timer = setInterval(next, timeout);
+ });
+ onDestroy(() => {
+ clearInterval(timer);
+ });
+</script>
+
+<div class="spotlight relative w-full hidden md:flex h-52">
+ {#each projects as image, index (image)}
+ {#if index === currentSpotlightIndex}
+ <a href={projectLink} in:fade={{ duration: 1000 }} out:fade={{ duration: 1000 }}>
+ <img src={image.image} alt="Image for {projectName}" />
+ <div>{projectName}</div>
+ </a>
+ {/if}
+ {/each}
+</div>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
- import { onDestroy, onMount } from 'svelte';
- import { fade } from 'svelte/transition';
  import { base } from '$app/paths';
  import markdownit from 'markdown-it';
-
  import type { Paper, News, Spotlight, Venue, Course } from '../lib/app-types';
  import SmallPaper from '$lib/small-paper.svelte';
+ import Carousel from '$lib/carousel.svelte';
+
  export let data: {
  groupedPapers: { papers: { paper: Paper; venue: Venue }[]; event: string }[];
  news: News[];
@@ -15,21 +14,6 @@
 
  let md = markdownit({ html: true, linkify: true, typographer: true });
 
- let currentSpotlightIndex = 0;
- function next() {
- currentSpotlightIndex = (currentSpotlightIndex + 1) % data.spotlight.length;
- }
- $: srcName = data.spotlight[currentSpotlightIndex].title;
-
- let timer: any;
- const timeout = 5000;
- onMount(() => {
- timer = setInterval(next, timeout);
- });
- onDestroy(() => {
- clearInterval(timer);
- });
-
  function toDate(dateString: string) {
  return new Date(dateString).toLocaleDateString('en-US', {
  timeZone: 'UTC',
@@ -48,19 +32,7 @@
  </a>
 </div>
 
-<!-- carousel -->
-<div class="w-full hidden md:flex h-52">
- <div class="relative">
- {#each data.spotlight as image, index (image)}
- {#if index === currentSpotlightIndex}
- <img src={image.image} alt="Image {index}" in:fade={{ duration: timeout }} />
- {/if}
- {/each}
- <div class="absolute right-3 bottom-4 bg-white p-2 rounded-sm">
- {srcName}
- </div>
- </div>
-</div>
+<Carousel projects={data.spotlight} />
 
 <div class="mt-4 md:flex md:flex-row-reverse">
  <div class="flex-col basis-3/12">