From b0b23800e12e5a5c2620f8b5c9dd03d0c14ee073 Mon Sep 17 00:00:00 2001 From: Zed Date: Mon, 24 Jun 2019 20:45:03 +0200 Subject: [PATCH] Properly display names, usernames and badges --- public/style.css | 92 ++++++++++++++++++++++++--------------------- src/formatters.nim | 28 ++++++-------- src/views/tweet.nim | 12 +++--- src/views/user.nim | 4 +- 4 files changed, 70 insertions(+), 66 deletions(-) diff --git a/public/style.css b/public/style.css index df8e21a..55b5740 100644 --- a/public/style.css +++ b/public/style.css @@ -67,46 +67,48 @@ a:hover { min-width: 0; } -.media-heading a { - display: inline-block; - word-break: break-all; -} - -.status-el .media-heading { +.media-heading { padding: 0; vertical-align: bottom; flex-basis: 100%; margin-bottom: .2em; } -.status-el .media-heading .heading-name-row { +.media-heading a { + display: inline-block; + word-break: break-all; + max-width: 100%; +} + +.heading-name-row { padding: 0; display: flex; justify-content: space-between; } -.status-el .media-heading .heading-name-row .name-and-account-name { +.fullname-and-username { display: flex; min-width: 0; } -.status-el .media-heading .heading-name-row .username { - flex-shrink: 1; - margin-right: .4em; +.fullname { overflow: hidden; text-overflow: ellipsis; -} - -.status-el .username { + flex-shrink: 2; + max-width: 80%; white-space: nowrap; font-size: 14px; - overflow: hidden; - flex-shrink: 0; font-weight: 700; + color: #f8f8f2; } .username { - color: #f8f8f2; + min-width: 1.6em; + margin-left: .4em; + white-space: nowrap; + word-wrap: normal; + overflow: hidden; + text-overflow: ellipsis; } .verified-icon { @@ -116,31 +118,34 @@ a:hover { display: inline-block; text-align: center; vertical-align: middle; - margin-left: 4px; height: 14px; width: 14px; font-size: 10px; - margin-bottom: 2px; + flex-shrink: 0; + margin: 3px; + margin-top: 2px; } -.status-el .media-heading .heading-right { +.protected-icon { + color: #fff; + background-color: #353535; + border-radius: 50%; + display: inline-block; + text-align: center; + vertical-align: middle; + height: 18px; + width: 18px; + font-size: 12px; + flex-shrink: 0; + margin: 3px; + margin-top: 2px; + font-weight: bold; +} + +.heading-right { display: flex; flex-shrink: 0; -} - -.status-el .media-heading .heading-name-row .account-name { - min-width: 1.6em; - margin-right: .4em; - flex: 1 1 0; - white-space: nowrap; - word-wrap: normal; - overflow: hidden; - text-overflow: ellipsis; -} - -.status-el .media-heading a { - display: inline-block; - word-break: break-all; + margin-left: 4px; } .status-el .status-content { @@ -380,6 +385,7 @@ nav { position: relative; display: flex; justify-content: flex-start; + max-width: 90%; } .profile-card-tabs { @@ -387,28 +393,30 @@ nav { justify-content: space-between; align-items: center; flex: 1 1 auto; + max-width: 100%; } .profile-card-tabs-name { - padding-top: 0; - padding-bottom: 0; + max-width: 100%; } -.profile-card-name, .profile-card-username { +.profile-card-username, .profile-card-fullname { color: #f8f8f2; } -.profile-card-name { +.profile-card-fullname { font-size: 16px; - word-wrap: break-word; text-shadow: none; - overflow: hidden; - white-space: nowrap; text-overflow: ellipsis; + max-width: 100%; + font-weight: bold; } .profile-card-username { font-size: 14px; + overflow: hidden; + text-overflow: ellipsis; + display: block; } .profile-card-avatar { diff --git a/src/formatters.nim b/src/formatters.nim index 055f7b2..e14c117 100644 --- a/src/formatters.nim +++ b/src/formatters.nim @@ -17,7 +17,7 @@ proc shortLink*(text: string; length=28): string = result = result[0 ..< length] & "…" proc toLink*(url, text: string; class="timeline-link"): string = - htmlgen.a(text, class=class, href=url) + a(text, class=class, href=url) proc reUrlToLink*(m: RegexMatch; s: string): string = let url = s[m.group(0)[0]] @@ -66,20 +66,16 @@ proc getUserpic*(userpic: string; style=""): string = proc getUserpic*(profile: Profile; style=""): string = getUserPic(profile.userpic, style) -proc formatName*(profile: Profile): string = - result = xmltree.escape(profile.fullname) - if profile.verified: - result &= htmlgen.span("✔", class="verified-icon") - elif profile.protected: - result &= " 🔒" +proc linkUser*(profile: Profile; class=""): string = + let + username = "username" in class + href = &"/{profile.username}" + text = if username: "@" & profile.username + else: xmltree.escape(profile.fullname) -proc linkUser*(profile: Profile; h: string; username=true; class=""): string = - let text = - if username: "@" & profile.username - else: formatName(profile) + result = a(text, href = href, class = class, title = text) - if h.len == 0: - return htmlgen.a(text, href = &"/{profile.username}", class=class) - - let element = &"<{h} class=\"{class}\">{text}" - htmlgen.a(element, href = &"/{profile.username}") + if not username and profile.verified: + result &= span("✔", class="verified-icon", title="Verified account") + if not username and profile.protected: + result &= span("🔒", class="protected-icon", title="Protected account") diff --git a/src/views/tweet.nim b/src/views/tweet.nim index 47c564f..869162d 100644 --- a/src/views/tweet.nim +++ b/src/views/tweet.nim @@ -16,9 +16,9 @@
-
#end if -
- ${linkUser(quote.profile, "b", class="username", username=false)} - ${linkUser(quote.profile, "span", class="account-name")} +
+ ${linkUser(quote.profile, class="fullname")} + ${linkUser(quote.profile, class="username")}
${linkifyText(xmltree.escape(quote.text))}
diff --git a/src/views/user.nim b/src/views/user.nim index f49e1d3..e9b2699 100644 --- a/src/views/user.nim +++ b/src/views/user.nim @@ -12,8 +12,8 @@
- ${linkUser(profile, "h1", class="profile-card-name", username=false)} - ${linkUser(profile, "h2", class="profile-card-username")} + ${linkUser(profile, class="profile-card-fullname")} + ${linkUser(profile, class="profile-card-username")}