Improve account sidebar

FossilOrigin-Name: 0c144ea23f1d0d1490b28492433fcd03032c19070c5826af5ee3583a1cd5c2f4
This commit is contained in:
nekobit 2022-07-16 03:11:41 +00:00
parent 661272026c
commit 1083ed03ff
4 changed files with 68 additions and 12 deletions

View file

@ -1,3 +1,9 @@
:root
{
--account-overlay-gradient-top: rgba(50, 50, 50, 0.6);
--account-overlay-gradient-bottom: #303030;
}
/* Dark color overrides */
html
{
@ -481,3 +487,15 @@ html, body {
{
color: #aaa;
}
.account-sidebar
{
border-bottom: 1px solid #404040;
}
.account-sidebar .acct-info .acct
{
color: #ababab;
}

41
dist/treebird.css vendored
View file

@ -2,6 +2,8 @@
:root
{
--sidebar-opacity: 1.0;
--account-overlay-gradient-top: rgba(255, 255, 255, 0.6);
--account-overlay-gradient-bottom: #dadada;
}
*
@ -1303,6 +1305,11 @@ p}
text-shadow: 0px 2px 6px #000;
}
.acct-info
{
display: block;
}
.acct-banner
{
overflow: hidden;
@ -1336,11 +1343,22 @@ p}
vertical-align: top;
}
.account-sidebar .username
.account-sidebar .acct-pfp
{
position: relative;
top: 5px;
margin-left: 5px;
box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
}
.account-sidebar .acct-info .username,
.account-sidebar .acct-info .acct
{
display: block;
margin-top: 3px;
margin-left: 8px;
}
.account-sidebar .acct-info .acct
{
color: #606060;
}
.account-sidebar .acct-stats
@ -1353,15 +1371,24 @@ p}
{
padding: 7px 7px 3px;
background-color: #e4e4ea;
border-bottom: 1px dashed #cacaca;
color: #000;
border-bottom: 1px solid #cacaca;
background-size: cover !important;
}
.account-sidebar .header-btn
.account-sidebar .header-btn,
.account-sidebar .header-btn:visited
{
padding: 4px;
border-radius: 4px;
}
/* .account-sidebar .header-btn a, */
/* .account-sidebar .header-btn span */
/* { */
/* color: #fff; */
/* } */
.follow-btn
{
margin-left: auto;
@ -2168,7 +2195,7 @@ input[type=checkbox].hidden:not(:checked) + .list-edit-content
width: 100%;
}
.scrobblist-info .username
.scrobblist-info .username.
{
font-weight: bold;
}

View file

@ -74,6 +74,7 @@ char* construct_account_sidebar(struct mstdnt_account* acct, size_t* size)
char* result = NULL;
char* sanitized_display_name = NULL;
char* display_name = NULL;
char* header_css = NULL;
if (acct->display_name)
{
sanitized_display_name = sanitize_html(acct->display_name);
@ -81,10 +82,12 @@ char* construct_account_sidebar(struct mstdnt_account* acct, size_t* size)
acct->emojis,
acct->emojis_len);
}
easprintf(&header_css, "style=\"background: linear-gradient(var(--account-overlay-gradient-top), var(--account-overlay-gradient-bottom)), url(%s);\"", acct->header);
struct account_sidebar_template data = {
.prefix = config_url_prefix,
.avatar = acct->avatar,
.username = display_name,
.header = acct->header ? header_css : "",
.statuses_text = L10N[L10N_EN_US][L10N_TAB_STATUSES],
.following_text = L10N[L10N_EN_US][L10N_TAB_FOLLOWING],
.followers_text = L10N[L10N_EN_US][L10N_TAB_FOLLOWERS],
@ -98,6 +101,7 @@ char* construct_account_sidebar(struct mstdnt_account* acct, size_t* size)
if (display_name != sanitized_display_name &&
display_name != acct->display_name)
free(display_name);
free(header_css);
return result;
}

View file

@ -1,8 +1,15 @@
<div class="account-sidebar">
<div class="acct-info">
<img src="{{%s:avatar}}" class="acct-pfp" loading="lazy">
<span class="username">{{%s:username}}</span>
</div>
<div class="account-sidebar" {{ %s : header }}>
<table class="acct-info">
<tr>
<td>
<img src="{{%s:avatar}}" class="acct-pfp" loading="lazy">
</td>
<td class="acct-info-right">
<span class="username">{{%s:username}}</span>
<span class="acct">@<span class="acct-js-grep">{{%s:acct}}</span></span>
</td>
</tr>
</table>
<table class="acct-stats">
<tr>
<td class="header-btn btn">