diff --git a/src/experimental/parser/user.nim b/src/experimental/parser/user.nim index af8cb82..de55ed8 100644 --- a/src/experimental/parser/user.nim +++ b/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: diff --git a/src/parserutils.nim b/src/parserutils.nim index 3291955..4b18202 100644 --- a/src/parserutils.nim +++ b/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") diff --git a/src/sass/profile/_base.scss b/src/sass/profile/_base.scss index 6a2cfec..ae6b801 100644 --- a/src/sass/profile/_base.scss +++ b/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; diff --git a/src/sass/profile/card.scss b/src/sass/profile/card.scss index 9475fbf..cc68d7d 100644 --- a/src/sass/profile/card.scss +++ b/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; + + &:after { + content: ''; + display: block; + margin-top: 100%; + } img { - display: block; 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; diff --git a/src/sass/profile/photo-rail.scss b/src/sass/profile/photo-rail.scss index 314eadf..f32d22a 100644 --- a/src/sass/profile/photo-rail.scss +++ b/src/sass/profile/photo-rail.scss @@ -32,6 +32,7 @@ a { position: relative; border-radius: 5px; + background-color: var(--darker_grey); &:before { content: ""; diff --git a/src/views/general.nim b/src/views/general.nim index 010e2df..7054fd4 100644 --- a/src/views/general.nim +++ b/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: diff --git a/src/views/profile.nim b/src/views/profile.nim index a0ef40f..e44b8a2 100644 --- a/src/views/profile.nim +++ b/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}")):