starred/UpSnap
1
0
Fork 0
mirror of https://github.com/seriousm4x/UpSnap.git synced 2026-08-04 19:25:13 -04:00
Code Issues Packages Projects Releases Wiki Activity

device card: add waiting spinner and add hover shadow

Browse Source
This commit is contained in:
Maxi Quoß
2023-01-26 19:21:32 +01:00
parent e39d626119
commit 2d7a5755ce
2 changed files with 25 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
frontend/src/components/DeviceCard.svelte
View File

@@ -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>

8
frontend/src/scss/main.scss
View File

@@ -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 {