angel/inventory-plus-plus
1
0
Fork 0
Code Issues 34 Pull Requests Actions Packages Projects 4 Releases Wiki Activity

first draft of home page

Browse Source
This commit is contained in:
angel
2026-01-06 19:42:21 -07:00
parent 073e5bfe26
commit 846f56e50b
8 changed files with 195 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/site/auth.go
-7
View File
@@ -17,13 +17,6 @@ import (
"ruben/inventory2/internal/site/response"
)
// just keep this around long enough for testing auth middleware..
func (s *Server) testAuthEndpoint(r *http.Request) (response.Response, error) {
fmt.Println("AUTH TEST SUCCESS:", getIdentity(r.Context()))
return response.TemporaryRedirect("/"), nil
}
type identity struct {
AccessToken string
Claims authentication.AccessTokenClaims
internal/site/server.go
-3
View File
@@ -100,9 +100,6 @@ func NewServer(
// TODO: eliminate once no longer used.
mux.HandleFunc("POST /login", response.Handler(s.login))
// TODO: get rid of this, once we're confident this isn't needed...
mux.Handle("GET /test-auth", response.Handler(s.authenticateAndAddIdentity(s.testAuthEndpoint)))
// webpage content
scfs := http.FileServer(http.Dir(contentDir + "/scripts"))
internal/site/styles/backgrounds.css
+6 -2
View File
@@ -1,6 +1,10 @@
@layer theme {
@layer component {
header,
footer {
background-color: var(--base-200);
background-color: var(--sidebar);
}
a.selected {
background-color: var(--sidebar-accent);
}
}
internal/site/styles/borders.css
+20
View File
@@ -6,9 +6,29 @@
}
@layer base {
header,
footer {
border-color: var(--sidebar-border);
}
header {
border-bottom-width: 1px
}
footer {
border-top-width: 1px;
}
select {
border-width: 2px;
border-color: var(--border);
border-radius: var(--radius-lg);
}
.border-thin {
border-width: 1px;
}
.border-button {
border-width: 2px;
border-radius: var(--radius-lg);
}
}
internal/site/styles/index.css
+101 -24
View File
@@ -18,7 +18,6 @@
--text-4xl: 2.25rem;
--text-5xl: 3rem;
--font-weight-bold: 700;
--font-weight-black: 900;
--radius-lg: var(--radius);
--default-font-family: var(--font-sans);
--default-mono-font-family: var(--font-mono);
@@ -178,23 +177,29 @@
.mt-\[1em\] {
margin-top: 1em;
}
.mt-\[3em\] {
margin-top: 3em;
}
.mb-\[1em\] {
margin-bottom: 1em;
}
.mb-\[3em\] {
margin-bottom: 3em;
}
.block {
display: block;
}
.flex {
display: flex;
}
.h-\[100\%\] {
height: 100%;
}
.min-h-\[100\%\] {
min-height: 100%;
}
.min-h-full {
min-height: 100%;
}
.flex-grow-1 {
flex-grow: 1;
.max-w-\[50\%\] {
max-width: 50%;
}
.max-w-full {
max-width: 100%;
}
.grow {
flex-grow: 1;
@@ -211,14 +216,11 @@
.items-stretch {
align-items: stretch;
}
.gap-\[1em\] {
gap: 1em;
.justify-center {
justify-content: center;
}
.overflow-auto {
overflow: auto;
}
.overflow-x-auto {
overflow-x: auto;
.gap-y-\[2em\] {
row-gap: 2em;
}
.overflow-x-scroll {
overflow-x: scroll;
@@ -226,21 +228,37 @@
.overflow-y-hidden {
overflow-y: hidden;
}
.rounded-lg {
border-radius: var(--radius);
}
.border-\[1px\] {
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-sidebar-border {
border-color: var(--sidebar-border);
}
.bg-background {
background-color: var(--background);
}
.bg-header {
background-color: var(--base-200);
.bg-card {
background-color: var(--card);
}
.p-\[1em\] {
padding: 1em;
}
.p-\[2em\] {
padding: 2em;
}
.pt-\[1em\] {
padding-top: 1em;
}
.pb-\[1em\] {
padding-bottom: 1em;
}
.text-center {
text-align: center;
}
.text-lg {
font-size: var(--text-lg);
line-height: var(--tw-leading, var(--text-lg--line-height));
@@ -249,10 +267,6 @@
font-size: var(--text-xl);
line-height: var(--tw-leading, var(--text-xl--line-height));
}
.font-black {
--tw-font-weight: var(--font-weight-black);
font-weight: var(--font-weight-black);
}
.font-bold {
--tw-font-weight: var(--font-weight-bold);
font-weight: var(--font-weight-bold);
@@ -341,6 +355,44 @@
--sidebar-accent-foreground: var(--base-800);
--sidebar-border: var(--base-200);
--sidebar-ring: var(--primary-300);
--display-color: var(--foreground);
--text-color: var(--foreground);
@media (prefers-color-scheme: dark) {
--background: var(--base-950);
--foreground: var(--base-200);
--card: var(--base-900);
--card-foreground: var(--base-200);
--popover: var(--base-900);
--popover-foreground: var(--base-200);
--primary: var(--primary-300);
--primary-foreground: var(--color-black);
--secondary: var(--secondary-500);
--secondary-foreground: var(--color-black);
--muted: var(--base-800);
--muted-foreground: var(--base-300);
--accent: var(--base-800);
--accent-foreground: var(--base-200);
--destructive: oklch(0.704 0.191 22.216);
--border: var(--base-800);
--input: var(--base-700);
--ring: var(--primary-300);
--chart-1: var(--primary-300);
--chart-2: var(--secondary-500);
--chart-3: var(--primary-400);
--chart-4: var(--secondary-300);
--chart-5: var(--primary-300);
--sidebar: var(--base-900);
--sidebar-foreground: var(--base-200);
--sidebar-primary: var(--primary-300);
--sidebar-primary-foreground: var(--color-black);
--sidebar-accent: var(--base-800);
--sidebar-accent-foreground: var(--base-200);
--sidebar-border: var(--base-800);
--sidebar-ring: var(--primary-300);
}
}
* {
color: var(--foreground);
}
.dark {
--background: var(--base-950);
@@ -417,17 +469,41 @@
font-weight: var(--text-weight);
}
}
@layer theme {
@layer component {
header, footer {
background-color: var(--base-200);
background-color: var(--sidebar);
}
a.selected {
background-color: var(--sidebar-accent);
}
}
@layer base {
header, footer {
border-color: var(--sidebar-border);
}
header {
border-bottom-width: 1px;
}
footer {
border-top-width: 1px;
}
select {
border-width: 2px;
border-color: var(--border);
border-radius: var(--radius-lg);
}
.border-thin {
border-width: 1px;
}
.border-button {
border-width: 2px;
border-radius: var(--radius-lg);
}
}
@property --tw-border-style {
syntax: "*";
inherits: false;
initial-value: solid;
}
@property --tw-font-weight {
syntax: "*";
@@ -436,6 +512,7 @@
@layer properties {
@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
*, ::before, ::after, ::backdrop {
--tw-border-style: solid;
--tw-font-weight: initial;
}
}
internal/site/styles/typography.css
+40 -3
View File
@@ -79,8 +79,48 @@
--sidebar-accent-foreground: var(--base-800);
--sidebar-border: var(--base-200);
--sidebar-ring: var(--primary-300);
--display-color: var(--foreground);
--text-color: var(--foreground);
@media (prefers-color-scheme: dark) {
--background: var(--base-950);
--foreground: var(--base-200);
--card: var(--base-900);
--card-foreground: var(--base-200);
--popover: var(--base-900);
--popover-foreground: var(--base-200);
--primary: var(--primary-300);
--primary-foreground: var(--color-black);
--secondary: var(--secondary-500);
--secondary-foreground: var(--color-black);
--muted: var(--base-800);
--muted-foreground: var(--base-300);
--accent: var(--base-800);
--accent-foreground: var(--base-200);
--destructive: oklch(0.704 0.191 22.216);
--border: var(--base-800);
--input: var(--base-700);
--ring: var(--primary-300);
--chart-1: var(--primary-300);
--chart-2: var(--secondary-500);
--chart-3: var(--primary-400);
--chart-4: var(--secondary-300);
--chart-5: var(--primary-300);
--sidebar: var(--base-900);
--sidebar-foreground: var(--base-200);
--sidebar-primary: var(--primary-300);
--sidebar-primary-foreground: var(--color-black);
--sidebar-accent: var(--base-800);
--sidebar-accent-foreground: var(--base-200);
--sidebar-border: var(--base-800);
--sidebar-ring: var(--primary-300);
}
}
* {
color: var(--foreground);
}
.dark {
--background: var(--base-950);
@@ -191,9 +231,6 @@
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--color-header: var(--base-200);
--color-footer: var(--base-200);
}
internal/site/templates/layout.html.tmpl
+8 -6
View File
@@ -19,9 +19,11 @@
<body class="basis-full grow bg-background flex flex-col items-stretch">
<header>
<nav class="flex flex-col items-center text-xl overflow-x-scroll overflow-y-hidden ">
{{- $path := or .Request.URL.Path "/" }}
<ul class="flex text-nowrap overflow-x-scroll overflow-y-hidden">
<li class="pt-[1em] pb-[1em]">
<a href="/" class="p-[1em] font-bold">
<a href="/" class="p-[1em] font-bold {{ if eq $path "/" }}selected{{ end }}">
Home
</a>
</li>
@@ -37,7 +39,7 @@
{{- if not $userID }}
<li class="pt-[1em] pb-[1em]">
<a href="/login" class="p-[1em] font-bold">
<a href="/login" class="p-[1em] font-bold {{ if eq $path "/login" }}selected{{ end }}">
Log In / Sign Up
</a>
</li>
@@ -45,19 +47,19 @@
{{- else if $acctID }}
<li class="pt-[1em] pb-[1em]">
<a href="/accounts/{{$acctID}}" class="p-[1em] font-bold">
<a href="/accounts/{{$acctID}}" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d" $acctID) }}selected{{ end }}">
Account
</a>
</li>
<li class="pt-[1em] pb-[1em]">
<a href="/accounts/{{$acctID}}/reports" class="p-[1em] font-bold">
<a href="/accounts/{{$acctID}}/reports" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d/reports" $acctID) }}selected{{ end }}">
Reports
</a>
</li>
<li class="pt-[1em] pb-[1em]">
<a href="/accounts/{{$acctID}}/inventory" class="p-[1em] font-bold">
<a href="/accounts/{{$acctID}}/inventory" class="p-[1em] font-bold {{ if eq $path (printf "/accounts/%d/inventory" $acctID) }}selected{{ end }}">
Inventory
</a>
</li>
@@ -73,7 +75,7 @@
</nav>
</header>
<main class="basis-full grow p-[1em]">
<main class="basis-full grow p-[1em] max-w-full">
{{/* This is where the page_body template will be inserted into the page */}}
{{- block "body" . }}{{ end }}
</main>
internal/site/templates/page_bodies/index.html.tmpl
+20 -2
View File
@@ -1,8 +1,26 @@
<h1>Home</h1>
<section class="flex justify-center max-w-full mt-[3em] mb-[3em]">
<h1 class="bg-card max-w-full p-[2em] border-[1px] border-sidebar-border rounded-lg text-nowrap">
Inventory++
</h1>
</section>
{{- if and .Identity.User.UserID (not .Identity.Account) }}
<h2><a href="/account-creation">New Account</a></h2>
{{- end }}
<section class="flex flex-col items-center max-w-full mt-[1em] mb-[1em] gap-y-[2em]">
<p class="text-lg text-center max-w-[50%]">
Synchronize inventory automatically!
</p>
<a href="/test-auth">Test Auth</a>
<div class="border-button border-sidebar-border bg-card text-lg text-center max-w-[50%]">
<a href="/login" class="block p-[1em] font-bold">
Create an Account
</a>
</div>
<p class="text-lg text-center max-w-[50%]">
...and start syncing your shops today!
</p>
</section>