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

profile popover in footer

Browse Source
This commit is contained in:
angel
2026-01-23 04:24:24 -07:00
parent a44a727c92
commit 1509d39373
4 changed files with 234 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
images/door.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.5 KiB

internal/server/server.go
+1
View File
@@ -62,6 +62,7 @@ func NewRouter(
}))
r.Static("/styles", "./styles")
r.Static("/favicon", "./favicon")
r.Static("/images", "./images")
// html (must be before the api endpoints, because the webpage middleware has to be installed beforehand
styles/index.css
+148
View File
@@ -216,6 +216,9 @@
.m-\[2em\] {
margin: 2em;
}
.mt-\[0\.25em\] {
margin-top: 0.25em;
}
.mt-\[1em\] {
margin-top: 1em;
}
@@ -252,12 +255,18 @@
.table {
display: table;
}
.h-\[2rem\] {
height: 2rem;
}
.max-h-full {
max-height: 100%;
}
.min-h-full {
min-height: 100%;
}
.w-fit {
width: fit-content;
}
.w-full {
width: 100%;
}
@@ -270,6 +279,9 @@
.min-w-fit {
min-width: fit-content;
}
.flex-shrink {
flex-shrink: 1;
}
.grow {
flex-grow: 1;
}
@@ -303,6 +315,12 @@
.justify-center {
justify-content: center;
}
.justify-start {
justify-content: flex-start;
}
.gap-\[1em\] {
gap: 1em;
}
.gap-y-\[2em\] {
row-gap: 2em;
}
@@ -315,6 +333,9 @@
.overflow-y-hidden {
overflow-y: hidden;
}
.rounded-\[50\%\] {
border-radius: 50%;
}
.rounded-lg {
border-radius: var(--radius);
}
@@ -325,9 +346,26 @@
border-style: var(--tw-border-style);
border-width: 1px;
}
.border-b-\[1px\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 1px;
}
.border-b-\[2px\] {
border-bottom-style: var(--tw-border-style);
border-bottom-width: 2px;
}
.border-sidebar-border {
border-color: var(--sidebar-border);
}
.border-b-\[1px_solid\] {
border-bottom-color: 1px solid;
}
.border-b-\[1px_solid_black\] {
border-bottom-color: 1px solid black;
}
.bg-accent {
background-color: var(--accent);
}
.bg-background {
background-color: var(--background);
}
@@ -343,6 +381,9 @@
.pt-\[1em\] {
padding-top: 1em;
}
.pr-\[2em\] {
padding-right: 2em;
}
.pb-\[1em\] {
padding-bottom: 1em;
}
@@ -389,6 +430,83 @@
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[left\] {
transition-property: left;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[scale\] {
transition-property: scale;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[top\] {
transition-property: top;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-\[y\] {
transition-property: y;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-opacity {
transition-property: opacity;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.transition-shadow {
transition-property: box-shadow;
transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
transition-duration: var(--tw-duration, var(--default-transition-duration));
}
.group-hover\:scale-120 {
&:is(:where(.group):hover *) {
@media (hover: hover) {
--tw-scale-x: 120%;
--tw-scale-y: 120%;
--tw-scale-z: 120%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.hover\:scale-110 {
&:hover {
@media (hover: hover) {
--tw-scale-x: 110%;
--tw-scale-y: 110%;
--tw-scale-z: 110%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.hover\:scale-120 {
&:hover {
@media (hover: hover) {
--tw-scale-x: 120%;
--tw-scale-y: 120%;
--tw-scale-z: 120%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.hover\:scale-150 {
&:hover {
@media (hover: hover) {
--tw-scale-x: 150%;
--tw-scale-y: 150%;
--tw-scale-z: 150%;
scale: var(--tw-scale-x) var(--tw-scale-y);
}
}
}
.hover\:cursor-pointer {
&:hover {
@media (hover: hover) {
cursor: pointer;
}
}
}
.hover\:bg-accent {
&:hover {
@media (hover: hover) {
@@ -428,6 +546,18 @@
padding-block: calc(8vw - 0.5em);
}
}
.dark\:invert {
@media (prefers-color-scheme: dark) {
--tw-invert: invert(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
}
.dark\:invert-\[100\%\] {
@media (prefers-color-scheme: dark) {
--tw-invert: invert(100%);
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
}
}
}
@layer base {
select {
@@ -802,6 +932,21 @@
syntax: "*";
inherits: false;
}
@property --tw-scale-x {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-y {
syntax: "*";
inherits: false;
initial-value: 1;
}
@property --tw-scale-z {
syntax: "*";
inherits: false;
initial-value: 1;
}
@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 {
@@ -820,6 +965,9 @@
--tw-drop-shadow-color: initial;
--tw-drop-shadow-alpha: 100%;
--tw-drop-shadow-size: initial;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-scale-z: 1;
}
}
}
templates/layout.html.tmpl
+85 -7
View File
@@ -111,12 +111,6 @@
</a>
</li>
<li class="pt-[1em] pb-[1em]">
<a href="/api/auth/logout" hx-boost="false" class="p-[1em] font-display">
Log Out
</a>
</li>
{{- end }}
</ul>
</nav>
@@ -133,7 +127,8 @@
<a href="mailto:support@inventory-plus-plus.com" class="p-[1em] font-display text-center">Support</a>
</address>
{{- if .Identity.Claims.Picture }}
<div
<button
popovertarget="identity-popover"
class="
col-3
max-w-full
@@ -152,6 +147,89 @@
margin: 1rem 0;
"
/>
</button>
<div
popover="auto"
id="identity-popover"
class="
border-[1px] border-sidebar-border rounded-lg
bg-card
p-[1em]
"
style="
top: calc(100% - 15rem);
left: calc(100% - 20rem);
box-shadow: 2px 2px 2px 1px rgb(0 0 0 / 20%);
"
>
<div class="
flex
justify-start
items-center
gap-[1em]
pb-[1em]
border-b-[2px]
border-sidebar-border
">
<div
class="
flex
justify-center
items-center
"
style="
flex-basis: 3rem;
flex-shrink: 0;
"
>
<img
src="{{ .Identity.Claims.Picture }}"
class="rounded-[50%]"
/>
</div>
<div>
<div class="font-display" style="word-break: break-word;">
{{ .Identity.Claims.Name }}
</div>
<div style="word-break: break-word;">
{{ or .Identity.Claims.Nickname .Identity.Claims.Subject }}
</div>
</div>
</div>
<a
href="/api/auth/logout"
hx-boost="false"
class="
w-fit
flex
items-center
p-[1em]
font-display
hover:underline
cursor-pointer
gap-[1em]
group
hover:bg-accent
rounded-lg
mt-[0.25em]
pr-[2em]
"
>
<img
src="/images/door.png"
class="h-[2rem] group-hover:scale-120 transition-[scale] dark:invert"
/>
Log Out
</a>
</div>
{{- end }}
</footer>