Properly display names, usernames and badges

This commit is contained in:
Zed 2019-06-24 20:45:03 +02:00
parent 6f932b53b0
commit b0b23800e1
4 changed files with 70 additions and 66 deletions

View file

@ -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 {

View file

@ -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")

View file

@ -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>

View file

@ -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">