IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Dashboard Style

Browse Source
This commit is contained in:
Moritz Utcke
2024-01-18 14:09:01 +07:00
parent 79581cdcf2
commit fa9cfe3545
14 changed files with 552 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/layouts/Layout.astro
View File

@@ -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({
<body>
<Header />
<main
class="grid gap-6 p-6 grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full"
class="lg:grid gap-6 md:p-6 lg:grid-cols-[2fr,6fr,2fr] max-w-[1920px] w-full"
>
<SidebarLeft />
<article>
<article class="w-full max-w-full">
<slot />
</article>
<SidebarRight />
<div class="hidden lg:block">
<SidebarRight />
<div>
</main>
<Footer />
<NotificationWrapper client:load />

51
src/layouts/UserLayout.astro
View File

@@ -3,12 +3,13 @@ import i18next from "i18next";
import "../style/global.scss";
import "../../svelte-dialogs.config"
import "svelte-ripple-action/ripple.css"
import Footer from "../components/Footer.astro";
import Header from "../components/Header.astro";
import SidebarLeft from "../components/SidebarLeft.astro";
import SidebarRight from "../components/SidebarRight.astro";
import DashboardHeader from "../components/Dashboard/DashboardHeader.svelte"
import DashboardSidebar from "../components/Dashboard/DashboardSidebar.svelte"
import { NotificationWrapper } from "@ibcornelsen/ui";
export interface Props {
title: string;
}
@@ -89,47 +90,11 @@ const schema = JSON.stringify({
</title>
</head>
<body class="flex flex-col min-h-screen">
<Header />
<main
class="p-6 w-full"
>
<body class="min-h-screen grid md:grid-cols-[300px_1fr]">
<DashboardSidebar client:load></DashboardSidebar>
<main class="p-8 overflow-auto h-screen bg-base-100">
<slot />
</main>
<Footer />
<NotificationWrapper client:load />
</body>
</html>
<style is:global>
article {
@apply rounded-lg w-full shadow-md border;
}
body {
min-height: 100vh;
}
.button {
@apply px-8 py-2 bg-secondary rounded-lg text-white font-medium hover:shadow-lg transition-all hover:underline active:bg-blue-900 text-center cursor-pointer;
color: #fff !important;
}
h3 {
@apply text-xl font-medium mt-6 mb-4;
}
input {
@apply py-1.5 px-4 w-full rounded-lg outline-none text-lg text-slate-700 border bg-gray-50 transition-colors;
}
input:hover,
input:focus {
@apply bg-gray-100;
}
label {
@apply text-base font-semibold;
}
</style>
</html>