Use custom icon font for a cleaner design
This commit is contained in:
Zed
parent
45d88da3d9
commit
768ec3632f
12 changed files with 192 additions and 49 deletions
53
public/css/fontello.css
vendored
Normal file
53
public/css/fontello.css
vendored
Normal file
|
|
@ -0,0 +1,53 @@
|
|||
@font-face {
|
||||
font-family: 'fontello';
|
||||
src: url('/fonts/fontello.eot?39973630');
|
||||
src: url('/fonts/fontello.eot?39973630#iefix') format('embedded-opentype'),
|
||||
url('/fonts/fontello.woff2?39973630') format('woff2'),
|
||||
url('/fonts/fontello.woff?39973630') format('woff'),
|
||||
url('/fonts/fontello.ttf?39973630') format('truetype'),
|
||||
url('/fonts/fontello.svg?39973630#fontello') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
[class^="icon-"]:before, [class*=" icon-"]:before {
|
||||
font-family: "fontello";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
speak: none;
|
||||
|
||||
display: inline-block;
|
||||
text-decoration: inherit;
|
||||
width: 1em;
|
||||
text-align: center;
|
||||
|
||||
/* For safety - reset parent styles, that can break glyph codes*/
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* fix buttons height, for twitter bootstrap */
|
||||
line-height: 1em;
|
||||
|
||||
/* Font smoothing. That was taken from TWBS */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icon-help-circled:before { content: '\e800'; } /* '' */
|
||||
.icon-attention:before { content: '\e801'; } /* '' */
|
||||
.icon-comment:before { content: '\e802'; } /* '' */
|
||||
.icon-ok:before { content: '\e803'; } /* '' */
|
||||
.icon-link:before { content: '\e805'; } /* '' */
|
||||
.icon-calendar:before { content: '\e806'; } /* '' */
|
||||
.icon-location:before { content: '\e807'; } /* '' */
|
||||
.icon-down-open-1:before { content: '\e808'; } /* '' */
|
||||
.icon-picture-1:before { content: '\e809'; } /* '' */
|
||||
.icon-lock-circled:before { content: '\e80a'; } /* '' */
|
||||
.icon-down-open:before { content: '\e80b'; } /* '' */
|
||||
.icon-info-circled:before { content: '\e80c'; } /* '' */
|
||||
.icon-retweet-1:before { content: '\e80d'; } /* '' */
|
||||
.icon-search:before { content: '\e80e'; } /* '' */
|
||||
.icon-pin:before { content: '\e80f'; } /* '' */
|
||||
.icon-ok-circled:before { content: '\e810'; } /* '' */
|
||||
.icon-cog-2:before { content: '\e812'; } /* '' */
|
||||
.icon-thumbs-up-alt:before { content: '\f164'; } /* '' */
|
||||
|
|
@ -107,29 +107,19 @@ a:hover {
|
|||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.icon {
|
||||
.verified-icon {
|
||||
color: #fff;
|
||||
background-color: #1da1f2;
|
||||
border-radius: 50%;
|
||||
flex-shrink: 0;
|
||||
margin: 2px 0 3px 3px;
|
||||
padding-top: 2px;
|
||||
height: 12px;
|
||||
width: 14px;
|
||||
font-size: 8px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
flex-shrink: 0;
|
||||
margin: 2px 0 3px 3px;
|
||||
}
|
||||
|
||||
.verified-icon {
|
||||
background-color: #1da1f2;
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.protected-icon {
|
||||
background-color: #353535;
|
||||
height: 18px;
|
||||
width: 18px;
|
||||
font-size: 12px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.tweet-date {
|
||||
|
|
@ -215,14 +205,14 @@ nav {
|
|||
height: 35px;
|
||||
}
|
||||
|
||||
.site-about {
|
||||
font-size: 17px;
|
||||
padding-right: 2px;
|
||||
margin-top: -0.75px;
|
||||
.item.right a {
|
||||
font-size: 16px;
|
||||
padding-left: 4px;
|
||||
}
|
||||
|
||||
.site-settings {
|
||||
font-size: 18px;
|
||||
.item.right a:hover {
|
||||
color: #ffaca0;
|
||||
text-decoration: unset;
|
||||
}
|
||||
|
||||
.attachments {
|
||||
|
|
@ -902,12 +892,8 @@ video, .video-container img {
|
|||
}
|
||||
|
||||
.quote-sensitive-icon {
|
||||
font-size: 25px;
|
||||
width: 37px;
|
||||
height: 32px;
|
||||
background-color: #4e4e4e;
|
||||
padding-bottom: 5px;
|
||||
margin: 0;
|
||||
font-size: 40px;
|
||||
color: #909090;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
|
@ -1119,3 +1105,7 @@ legend {
|
|||
margin-left: 6px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
display: inline;
|
||||
}
|
||||
39
public/fonts/LICENSE.txt
Normal file
39
public/fonts/LICENSE.txt
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
Font license info
|
||||
|
||||
|
||||
## Entypo
|
||||
|
||||
Copyright (C) 2012 by Daniel Bruce
|
||||
|
||||
Author: Daniel Bruce
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://www.entypo.com
|
||||
|
||||
|
||||
## MFG Labs
|
||||
|
||||
Copyright (C) 2012 by Daniel Bruce
|
||||
|
||||
Author: MFG Labs
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://www.mfglabs.com/
|
||||
|
||||
|
||||
## Font Awesome
|
||||
|
||||
Copyright (C) 2016 by Dave Gandy
|
||||
|
||||
Author: Dave Gandy
|
||||
License: SIL ()
|
||||
Homepage: http://fortawesome.github.com/Font-Awesome/
|
||||
|
||||
|
||||
## Elusive
|
||||
|
||||
Copyright (C) 2013 by Aristeides Stathopoulos
|
||||
|
||||
Author: Aristeides Stathopoulos
|
||||
License: SIL (http://scripts.sil.org/OFL)
|
||||
Homepage: http://aristeides.com/
|
||||
|
||||
|
||||
BIN
public/fonts/fontello.eot
Normal file
BIN
public/fonts/fontello.eot
Normal file
Binary file not shown.
46
public/fonts/fontello.svg
Normal file
46
public/fonts/fontello.svg
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>Copyright (C) 2019 by original authors @ fontello.com</metadata>
|
||||
<defs>
|
||||
<font id="fontello" horiz-adv-x="1000" >
|
||||
<font-face font-family="fontello" font-weight="400" font-stretch="normal" units-per-em="1000" ascent="850" descent="-150" />
|
||||
<missing-glyph horiz-adv-x="1000" />
|
||||
<glyph glyph-name="help-circled" unicode="" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m-2-740q30 0 49 19t19 47q2 30-17 49t-49 19l-2 0q-28 0-47-18t-21-46q0-30 19-49t47-21l2 0z m166 328q26 34 26 78 0 78-54 116-52 38-134 38-64 0-104-26-68-42-72-146l0-4 110 0 0 4q0 26 16 54 16 24 54 24 40 0 52-20 16-20 16-44 0-18-16-40-8-12-20-20l-6-4q-6-4-16-11t-20-15-21-17-17-17q-14-20-18-78l0-8 108 0 0 4q0 12 4 28 6 20 28 36l28 18q46 34 56 50z" horiz-adv-x="920" />
|
||||
|
||||
<glyph glyph-name="attention" unicode="" d="M0 350q0 95 37 182t100 149 149 100 183 37q95 0 181-37t150-100 100-149 37-182q0-95-37-182t-100-150-150-100-181-37q-96 0-183 37t-149 100-100 150-37 182z m387 196l27-244q2-21 17-35t36-17q24-3 43 12t21 40l27 244v17q-4 35-31 58t-63 19-58-31-19-63z m12-411q0-30 22-52t51-21 52 21 22 52-22 52q-20 20-52 20t-51-20q-22-22-22-52z" horiz-adv-x="937.5" />
|
||||
|
||||
<glyph glyph-name="comment" unicode="" d="M1000 350q0-97-67-179t-182-130-251-48q-39 0-81 4-110-97-257-135-27-8-63-12-10-1-17 5t-10 16v1q-2 2 0 6t1 6 2 5l4 5t4 5 4 5q4 5 17 19t20 22 17 22 18 28 15 33 15 42q-88 50-138 123t-51 157q0 73 40 139t106 114 160 76 194 28q136 0 251-48t182-130 67-179z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="ok" unicode="" d="M0 260l162 162 166-164 508 510 164-164-510-510-162-162-162 164z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="link" unicode="" d="M294 116q14 14 34 14t36-14q32-34 0-70l-42-40q-56-56-132-56-78 0-134 56t-56 132q0 78 56 134l148 148q70 68 144 77t128-43q16-16 16-36t-16-36q-36-32-70 0-50 48-132-34l-148-146q-26-26-26-64t26-62q26-26 63-26t63 26z m450 574q56-56 56-132 0-78-56-134l-158-158q-74-72-150-72-62 0-112 50-14 14-14 34t14 36q14 14 35 14t35-14q50-48 122 24l158 156q28 28 28 64 0 38-28 62-24 26-56 31t-60-21l-50-50q-16-14-36-14t-34 14q-34 34 0 70l50 50q54 54 127 51t129-61z" horiz-adv-x="800" />
|
||||
|
||||
<glyph glyph-name="calendar" unicode="" d="M800 700q42 0 71-29t29-71l0-600q0-40-29-70t-71-30l-700 0q-40 0-70 30t-30 70l0 600q0 42 30 71t70 29l46 0 0-100 160 0 0 100 290 0 0-100 160 0 0 100 44 0z m0-700l0 400-700 0 0-400 700 0z m-540 800l0-170-70 0 0 170 70 0z m450 0l0-170-70 0 0 170 70 0z" horiz-adv-x="900" />
|
||||
|
||||
<glyph glyph-name="location" unicode="" d="M250 750q104 0 177-73t73-177q0-106-62-243t-126-223l-62-84q-10 12-27 35t-60 89-76 130-60 147-27 149q0 104 73 177t177 73z m0-388q56 0 96 40t40 96-40 95-96 39-95-39-39-95 39-96 95-40z" horiz-adv-x="500" />
|
||||
|
||||
<glyph glyph-name="down-open-1" unicode="" d="M564 422l-234-224q-18-18-40-18t-40 18l-234 224q-16 16-16 41t16 41q38 38 78 0l196-188 196 188q40 38 78 0 16-16 16-41t-16-41z" horiz-adv-x="580" />
|
||||
|
||||
<glyph glyph-name="picture-1" unicode="" d="M357 529q0-45-31-76t-76-32-76 32-31 76 31 76 76 31 76-31 31-76z m572-215v-250h-786v107l178 179 90-89 285 285z m53 393h-893q-7 0-12-5t-6-13v-678q0-7 6-13t12-5h893q7 0 13 5t5 13v678q0 8-5 13t-13 5z m89-18v-678q0-37-26-63t-63-27h-893q-36 0-63 27t-26 63v678q0 37 26 63t63 27h893q37 0 63-27t26-63z" horiz-adv-x="1071.4" />
|
||||
|
||||
<glyph glyph-name="lock-circled" unicode="" d="M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m252-271l496 0 0 314-82 0 0 59q0 33-14 66-19 45-62 74t-94 30-92-29-62-75q-16-35-14-125l-76 0 0-314z m176 314l0 59q2 31 19 49t45 21l4 0q29-2 49-22t21-48l0-59-138 0z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="down-open" unicode="" d="M939 399l-414-413q-10-11-25-11t-25 11l-414 413q-11 11-11 26t11 25l93 92q10 11 25 11t25-11l296-296 296 296q11 11 25 11t26-11l92-92q11-11 11-25t-11-26z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="info-circled" unicode="" d="M454 810q190 2 326-130t140-322q2-190-131-327t-323-141q-190-2-327 131t-139 323q-4 190 130 327t324 139z m52-152q-42 0-65-24t-23-50q-2-28 15-44t49-16q38 0 61 22t23 54q0 58-60 58z m-120-594q30 0 84 26t106 78l-18 24q-48-36-72-36-14 0-4 38l42 160q26 96-22 96-30 0-89-29t-115-75l16-26q52 34 74 34 12 0 0-34l-36-152q-26-104 34-104z" horiz-adv-x="920" />
|
||||
|
||||
<glyph glyph-name="retweet-1" unicode="" d="M714 11q0-7-5-13t-13-5h-535q-5 0-8 1t-5 4-3 4-2 7 0 6v335h-107q-15 0-25 11t-11 25q0 13 8 23l179 214q11 12 27 12t28-12l178-214q9-10 9-23 0-15-11-25t-25-11h-107v-214h321q9 0 14-6l89-108q4-5 4-11z m357 232q0-13-8-23l-178-214q-12-13-28-13t-27 13l-179 214q-8 10-8 23 0 14 11 25t25 11h107v214h-322q-9 0-14 7l-89 107q-4 5-4 11 0 7 5 12t13 6h536q4 0 7-1t5-4 3-5 2-6 1-7v-334h107q14 0 25-11t10-25z" horiz-adv-x="1071.4" />
|
||||
|
||||
<glyph glyph-name="search" unicode="" d="M772 78q30-34 6-62l-46-46q-36-32-68 0l-190 190q-74-42-156-42-128 0-223 95t-95 223 90 219 218 91 224-95 96-223q0-88-46-162z m-678 358q0-88 68-156t156-68 151 63 63 153q0 88-68 155t-156 67-151-63-63-151z" horiz-adv-x="789" />
|
||||
|
||||
<glyph glyph-name="pin" unicode="" d="M268 368v250q0 8-5 13t-13 5-13-5-5-13v-250q0-8 5-13t13-5 13 5 5 13z m375-197q0-14-11-25t-25-10h-239l-29-270q-1-7-6-11t-11-5h-1q-15 0-17 15l-43 271h-225q-15 0-25 10t-11 25q0 69 44 124t99 55v286q-29 0-50 21t-22 50 22 50 50 22h357q29 0 50-22t21-50-21-50-50-21v-286q55 0 99-55t44-124z" horiz-adv-x="642.9" />
|
||||
|
||||
<glyph glyph-name="ok-circled" unicode="" d="M0 350q0 207 147 354t353 146 354-146 146-354-146-354-354-146-353 146-147 354z m182-57l105-105 104-104 103 104 324 324-103 104-324-325-106 106z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="cog-2" unicode="" d="M0 272l0 156 150 16q14 45 38 88l-96 117 109 109 117-95q41 23 88 37l16 150 156 0 16-150q45-14 88-37l117 95 109-109-96-117q24-43 38-88l150-16 0-156-150-16q-14-47-38-88l96-117-109-109-117 96q-43-24-88-38l-16-150-156 0-16 150q-47 14-88 38l-117-96-109 109 96 117q-24 41-38 88z m355 78q0-60 42-102t103-42 103 42 42 102-42 103-103 42-103-42-42-103z" horiz-adv-x="1000" />
|
||||
|
||||
<glyph glyph-name="thumbs-up-alt" unicode="" d="M143 100q0 15-11 25t-25 11q-15 0-25-11t-11-25q0-15 11-25t25-11q15 0 25 11t11 25z m89 286v-357q0-15-10-25t-26-11h-160q-15 0-25 11t-11 25v357q0 14 11 25t25 10h160q15 0 26-10t10-25z m661 0q0-48-31-83 9-25 9-43 1-42-24-76 9-31 0-66-9-31-31-52 5-62-27-101-36-43-110-44h-72q-37 0-80 9t-68 16-67 22q-69 24-88 25-15 0-25 11t-11 25v357q0 14 10 25t24 11q13 1 42 33t57 67q38 49 56 67 10 10 17 27t10 27 8 34q4 22 7 34t11 29 19 28q10 11 25 11 25 0 46-6t33-15 22-22 14-25 7-28 2-25 1-22q0-21-6-43t-10-33-16-31q-1-4-5-10t-6-13-5-13h155q43 0 75-32t32-75z" horiz-adv-x="928.6" />
|
||||
</font>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.7 KiB |
BIN
public/fonts/fontello.ttf
Normal file
BIN
public/fonts/fontello.ttf
Normal file
Binary file not shown.
BIN
public/fonts/fontello.woff
Normal file
BIN
public/fonts/fontello.woff
Normal file
Binary file not shown.
BIN
public/fonts/fontello.woff2
Normal file
BIN
public/fonts/fontello.woff2
Normal file
Binary file not shown.
|
|
@ -1,5 +1,6 @@
|
|||
import karax/[karaxdsl, vdom]
|
||||
|
||||
import renderutils
|
||||
import ../utils, ../types
|
||||
|
||||
const doctype = "<!DOCTYPE html>\n"
|
||||
|
|
@ -13,14 +14,15 @@ proc renderNavbar*(title: string): VNode =
|
|||
a(href="/"): img(class="site-logo", src="/logo.png")
|
||||
|
||||
tdiv(class="item right"):
|
||||
a(class="site-about", href="/about"): text "🛈"
|
||||
a(class="site-prefs", href="/settings"): text "⚙"
|
||||
icon "info-circled", title="About", href="/about"
|
||||
icon "cog-2", title="Preferences", href="/settings"
|
||||
|
||||
proc renderMain*(body: VNode; prefs: Prefs; title="Nitter"; titleText=""; desc="";
|
||||
`type`="article"; video=""; images: seq[string] = @[]): string =
|
||||
let node = buildHtml(html(lang="en")):
|
||||
head:
|
||||
link(rel="stylesheet", `type`="text/css", href="/style.css")
|
||||
link(rel="stylesheet", `type`="text/css", href="/css/style.css")
|
||||
link(rel="stylesheet", `type`="text/css", href="/css/fontello.css")
|
||||
|
||||
title:
|
||||
if titleText.len > 0:
|
||||
|
|
@ -53,7 +55,7 @@ proc renderSearch*(): VNode =
|
|||
tdiv(class="search-panel"):
|
||||
form(`method`="post", action="search"):
|
||||
input(`type`="text", name="query", autofocus="", placeholder="Enter usernames...")
|
||||
button(`type`="submit"): text "🔎"
|
||||
button(`type`="submit"): icon "search"
|
||||
|
||||
proc renderError*(error: string): VNode =
|
||||
buildHtml(tdiv(class="panel")):
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
import strutils, strformat
|
||||
import karax/[karaxdsl, vdom, vstyles]
|
||||
|
||||
import ../types, ../utils, ../formatters
|
||||
import tweet, timeline, renderutils
|
||||
import ../types, ../utils, ../formatters
|
||||
|
||||
proc renderStat(num, class: string; text=""): VNode =
|
||||
let t = if text.len > 0: text else: class
|
||||
|
|
@ -27,17 +27,17 @@ proc renderProfileCard*(profile: Profile): VNode =
|
|||
|
||||
if profile.location.len > 0:
|
||||
tdiv(class="profile-location"):
|
||||
span: text "📍 " & profile.location
|
||||
span: icon "location", profile.location
|
||||
|
||||
if profile.website.len > 0:
|
||||
tdiv(class="profile-website"):
|
||||
span:
|
||||
text "🔗 "
|
||||
icon "link"
|
||||
linkText(profile.website)
|
||||
|
||||
tdiv(class="profile-joindate"):
|
||||
span(title=getJoinDateFull(profile)):
|
||||
text "📅 " & getJoinDate(profile)
|
||||
icon "calendar", getJoinDate(profile)
|
||||
|
||||
tdiv(class="profile-card-extra-links"):
|
||||
ul(class="profile-statlist"):
|
||||
|
|
@ -50,7 +50,7 @@ proc renderPhotoRail(profile: Profile; photoRail: seq[GalleryPhoto]): VNode =
|
|||
buildHtml(tdiv(class="photo-rail-card")):
|
||||
tdiv(class="photo-rail-header"):
|
||||
a(href=(&"/{profile.username}/media")):
|
||||
text &"🖼 {profile.media} Photos and videos"
|
||||
icon "picture-1", $profile.media & " Photos and videos"
|
||||
|
||||
tdiv(class="photo-rail-grid"):
|
||||
for i, photo in photoRail:
|
||||
|
|
|
|||
|
|
@ -2,6 +2,18 @@ import karax/[karaxdsl, vdom, vstyles]
|
|||
|
||||
import ../types, ../utils
|
||||
|
||||
proc icon*(icon: string; text=""; title=""; class=""; href=""): VNode =
|
||||
var c = "icon-" & icon
|
||||
if class.len > 0: c = c & " " & class
|
||||
buildHtml(tdiv(class="icon-container")):
|
||||
if href.len > 0:
|
||||
a(class=c, title=title, href=href)
|
||||
else:
|
||||
span(class=c, title=title)
|
||||
|
||||
if text.len > 0:
|
||||
text " " & text
|
||||
|
||||
proc linkUser*(profile: Profile, class=""): VNode =
|
||||
let
|
||||
isName = "username" notin class
|
||||
|
|
@ -12,9 +24,10 @@ proc linkUser*(profile: Profile, class=""): VNode =
|
|||
buildHtml(a(href=href, class=class, title=nameText)):
|
||||
text nameText
|
||||
if isName and profile.verified:
|
||||
span(class="icon verified-icon", title="Verified account"): text "✔"
|
||||
icon "ok", class="verified-icon", title="Verified account"
|
||||
if isName and profile.protected:
|
||||
span(class="icon protected-icon", title="Protected account"): text "🔒"
|
||||
text " "
|
||||
icon "lock-circled", title="Protected account"
|
||||
|
||||
proc genImg*(url: string; class=""): VNode =
|
||||
buildHtml():
|
||||
|
|
|
|||
|
|
@ -1,17 +1,18 @@
|
|||
import strutils, sequtils
|
||||
import karax/[karaxdsl, vdom, vstyles]
|
||||
|
||||
import ../types, ../utils, ../formatters
|
||||
import renderutils
|
||||
import ../types, ../utils, ../formatters
|
||||
|
||||
proc renderHeader(tweet: Tweet): VNode =
|
||||
buildHtml(tdiv):
|
||||
if tweet.retweet.isSome:
|
||||
tdiv(class="retweet"):
|
||||
span: text "🔄 " & get(tweet.retweet).by & " retweeted"
|
||||
span: icon "retweet-1", get(tweet.retweet).by & " retweeted"
|
||||
|
||||
if tweet.pinned:
|
||||
tdiv(class="pinned"):
|
||||
span: text "📌 Pinned Tweet"
|
||||
span: icon "pin", "Pinned Tweet"
|
||||
|
||||
tdiv(class="tweet-header"):
|
||||
a(class="tweet-avatar", href=("/" & tweet.profile.username)):
|
||||
|
|
@ -70,7 +71,6 @@ proc renderGif(gif: Gif; prefs: Prefs): VNode =
|
|||
let thumb = gif.thumb.getSigUrl("pic")
|
||||
let url = gif.url.getSigUrl("video")
|
||||
if prefs.autoplayGifs:
|
||||
|
||||
video(class="gif", poster=thumb, autoplay="", muted="", loop=""):
|
||||
source(src=url, `type`="video/mp4")
|
||||
else:
|
||||
|
|
@ -117,9 +117,9 @@ proc renderCard(card: Card; prefs: Prefs): VNode =
|
|||
|
||||
proc renderStats(stats: TweetStats): VNode =
|
||||
buildHtml(tdiv(class="tweet-stats")):
|
||||
span(class="tweet-stat"): text "💬 " & $stats.replies
|
||||
span(class="tweet-stat"): text "🔄 " & $stats.retweets
|
||||
span(class="tweet-stat"): text "👍 " & $stats.likes
|
||||
span(class="tweet-stat"): icon "comment", $stats.replies
|
||||
span(class="tweet-stat"): icon "retweet-1", $stats.retweets
|
||||
span(class="tweet-stat"): icon "thumbs-up-alt", $stats.likes
|
||||
|
||||
proc renderReply(tweet: Tweet): VNode =
|
||||
buildHtml(tdiv(class="replying-to")):
|
||||
|
|
@ -145,7 +145,7 @@ proc renderQuoteMedia(quote: Quote): VNode =
|
|||
tdiv(class="quote-badge-text"): text quote.badge
|
||||
elif quote.sensitive:
|
||||
tdiv(class="quote-sensitive"):
|
||||
span(class="icon quote-sensitive-icon"): text "❗"
|
||||
icon "attention", class="quote-sensitive-icon"
|
||||
|
||||
proc renderQuote(quote: Quote): VNode =
|
||||
if not quote.available:
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue