Remove alpine js

This commit is contained in:
Florian Hoss 2024-04-11 14:53:52 +02:00
parent 68ff409afc
commit 8f2c1a4396
No known key found for this signature in database
GPG key ID: 0638DC11BFD36662
2 changed files with 4 additions and 31 deletions

View file

@ -9,7 +9,7 @@ import (
"github.com/logto-io/go/core" "github.com/logto-io/go/core"
) )
var GravatarTemplate = template.Must(template.New("gravatar").Parse("<div class=\"avatar rounded w-10 h-10 bg-contain bg-center bg-origin-content bg-no-repeat opacity-90\" style=\"background-image: url({{ . }})\"></div>")) var GravatarTemplate = template.Must(template.New("gravatar").Parse("<div class=\"relative avatar rounded w-10 h-10 bg-contain bg-center bg-origin-content bg-no-repeat opacity-90\" style=\"background-image: url({{ . }})\"></div>"))
func GetGravatarURL(email string, size uint) string { func GetGravatarURL(email string, size uint) string {
email = strings.TrimSpace(strings.ToLower(email)) email = strings.TrimSpace(strings.ToLower(email))
@ -19,39 +19,13 @@ func GetGravatarURL(email string, size uint) string {
} }
templ User(claims *core.IdTokenClaims) { templ User(claims *core.IdTokenClaims) {
<div <a class="dropdown tooltip" data-tip="Logout" href="/sign-out">
x-data="{ <div tabindex="0" role="button" class="flex items-center gap-2 hover:cursor-pointer opacity-80 hover:opacity-100 transition-opacity">
open: false,
toggle() {
if (this.open) return this.close();
this.open = true;
},
close(focusAfter) {
if (! this.open) return;
this.open = false;
}
}"
class="relative"
>
<div x-on:click="toggle()" class="flex items-center gap-2 hover:cursor-pointer opacity-80 hover:opacity-100 transition-opacity">
<div class="hidden md:flex flex-col items-end"> <div class="hidden md:flex flex-col items-end">
<div class="text-secondary text-sm font-bold whitespace-nowrap">{ claims.Name }</div> <div class="text-secondary text-sm font-bold whitespace-nowrap">{ claims.Name }</div>
<div class="text-gray-500 text-xs whitespace-nowrap">{ claims.Email }</div> <div class="text-gray-500 text-xs whitespace-nowrap">{ claims.Email }</div>
</div> </div>
@templ.FromGoHTML(GravatarTemplate, GetGravatarURL(claims.Email, 100)) @templ.FromGoHTML(GravatarTemplate, GetGravatarURL(claims.Email, 100))
</div> </div>
<ul </a>
x-show="open"
x-transition.origin.top.left
x-on:click.outside="close($refs.button)"
style="display: none;"
class="z-50 absolute right-0 mt-2 menu bg-base-200 rounded-box"
>
<li class="md:hidden menu-title whitespace-nowrap">{ claims.Name }</li>
<li class="md:hidden menu-title whitespace-nowrap">{ claims.Email }</li>
<li>
<a href="/sign-out"><span class="icon-[bi--box-arrow-left]"></span> Logout</a>
</li>
</ul>
</div>
} }

View file

@ -18,7 +18,6 @@ templ Base(title, version string) {
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"/> <link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon/favicon-16x16.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png"/> <link rel="apple-touch-icon" sizes="180x180" href="/assets/favicon/apple-touch-icon.png"/>
<link rel="manifest" href="/assets/favicon/site.webmanifest"/> <link rel="manifest" href="/assets/favicon/site.webmanifest"/>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.13.7/dist/cdn.min.js"></script>
<style> <style>
.bookmark-link:hover .img { .bookmark-link:hover .img {
opacity: 1; opacity: 1;