From d4463fc0f3186eef331307528f3fe1f47b2f340e Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Wed, 19 Jan 2022 19:40:28 +0000 Subject: [PATCH] add splash screen for apps page --- .../pages/builder/portal/apps/index.svelte | 67 +++++++++++++++++-- 1 file changed, 61 insertions(+), 6 deletions(-) diff --git a/packages/builder/src/pages/builder/portal/apps/index.svelte b/packages/builder/src/pages/builder/portal/apps/index.svelte index 31530c5ef9..e7b2724de0 100644 --- a/packages/builder/src/pages/builder/portal/apps/index.svelte +++ b/packages/builder/src/pages/builder/portal/apps/index.svelte @@ -11,6 +11,7 @@ notifications, Body, Search, + Icon, } from "@budibase/bbui" import Spinner from "components/common/Spinner.svelte" import CreateAppModal from "components/start/CreateAppModal.svelte" @@ -27,6 +28,7 @@ import AppRow from "components/start/AppRow.svelte" import { AppStatus } from "constants" import analytics, { Events } from "analytics" + import Logo from "assets/bb-space-man.svg" let sortBy = "name" let template @@ -394,11 +396,26 @@ {/if} - {#if !enrichedApps.length && !creatingApp && loaded} + {#if !enrichedApps.length}
- - - +
+
+ + logo +
+ LET’S GET STARTED! +
+ +
+
+
{/if} @@ -486,10 +503,10 @@ overflow: hidden; grid-gap: var(--spacing-xl); grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); - grid-template-rows: minmax(100px, 1fr) minmax(100px, 1fr) minmax(0px, 0); + grid-template-rows: minmax(70px, 1fr) minmax(100px, 1fr) minmax(0px, 0); } .template-card { - height: 80px; + height: 70px; border-radius: var(--border-radius-s); border: 1px solid var(--spectrum-global-color-gray-300); cursor: pointer; @@ -543,4 +560,42 @@ justify-content: center; align-items: center; } + + .centered { + width: calc(100% - 350px); + height: calc(100% - 100px); + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + } + + .main { + width: 300px; + } + + .new-screen-text { + width: 160px; + text-align: center; + color: #2c2c2c; + font-weight: 600; + } + + .new-screen-button { + margin-left: 5px; + height: 20px; + width: 100px; + display: flex; + align-items: center; + } + + .img-size { + width: 160px; + height: 160px; + } + + .background-icon { + margin-top: 4px; + margin-right: 4px; + }