From fa9cfe35456671a330e47bf2f3263e0d36d67830 Mon Sep 17 00:00:00 2001 From: Moritz Utcke Date: Thu, 18 Jan 2024 14:09:01 +0700 Subject: [PATCH] Dashboard Style --- package.json | 2 + .../Dashboard/DashboardAusweisSkeleton.svelte | 42 ++++ .../Dashboard/DashboardSidebar.svelte | 210 ++++++++++++++++++ src/components/Header.astro | 74 +++--- src/components/HeaderAlternative.svelte | 38 ++++ src/layouts/Layout.astro | 9 +- src/layouts/UserLayout.astro | 51 +---- src/modules/UserModule.svelte | 113 ++++++++-- src/pages/index.astro | 14 +- src/pages/user/index.astro | 2 +- src/style/576.scss | 118 +--------- src/style/992.scss | 97 -------- src/style/global.scss | 2 +- tailwind.config.cjs | 116 ++++++++-- 14 files changed, 552 insertions(+), 336 deletions(-) create mode 100644 src/components/Dashboard/DashboardAusweisSkeleton.svelte create mode 100644 src/components/Dashboard/DashboardSidebar.svelte create mode 100644 src/components/HeaderAlternative.svelte diff --git a/package.json b/package.json index 40d5c763..1669bfa7 100644 --- a/package.json +++ b/package.json @@ -52,6 +52,7 @@ "svelte": "^3.59.1", "svelte-dialogs": "^1.2.2", "svelte-preprocess": "^5.0.3", + "svelte-ripple-action": "^1.0.5", "tailwindcss": "^3.3.2", "trpc-openapi": "^1.2.0", "uuid": "^9.0.0", @@ -60,6 +61,7 @@ }, "devDependencies": { "@faker-js/faker": "^8.3.1", + "@tailwindcss/typography": "^0.5.10", "@types/body-scroll-lock": "^3.1.2", "@types/js-cookie": "^3.0.6", "@types/uuid": "^9.0.1", diff --git a/src/components/Dashboard/DashboardAusweisSkeleton.svelte b/src/components/Dashboard/DashboardAusweisSkeleton.svelte new file mode 100644 index 00000000..a46d9167 --- /dev/null +++ b/src/components/Dashboard/DashboardAusweisSkeleton.svelte @@ -0,0 +1,42 @@ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/Dashboard/DashboardSidebar.svelte b/src/components/Dashboard/DashboardSidebar.svelte new file mode 100644 index 00000000..2e642007 --- /dev/null +++ b/src/components/Dashboard/DashboardSidebar.svelte @@ -0,0 +1,210 @@ + + + + + + + diff --git a/src/components/Header.astro b/src/components/Header.astro index 1657363d..d2554047 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -4,70 +4,60 @@ import { validateAccessTokenServer } from "src/server/lib/validateAccessToken"; const valid = await validateAccessTokenServer(Astro) --- -
-
+
+ -
- +
Energieausweis erstellen - Kontakt - AGB - { - valid ? ( - - Profil - - ) : ( - - Login - - ) - } - hamburger -
+ + { + valid ? ( + + Profil + + ) : ( + + Login + + ) + } + hamburger +
+ + + \ No newline at end of file diff --git a/src/components/HeaderAlternative.svelte b/src/components/HeaderAlternative.svelte new file mode 100644 index 00000000..8b9227c5 --- /dev/null +++ b/src/components/HeaderAlternative.svelte @@ -0,0 +1,38 @@ +
+ IBCornelsen - Logo +
+
+
Energieausweis Erstellen
+ +
+
+
Dropdown
+ +
+
+
+
+ +
+
+ +
+
+
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro index 09a2deaa..8c556e99 100644 --- a/src/layouts/Layout.astro +++ b/src/layouts/Layout.astro @@ -8,6 +8,7 @@ import Header from "../components/Header.astro"; import SidebarLeft from "../components/SidebarLeft.astro"; import SidebarRight from "../components/SidebarRight.astro"; import { NotificationWrapper } from "@ibcornelsen/ui"; +import HeaderAlternative from "#components/HeaderAlternative.svelte"; export interface Props { title: string; @@ -92,13 +93,15 @@ const schema = JSON.stringify({
-
+
- +