diff options
| -rw-r--r-- | assets/src/components/icons/ZzzIcon.svelte | 16 | ||||
| -rw-r--r-- | assets/src/components/share/EmptyRequests.svelte | 73 | ||||
| -rw-r--r-- | assets/src/components/share/RequestList.svelte | 3 |
3 files changed, 92 insertions, 0 deletions
diff --git a/assets/src/components/icons/ZzzIcon.svelte b/assets/src/components/icons/ZzzIcon.svelte new file mode 100644 index 0000000..858c55d --- /dev/null +++ b/assets/src/components/icons/ZzzIcon.svelte @@ -0,0 +1,16 @@ +<script lang="ts"> + export let color: "white" | "black"; +</script> + +<svg + xmlns="http://www.w3.org/2000/svg" + viewBox="0 0 24 24" + width="16" + height="16" +> + <path fill="none" d="M0 0H24V24H0z" /> + <path + d="M11 11v2l-5.327 6H11v2H3v-2l5.326-6H3v-2h8zm10-8v2l-5.327 6H21v2h-8v-2l5.326-6H13V3h8z" + fill={color} + /> +</svg> diff --git a/assets/src/components/share/EmptyRequests.svelte b/assets/src/components/share/EmptyRequests.svelte new file mode 100644 index 0000000..5042ac0 --- /dev/null +++ b/assets/src/components/share/EmptyRequests.svelte @@ -0,0 +1,73 @@ +<script lang="ts"> + import ZzzIcon from "../icons/ZzzIcon.svelte"; +</script> + +<ul class="empty-request first"> + <li class="icon"><ZzzIcon color="white" /></li> + <li class="empty-message-title">No requests yet!</li> + <li class="empty-message-subtitle">We're looking for them though!</li> +</ul> +<ul class="empty-request middle" /> +<ul class="empty-request last" /> + +<style> + .empty-request { + padding: 0 20px; + line-height: 1.5rem; + position: relative; + height: 140px; + + display: flex; + flex-direction: column; + justify-content: center; + + border: dashed 1px black; + } + + ul { + list-style: none; + } + + .icon { + animation: icon-floating 3s ease-in-out infinite; + } + + @keyframes icon-floating { + 0% { + transform: translateY(0); + } + + 50% { + transform: translateY(-5px); + } + + 100% { + transform: translateY(0); + } + } + + .empty-message-title { + font-size: 18px; + color: white; + } + + .empty-message-subtitle { + font-size: 16px; + color: #626262; + } + + .first { + background: linear-gradient(to bottom, black, black) padding-box, + linear-gradient(to bottom, #626262, #626262) border-box; + } + + .middle { + background: linear-gradient(to bottom, black, black) padding-box, + linear-gradient(to bottom, #626262, #6262627f) border-box; + } + + .last { + background: linear-gradient(to bottom, black, black) padding-box, + linear-gradient(to bottom, #6262627f, #62626200) border-box; + } +</style> diff --git a/assets/src/components/share/RequestList.svelte b/assets/src/components/share/RequestList.svelte index 1a3b715..c092b7f 100644 --- a/assets/src/components/share/RequestList.svelte +++ b/assets/src/components/share/RequestList.svelte @@ -4,6 +4,7 @@ import type { IncomingRequest } from "../../models/incoming_request"; import { getShareState, Sharing } from "../../state/share"; import Request from "./Request.svelte"; + import EmptyRequests from "./EmptyRequests.svelte"; const sharing = getShareState().state as Sharing; const requestMap = sharing.getRequests(); @@ -19,4 +20,6 @@ {#each $requests as request (request.info.token)} <Request {request} /> +{:else} + <EmptyRequests /> {/each} |