lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Dashboard component cleanup

Browse Source
This commit is contained in:
Philipp Dormann 2021-01-03 14:03:08 +01:00
parent 72f1645767
commit 89fcfe6a49
3 changed files with 89 additions and 80 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
src/components/ComponentDump.svelte Normal file
View File

@ -0,0 +1,81 @@
<script>
import Avatars from "./Avatars.svelte";
import Badges from "./Badges.svelte";
import BreadcrumbNav from "./BreadcrumbNav.svelte";
import FileUpload from "./FileUpload.svelte";
import FormLayout from "./FormLayout.svelte";
import Pagination from "./Pagination.svelte";
import StatCards from "./StatCards.svelte";
import Table from "./Table.svelte";
import Tabs from "./Tabs.svelte";
import Tags from "./Tags.svelte";
</script>
<div class="border-4 border-dashed rounded h-96" />
<StatCards />
<div class="mb-8">
<FileUpload />
</div>
<div class="mb-8">
<Tabs />
</div>
<div class="mb-8">
<Tags />
</div>
<div class="mb-8">
<Badges />
</div>
<div class="mb-8">
<Avatars />
</div>
<Pagination />
<div class="mb-8">
<Table />
</div>
<div
class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
<div class="flex flex-row items-center justify-between mb-6">
<div class="flex flex-col">
<div class="text-sm font-light text-grey-500">Regular</div>
<div class="text-sm font-bold"><span>Text inputs</span></div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">Label</div><input
name="name"
type="text"
class="form-input"
placeholder="Enter something..." />
<div class="form-hint">This is a hint</div>
</div>
</div>
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">First name</div><input
name="name"
type="text"
class="form-input form-input-invalid"
placeholder="john@example.com" />
<div class="form-error">First name is required</div>
</div>
</div>
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">First name</div><input
name="name"
type="text"
class="form-input form-input-valid"
placeholder="john@example.com" />
<div class="form-success">First name is valid</div>
</div>
</div>
</div>
</div>
<div class="mb-8">
<FormLayout />
</div>
<div class="mb-8">
<BreadcrumbNav />
</div>

84
src/components/MainDashContent.svelte
View File

@ -1,15 +1,8 @@
<script>
import { _ } from "svelte-i18n";
import BreadcrumbNav from "./BreadcrumbNav.svelte";
import FileUpload from "./FileUpload.svelte";
import FormLayout from "./FormLayout.svelte";
import Pagination from "./Pagination.svelte";
import StatCards from "./StatCards.svelte";
import Tabs from "./Tabs.svelte";
import Tags from "./Tags.svelte";
import Badges from "./Badges.svelte";
import Avatars from "./Avatars.svelte";
import store from "../store";
import ComponentDump from "./ComponentDump.svelte";
let navOpen = false;
</script>
@ -20,80 +13,13 @@
}}>
<!-- <div class="border-4 border-dashed rounded h-96" /> -->
<h1 class="text-3xl leading-tight">
<span class="font-bold">Dashboard</span><span>
- hello there,
<span class="font-bold">{$_('dashboard-title')}</span><span>
-
{$_('dashboard-greeting')},
<span
class="text-blue-500">{store.state.jwtinfo.userdetails.firstname}</span>
👋</span>
</h1>
<div class="shadow px-6 pt-4 pb-1">
<BreadcrumbNav />
</div>
<StatCards />
<div class="mb-8">
<FileUpload />
</div>
<div class="mb-8">
<!-- <DataTable /> -->
</div>
<div class="mb-8">
<Tabs />
</div>
<div class="mb-8">
<Tags />
</div>
<div class="mb-8">
<Badges />
</div>
<div class="mb-8">
<Avatars />
</div>
<Pagination />
<div class="mb-8">
<!-- <Table /> -->
</div>
<div
class="widget w-full p-4 mb-4 rounded-lg bg-white border border-grey-100 dark:bg-grey-895 dark:border-grey-890">
<div class="flex flex-row items-center justify-between mb-6">
<div class="flex flex-col">
<div class="text-sm font-light text-grey-500">Regular</div>
<div class="text-sm font-bold"><span>Text inputs</span></div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:flex-wrap w-full lg:space-x-4">
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">Label</div><input
name="name"
type="text"
class="form-input"
placeholder="Enter something..." />
<div class="form-hint">This is a hint</div>
</div>
</div>
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">First name</div><input
name="name"
type="text"
class="form-input form-input-invalid"
placeholder="john@example.com" />
<div class="form-error">First name is required</div>
</div>
</div>
<div class="w-full lg:w-1/4">
<div class="form-element ">
<div class="form-label">First name</div><input
name="name"
type="text"
class="form-input form-input-valid"
placeholder="john@example.com" />
<div class="form-success">First name is valid</div>
</div>
</div>
</div>
</div>
<div class="mb-8">
<FormLayout />
</div>
<ComponentDump />
</div>

4
src/locales/en.json
View File

@ -57,5 +57,7 @@
"track-length-in-m": "Track Length in m",
"track-name": "Track name",
"please-provide-the-required-information-to-add-a-new-track": "Please provide the required information to add a new track.",
"create-a-new-track": "Create a new Track"
"create-a-new-track": "Create a new Track",
"dashboard-greeting": "hello there",
"dashboard-title": "Dashboard"
}