♻️ Refactored web ui with bootstrap and jQuery
This commit is contained in:
@ -1,165 +0,0 @@
|
||||
<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="banner-container">
|
||||
{{if ne .userinfo.Banner nil}}
|
||||
<img src="{{.banner}}" alt="Banner" class="banner">
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="left-part name-card">
|
||||
{{if ne .userinfo.Avatar nil}}
|
||||
<img src="{{.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>
|
||||
{{if gt (len .userinfo.Description) 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 disabled class="action">
|
||||
Add as friend
|
||||
<span slot="icon" class="material-symbols-outlined">group_add</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;
|
||||
object-fit: cover;
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.banner-container {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: 28px;
|
||||
aspect-ratio: 3 / 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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>
|
||||
@ -4,166 +4,150 @@
|
||||
<link rel="stylesheet" href="https://unpkg.com/tailwindcss@1.4.6/dist/utilities.min.css">
|
||||
|
||||
<div class="banner-container">
|
||||
{{if ne .userinfo.Banner nil}}
|
||||
<img src="{{.banner}}" alt="Banner" class="banner">
|
||||
{{end}}
|
||||
{{if ne .userinfo.Banner nil}}
|
||||
<img src="{{.banner}}" alt="Banner" class="banner">
|
||||
{{end}}
|
||||
</div>
|
||||
|
||||
<div class="left-part name-card">
|
||||
{{if ne .userinfo.Avatar nil}}
|
||||
<img src="{{.avatar}}" alt="Avatar" class="avatar">
|
||||
{{else}}
|
||||
<div class="avatar empty">
|
||||
<span class="material-symbols-outlined">account_circle</span>
|
||||
</div>
|
||||
{{end}}
|
||||
{{if ne .userinfo.Avatar nil}}
|
||||
<img src="{{.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>
|
||||
{{if gt (len .userinfo.Description) 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 disabled class="action" href="/users/me/security">
|
||||
Security
|
||||
<span slot="icon" class="material-symbols-outlined">security</span>
|
||||
</md-filled-tonal-button>
|
||||
</div>
|
||||
<div class="name">
|
||||
<h2 class="username">{{.userinfo.Nick}}</h2>
|
||||
<h6 class="nickname">@{{.userinfo.Name}}</h6>
|
||||
</div>
|
||||
{{if gt (len .userinfo.Description) 0}}
|
||||
<div class="description">{{.userinfo.Description}}</div>
|
||||
{{else}}
|
||||
<div class="description empty">No description yet.</div>
|
||||
{{end}}
|
||||
<div class="uid">#{{.uid}}</div>
|
||||
</div>
|
||||
|
||||
<div class="right-part">
|
||||
<article class="personal-page prose">
|
||||
{{.personal_page}}
|
||||
</article>
|
||||
<article class="personal-page prose">
|
||||
{{.personal_page}}
|
||||
</article>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.avatar {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
.avatar {
|
||||
display: block;
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
|
||||
clip-path: circle();
|
||||
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);
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.banner-container {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar.empty {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: var(--md-sys-color-secondary);
|
||||
color: var(--md-sys-color-on-secondary);
|
||||
}
|
||||
.banner {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: 28px;
|
||||
aspect-ratio: 3 / 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.banner-container {
|
||||
grid-column: span 2;
|
||||
}
|
||||
}
|
||||
.name-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: block;
|
||||
object-fit: cover;
|
||||
border-radius: 28px;
|
||||
aspect-ratio: 3 / 1;
|
||||
width: 100%;
|
||||
}
|
||||
.name-card .name {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
|
||||
.name-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
}
|
||||
.name-card .username {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.name-card .name {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 0.3rem;
|
||||
}
|
||||
.name-card .nickname {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.name-card .username {
|
||||
margin: 0;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
.name-card .uid {
|
||||
margin-top: -0.8rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
font-family: Roboto Mono, monospace;
|
||||
}
|
||||
|
||||
.name-card .nickname {
|
||||
margin: 0;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
.name-card .description {
|
||||
margin-top: -1.25rem;
|
||||
}
|
||||
|
||||
.name-card .uid {
|
||||
margin-top: -0.8rem;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 400;
|
||||
font-family: Roboto Mono, monospace;
|
||||
}
|
||||
.description.empty {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.name-card .description {
|
||||
margin-top: -1.25rem;
|
||||
}
|
||||
.name-card .metadata {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.description.empty {
|
||||
font-style: italic;
|
||||
}
|
||||
.metadata>div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.name-card .metadata {
|
||||
font-size: 0.85rem;
|
||||
font-weight: 500;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.metadata .material-symbols-outlined {
|
||||
font-size: 1rem;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin: 0 -0.5rem;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
.actions .action {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.actions .action {
|
||||
width: fit-content;
|
||||
}
|
||||
.actions .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.actions .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.left-part .prose {
|
||||
min-width: 0;
|
||||
max-width: unset;
|
||||
}
|
||||
</style>
|
||||
.left-part .prose {
|
||||
min-width: 0;
|
||||
max-width: unset;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -1,110 +0,0 @@
|
||||
<div class="left-part">
|
||||
<img class="logo" alt="Logo" src="/favicon.png" width="64" height="64"/>
|
||||
|
||||
<h1 class="title">Personalize</h1>
|
||||
<p class="caption">Personalize your account, and make us provide better service for you.</p>
|
||||
</div>
|
||||
|
||||
<div class="right-part">
|
||||
<div class="responsive-title-gap"></div>
|
||||
|
||||
<div class="personalize-actions">
|
||||
<span>We doesn't support edit avatar / banner through Hydrogen.Passport web yet. Go try our Solian App!</span>
|
||||
</div>
|
||||
|
||||
<form class="action-form" action="/users/me/personalize" method="POST">
|
||||
<div class="columns-two">
|
||||
<md-outlined-text-field
|
||||
class="block-field"
|
||||
name="name"
|
||||
type="text"
|
||||
autocomplete="username"
|
||||
label="Username"
|
||||
disabled
|
||||
value="{{.userinfo.Name}}"
|
||||
>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<md-outlined-text-field
|
||||
class="block-field"
|
||||
name="nick"
|
||||
type="text"
|
||||
autocomplete="nickname"
|
||||
label="Nickname"
|
||||
value="{{.userinfo.Nick}}"
|
||||
>
|
||||
</md-outlined-text-field>
|
||||
</div>
|
||||
|
||||
<div class="columns-two">
|
||||
<md-outlined-text-field
|
||||
class="block-field"
|
||||
name="first_name"
|
||||
type="text"
|
||||
autocomplete="given_name"
|
||||
label="First Name"
|
||||
value="{{if gt (len .userinfo.Profile.FirstName) 0}}{{.userinfo.Profile.FirstName}}{{end}}"
|
||||
>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<md-outlined-text-field
|
||||
class="block-field"
|
||||
name="last_name"
|
||||
type="text"
|
||||
autocomplete="family_name"
|
||||
label="Last Name"
|
||||
value="{{if gt (len .userinfo.Profile.LastName) 0}}{{.userinfo.Profile.LastName}}{{end}}"
|
||||
>
|
||||
</md-outlined-text-field>
|
||||
</div>
|
||||
|
||||
<md-outlined-text-field
|
||||
class="block-field"
|
||||
name="birthday"
|
||||
type="date"
|
||||
label="Birthday"
|
||||
value="{{if ne .birthday nil}}{{.birthday}}{{end}}"
|
||||
>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<md-outlined-text-field
|
||||
class="block-field"
|
||||
name="description"
|
||||
type="textarea"
|
||||
autocomplete="off"
|
||||
label="Description"
|
||||
value="{{if gt (len .userinfo.Description) 0}}{{.userinfo.Description}}{{end}}"
|
||||
style="resize: vertical"
|
||||
>
|
||||
</md-outlined-text-field>
|
||||
|
||||
<div class="action-form-buttons">
|
||||
<md-text-button type="button" href="/users/me">{{.i18n.back}}</md-text-button>
|
||||
<md-filled-button type="submit">{{.i18n.apply}}</md-filled-button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.input-label {
|
||||
font-size: 14px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.personalize-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1.5rem;
|
||||
margin-left: -0.2rem;
|
||||
margin-right: -0.2rem;
|
||||
}
|
||||
|
||||
.personalize-actions .personalize-action {
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.personalize-action .material-symbols-outlined {
|
||||
font-size: 20px;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user