Properly display names, usernames and badges
This commit is contained in:
Zed
parent
6f932b53b0
commit
b0b23800e1
4 changed files with 70 additions and 66 deletions
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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")
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in a new issue