Improve profile page elements, reduce jank

Fixes #167
This commit is contained in:
Zed 2022-01-17 05:50:45 +01:00
parent 43b0bdc08a
commit b01810e261
7 changed files with 31 additions and 39 deletions

View file

@ -36,7 +36,6 @@ proc getBanner(user: User): string =
return user.profileBannerUrl & "/1500x500" return user.profileBannerUrl & "/1500x500"
if user.profileLinkColor.len > 0: if user.profileLinkColor.len > 0:
return '#' & user.profileLinkColor return '#' & user.profileLinkColor
return "#161616"
proc parseUser*(json: string; username=""): Profile = proc parseUser*(json: string; username=""): Profile =
handleErrors: handleErrors:

View file

@ -119,18 +119,6 @@ proc getBanner*(js: JsonNode): string =
if color.len > 0: if color.len > 0:
return '#' & color return '#' & color
# use primary color from profile picture color histogram
with p, js{"profile_image_extensions", "mediaColor", "r", "ok", "palette"}:
if p.len > 0:
let pal = p[0]{"rgb"}
result = "#"
result.add toHex(pal{"red"}.getInt, 2)
result.add toHex(pal{"green"}.getInt, 2)
result.add toHex(pal{"blue"}.getInt, 2)
return
return "#161616"
proc getTombstone*(js: JsonNode): string = proc getTombstone*(js: JsonNode): string =
result = js{"tombstoneInfo", "richText", "text"}.getStr result = js{"tombstoneInfo", "richText", "text"}.getStr
result.removeSuffix(" Learn more") result.removeSuffix(" Learn more")

View file

@ -15,23 +15,22 @@
} }
.profile-banner { .profile-banner {
padding-bottom: 4px; margin-bottom: 4px;
background-color: var(--bg_panel);
a { a {
display: inherit; display: block;
line-height: 0; position: relative;
padding: 33.34% 0 0 0;
} }
img { img {
width: 100%; max-width: 100%;
position: absolute;
top: 0;
} }
} }
.profile-banner-color {
width: 100%;
padding-bottom: 25%;
}
.profile-tab { .profile-tab {
padding: 0 4px 0 0; padding: 0 4px 0 0;
box-sizing: border-box; box-sizing: border-box;

View file

@ -35,19 +35,25 @@
} }
.profile-card-avatar { .profile-card-avatar {
display: block; display: inline-block;
position: relative;
width: 100%; width: 100%;
padding-bottom: 6px;
margin-right: 4px; margin-right: 4px;
margin-bottom: 6px;
&:after {
content: '';
display: block;
margin-top: 100%;
}
img { img {
display: block;
box-sizing: border-box; box-sizing: border-box;
position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0;
border: 4px solid var(--darker_grey); border: 4px solid var(--darker_grey);
background: var(--bg_color); background: var(--bg_panel);
} }
} }
@ -113,8 +119,8 @@
} }
.profile-card-avatar { .profile-card-avatar {
height: 60px; width: 80px;
width: unset; height: 80px;
img { img {
border-width: 2px; border-width: 2px;

View file

@ -32,6 +32,7 @@
a { a {
position: relative; position: relative;
border-radius: 5px; border-radius: 5px;
background-color: var(--darker_grey);
&:before { &:before {
content: ""; content: "";

View file

@ -52,7 +52,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
let opensearchUrl = getUrlPrefix(cfg) & "/opensearch" let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
buildHtml(head): buildHtml(head):
link(rel="stylesheet", type="text/css", href="/css/style.css?v=14") link(rel="stylesheet", type="text/css", href="/css/style.css?v=15")
link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=2") link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=2")
if theme.len > 0: if theme.len > 0:

View file

@ -78,18 +78,16 @@ proc renderPhotoRail(profile: Profile; photoRail: PhotoRail): VNode =
tdiv(class="photo-rail-grid"): tdiv(class="photo-rail-grid"):
for i, photo in photoRail: for i, photo in photoRail:
if i == 16: break if i == 16: break
let col = if photo.color.len > 0: photo.color else: "#161616" a(href=(&"/{profile.username}/status/{photo.tweetId}#m")):
a(href=(&"/{profile.username}/status/{photo.tweetId}#m"),
style={backgroundColor: col}):
genImg(photo.url & (if "format" in photo.url: "" else: ":thumb")) genImg(photo.url & (if "format" in photo.url: "" else: ":thumb"))
proc renderBanner(profile: Profile): VNode = proc renderBanner(banner: string): VNode =
buildHtml(): buildHtml():
if "#" in profile.banner: if banner.startsWith('#'):
tdiv(class="profile-banner-color", style={backgroundColor: profile.banner}) a(style={backgroundColor: banner})
else: else:
a(href=getPicUrl(profile.banner), target="_blank"): a(href=getPicUrl(banner), target="_blank"):
genImg(profile.banner) genImg(banner)
proc renderProtected(username: string): VNode = proc renderProtected(username: string): VNode =
buildHtml(tdiv(class="timeline-container")): buildHtml(tdiv(class="timeline-container")):
@ -103,7 +101,8 @@ proc renderProfile*(profile: Profile; timeline: var Timeline;
buildHtml(tdiv(class="profile-tabs")): buildHtml(tdiv(class="profile-tabs")):
if not prefs.hideBanner: if not prefs.hideBanner:
tdiv(class="profile-banner"): tdiv(class="profile-banner"):
renderBanner(profile) if profile.banner.len > 0:
renderBanner(profile.banner)
let sticky = if prefs.stickyProfile: " sticky" else: "" let sticky = if prefs.stickyProfile: " sticky" else: ""
tdiv(class=(&"profile-tab{sticky}")): tdiv(class=(&"profile-tab{sticky}")):