Passport/pkg/views/users/me.gohtml

169 lines
4.1 KiB
Plaintext
Raw Normal View History

2024-04-21 04:20:06 +00:00
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.4.6/dist/base.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.4.6/dist/components.min.css">
<link rel="stylesheet" href="https://unpkg.com/@tailwindcss/typography@0.1.2/dist/typography.min.css">
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.4.6/dist/utilities.min.css">
2024-04-21 07:07:53 +00:00
<div class="banner-container">
{{if gt (len .userinfo.Banner) 0}}
<img src="/api/avatar/{{.userinfo.Banner}}" alt="Banner" class="banner">
2024-04-21 04:20:06 +00:00
{{end}}
2024-04-21 07:07:53 +00:00
</div>
2024-04-21 04:20:06 +00:00
2024-04-21 07:07:53 +00:00
<div class="left-part name-card">
{{if gt (len .userinfo.Avatar) 0}}
2024-04-21 04:20:06 +00:00
<img src="/api/avatar/{{.userinfo.Avatar}}" alt="Avatar" class="avatar">
{{else}}
<div class="avatar empty">
<span class="material-symbols-outlined">account_circle</span>
</div>
{{end}}
<div class="name">
<h2 class="username">{{.userinfo.Nick}}</h2>
<h6 class="nickname">@{{.userinfo.Name}}</h6>
</div>
2024-04-21 07:07:53 +00:00
{{if gt (len .userinfo.Description) 0}}
2024-04-21 04:20:06 +00:00
<div class="description">{{.userinfo.Description}}</div>
{{else}}
<div class="description empty">No description yet.</div>
{{end}}
<div class="uid">#{{.uid}}</div>
<div class="metadata">
<div><span class="material-symbols-outlined">calendar_month</span> {{.joined_at}}</div>
<div><span class="material-symbols-outlined">cake</span> {{.birthday_at}}</div>
</div>
<div class="actions">
<md-filled-tonal-button class="action" href="/users/me/personalize">
Personalize
<span slot="icon" class="material-symbols-outlined">palette</span>
</md-filled-tonal-button>
2024-04-21 07:07:53 +00:00
<md-filled-tonal-button disabled class="action" href="/users/me/security">
2024-04-21 04:20:06 +00:00
Security
<span slot="icon" class="material-symbols-outlined">security</span>
</md-filled-tonal-button>
</div>
</div>
<div class="right-part">
<article class="personal-page prose">
{{.personal_page}}
</article>
</div>
<style>
.avatar {
display: block;
width: 64px;
height: 64px;
2024-04-21 13:36:18 +00:00
object-fit: cover;
2024-04-21 04:20:06 +00:00
clip-path: circle();
}
.avatar.empty {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--md-sys-color-secondary);
color: var(--md-sys-color-on-secondary);
}
2024-04-21 10:03:18 +00:00
@media (min-width: 768px) {
.banner-container {
grid-column: span 2;
}
2024-04-21 07:07:53 +00:00
}
.banner {
display: block;
object-fit: cover;
border-radius: 28px;
2024-04-21 10:03:18 +00:00
aspect-ratio: 3 / 1;
2024-04-21 07:07:53 +00:00
width: 100%;
}
2024-04-21 04:20:06 +00:00
.name-card {
display: flex;
flex-direction: column;
gap: 1rem;
}
.name-card .name {
display: flex;
align-items: baseline;
gap: 0.3rem;
}
.name-card .username {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
}
.name-card .nickname {
margin: 0;
font-size: 0.75rem;
font-weight: 500;
}
.name-card .uid {
margin-top: -0.8rem;
font-size: 0.7rem;
font-weight: 400;
font-family: Roboto Mono, monospace;
}
.name-card .description {
margin-top: -1.25rem;
}
.description.empty {
font-style: italic;
}
.name-card .metadata {
font-size: 0.85rem;
font-weight: 500;
display: flex;
flex-direction: column;
}
.metadata > div {
display: flex;
align-items: center;
gap: 0.25rem;
}
.metadata .material-symbols-outlined {
font-size: 1rem;
display: block;
}
.actions {
display: flex;
gap: 0.5rem;
margin: 0 -0.5rem;
}
@media (min-width: 768px) {
.actions {
flex-direction: column;
}
}
.actions .action {
width: fit-content;
}
.actions .material-symbols-outlined {
font-size: 20px;
margin-bottom: 4px;
}
.left-part .prose {
min-width: 0;
max-width: unset;
}
</style>