Add image to BarItem

SchutteJan · Sep 20, 2023 · a0b6493 · a0b6493
1 parent f025ad2
commit a0b6493
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 8 deletions.
diff --git a/frontend/src/lib/BarItem.svelte b/frontend/src/lib/BarItem.svelte
@@ -2,13 +2,29 @@
 	import type { LocationResponse } from '../models/schemas';
 
 	export let bar: LocationResponse;
+	const placeholder =
+		'https://images.jan.tf/ecmAqc89DiQEu0HlPMBcNxDFyigWMJI-xUJCNJAbklQ/fill/512/512/no/1/bG9jYWw6Ly8vYmFyLXBsYWNlaG9sZGVyLnBuZw.jpg';
 </script>
 
-<div>
-	<b>Name:</b>
-	{bar.name} <br />
-	<b>Description:</b>
-	{bar.description ?? 'No Description'} <br />
-	<b>Coords:</b>
-	x: {bar.coordinates.x}, y: {bar.coordinates.y}
-</div>
+<article class="bar-item">
+	<div class="bar-image" style="background-image: url({bar.imageurl ?? placeholder})" />
+	<div>
+		<h2>{bar.name}</h2>
+		<p>{bar.description ?? 'No Description'}</p>
+		<small>x:{bar.coordinates.x}, y: {bar.coordinates.y} </small>
+	</div>
+</article>
+
+<style>
+	.bar-item {
+		display: flex;
+	}
+	.bar-item > .bar-image {
+		width: 10rem;
+		height: 10rem;
+		background-size: cover;
+		background-position: center;
+		margin: 0 var(--pico-block-spacing-horizontal);
+		border-radius: var(--pico-border-radius);
+	}
+</style>
diff --git a/frontend/src/lib/pico-settings.css b/frontend/src/lib/pico-settings.css
@@ -0,0 +1,3 @@
+:root {
+	--pico-spacing: 0.5rem;
+}
diff --git a/frontend/src/routes/+layout.svelte b/frontend/src/routes/+layout.svelte
@@ -1,5 +1,6 @@
 <script>
 	import '@picocss/pico';
+	import '$lib/pico-settings.css';
 </script>
 
 <slot />