Properly display names, usernames and badges

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 {

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}</{h}>"
-  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")

src/views/tweet.nim

@@ -16,9 +16,9 @@
 <div class="media-heading">
   <div class="heading-name-row">
     <img class="avatar" src=${tweet.profile.getUserpic("_bigger").getSigUrl("pic")}>
-    <div class="name-and-account-name">
-      ${linkUser(tweet.profile, "h4", class="username", username=false)}
-      ${linkUser(tweet.profile, "", class="account-name")}
+    <div class="fullname-and-username">
+      ${linkUser(tweet.profile, class="fullname")}
+      ${linkUser(tweet.profile, class="username")}
     </div>
     <span class="heading-right">
       <a href="${tweet.link}" class="timeago faint-link">
@@ -46,9 +46,9 @@
       </div>
     </div>
     #end if
-    <div class="profile-card-name">
-      ${linkUser(quote.profile, "b", class="username", username=false)}
-      ${linkUser(quote.profile, "span", class="account-name")}
+    <div class="fullname-and-username">
+      ${linkUser(quote.profile, class="fullname")}
+      ${linkUser(quote.profile, class="username")}
     </div>
     <div class="quote-text">${linkifyText(xmltree.escape(quote.text))}</div>
   </div>

src/views/user.nim

@@ -12,8 +12,8 @@
   </a>
   <div class="profile-card-tabs">
     <div class="profile-card-tabs-name">
-      ${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")}
     </div>
   </div>
   <div class="profile-card-extra">