mirror of
https://github.com/zedeus/nitter.git
synced 2024-12-13 03:26:30 +00:00
Redesign and fix search, add custom timeline tab
This commit is contained in:
parent
c1a136c6db
commit
7d7eb085ca
14 changed files with 242 additions and 273 deletions
|
@ -1,4 +1,4 @@
|
||||||
import strutils, strformat, sequtils
|
import strutils, strformat, sequtils, tables
|
||||||
|
|
||||||
import types
|
import types
|
||||||
|
|
||||||
|
@ -11,13 +11,6 @@ const
|
||||||
"replies", "retweets", "nativeretweets",
|
"replies", "retweets", "nativeretweets",
|
||||||
"verified", "safe"
|
"verified", "safe"
|
||||||
]
|
]
|
||||||
commonFilters* = @[
|
|
||||||
"media", "videos", "images", "links", "news", "quote"
|
|
||||||
]
|
|
||||||
advancedFilters* = @[
|
|
||||||
"mentions", "verified", "safe", "twimg", "native_video",
|
|
||||||
"consumer_video", "pro_video"
|
|
||||||
]
|
|
||||||
|
|
||||||
# Experimental, this might break in the future
|
# Experimental, this might break in the future
|
||||||
# Till then, it results in shorter urls
|
# Till then, it results in shorter urls
|
||||||
|
@ -25,18 +18,22 @@ const
|
||||||
posPrefix = "thGAVUV0VFVBa"
|
posPrefix = "thGAVUV0VFVBa"
|
||||||
posSuffix = "EjUAFQAlAFUAFQAA"
|
posSuffix = "EjUAFQAlAFUAFQAA"
|
||||||
|
|
||||||
proc initQuery*(filters, includes, excludes, separator, text: string; name=""): Query =
|
template `@`(param: string): untyped =
|
||||||
var sep = separator.strip().toUpper()
|
if param in pms: pms[param]
|
||||||
Query(
|
else: ""
|
||||||
kind: custom,
|
|
||||||
text: text,
|
proc initQuery*(pms: Table[string, string]; name=""): Query =
|
||||||
filters: filters.split(",").filterIt(it in validFilters),
|
result = Query(
|
||||||
includes: includes.split(",").filterIt(it in validFilters),
|
kind: parseEnum[QueryKind](@"kind", custom),
|
||||||
excludes: excludes.split(",").filterIt(it in validFilters),
|
text: @"text",
|
||||||
fromUser: @[name],
|
fromUser: @[name],
|
||||||
sep: if sep in separators: sep else: ""
|
filters: validFilters.filterIt("f-" & it in pms),
|
||||||
|
excludes: validFilters.filterIt("e-" & it in pms),
|
||||||
)
|
)
|
||||||
|
|
||||||
|
if @"e-nativeretweets".len == 0:
|
||||||
|
result.includes.add "nativeretweets"
|
||||||
|
|
||||||
proc getMediaQuery*(name: string): Query =
|
proc getMediaQuery*(name: string): Query =
|
||||||
Query(
|
Query(
|
||||||
kind: media,
|
kind: media,
|
||||||
|
@ -88,16 +85,15 @@ proc genQueryUrl*(query: Query): string =
|
||||||
result &= &"/search?"
|
result &= &"/search?"
|
||||||
|
|
||||||
var params = @[&"kind={query.kind}"]
|
var params = @[&"kind={query.kind}"]
|
||||||
if query.filters.len > 0:
|
|
||||||
params &= "filter=" & query.filters.join(",")
|
|
||||||
if query.includes.len > 0:
|
|
||||||
params &= "include=" & query.includes.join(",")
|
|
||||||
if query.excludes.len > 0:
|
|
||||||
params &= "not=" & query.excludes.join(",")
|
|
||||||
if query.sep.len > 0:
|
|
||||||
params &= "sep=" & query.sep
|
|
||||||
if query.text.len > 0:
|
if query.text.len > 0:
|
||||||
params &= "text=" & query.text
|
params.add "text=" & query.text
|
||||||
|
for f in query.filters:
|
||||||
|
params.add "f-" & f & "=on"
|
||||||
|
for e in query.excludes:
|
||||||
|
params.add "e-" & e & "=on"
|
||||||
|
for i in query.excludes:
|
||||||
|
params.add "i-" & i & "=on"
|
||||||
|
|
||||||
if params.len > 0:
|
if params.len > 0:
|
||||||
result &= params.join("&")
|
result &= params.join("&")
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,4 @@
|
||||||
import strutils, uri
|
import strutils, sequtils, uri
|
||||||
|
|
||||||
import jester
|
import jester
|
||||||
|
|
||||||
|
@ -14,24 +14,7 @@ proc createSearchRouter*(cfg: Config) =
|
||||||
if @"text".len > 200:
|
if @"text".len > 200:
|
||||||
resp Http400, showError("Search input too long.", cfg.title)
|
resp Http400, showError("Search input too long.", cfg.title)
|
||||||
|
|
||||||
let kind = parseEnum[QueryKind](@"kind", custom)
|
let query = initQuery(params(request))
|
||||||
var query = Query(kind: kind, text: @"text")
|
|
||||||
|
|
||||||
if @"retweets".len == 0:
|
|
||||||
query.excludes.add "nativeretweets"
|
|
||||||
else:
|
|
||||||
query.includes.add "nativeretweets"
|
|
||||||
|
|
||||||
if @"replies".len == 0:
|
|
||||||
query.excludes.add "replies"
|
|
||||||
else:
|
|
||||||
query.includes.add "replies"
|
|
||||||
|
|
||||||
for f in validFilters:
|
|
||||||
if "f-" & f in params(request):
|
|
||||||
query.filters.add f
|
|
||||||
if "e-" & f in params(request):
|
|
||||||
query.excludes.add f
|
|
||||||
|
|
||||||
case query.kind
|
case query.kind
|
||||||
of users:
|
of users:
|
||||||
|
|
|
@ -64,7 +64,7 @@ proc showTimeline*(name, after: string; query: Option[Query];
|
||||||
else:
|
else:
|
||||||
let
|
let
|
||||||
timeline = await fetchMultiTimeline(names, after, agent, query)
|
timeline = await fetchMultiTimeline(names, after, agent, query)
|
||||||
html = renderTimelineSearch(timeline, prefs, path)
|
html = renderTweetSearch(timeline, prefs, path)
|
||||||
return renderMain(html, prefs, title, "Multi")
|
return renderMain(html, prefs, title, "Multi")
|
||||||
|
|
||||||
template respTimeline*(timeline: typed) =
|
template respTimeline*(timeline: typed) =
|
||||||
|
@ -84,9 +84,9 @@ proc createTimelineRouter*(cfg: Config) =
|
||||||
|
|
||||||
get "/@name/search":
|
get "/@name/search":
|
||||||
cond '.' notin @"name"
|
cond '.' notin @"name"
|
||||||
let query = some initQuery(@"filter", @"include", @"not", @"sep", @"text", @"name")
|
let query = some initQuery(params(request), name=(@"name"))
|
||||||
respTimeline(await showTimeline(@"name", @"after", query,
|
respTimeline(await showTimeline(@"name", @"after", query, cookiePrefs(),
|
||||||
cookiePrefs(), getPath(), cfg.title, ""))
|
getPath(), cfg.title, ""))
|
||||||
|
|
||||||
get "/@name/replies":
|
get "/@name/replies":
|
||||||
cond '.' notin @"name"
|
cond '.' notin @"name"
|
||||||
|
|
|
@ -35,106 +35,3 @@
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-field {
|
|
||||||
margin: 2px 5px;
|
|
||||||
|
|
||||||
.pref-group.pref-input {
|
|
||||||
display: inline-block;
|
|
||||||
width: calc(90% - 11px);
|
|
||||||
}
|
|
||||||
|
|
||||||
input[type="text"] {
|
|
||||||
width: calc(100% - 8px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-label {
|
|
||||||
background-color: #121212;
|
|
||||||
color: #F8F8F2;
|
|
||||||
border: 1px solid #FF6C6091;
|
|
||||||
padding: 1px 6px 2px 6px;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
margin-left: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.panel-label:hover {
|
|
||||||
border: 1px solid #FF6C60;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#panel-toggle {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&:checked ~ .search-panel {
|
|
||||||
max-height: 180px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.pannel-label {
|
|
||||||
display: inline;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-panel {
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.4s;
|
|
||||||
|
|
||||||
margin: 5px;
|
|
||||||
font-weight: initial;
|
|
||||||
text-align: left;
|
|
||||||
|
|
||||||
> div {
|
|
||||||
line-height: 1.7em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-container {
|
|
||||||
display: inline;
|
|
||||||
padding-right: unset;
|
|
||||||
margin-left: 23px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox {
|
|
||||||
right: unset;
|
|
||||||
left: -22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-container .checkbox:after {
|
|
||||||
top: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.search-title {
|
|
||||||
font-weight: bold;
|
|
||||||
min-width: 60px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.exclude-extras {
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#exclude-toggle {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&:checked ~ .exclude-extras {
|
|
||||||
max-height: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.filter-extras {
|
|
||||||
max-height: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: max-height 0.4s;
|
|
||||||
}
|
|
||||||
|
|
||||||
#filter-toggle {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&:checked ~ .filter-extras {
|
|
||||||
max-height: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
|
@ -58,3 +58,29 @@
|
||||||
border-color: $accent_light;
|
border-color: $accent_light;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@mixin search-resize($width, $rows, $height) {
|
||||||
|
@media(max-width: $width) {
|
||||||
|
.search-toggles {
|
||||||
|
grid-template-columns: repeat($rows, auto);
|
||||||
|
}
|
||||||
|
|
||||||
|
#search-panel-toggle:checked ~ .search-panel {
|
||||||
|
max-height: $height !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin create-toggle($elem, $height) {
|
||||||
|
##{$elem}-toggle {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:checked ~ .#{$elem} {
|
||||||
|
max-height: $height;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:checked ~ label .icon-down:before {
|
||||||
|
transform: rotate(180deg) translateY(-1px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
@ -6,6 +6,7 @@
|
||||||
@import 'navbar';
|
@import 'navbar';
|
||||||
@import 'inputs';
|
@import 'inputs';
|
||||||
@import 'timeline';
|
@import 'timeline';
|
||||||
|
@import 'search';
|
||||||
|
|
||||||
body {
|
body {
|
||||||
background-color: $bg_color;
|
background-color: $bg_color;
|
||||||
|
|
|
@ -16,13 +16,9 @@
|
||||||
&-header-mobile {
|
&-header-mobile {
|
||||||
padding: 5px 12px 0;
|
padding: 5px 12px 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
width: calc(100% - 24px);
|
||||||
|
|
||||||
&-label {
|
|
||||||
width: 100%;
|
|
||||||
float: unset;
|
float: unset;
|
||||||
color: $accent;
|
color: $accent;
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -57,13 +53,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#photo-rail-toggle {
|
@include create-toggle(photo-rail-grid, 640px);
|
||||||
display: none;
|
#photo-rail-grid-toggle:checked ~ .photo-rail-grid {
|
||||||
|
padding-bottom: 12px;
|
||||||
&:checked ~ .photo-rail-grid {
|
|
||||||
max-height: 600px;
|
|
||||||
padding-bottom: 12px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media(max-width: 600px) {
|
@media(max-width: 600px) {
|
||||||
|
@ -72,7 +64,7 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.photo-rail-header-mobile {
|
.photo-rail-header-mobile {
|
||||||
display: block;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
|
||||||
.photo-rail-grid {
|
.photo-rail-grid {
|
||||||
|
|
83
src/sass/search.scss
Normal file
83
src/sass/search.scss
Normal file
|
@ -0,0 +1,83 @@
|
||||||
|
@import '_variables';
|
||||||
|
@import '_mixins';
|
||||||
|
|
||||||
|
.search-title {
|
||||||
|
font-weight: bold;
|
||||||
|
display: inline-block;
|
||||||
|
margin-top: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-field {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
button {
|
||||||
|
margin: 0 2px 2px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pref-input {
|
||||||
|
margin: 0 4px 2px 0;
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type="text"] {
|
||||||
|
height: 20px;
|
||||||
|
width: calc(100% - 8px);
|
||||||
|
}
|
||||||
|
|
||||||
|
> label {
|
||||||
|
display: inline;
|
||||||
|
background-color: #121212;
|
||||||
|
color: #F8F8F2;
|
||||||
|
border: 1px solid #FF6C6091;
|
||||||
|
padding: 1px 6px 2px 6px;
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 2px;
|
||||||
|
|
||||||
|
@include input-colors;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include create-toggle(search-panel, 140px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-panel {
|
||||||
|
max-height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.4s;
|
||||||
|
|
||||||
|
flex-grow: 1;
|
||||||
|
font-weight: initial;
|
||||||
|
text-align: left;
|
||||||
|
|
||||||
|
> div {
|
||||||
|
line-height: 1.7em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container {
|
||||||
|
display: inline;
|
||||||
|
padding-right: unset;
|
||||||
|
margin-bottom: unset;
|
||||||
|
margin-left: 23px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox {
|
||||||
|
right: unset;
|
||||||
|
left: -22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.checkbox-container .checkbox:after {
|
||||||
|
top: -4px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-toggles {
|
||||||
|
flex-grow: 1;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(6, auto);
|
||||||
|
grid-column-gap: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include search-resize(530px, 5, 185px);
|
||||||
|
@include search-resize(475px, 4, 185px);
|
||||||
|
@include search-resize(406px, 3, 250px);
|
|
@ -10,21 +10,16 @@
|
||||||
> div:not(:last-child) {
|
> div:not(:last-child) {
|
||||||
border-bottom: 1px solid $border_grey;
|
border-bottom: 1px solid $border_grey;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-header {
|
.timeline-header {
|
||||||
background-color: $bg_panel;
|
background-color: $bg_panel;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 10px;
|
padding: 8px;
|
||||||
display: block;
|
display: block;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-bottom: 5px;
|
margin-bottom: 5px;
|
||||||
|
|
||||||
input[type="text"] {
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
button {
|
||||||
float: unset;
|
float: unset;
|
||||||
}
|
}
|
||||||
|
@ -74,11 +69,6 @@
|
||||||
padding: 6px 0;
|
padding: 6px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.timeline-header {
|
|
||||||
background-color: $bg_panel;
|
|
||||||
padding: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline-protected {
|
.timeline-protected {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
|
|
||||||
|
|
|
@ -57,7 +57,7 @@ dbFromTypes("cache.db", "", "", "", [Profile, Video])
|
||||||
|
|
||||||
type
|
type
|
||||||
QueryKind* = enum
|
QueryKind* = enum
|
||||||
replies, media, multi, users, custom
|
posts, replies, media, multi, users, custom
|
||||||
|
|
||||||
Query* = object
|
Query* = object
|
||||||
kind*: QueryKind
|
kind*: QueryKind
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import strutils, strformat
|
import strutils, strformat
|
||||||
import karax/[karaxdsl, vdom, vstyles]
|
import karax/[karaxdsl, vdom, vstyles]
|
||||||
|
|
||||||
import tweet, timeline, renderutils
|
import renderutils, search
|
||||||
import ".."/[types, utils, formatters]
|
import ".."/[types, utils, formatters]
|
||||||
|
|
||||||
proc renderStat(num, class: string; text=""): VNode =
|
proc renderStat(num, class: string; text=""): VNode =
|
||||||
|
@ -54,11 +54,10 @@ proc renderPhotoRail(profile: Profile; photoRail: seq[GalleryPhoto]): VNode =
|
||||||
a(href=(&"/{profile.username}/media")):
|
a(href=(&"/{profile.username}/media")):
|
||||||
icon "picture", $profile.media & " Photos and videos"
|
icon "picture", $profile.media & " Photos and videos"
|
||||||
|
|
||||||
input(id="photo-rail-toggle", `type`="checkbox")
|
input(id="photo-rail-grid-toggle", `type`="checkbox")
|
||||||
tdiv(class="photo-rail-header-mobile"):
|
label(`for`="photo-rail-grid-toggle", class="photo-rail-header-mobile"):
|
||||||
label(`for`="photo-rail-toggle", class="photo-rail-label"):
|
icon "picture", $profile.media & " Photos and videos"
|
||||||
icon "picture", $profile.media & " Photos and videos"
|
icon "down"
|
||||||
icon "down"
|
|
||||||
|
|
||||||
tdiv(class="photo-rail-grid"):
|
tdiv(class="photo-rail-grid"):
|
||||||
for i, photo in photoRail:
|
for i, photo in photoRail:
|
||||||
|
@ -76,13 +75,17 @@ proc renderBanner(profile: Profile): VNode =
|
||||||
genImg(profile.banner)
|
genImg(profile.banner)
|
||||||
|
|
||||||
proc renderProtected(username: string): VNode =
|
proc renderProtected(username: string): VNode =
|
||||||
buildHtml(tdiv(class="timeline-container timeline")):
|
buildHtml(tdiv(class="timeline-container")):
|
||||||
tdiv(class="timeline-header timeline-protected"):
|
tdiv(class="timeline-container timeline"):
|
||||||
h2: text "This account's tweets are protected."
|
tdiv(class="timeline-header timeline-protected"):
|
||||||
p: text &"Only confirmed followers have access to @{username}'s tweets."
|
h2: text "This account's tweets are protected."
|
||||||
|
p: text &"Only confirmed followers have access to @{username}'s tweets."
|
||||||
|
|
||||||
proc renderProfile*(profile: Profile; timeline: Timeline;
|
proc renderProfile*(profile: Profile; timeline: Timeline;
|
||||||
photoRail: seq[GalleryPhoto]; prefs: Prefs; path: string): VNode =
|
photoRail: seq[GalleryPhoto]; prefs: Prefs; path: string): VNode =
|
||||||
|
if timeline.query.isNone:
|
||||||
|
timeline.query = some Query(fromUser: @[profile.username])
|
||||||
|
|
||||||
buildHtml(tdiv(class="profile-tabs")):
|
buildHtml(tdiv(class="profile-tabs")):
|
||||||
if not prefs.hideBanner:
|
if not prefs.hideBanner:
|
||||||
tdiv(class="profile-banner"):
|
tdiv(class="profile-banner"):
|
||||||
|
@ -94,9 +97,7 @@ proc renderProfile*(profile: Profile; timeline: Timeline;
|
||||||
if photoRail.len > 0:
|
if photoRail.len > 0:
|
||||||
renderPhotoRail(profile, photoRail)
|
renderPhotoRail(profile, photoRail)
|
||||||
|
|
||||||
tdiv(class="timeline-container"):
|
if profile.protected:
|
||||||
if profile.protected:
|
renderProtected(profile.username)
|
||||||
renderProtected(profile.username)
|
else:
|
||||||
else:
|
renderTweetSearch(timeline, prefs, path)
|
||||||
renderProfileTabs(timeline.query, profile.username)
|
|
||||||
renderTimelineTweets(timeline, prefs, path)
|
|
||||||
|
|
|
@ -59,8 +59,7 @@ proc buttonReferer*(action, text, path: string; class=""; `method`="post"): VNod
|
||||||
text text
|
text text
|
||||||
|
|
||||||
proc genCheckbox*(pref, label: string; state: bool): VNode =
|
proc genCheckbox*(pref, label: string; state: bool): VNode =
|
||||||
buildHtml(tdiv(class="pref-group")):
|
buildHtml(label(class="pref-group checkbox-container")):
|
||||||
label(class="checkbox-container"):
|
|
||||||
text label
|
text label
|
||||||
if state: input(name=pref, `type`="checkbox", checked="")
|
if state: input(name=pref, `type`="checkbox", checked="")
|
||||||
else: input(name=pref, `type`="checkbox")
|
else: input(name=pref, `type`="checkbox")
|
||||||
|
@ -83,4 +82,3 @@ proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
|
||||||
option(value=opt, selected=""): text opt
|
option(value=opt, selected=""): text opt
|
||||||
else:
|
else:
|
||||||
option(value=opt): text opt
|
option(value=opt): text opt
|
||||||
|
|
||||||
|
|
|
@ -1,9 +1,24 @@
|
||||||
import strutils, strformat, unicode
|
import strutils, strformat, unicode, tables
|
||||||
import karax/[karaxdsl, vdom, vstyles]
|
import karax/[karaxdsl, vdom, vstyles]
|
||||||
|
|
||||||
import renderutils, timeline
|
import renderutils, timeline
|
||||||
import ".."/[types, formatters, query]
|
import ".."/[types, formatters, query]
|
||||||
|
|
||||||
|
let toggles = {
|
||||||
|
"nativeretweets": "Retweets",
|
||||||
|
"media": "Media",
|
||||||
|
"videos": "Videos",
|
||||||
|
"news": "News",
|
||||||
|
"verified": "Verified",
|
||||||
|
"native_video": "Native videos",
|
||||||
|
"replies": "Replies",
|
||||||
|
"links": "Links",
|
||||||
|
"images": "Images",
|
||||||
|
"safe": "Safe",
|
||||||
|
"quote": "Quotes",
|
||||||
|
"pro_video": "Pro videos"
|
||||||
|
}.toOrderedTable
|
||||||
|
|
||||||
proc renderSearch*(): VNode =
|
proc renderSearch*(): VNode =
|
||||||
buildHtml(tdiv(class="panel-container")):
|
buildHtml(tdiv(class="panel-container")):
|
||||||
tdiv(class="search-bar"):
|
tdiv(class="search-bar"):
|
||||||
|
@ -12,55 +27,77 @@ proc renderSearch*(): VNode =
|
||||||
input(`type`="text", name="text", autofocus="", placeholder="Enter username...")
|
input(`type`="text", name="text", autofocus="", placeholder="Enter username...")
|
||||||
button(`type`="submit"): icon "search"
|
button(`type`="submit"): icon "search"
|
||||||
|
|
||||||
proc renderTimelineSearch*(timeline: Timeline; prefs: Prefs; path: string): VNode =
|
proc getTabClass(query: Option[Query]; tab: string): string =
|
||||||
let users =
|
var classes = @["tab-item"]
|
||||||
if timeline.query.isSome: get(timeline.query).fromUser
|
|
||||||
else: @[]
|
|
||||||
|
|
||||||
buildHtml(tdiv(class="timeline-container")):
|
if query.isNone or get(query).kind == multi:
|
||||||
tdiv(class="timeline-header"):
|
if tab == "posts":
|
||||||
text users.join(" | ")
|
classes.add "active"
|
||||||
|
elif $get(query).kind == tab:
|
||||||
|
classes.add "active"
|
||||||
|
|
||||||
renderProfileTabs(timeline.query, users.join(","))
|
return classes.join(" ")
|
||||||
renderTimelineTweets(timeline, prefs, path)
|
|
||||||
|
proc renderProfileTabs*(query: Option[Query]; username: string): VNode =
|
||||||
|
let link = "/" & username
|
||||||
|
buildHtml(ul(class="tab")):
|
||||||
|
li(class=query.getTabClass("posts")):
|
||||||
|
a(href=link): text "Tweets"
|
||||||
|
li(class=query.getTabClass("replies")):
|
||||||
|
a(href=(link & "/replies")): text "Tweets & Replies"
|
||||||
|
li(class=query.getTabClass("media")):
|
||||||
|
a(href=(link & "/media")): text "Media"
|
||||||
|
li(class=query.getTabClass("custom")):
|
||||||
|
a(href=(link & "/search")): text "Custom"
|
||||||
|
|
||||||
|
proc renderSearchTabs*(query: Option[Query]): VNode =
|
||||||
|
var q = if query.isSome: get(query) else: Query()
|
||||||
|
buildHtml(ul(class="tab")):
|
||||||
|
li(class=query.getTabClass("custom")):
|
||||||
|
q.kind = custom
|
||||||
|
a(href=genQueryUrl(q)): text "Tweets"
|
||||||
|
li(class=query.getTabClass("users")):
|
||||||
|
q.kind = users
|
||||||
|
a(href=genQueryUrl(q)): text "Users"
|
||||||
|
|
||||||
|
proc renderSearchPanel*(query: Query): VNode =
|
||||||
|
let user = query.fromUser.join(",")
|
||||||
|
let action = if user.len > 0: &"/{user}/search" else: "/search"
|
||||||
|
buildHtml(form(`method`="get", action=action, class="search-field")):
|
||||||
|
hiddenField("kind", "custom")
|
||||||
|
genInput("text", "", query.text, "Enter search...", class="pref-inline")
|
||||||
|
button(`type`="submit"): icon "search"
|
||||||
|
input(id="search-panel-toggle", `type`="checkbox")
|
||||||
|
label(`for`="search-panel-toggle"):
|
||||||
|
icon "down"
|
||||||
|
tdiv(class="search-panel"):
|
||||||
|
for f in @["filter", "exclude"]:
|
||||||
|
span(class="search-title"): text capitalize(f)
|
||||||
|
tdiv(class="search-toggles"):
|
||||||
|
for k, v in toggles:
|
||||||
|
let state =
|
||||||
|
if f == "filter": k in query.filters
|
||||||
|
else: k in query.excludes
|
||||||
|
genCheckbox(&"{f[0]}-{k}", v, state)
|
||||||
|
|
||||||
proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode =
|
proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode =
|
||||||
let query = if tweets.query.isSome: get(tweets.query) else: Query(kind: custom)
|
let query =
|
||||||
|
if tweets.query.isSome: get(tweets.query)
|
||||||
|
else: Query(kind: custom)
|
||||||
|
|
||||||
buildHtml(tdiv(class="timeline-container")):
|
buildHtml(tdiv(class="timeline-container")):
|
||||||
tdiv(class="timeline-header"):
|
if query.fromUser.len > 1:
|
||||||
form(`method`="get", action="/search", class="search-field"):
|
tdiv(class="timeline-header"):
|
||||||
hiddenField("kind", "custom")
|
text query.fromUser.join(" | ")
|
||||||
genInput("text", "", query.text, "Enter search...", class="pref-inline")
|
if query.fromUser.len == 0 or query.kind == custom:
|
||||||
button(`type`="submit"): icon "search"
|
tdiv(class="timeline-header"):
|
||||||
input(id="panel-toggle", `type`="checkbox")
|
renderSearchPanel(query)
|
||||||
label(`for`="panel-toggle", class="panel-label"):
|
|
||||||
icon "down"
|
|
||||||
tdiv(class="search-panel"):
|
|
||||||
tdiv:
|
|
||||||
span(class="search-title"): text "Include: "
|
|
||||||
genCheckbox("retweets", "Retweets", "nativeretweets" in query.includes)
|
|
||||||
genCheckbox("replies", "Replies", "replies" in query.includes)
|
|
||||||
|
|
||||||
for f in @["filter", "exclude"]:
|
if query.fromUser.len > 0:
|
||||||
tdiv:
|
renderProfileTabs(tweets.query, query.fromUser.join(","))
|
||||||
span(class="search-title"): text capitalize(f) & ":"
|
else:
|
||||||
for i in commonFilters:
|
renderSearchTabs(tweets.query)
|
||||||
let state =
|
|
||||||
if f == "filter": i in query.filters
|
|
||||||
else: i in query.excludes
|
|
||||||
genCheckbox(&"{f[0]}-{i}", capitalize(i), state)
|
|
||||||
input(id=(&"{f}-toggle"), `type`="checkbox")
|
|
||||||
label(`for`=(&"{f}-toggle"), class=(&"{f}-label")):
|
|
||||||
icon "down"
|
|
||||||
tdiv(class=(&"{f}-extras")):
|
|
||||||
for i in advancedFilters:
|
|
||||||
let state =
|
|
||||||
if f == "filter": i in query.filters
|
|
||||||
else: i in query.excludes
|
|
||||||
genCheckbox(&"{f[0]}-{i}", i, state)
|
|
||||||
|
|
||||||
renderSearchTabs(tweets.query)
|
|
||||||
renderTimelineTweets(tweets, prefs, path)
|
renderTimelineTweets(tweets, prefs, path)
|
||||||
|
|
||||||
proc renderUserSearch*(users: Result[Profile]; prefs: Prefs): VNode =
|
proc renderUserSearch*(users: Result[Profile]; prefs: Prefs): VNode =
|
||||||
|
@ -74,9 +111,6 @@ proc renderUserSearch*(users: Result[Profile]; prefs: Prefs): VNode =
|
||||||
hiddenField("kind", "users")
|
hiddenField("kind", "users")
|
||||||
genInput("text", "", searchText, "Enter username...", class="pref-inline")
|
genInput("text", "", searchText, "Enter username...", class="pref-inline")
|
||||||
button(`type`="submit"): icon "search"
|
button(`type`="submit"): icon "search"
|
||||||
input(id="panel-toggle", `type`="checkbox")
|
|
||||||
label(`for`="panel-toggle", class="panel-label"):
|
|
||||||
icon "down"
|
|
||||||
|
|
||||||
renderSearchTabs(users.query)
|
renderSearchTabs(users.query)
|
||||||
renderTimelineUsers(users, prefs)
|
renderTimelineUsers(users, prefs)
|
||||||
|
|
|
@ -12,38 +12,6 @@ proc getQuery(query: Option[Query]): string =
|
||||||
if result[^1] != '?':
|
if result[^1] != '?':
|
||||||
result &= "&"
|
result &= "&"
|
||||||
|
|
||||||
proc getTabClass(query: Option[Query]; tab: string): string =
|
|
||||||
var classes = @["tab-item"]
|
|
||||||
|
|
||||||
if query.isNone or get(query).kind == multi:
|
|
||||||
if tab == "posts":
|
|
||||||
classes.add "active"
|
|
||||||
elif $get(query).kind == tab:
|
|
||||||
classes.add "active"
|
|
||||||
|
|
||||||
return classes.join(" ")
|
|
||||||
|
|
||||||
proc renderProfileTabs*(query: Option[Query]; username: string): VNode =
|
|
||||||
let link = "/" & username
|
|
||||||
buildHtml(ul(class="tab")):
|
|
||||||
li(class=query.getTabClass("posts")):
|
|
||||||
a(href=link): text "Tweets"
|
|
||||||
li(class=query.getTabClass("replies")):
|
|
||||||
a(href=(link & "/replies")): text "Tweets & Replies"
|
|
||||||
li(class=query.getTabClass("media")):
|
|
||||||
a(href=(link & "/media")): text "Media"
|
|
||||||
|
|
||||||
proc renderSearchTabs*(query: Option[Query]): VNode =
|
|
||||||
var q = if query.isSome: get(query) else: Query()
|
|
||||||
|
|
||||||
buildHtml(ul(class="tab")):
|
|
||||||
li(class=query.getTabClass("custom")):
|
|
||||||
q.kind = custom
|
|
||||||
a(href=genQueryUrl(q)): text "Tweets"
|
|
||||||
li(class=query.getTabClass("users")):
|
|
||||||
q.kind = users
|
|
||||||
a(href=genQueryUrl(q)): text "Users"
|
|
||||||
|
|
||||||
proc renderNewer(query: Option[Query]): VNode =
|
proc renderNewer(query: Option[Query]): VNode =
|
||||||
buildHtml(tdiv(class="timeline-item show-more")):
|
buildHtml(tdiv(class="timeline-item show-more")):
|
||||||
a(href=(getQuery(query).strip(chars={'?', '&'}))):
|
a(href=(getQuery(query).strip(chars={'?', '&'}))):
|
||||||
|
|
Loading…
Reference in a new issue