add: user settings
fix: actually use cached stuff in auto_method macro add: profile ui base
This commit is contained in:
trisua
parent
8580e34be2
commit
7d96a3d20f
16 changed files with 222 additions and 8 deletions
|
|
@ -88,6 +88,10 @@ footer {
|
|||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
main,
|
||||
article,
|
||||
|
|
@ -96,6 +100,10 @@ footer {
|
|||
footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
article {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.content_container {
|
||||
|
|
@ -135,6 +143,8 @@ footer {
|
|||
svg.icon {
|
||||
stroke: currentColor;
|
||||
width: 18px;
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
}
|
||||
|
||||
svg.icon.filled {
|
||||
|
|
@ -360,6 +370,14 @@ button,
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
button.small,
|
||||
.button.small {
|
||||
min-height: max-content;
|
||||
padding: 0.25rem;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover {
|
||||
background: var(--color-primary-lowered);
|
||||
|
|
@ -490,6 +508,15 @@ select:focus {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
/* chip */
|
||||
.chip {
|
||||
background: var(--color-primary);
|
||||
color: var(--color-text-primary);
|
||||
font-weight: 600;
|
||||
border-radius: var(--circle);
|
||||
padding: 0.05rem 0.75rem;
|
||||
}
|
||||
|
||||
/* nav */
|
||||
nav {
|
||||
background: var(--color-primary);
|
||||
|
|
@ -1041,6 +1068,7 @@ details.accordion .inner {
|
|||
|
||||
.sm\:w-full {
|
||||
width: 100% !important;
|
||||
min-width: 100% !important;
|
||||
}
|
||||
|
||||
.sm\:mt-2 {
|
||||
|
|
|
|||
|
|
@ -33,7 +33,7 @@
|
|||
|
||||
<div class="inner">
|
||||
<b class="title">{{ user.username }}</b>
|
||||
<a href="/@{{ user.username }}">
|
||||
<a href="/user/{{ user.username }}">
|
||||
{{ icon "book-heart" }}
|
||||
<span>{{ text "auth:link.my_profile" }}</span>
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
{% import "macros.html" as macros %} {% extends "root.html" %} {% block body %}
|
||||
{{ macros::nav(selected="home") }}
|
||||
|
||||
<main class="flex flex-col gap-2">
|
||||
<div class="card-nest">
|
||||
<div class="card">
|
||||
|
|
|
|||
80
crates/app/src/public/html/profile/base.html
Normal file
80
crates/app/src/public/html/profile/base.html
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
{% import "macros.html" as macros %} {% extends "root.html" %} {% block head %}
|
||||
<title>{{ profile.username }} - {{ config.name }}</title>
|
||||
{% endblock %} {% block body %} {{ macros::nav() }}
|
||||
<article>
|
||||
<div class="content_container">
|
||||
<div class="w-full flex gap-4 flex-collapse">
|
||||
<div
|
||||
class="lhs flex flex-col gap-2 sm:w-full"
|
||||
style="min-width: 20rem"
|
||||
>
|
||||
<div class="card-nest w-full">
|
||||
<div class="card flex gap-2" id="user_avatar_and_name">
|
||||
{{ macros::avatar(username=profile.username,size="72px")
|
||||
}}
|
||||
<div class="flex flex-col">
|
||||
<h3 id="username">
|
||||
{% if profile.settings.display_name %} {{
|
||||
profile.settings.display_name }} {% else %} {{
|
||||
profile.username }} {% endif %}
|
||||
</h3>
|
||||
|
||||
<span class="fade">{{ profile.username }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card flex" id="social">
|
||||
<div
|
||||
class="w-full flex justify-center items-center gap-2"
|
||||
>
|
||||
<h4>{{ profile.follower_count }}</h4>
|
||||
<span>{{ text "auth:label.followers" }}</span>
|
||||
</div>
|
||||
<div
|
||||
class="w-full flex justify-center items-center gap-2"
|
||||
>
|
||||
<h4>{{ profile.following_count }}</h4>
|
||||
<span>{{ text "auth:label.following" }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-nest flex flex-col">
|
||||
<div id="bio" class="card">
|
||||
{{ profile.settings.biography }}
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-2">
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<span class="notification chip">ID</span>
|
||||
<button
|
||||
title="Copy"
|
||||
onclick="trigger('atto::copy_text', [{{ profile.id }}])"
|
||||
class="camo small"
|
||||
>
|
||||
{{ icon "copy" }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="w-full flex justify-between items-center">
|
||||
<span class="notification chip">Joined</span>
|
||||
<span class="date">{{ profile.created }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-nest">
|
||||
<div class="card flex gap-2 items-center">
|
||||
{{ icon "users-round" }}
|
||||
<span>{{ text "auth:label.joined_journals" }}</span>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-wrap gap-2"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="rhs sm:w-full">{% block content %}{% endblock %}</div>
|
||||
</div>
|
||||
</div>
|
||||
</article>
|
||||
{% endblock %}
|
||||
2
crates/app/src/public/html/profile/posts.html
Normal file
2
crates/app/src/public/html/profile/posts.html
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
{% import "macros.html" as macros %} {% extends "profile/base.html" %} {% block
|
||||
content %}<span></span>{% endblock %}
|
||||
|
|
@ -56,7 +56,9 @@
|
|||
<body>
|
||||
<div id="toast_zone"></div>
|
||||
|
||||
{% block body %}{% endblock %}
|
||||
<div id="page" style="display: contents">
|
||||
{% block body %}{% endblock %}
|
||||
</div>
|
||||
|
||||
<script data-turbo-permanent="true" id="init-script">
|
||||
document.documentElement.addEventListener("turbo:load", () => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue