✨ User center page
This commit is contained in:
@ -7,7 +7,7 @@
|
||||
<div class="wrapper-container">
|
||||
<div class="wrapper-middleware">
|
||||
{{if ne .info nil}}
|
||||
<div class="animate__animated animate__fadeInDown alert">
|
||||
<div class="alert">
|
||||
<div class="content">{{.info}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
@ -26,6 +26,8 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
|
||||
.wrapper-middleware {
|
||||
|
87
pkg/views/layouts/user-center.gohtml
Normal file
87
pkg/views/layouts/user-center.gohtml
Normal file
@ -0,0 +1,87 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
{{template "views/partials/header"}}
|
||||
|
||||
<body>
|
||||
<div class="wrapper-container">
|
||||
<div class="wrapper-middleware">
|
||||
{{if ne .info nil}}
|
||||
<div class="alert">
|
||||
<div class="content">{{.info}}</div>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
<div class="wrapper-card">
|
||||
{{embed}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
.wrapper-container {
|
||||
width: 100dvw;
|
||||
min-height: 100dvh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: auto;
|
||||
|
||||
scrollbar-width: none;
|
||||
|
||||
background-color: var(--md-sys-color-surface-container);
|
||||
}
|
||||
|
||||
.wrapper-container::-webkit-scrollbar, body::-webkit-scrollbar {
|
||||
display: none;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
.wrapper-middleware {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
max-width: min(800px, 100dvw);
|
||||
|
||||
margin: 1rem;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wrapper-card {
|
||||
transition: all .3s;
|
||||
height: auto;
|
||||
overflow: auto;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
justify-content: center;
|
||||
border-radius: 28px;
|
||||
padding: 56px;
|
||||
gap: 2rem;
|
||||
background-color: var(--md-sys-color-surface);
|
||||
color: var(--md-sys-color-on-surface)
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 16px;
|
||||
border-radius: 16px;
|
||||
background-color: var(--md-sys-color-secondary-container);
|
||||
color: var(--md-sys-color-on-secondary-container);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.alert .content {
|
||||
flex-grow: 1;
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.wrapper-card {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</html>
|
@ -9,10 +9,9 @@
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
|
||||
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200"
|
||||
rel="stylesheet"
|
||||
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
|
||||
/>
|
||||
|
||||
<script type="importmap">
|
||||
@ -73,6 +72,14 @@
|
||||
--md-sys-color-on-error-container: #410002;
|
||||
}
|
||||
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings:
|
||||
'FILL' 0,
|
||||
'wght' 400,
|
||||
'GRAD' 0,
|
||||
'opsz' 24
|
||||
}
|
||||
|
||||
html, body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
151
pkg/views/users/me.gohtml
Normal file
151
pkg/views/users/me.gohtml
Normal file
@ -0,0 +1,151 @@
|
||||
<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">
|
||||
|
||||
<div class="left-part name-card">
|
||||
{{$bannerLength := len .userinfo.Banner}} {{if gt $bannerLength 0}}
|
||||
{{end}}
|
||||
|
||||
{{$avatarLength := len .userinfo.Avatar}} {{if gt $avatarLength 0}}
|
||||
<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>
|
||||
{{$descriptionLength := len .userinfo.Description}} {{if gt $descriptionLength 0}}
|
||||
<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>
|
||||
<md-filled-tonal-button class="action" href="/users/me/security">
|
||||
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;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
.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>
|
@ -1,3 +0,0 @@
|
||||
<h1>
|
||||
You are accepted!
|
||||
</h1>
|
Reference in New Issue
Block a user