From 1509d39373a43e0f6f0e9bceb5748217f204bb9d Mon Sep 17 00:00:00 2001 From: Angel Beltran Date: Fri, 23 Jan 2026 04:24:24 -0700 Subject: [PATCH] profile popover in footer --- images/door.png | Bin 0 -> 5670 bytes internal/server/server.go | 1 + styles/index.css | 148 +++++++++++++++++++++++++++++++++++++ templates/layout.html.tmpl | 92 +++++++++++++++++++++-- 4 files changed, 234 insertions(+), 7 deletions(-) create mode 100644 images/door.png diff --git a/images/door.png b/images/door.png new file mode 100644 index 0000000000000000000000000000000000000000..6ce037bfa23d5a3683723b66e743855c0aefd482 GIT binary patch literal 5670 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 Ci4wH{ literal 0 HcmV?d00001 diff --git a/internal/server/server.go b/internal/server/server.go index 8062a68..53da690 100644 --- a/internal/server/server.go +++ b/internal/server/server.go @@ -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 diff --git a/styles/index.css b/styles/index.css index e974ec6..a1145ee 100644 --- a/styles/index.css +++ b/styles/index.css @@ -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; } } } diff --git a/templates/layout.html.tmpl b/templates/layout.html.tmpl index bbf7f03..93327e4 100644 --- a/templates/layout.html.tmpl +++ b/templates/layout.html.tmpl @@ -111,12 +111,6 @@ -
  • - - Log Out - -
    • - {{- end }} @@ -133,7 +127,8 @@ Support {{- if .Identity.Claims.Picture }} -
    + +
    +
    +
    + +
    + +
    +
    + {{ .Identity.Claims.Name }} +
    + +
    + {{ or .Identity.Claims.Nickname .Identity.Claims.Subject }} +
    + +
    + +
    + + + + Log Out + +
    {{- end }}