Improve profile page elements, reduce jank

Fixes #167

src/experimental/parser/user.nim

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

src/parserutils.nim

@@ -119,18 +119,6 @@ proc getBanner*(js: JsonNode): string =
   if color.len > 0:
     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 =
   result = js{"tombstoneInfo", "richText", "text"}.getStr
   result.removeSuffix(" Learn more")

src/sass/profile/_base.scss

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

src/sass/profile/card.scss

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

src/sass/profile/photo-rail.scss

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

src/views/general.nim

@@ -52,7 +52,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   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")
 
     if theme.len > 0:

src/views/profile.nim

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