Add location field to search panel

This commit is contained in:
Zed 2019-09-19 23:36:21 +02:00
parent 8324508b2c
commit 62df60be78
7 changed files with 73 additions and 22 deletions

View file

@ -29,7 +29,8 @@ proc initQuery*(pms: Table[string, string]; name=""): Query =
filters: validFilters.filterIt("f-" & it in pms), filters: validFilters.filterIt("f-" & it in pms),
excludes: validFilters.filterIt("e-" & it in pms), excludes: validFilters.filterIt("e-" & it in pms),
since: @"since", since: @"since",
until: @"until" until: @"until",
near: @"near"
) )
if name.len > 0: if name.len > 0:
@ -77,6 +78,8 @@ proc genQueryParam*(query: Query): string =
result &= " since:" & query.since result &= " since:" & query.since
if query.until.len > 0: if query.until.len > 0:
result &= " until:" & query.until result &= " until:" & query.until
if query.near.len > 0:
result &= &" near:\"{query.near}\" within:15mi"
if query.text.len > 0: if query.text.len > 0:
result &= " " & query.text result &= " " & query.text
@ -106,6 +109,8 @@ proc genQueryUrl*(query: Query): string =
params.add "since=" & query.since params.add "since=" & query.since
if query.until.len > 0: if query.until.len > 0:
params.add "until=" & query.until params.add "until=" & query.until
if query.near.len > 0:
params.add "near=" & query.near
if params.len > 0: if params.len > 0:
result &= params.join("&") result &= params.join("&")

View file

@ -59,14 +59,25 @@
} }
} }
@mixin search-resize($width, $rows, $height) { @mixin search-resize($width, $rows) {
@media(max-width: $width) { @media(max-width: $width) {
.search-toggles { .search-toggles {
grid-template-columns: repeat($rows, auto); grid-template-columns: repeat($rows, auto);
} }
#search-panel-toggle:checked ~ .search-panel { #search-panel-toggle:checked ~ .search-panel {
max-height: $height !important; @if $rows == 6 {
max-height: 200px !important;
}
@if $rows == 5 {
max-height: 300px !important;
}
@if $rows == 4 {
max-height: 300px !important;
}
@if $rows == 3 {
max-height: 365px !important;
}
} }
} }
} }

View file

@ -42,12 +42,16 @@ input::-webkit-datetime-edit-year-field:focus {
} }
.date-range { .date-range {
display: block; .date-input {
display: inline-block;
position: relative;
}
.icon-container { .icon-container {
margin-left: -22px;
margin-right: 4px;
pointer-events: none; pointer-events: none;
position: absolute;
top: 2px;
right: 5px;
} }
.search-title { .search-title {

View file

@ -40,7 +40,7 @@
@include input-colors; @include input-colors;
} }
@include create-toggle(search-panel, 190px); @include create-toggle(search-panel, 200px);
} }
.search-panel { .search-panel {
@ -74,6 +74,31 @@
} }
} }
.search-row {
display: flex;
flex-wrap: wrap;
line-height: unset;
> div {
flex-grow: 1;
flex-shrink: 1;
}
input {
height: 21px;
}
.pref-input {
display: block;
padding-bottom: 5px;
input {
height: 21px;
margin-top: 1px;
}
}
}
.search-toggles { .search-toggles {
flex-grow: 1; flex-grow: 1;
display: grid; display: grid;
@ -82,14 +107,14 @@
} }
.profile-tabs { .profile-tabs {
@include search-resize(785px, 5, 240px); @include search-resize(820px, 5);
@include search-resize(725px, 4, 240px); @include search-resize(725px, 4);
@include search-resize(600px, 6, 190px); @include search-resize(600px, 6);
@include search-resize(530px, 5, 240px); @include search-resize(560px, 5);
@include search-resize(480px, 4, 240px); @include search-resize(480px, 4);
@include search-resize(410px, 3, 305px); @include search-resize(410px, 3);
} }
@include search-resize(530px, 5, 240px); @include search-resize(560px, 5);
@include search-resize(480px, 4, 240px); @include search-resize(480px, 4);
@include search-resize(410px, 3, 305px); @include search-resize(410px, 3);

View file

@ -68,6 +68,7 @@ type
fromUser*: seq[string] fromUser*: seq[string]
since*: string since*: string
until*: string until*: string
near*: string
sep*: string sep*: string
Result*[T] = ref object Result*[T] = ref object

View file

@ -85,6 +85,6 @@ proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
option(value=opt): text opt option(value=opt): text opt
proc genDate*(pref, state: string): VNode = proc genDate*(pref, state: string): VNode =
buildHtml(span): buildHtml(span(class="date-input")):
verbatim &"<input name={pref} type=\"date\" value=\"{state}\"/>" verbatim &"<input name={pref} type=\"date\" value=\"{state}\"/>"
icon "calendar" icon "calendar"

View file

@ -76,11 +76,16 @@ proc renderSearchPanel*(query: Query): VNode =
else: k in query.excludes else: k in query.excludes
genCheckbox(&"{f[0]}-{k}", v, state) genCheckbox(&"{f[0]}-{k}", v, state)
tdiv(class="search-row"):
tdiv:
span(class="search-title"): text "Time range" span(class="search-title"): text "Time range"
tdiv(class="date-range"): tdiv(class="date-range"):
genDate("since", query.since) genDate("since", query.since)
span(class="search-title"): text "-" span(class="search-title"): text "-"
genDate("until", query.until) genDate("until", query.until)
tdiv:
span(class="search-title"): text "Near"
genInput("near", "", query.near, placeholder="Location...")
proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode = proc renderTweetSearch*(tweets: Result[Tweet]; prefs: Prefs; path: string): VNode =
let query = tweets.query let query = tweets.query