Merge pull request #294 from matt8707/dev

Fix ui bugs in camera, image and map
matt8707 · Jan 27, 2024 · 26ab73d · 26ab73d
2 parents cb13219 + faa5c7e
commit 26ab73d
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 40 deletions.
diff --git a/src/lib/Main/Camera.svelte b/src/lib/Main/Camera.svelte
@@ -43,23 +43,23 @@
 	}
 </script>
 
-{#if url && entity_picture}
-	<button
-		style:background-image="url({entity_picture})"
-		style:height="calc({$itemHeight}px * 4 + 0.4rem * 3)"
-		style:background-size={size}
-		on:click={handleClick}
-	>
-		{#if loaderVisible}
-			<div class="loader">
-				<Loader />
-			</div>
-		{/if}
+<button
+	style:background-image={entity_picture ? `url(${entity_picture})` : ''}
+	style:height="calc({$itemHeight}px * 4 + 0.4rem * 3)"
+	style:background-size={size}
+	on:click={handleClick}
+>
+	{#if loaderVisible}
+		<div class="loader">
+			<Loader />
+		</div>
+	{/if}
 
+	{#if url}
 		<!-- svelte-ignore a11y-missing-attribute -->
 		<img src={url} bind:this={img} style:object-fit={size} on:load={handleLoader} />
-	</button>
-{/if}
+	{/if}
+</button>
 
 <style>
 	button {
@@ -76,6 +76,9 @@
 		font-size: 1.5rem;
 		cursor: pointer;
 		overflow: hidden;
+
+		/* fix layout shift */
+		display: grid;
 	}
 
 	img {

diff --git a/src/lib/Modal/CameraModal.svelte b/src/lib/Modal/CameraModal.svelte
@@ -2,7 +2,6 @@
 	import Modal from '$lib/Modal/Index.svelte';
 	import { lang, states } from '$lib/Stores';
 	import { onDestroy } from 'svelte';
-	import { getName } from '$lib/Utils';
 	import type { CameraItem } from '$lib/Types';
 	import Loader from '$lib/Components/Loader.svelte';
 
@@ -24,8 +23,6 @@
 		if (img) img.src = '';
 	});
 
-	const alt = getName(sel, entity);
-
 	let loaderVisible = true;
 
 	function handleLoader() {
@@ -37,14 +34,15 @@
 	<Modal size="large">
 		<h1 slot="title">{$lang('camera')}</h1>
 
+		<!-- svelte-ignore a11y-missing-attribute -->
 		<div class="container">
-			<img class="picture" src={entity_picture} {alt} />
+			<img class="picture" src={entity_picture} />
 
 			{#if loaderVisible}
 				<Loader />
 			{/if}
 
-			<img class="stream" src={entity_stream} {alt} bind:this={img} on:load={handleLoader} />
+			<img class="stream" src={entity_stream} bind:this={img} on:load={handleLoader} />
 		</div>
 	</Modal>
 {/if}

diff --git a/src/lib/Modal/DeviceTrackerModal.svelte b/src/lib/Modal/DeviceTrackerModal.svelte
@@ -247,29 +247,29 @@
 	<Modal size="large">
 		<h1 slot="title">{getName(sel, entity)}</h1>
 
-		{#if !apiKey}
-			<div class="notice">
-				<span class="icon">
-					<Icon icon="ep:info-filled" height="none" />
-				</span>
-				<span class="text">
-					{$lang('docs')}&nbsp;
-					<a
-						href="https://github.com/matt8707/ha-fusion/blob/main/static/documentation/Map.md"
-						target="_blank"
-					>
-						https://github.com/matt8707/ha-fusion/blob/main/static/documentation/Map.md
-					</a>
-				</span>
-			</div>
-		{/if}
-
 		<!-- container -->
 		<div
 			bind:this={container}
 			class="container"
 			style:--popup-background={colors?.backgroundColor?.dark}
 		>
+			{#if !apiKey}
+				<div class="notice">
+					<span class="icon">
+						<Icon icon="ep:info-filled" height="none" />
+					</span>
+					<span class="text">
+						{$lang('docs')}&nbsp;
+						<a
+							href="https://github.com/matt8707/ha-fusion/blob/main/static/documentation/Map.md"
+							target="_blank"
+						>
+							https://github.com/matt8707/ha-fusion/blob/main/static/documentation/Map.md
+						</a>
+					</span>
+				</div>
+			{/if}
+
 			<!-- geolocate -->
 			<div bind:this={geolocate} class="maplibregl-ctrl maplibregl-ctrl-group" style:display="none">
 				<button
@@ -419,14 +419,15 @@
 	}
 
 	.notice {
-		margin-top: 1rem;
-		padding: 0.6rem 0.9rem;
-		border-radius: 0.6rem;
+		padding: 0.6rem 3.5rem 0.6rem 0.9rem;
 		background: #ffc008;
 		color: #3b0f0f;
 		font-weight: 500;
-		align-content: end;
 		display: flex;
+		position: absolute;
+		z-index: 1;
+		font-size: 0.9rem;
+		width: inherit;
 	}
 
 	.notice .icon {

diff --git a/src/lib/Modal/ImageModal.svelte b/src/lib/Modal/ImageModal.svelte
@@ -27,5 +27,6 @@
 	img {
 		margin-top: 1rem;
 		border-radius: 0.6rem;
+		width: 100%;
 	}
 </style>