continued
implemented HTMX implemented ORM (sequelize)
This commit is contained in:
parent
2a9bd4e81b
commit
d756a192e4
71 changed files with 3822 additions and 694 deletions
170
views/components/meta.njk
Normal file
170
views/components/meta.njk
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
<link rel="icon" type="image/x-icon" href="/img/favicon.svg">
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<script src="/js/tailwind.min.js"></script>
|
||||
<script src="/js/htmx.min.js" crossorigin="anonymous"></script>
|
||||
<link rel="stylesheet" href="/styles/tabler-icons.min.css">
|
||||
<link rel="stylesheet" href="/styles/theme.default.css">
|
||||
<link rel="stylesheet" href="/styles/theme.light.css">
|
||||
<style>
|
||||
|
||||
body,
|
||||
html {
|
||||
/* width: 100svw; */
|
||||
min-height: 100svh;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style type="text/tailwindcss">
|
||||
@layer components {
|
||||
body {
|
||||
@apply w-full flex flex-col items-center;
|
||||
background: var(--color-base-bg-400);
|
||||
color: var(--color-base-fg-100);
|
||||
}
|
||||
|
||||
#navbar {
|
||||
@apply: sticky top-0 z-50 w-full flex flex-col;
|
||||
background: var(--color-base-bg-100);
|
||||
}
|
||||
|
||||
#pageHeader {
|
||||
@apply w-full flex flex-col items-center;
|
||||
padding: 2rem 0rem 5rem;
|
||||
margin: 0rem 0rem -3rem;
|
||||
background: var(--color-base-bg-100);
|
||||
color: var(--color-base-fg-100);
|
||||
}
|
||||
|
||||
#pageContent {
|
||||
@apply container flex flex-col items-center gap-8;
|
||||
color: var(--color-base-fg-100);
|
||||
}
|
||||
|
||||
.card {
|
||||
@apply rounded-lg;
|
||||
background: var(--color-base-bg-300);
|
||||
border: 1px solid var(--color-base-bg-200);
|
||||
}
|
||||
|
||||
.button {
|
||||
@apply rounded-lg text-center font-medium;
|
||||
@apply px-5 py-2.5;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.button-sm {
|
||||
@apply rounded-lg text-center font-medium;
|
||||
@apply px-3 py-2 text-sm;
|
||||
}
|
||||
|
||||
.primary-outline,
|
||||
.primary-outline-hover:hover {
|
||||
border: 1px solid var(--color-primary-bg);
|
||||
}
|
||||
|
||||
.primary-fill,
|
||||
.primary-fill-hover:hover {
|
||||
color: var(--color-primary-fg);
|
||||
background: var(--color-primary-bg);
|
||||
}
|
||||
|
||||
.primary-text,
|
||||
.primary-text-hover:hover {
|
||||
color: var(--color-primary-bg);
|
||||
}
|
||||
|
||||
.danger-outline,
|
||||
.danger-outline-hover:hover {
|
||||
border: 1px solid var(--color-error-fg);
|
||||
}
|
||||
|
||||
.danger-fill,
|
||||
.danger-fill-hover:hover {
|
||||
color: var(--color-error-fg);
|
||||
background: var(--color-error-bg);
|
||||
}
|
||||
|
||||
.danger-text,
|
||||
.danger-text-hover:hover {
|
||||
color: var(--color-error-fg);
|
||||
}
|
||||
|
||||
.success-outline,
|
||||
.success-outline-hover:hover {
|
||||
border: 1px solid var(--color-success-fg);
|
||||
}
|
||||
|
||||
.success-fill,
|
||||
.success-fill-hover:hover {
|
||||
color: var(--color-success-fg);
|
||||
background: var(--color-success-bg);
|
||||
}
|
||||
|
||||
.success-text,
|
||||
.success-text-hover:hover {
|
||||
color: var(--color-success-fg);
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
select {
|
||||
@apply rounded-lg py-2 px-4 text-sm;
|
||||
color: var(--color-base-fg-300);
|
||||
background: var(--color-base-bg-200);
|
||||
border: 1px solid var(--color-base-fg-300);
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus,
|
||||
select:focus {
|
||||
color: var(--color-base-fg-100);
|
||||
border: 1px solid var(--color-primary-bg) !important;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--color-base-fg-300);
|
||||
}
|
||||
|
||||
div.table {
|
||||
@apply grid;
|
||||
}
|
||||
|
||||
div.thead {
|
||||
@apply grid grid-cols-subgrid col-span-full items-center;
|
||||
@apply px-6 py-4 gap-8;
|
||||
@apply border-b text-xs tracking-widest uppercase;
|
||||
background: var(--color-base-bg-100);
|
||||
border-color: var(--color-base-bg-300);
|
||||
color: var(--color-base-fg-300);
|
||||
}
|
||||
|
||||
div.trow {
|
||||
@apply grid grid-cols-subgrid col-span-full items-center;
|
||||
@apply px-6 py-4 gap-8;
|
||||
@apply border-b;
|
||||
border-color: var(--color-base-bg-100);
|
||||
}
|
||||
|
||||
div.trow:hover {
|
||||
background: var(--color-base-bg-300);
|
||||
}
|
||||
|
||||
div.table > *:last-child {
|
||||
@apply border-b-0;
|
||||
}
|
||||
|
||||
.alert-danger {
|
||||
@apply rounded-lg border-t-4;
|
||||
@apply flex items-center px-4 py-3;
|
||||
background: var(--color-base-bg-300);
|
||||
border-color: var(--color-error-fg);
|
||||
color: var(--color-error-fg);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
36
views/components/navbar.njk
Normal file
36
views/components/navbar.njk
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<header id="navbar">
|
||||
<nav class="container flex justify-between items-center py-4 mx-auto relative ">
|
||||
<!-- Application Logo -->
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="bg-center bg-no-repeat bg-contain" style="height: 2rem; width: var(--header-logo-width); background-image: var(--header-logo-source);">
|
||||
<!-- Logo Source from theme.css -->
|
||||
</span>
|
||||
<span class="self-center text-xl font-semibold whitespace-nowrap">User Portal</span>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-24">
|
||||
<!-- Menu Items -->
|
||||
<div class="flex items-center gap-12">
|
||||
<a href="/admin/users" class="button primary-text-hover">
|
||||
Users
|
||||
</a>
|
||||
<a href="/admin/groups" class="button primary-text-hover">
|
||||
Groups
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- User Menu -->
|
||||
<div class="flex items-center gap-12">
|
||||
<a href="/logout" class="button primary-text-hover">
|
||||
Sign Out
|
||||
</a>
|
||||
<a href="/profile" class="button primary-text-hover">
|
||||
{{ user.firstName }} {{ user.lastName }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
|
||||
|
||||
37
views/components/widgets.njk
Normal file
37
views/components/widgets.njk
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
|
||||
{% macro jumbotron(id='', title='', text='') %}
|
||||
<section class="w-full">
|
||||
<div class="py-4 px-4 mx-auto max-w-screen-xl text-center">
|
||||
<h1 class="my-4 font-extrabold tracking-tight leading-none text-gray-900 text-4xl md:text-5xl lg:text-6xl">
|
||||
{{ title }}
|
||||
</h1>
|
||||
<p class="my-4 text-lg font-normal text-gray-500 lg:text-xl sm:px-16 lg:px-48">
|
||||
{{ text }}
|
||||
</p>
|
||||
{{ caller() }}
|
||||
</div>
|
||||
</section>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro container(id='', width='w-full', flow='row', vAlign='center', hAlign='center') %}
|
||||
<div class="container mx-auto {{width}} pt-24 pb-32 flex flex-{{flow}} justify-{{hAlign}} items-{{vAlign}}">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro grid(id='', title='', columns=3) %}
|
||||
<div class="my-4 grid grid-cols-1 md:grid-cols-{{2 if columns > 2 else columns}} lg:grid-cols-{{columns}} gap-6">
|
||||
{{ caller() }}
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
||||
{% macro link(id='', link='#', title='New Link', description='Description') %}
|
||||
<a href="{{ link }}" target="_blank" class="p-8 bg-gray-50 rounded-md border border-gray-200 hover:border-purple-400">
|
||||
<h4 class="font-medium text-gray-700 text-lg mb-4">
|
||||
{{ title }}
|
||||
</h4>
|
||||
<p class="font-normal text-gray-500 text-md">
|
||||
{{ description }}
|
||||
</p>
|
||||
</a>
|
||||
{% endmacro %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue