diff --git a/src/query.nim b/src/query.nim index 091c835..14ad5c9 100644 --- a/src/query.nim +++ b/src/query.nim @@ -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("&") diff --git a/src/sass/include/_mixins.css b/src/sass/include/_mixins.css index 47c07a7..01e42b7 100644 --- a/src/sass/include/_mixins.css +++ b/src/sass/include/_mixins.css @@ -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; + } } } } diff --git a/src/sass/inputs.scss b/src/sass/inputs.scss index 2fbc786..2f84b44 100644 --- a/src/sass/inputs.scss +++ b/src/sass/inputs.scss @@ -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 { diff --git a/src/sass/search.scss b/src/sass/search.scss index c84040c..40e70f3 100644 --- a/src/sass/search.scss +++ b/src/sass/search.scss @@ -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); diff --git a/src/types.nim b/src/types.nim index c23cc62..be3ee20 100644 --- a/src/types.nim +++ b/src/types.nim @@ -68,6 +68,7 @@ type fromUser*: seq[string] since*: string until*: string + near*: string sep*: string Result*[T] = ref object diff --git a/src/views/renderutils.nim b/src/views/renderutils.nim index 3407afd..2951d6d 100644 --- a/src/views/renderutils.nim +++ b/src/views/renderutils.nim @@ -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 &"" icon "calendar" diff --git a/src/views/search.nim b/src/views/search.nim index c210adb..00c2a88 100644 --- a/src/views/search.nim +++ b/src/views/search.nim @@ -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