Add time range to search panel
This commit is contained in:
parent
70f89a9502
commit
8324508b2c
|
@ -15,7 +15,7 @@ const
|
|||
# Experimental, this might break in the future
|
||||
# Till then, it results in shorter urls
|
||||
const
|
||||
posPrefix = "thGAVUV0VFVBa"
|
||||
posPrefix = "thGAVUV0VFVB"
|
||||
posSuffix = "EjUAFQAlAFUAFQAA"
|
||||
|
||||
template `@`(param: string): untyped =
|
||||
|
@ -28,6 +28,8 @@ proc initQuery*(pms: Table[string, string]; name=""): Query =
|
|||
text: @"text",
|
||||
filters: validFilters.filterIt("f-" & it in pms),
|
||||
excludes: validFilters.filterIt("e-" & it in pms),
|
||||
since: @"since",
|
||||
until: @"until"
|
||||
)
|
||||
|
||||
if name.len > 0:
|
||||
|
@ -71,6 +73,10 @@ proc genQueryParam*(query: Query): string =
|
|||
filters.add "-filter:" & e
|
||||
|
||||
result = strip(param & filters.join(&" {query.sep} "))
|
||||
if query.since.len > 0:
|
||||
result &= " since:" & query.since
|
||||
if query.until.len > 0:
|
||||
result &= " until:" & query.until
|
||||
if query.text.len > 0:
|
||||
result &= " " & query.text
|
||||
|
||||
|
@ -96,6 +102,11 @@ proc genQueryUrl*(query: Query): string =
|
|||
for i in query.excludes:
|
||||
params.add "i-" & i & "=on"
|
||||
|
||||
if query.since.len > 0:
|
||||
params.add "since=" & query.since
|
||||
if query.until.len > 0:
|
||||
params.add "until=" & query.until
|
||||
|
||||
if params.len > 0:
|
||||
result &= params.join("&")
|
||||
|
||||
|
@ -103,4 +114,6 @@ proc cleanPos*(pos: string): string =
|
|||
pos.multiReplace((posPrefix, ""), (posSuffix, ""))
|
||||
|
||||
proc genPos*(pos: string): string =
|
||||
posPrefix & pos & posSuffix
|
||||
result = posPrefix & pos
|
||||
if "A==" notin result:
|
||||
result &= posSuffix
|
||||
|
|
|
@ -12,7 +12,8 @@ button {
|
|||
float: right;
|
||||
}
|
||||
|
||||
input[type="text"] {
|
||||
input[type="text"],
|
||||
input[type="date"] {
|
||||
@include input-colors;
|
||||
background-color: $bg_elements;
|
||||
padding: 1px 4px;
|
||||
|
@ -22,6 +23,38 @@ input[type="text"] {
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="date"]::-webkit-inner-spin-button {
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
input::-webkit-datetime-edit-day-field:focus,
|
||||
input::-webkit-datetime-edit-month-field:focus,
|
||||
input::-webkit-datetime-edit-year-field:focus {
|
||||
background-color: $accent;
|
||||
color: $fg_color;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.date-range {
|
||||
display: block;
|
||||
|
||||
.icon-container {
|
||||
margin-left: -22px;
|
||||
margin-right: 4px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.search-title {
|
||||
margin: 0 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.icon-button button {
|
||||
color: $accent;
|
||||
text-decoration: none;
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
@include input-colors;
|
||||
}
|
||||
|
||||
@include create-toggle(search-panel, 140px);
|
||||
@include create-toggle(search-panel, 190px);
|
||||
}
|
||||
|
||||
.search-panel {
|
||||
|
@ -82,14 +82,14 @@
|
|||
}
|
||||
|
||||
.profile-tabs {
|
||||
@include search-resize(785px, 5, 185px);
|
||||
@include search-resize(725px, 4, 185px);
|
||||
@include search-resize(600px, 6, 140px);
|
||||
@include search-resize(530px, 5, 185px);
|
||||
@include search-resize(475px, 4, 185px);
|
||||
@include search-resize(406px, 3, 250px);
|
||||
@include search-resize(785px, 5, 240px);
|
||||
@include search-resize(725px, 4, 240px);
|
||||
@include search-resize(600px, 6, 190px);
|
||||
@include search-resize(530px, 5, 240px);
|
||||
@include search-resize(480px, 4, 240px);
|
||||
@include search-resize(410px, 3, 305px);
|
||||
}
|
||||
|
||||
@include search-resize(530px, 5, 185px);
|
||||
@include search-resize(475px, 4, 185px);
|
||||
@include search-resize(406px, 3, 250px);
|
||||
@include search-resize(530px, 5, 240px);
|
||||
@include search-resize(480px, 4, 240px);
|
||||
@include search-resize(410px, 3, 305px);
|
||||
|
|
|
@ -66,6 +66,8 @@ type
|
|||
includes*: seq[string]
|
||||
excludes*: seq[string]
|
||||
fromUser*: seq[string]
|
||||
since*: string
|
||||
until*: string
|
||||
sep*: string
|
||||
|
||||
Result*[T] = ref object
|
||||
|
|
|
@ -83,3 +83,8 @@ proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
|
|||
option(value=opt, selected=""): text opt
|
||||
else:
|
||||
option(value=opt): text opt
|
||||
|
||||
proc genDate*(pref, state: string): VNode =
|
||||
buildHtml(span):
|
||||
verbatim &"<input name={pref} type=\"date\" value=\"{state}\"/>"
|
||||
icon "calendar"
|
||||
|
|
|
@ -76,6 +76,12 @@ proc renderSearchPanel*(query: Query): VNode =
|
|||
else: k in query.excludes
|
||||
genCheckbox(&"{f[0]}-{k}", v, state)
|
||||
|
||||
span(class="search-title"): text "Time range"
|
||||
tdiv(class="date-range"):
|
||||
genDate("since", query.since)
|
||||
span(class="search-title"): text "-"
|
||||
genDate("until", query.until)
|
||||
|
||||
proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode =
|
||||
let query = tweets.query
|
||||
buildHtml(tdiv(class="timeline-container")):
|
||||
|
|
Loading…
Reference in New Issue