Add location field to search panel

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("&")

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;
+            }
         }
     }
 }

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 {

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);

src/types.nim

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

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 &"<input name={pref} type=\"date\" value=\"{state}\"/>"
     icon "calendar"

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