ENH: carousel, thumbtack, cleanup

Got the carousel to work thanks to a PR (vadimkorr/svelte-carousel#141)
Added a thumbtack thanks to this codepen: https://codepen.io/jamielife/pen/LpGWWP

Author: teonbrooks

cestlavie-app/package.json

@@ -38,7 +38,7 @@
 		"smol-toml": "^1.3.0",
 		"smui-theme": "^7.0.0",
 		"svelte": "^4.2.19",
-		"svelte-carousel": "^1.0.25",
+		"svelte-carousel": "vadimkorr/svelte-carousel#pull/142/head",
 		"svelte-check": "^3.6.0",
 		"svelte-material-ui": "^7.0.0",
 		"tslib": "^2.4.1",

cestlavie-app/src/lib/components/Gallery.svelte

@@ -1,6 +1,5 @@
 <script>
-	import LayoutGrid, { Cell } from '@smui/layout-grid';
-	import PortfolioCard from './PortfolioCard.svelte';
+	import StubCard from './StubCard.svelte';
 
 	export let items = [];
 	export let path;
@@ -10,19 +9,9 @@
 <article id="portfolio" class="panel">
 	<!-- <LayoutGrid> -->
 	<div id="wrapper">
-		{#each items.slice(0, 12) as item}
+		{#each items as item}
 			<div class="cell">
-				<div>
-					<div class="pushpin tilted">
-						<div class="pinhead"></div>
-						<div class="pinbase"></div>
-						<div class="pinshaft"></div>
-						<div class="pinpoint"></div>
-					</div>
-				</div>
-				<Cell>
-					<PortfolioCard {path} {item} width={"250px"} height={""}/>
-				</Cell>
+				<StubCard {path} {item} width={"100px"} height={""}/>
 			</div>
 		{/each}
 	</div>
@@ -39,9 +28,7 @@
 
 	#wrapper {
 		display: grid;
-		grid-template-columns: repeat(4, 2fr);
-		}
-	
-	@import './css/pushpin.css'
-
-  </style>
+		grid-template-columns: repeat(4, 1fr);
+		row-gap: 50px;
+	}
+</style>

cestlavie-app/src/lib/components/PortfolioCard.svelte renamed to cestlavie-app/src/lib/components/StubCard.svelte

@@ -1,7 +1,6 @@
 <script>
-	import { mdiLink, mdiClose } from '@mdi/js';
-	import Card, { Content, Actions, ActionButtons, ActionIcons } from '@smui/card';
-	import Button, { Label } from '@smui/button';
+	import { mdiClose } from '@mdi/js';
+	import Card, { Content } from '@smui/card';
 	import IconButton, { Icon } from '@smui/icon-button';
 	import Dialog, { Content as DContent } from '@smui/dialog';
 	import markdownit from 'markdown-it';
@@ -15,29 +14,25 @@
 	let open = false;
 </script>
 
-<Card>
-	<Content>
-		{#if item.filename}
-			<div class="image">
-				<Stub {path} {item} {width} {height}/>
-			</div>
-		{/if}
-	</Content>
-	<Actions style="align-items:end">
-		<ActionButtons>
-			<Button on:click={() => (open = true)}>
-				<Label>Details</Label>
-			</Button>
-		</ActionButtons>
-		<ActionIcons>
-			<IconButton on:click={() => window.open(item.website)} title="Open Link">
-				<Icon tag="svg" viewBox="0 0 24 24">
-					<path fill="currentColor" d={mdiLink} />
-				</Icon>
-			</IconButton>
-		</ActionIcons>
-	</Actions>
-</Card>
+<div>
+	<div class="pushpin tilted">
+		<div class="pinhead"></div>
+		<div class="pinbase"></div>
+		<div class="pinshaft"></div>
+		<div class="pinpoint"></div>
+	</div>
+	<div class="stub card">
+		<Card on:click={() => (open = true)}>
+			<Content>
+				{#if item.filename}
+					<div class="image">
+						<Stub {path} {item} {width} {height}/>
+					</div>
+				{/if}
+			</Content>
+		</Card>
+	</div>
+</div>
 <Dialog bind:open sheet aria-describedby="sheet-content">
 	<DContent id="sheet-content">
 		<IconButton action="close" class="material-icons">
@@ -57,9 +52,14 @@
 </Dialog>
 
 <style>
+	@import './css/pushpin.css';
+
 	.image {
 		display: grid;
 		place-items: center;
 	}
 
+	.card:hover {
+		cursor: pointer;
+	}
 </style>

cestlavie-app/src/routes/+page.svelte

@@ -33,7 +33,7 @@
     <!-- {#each names as title}
         <Tix {title}/>
     {/each} -->
-    <img class="stub" src="data/labelling/images/stubs/b6fc8982-scrapbook_26-stub_06.jpg" alt="image of the Arc de Triomphe">
+    <img class="stub" src="data/labelling/images/stubs/b6fc8982-scrapbook_26-stub_06.jpg" alt="ticket stub of the Arc de Triomphe">
 </div>
 
 <style>
@@ -44,7 +44,4 @@
     column-gap: 30px;
 }
 
-.stub {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-</style>
+</style>

cestlavie-app/src/routes/carousel/+page.server.js

@@ -1,13 +1,9 @@
 export const prerender = true
 
 export const load = async ({ url, fetch }) => {
-    const Res = await fetch(`${url.origin}/api/scrapbook/stub_text_extraction.toml`)
-    const collection = await Res.json()
 
     var pages = Object.keys(import.meta.glob('/static/data/labelling/images/*.jpg'));
     pages = pages.map(page => page.slice(8))
-    
-    const path = '/data/labelling/images/stubs'
 
-    return { collection, path, pages }
+    return { pages }
 }

cestlavie-app/src/routes/carousel/+page.svelte

@@ -14,4 +14,4 @@
 
 <h1>Scrapbook</h1>   
 
-<!-- <Carousel {images} /> -->
+<Carousel {images} />

cestlavie-app/src/routes/stubs/+page.svelte

@@ -1,13 +1,11 @@
 <script>
-	import Carousel from "$lib/components/Carousel.svelte";
 	import Gallery from "$lib/components/Gallery.svelte";
 	
 	export let data;
 
 	// consider using the route as the property name for the collection
 	const items = data.collection.stubs;
 	const path = data.path;
-	const images = data.pages;
 
 </script>
 
@@ -18,6 +16,5 @@
 <h1>Ticket Stubs</h1>   
 
 <div>
-	<!-- <Carousel {images} /> -->
 	<Gallery {path} {items} />
 </div>

cestlavie-app/static/css/components.css

@@ -57,3 +57,7 @@
 
 	}
 }
+
+.stub {
+	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}

cestlavie-app/yarn.lock

@@ -3247,10 +3247,9 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-svelte-carousel@^1.0.25:
+svelte-carousel@vadimkorr/svelte-carousel#pull/142/head:
   version "1.0.25"
-  resolved "https://registry.yarnpkg.com/svelte-carousel/-/svelte-carousel-1.0.25.tgz#0a109455009f449242b17e3c213cbe7e9c37ef35"
-  integrity sha512-vR/AbGYwlh3fgWaB5PJg+iqZFvoVCJq4JWdmlXvPtdG9TLlKJWBcoiKlMZt3MnFF7AqNW46tOH/O+uVMWQzyWQ==
+  resolved "https://codeload.github.com/vadimkorr/svelte-carousel/tar.gz/a299747c626d559ad02dde0a1463243bb07935df"
   dependencies:
     easy-reactive "1.0.4"