From 2d7a5755ce5e4251552dd4db8b6dd688d1b58b3b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maxi=20Quo=C3=9F?= <maxi@quoss.org>
Date: Thu, 26 Jan 2023 19:21:32 +0100
Subject: [PATCH] device card: add waiting spinner and add hover shadow

---
 frontend/src/components/DeviceCard.svelte | 22 +++++++++++++++++-----
 frontend/src/scss/main.scss               |  8 ++++++++
 2 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/DeviceCard.svelte b/frontend/src/components/DeviceCard.svelte
index 47152f7d..ce7c1599 100644
--- a/frontend/src/components/DeviceCard.svelte
+++ b/frontend/src/components/DeviceCard.svelte
@@ -22,18 +22,17 @@
 
 <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 g-4">
 	<div
-		class="card border-0 rounded-5 px-3 shadow-sm"
+		class="card border-0 rounded-5 px-3 py-2 shadow-sm"
 		class:offline={device.status == 'offline' ? true : false}
 		class:online={device.status == 'online' ? true : false}
 		class:pending={device.status == 'pending' ? true : false}
 	>
 		<div class="card-body">
-			<div class="row fs-4">
+			<div class="row">
 				<div class="col-auto me-auto">
 					<span
 						class:text-danger={device.status == 'offline' ? true : false}
 						class:text-success={device.status == 'online' ? true : false}
-						class:text-warning={device.status == 'pending' ? true : false}
 						on:click={device.status == 'offline'
 							? () => wake()
 							: device.status == 'online'
@@ -45,7 +44,19 @@
 							? () => shutdown()
 							: ''}
 					>
-						<Fa icon={faPowerOff} />
+						{#if device.status === 'pending'}
+							<div
+								class="spinner-border text-warning"
+								style="width: 23px;height: 23px;"
+								role="status"
+							>
+								<span class="visually-hidden">Loading...</span>
+							</div>
+						{:else}
+							<div role="button">
+								<Fa icon={faPowerOff} class="fs-4 power-hover" />
+							</div>
+						{/if}
 					</span>
 				</div>
 				<div class="col-auto">
@@ -54,7 +65,8 @@
 			</div>
 			{#if device.link}
 				<p class="m-0 fw-bold fs-5">
-					<a class="text-reset" target="_blank" rel="noreferrer" href={device.link}>{device.name}</a>
+					<a class="text-reset" target="_blank" rel="noreferrer" href={device.link}>{device.name}</a
+					>
 				</p>
 			{:else}
 				<p class="m-0 fw-bold fs-5">{device.name}</p>
diff --git a/frontend/src/scss/main.scss b/frontend/src/scss/main.scss
index e3fe16e2..cb8b5eed 100644
--- a/frontend/src/scss/main.scss
+++ b/frontend/src/scss/main.scss
@@ -39,6 +39,7 @@ $dropdown-min-width: 0;
 @import '../../node_modules/bootstrap/scss/forms';
 @import '../../node_modules/bootstrap/scss/dropdown';
 @import '../../node_modules/bootstrap/scss/buttons';
+@import '../../node_modules/bootstrap/scss/spinners';
 
 @import '../../node_modules/bootstrap/scss/utilities/api';
 
@@ -93,6 +94,13 @@ section {
 	border-radius: 0.5rem;
 }
 
+.power-hover {
+	&:hover {
+		filter: drop-shadow(0px 0px 10px rgb(155, 155, 155));
+		transition: all 0.1s;
+	}
+}
+
 html[data-bs-theme='light'] {
 	html,
 	body {