kuu7o/nitter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use custom icon font for a cleaner design

Browse Source
This commit is contained in:
Zed
2019-08-15 04:00:40 +02:00
parent 45d88da3d9
commit 768ec3632f
12 changed files with 192 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/general.nim
View File

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

10
src/views/profile.nim
View File

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

17
src/views/renderutils.nim
View File

@@ -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():

16
src/views/tweet.nim
View File

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