Add location field to search panel
This commit is contained in:
parent
8324508b2c
commit
62df60be78
|
@ -29,7 +29,8 @@ proc initQuery*(pms: Table[string, string]; name=""): Query =
|
|||
filters: validFilters.filterIt("f-" & it in pms),
|
||||
excludes: validFilters.filterIt("e-" & it in pms),
|
||||
since: @"since",
|
||||
until: @"until"
|
||||
until: @"until",
|
||||
near: @"near"
|
||||
)
|
||||
|
||||
if name.len > 0:
|
||||
|
@ -77,6 +78,8 @@ proc genQueryParam*(query: Query): string =
|
|||
result &= " since:" & query.since
|
||||
if query.until.len > 0:
|
||||
result &= " until:" & query.until
|
||||
if query.near.len > 0:
|
||||
result &= &" near:\"{query.near}\" within:15mi"
|
||||
if query.text.len > 0:
|
||||
result &= " " & query.text
|
||||
|
||||
|
@ -106,6 +109,8 @@ proc genQueryUrl*(query: Query): string =
|
|||
params.add "since=" & query.since
|
||||
if query.until.len > 0:
|
||||
params.add "until=" & query.until
|
||||
if query.near.len > 0:
|
||||
params.add "near=" & query.near
|
||||
|
||||
if params.len > 0:
|
||||
result &= params.join("&")
|
||||
|
|
|
@ -59,14 +59,25 @@
|
|||
}
|
||||
}
|
||||
|
||||
@mixin search-resize($width, $rows, $height) {
|
||||
@mixin search-resize($width, $rows) {
|
||||
@media(max-width: $width) {
|
||||
.search-toggles {
|
||||
grid-template-columns: repeat($rows, auto);
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -42,12 +42,16 @@ input::-webkit-datetime-edit-year-field:focus {
|
|||
}
|
||||
|
||||
.date-range {
|
||||
display: block;
|
||||
.date-input {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.icon-container {
|
||||
margin-left: -22px;
|
||||
margin-right: 4px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.search-title {
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
@include input-colors;
|
||||
}
|
||||
|
||||
@include create-toggle(search-panel, 190px);
|
||||
@include create-toggle(search-panel, 200px);
|
||||
}
|
||||
|
||||
.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 {
|
||||
flex-grow: 1;
|
||||
display: grid;
|
||||
|
@ -82,14 +107,14 @@
|
|||
}
|
||||
|
||||
.profile-tabs {
|
||||
@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(820px, 5);
|
||||
@include search-resize(725px, 4);
|
||||
@include search-resize(600px, 6);
|
||||
@include search-resize(560px, 5);
|
||||
@include search-resize(480px, 4);
|
||||
@include search-resize(410px, 3);
|
||||
}
|
||||
|
||||
@include search-resize(530px, 5, 240px);
|
||||
@include search-resize(480px, 4, 240px);
|
||||
@include search-resize(410px, 3, 305px);
|
||||
@include search-resize(560px, 5);
|
||||
@include search-resize(480px, 4);
|
||||
@include search-resize(410px, 3);
|
||||
|
|
|
@ -68,6 +68,7 @@ type
|
|||
fromUser*: seq[string]
|
||||
since*: string
|
||||
until*: string
|
||||
near*: string
|
||||
sep*: string
|
||||
|
||||
Result*[T] = ref object
|
||||
|
|
|
@ -85,6 +85,6 @@ proc genSelect*(pref, label, state: string; options: seq[string]): VNode =
|
|||
option(value=opt): text opt
|
||||
|
||||
proc genDate*(pref, state: string): VNode =
|
||||
buildHtml(span):
|
||||
buildHtml(span(class="date-input")):
|
||||
verbatim &"<input name={pref} type=\"date\" value=\"{state}\"/>"
|
||||
icon "calendar"
|
||||
|
|
|
@ -76,11 +76,16 @@ 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)
|
||||
tdiv(class="search-row"):
|
||||
tdiv:
|
||||
span(class="search-title"): text "Time range"
|
||||
tdiv(class="date-range"):
|
||||
genDate("since", query.since)
|
||||
span(class="search-title"): text "-"
|
||||
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 =
|
||||
let query = tweets.query
|
||||
|
|
Loading…
Reference in New Issue