Style number input field

Author: zedeus

src/query.nim

@@ -17,6 +17,11 @@ template `@`(param: string): untyped =
   if param in pms: pms[param]
   else: ""
 
+proc validateNumber(value: string): string =
+  if value.anyIt(not it.isDigit):
+    return ""
+  return value
+
 proc initQuery*(pms: Table[string, string]; name=""): Query =
   result = Query(
     kind: parseEnum[QueryKind](@"f", tweets),
@@ -25,7 +30,7 @@ proc initQuery*(pms: Table[string, string]; name=""): Query =
     excludes: validFilters.filterIt("e-" & it in pms),
     since: @"since",
     until: @"until",
-    near: @"near"
+    minLikes: validateNumber(@"min_faves")
   )
 
   if name.len > 0:
@@ -77,8 +82,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.minLikes.len > 0:
+    result &= " min_faves:" & query.minLikes
   if query.text.len > 0:
     if result.len > 0:
       result &= " " & query.text
@@ -102,8 +107,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 query.minLikes.len > 0:
+    params.add "min_faves=" & query.minLikes
 
   if params.len > 0:
     result &= params.join("&")

src/sass/inputs.scss

@@ -14,6 +14,7 @@ button {
 
 input[type="text"],
 input[type="date"],
+input[type="number"],
 select {
     @include input-colors;
     background-color: var(--bg_elements);
@@ -24,7 +25,12 @@ select {
     font-size: 14px;
 }
 
-input[type="text"] {
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="text"],
+input[type="number"] {
     height: 16px;
 }
 
@@ -38,6 +44,17 @@ input[type="date"]::-webkit-inner-spin-button {
     display: none;
 }
 
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    display: none;
+    -webkit-appearance: none;
+    margin: 0;
+}
+
 input[type="date"]::-webkit-clear-button {
     margin-left: 17px;
     filter: grayscale(100%);
@@ -164,7 +181,8 @@ input::-webkit-datetime-edit-year-field:focus {
         appearance: none;
     }
 
-    input[type="text"] {
+    input[type="text"],
+    input[type="number"] {
         position: absolute;
         right: 0;
         max-width: 140px;

src/sass/search.scss

@@ -24,7 +24,8 @@
         height: 23px;
     }
 
-    input[type="text"] {
+    input[type="text"],
+    input[type="number"] {
         height: calc(100% - 4px);
         width: calc(100% - 8px);
     }

src/types.nim

@@ -140,7 +140,7 @@ type
     fromUser*: seq[string]
     since*: string
     until*: string
-    near*: string
+    minLikes*: string
     sep*: string
 
   Gif* = object

src/views/general.nim

@@ -52,7 +52,7 @@ proc renderHead*(prefs: Prefs; cfg: Config; req: Request; titleText=""; desc="";
   let opensearchUrl = getUrlPrefix(cfg) & "/opensearch"
 
   buildHtml(head):
-    link(rel="stylesheet", type="text/css", href="/css/style.css?v=20")
+    link(rel="stylesheet", type="text/css", href="/css/style.css?v=21")
     link(rel="stylesheet", type="text/css", href="/css/fontello.css?v=3")
 
     if theme.len > 0:

src/views/renderutils.nim

@@ -89,6 +89,13 @@ proc genDate*(pref, state: string): VNode =
     input(name=pref, `type`="date", value=state)
     icon "calendar"
 
+proc genNumberInput*(pref, label, state, placeholder: string; class=""; autofocus=true; min="0"): VNode =
+  let p = placeholder
+  buildHtml(tdiv(class=("pref-group pref-input " & class))):
+    if label.len > 0:
+      label(`for`=pref): text label
+    input(name=pref, `type`="number", placeholder=p, value=state, autofocus=(autofocus and state.len == 0), min=min, step="1")
+
 proc genImg*(url: string; class=""): VNode =
   buildHtml():
     img(src=getPicUrl(url), class=class, alt="", loading="lazy")

src/views/search.nim

@@ -51,7 +51,7 @@ proc renderSearchTabs*(query: Query): VNode =
 
 proc isPanelOpen(q: Query): bool =
   q.fromUser.len == 0 and (q.filters.len > 0 or q.excludes.len > 0 or
-  @[q.near, q.until, q.since].anyIt(it.len > 0))
+  @[q.minLikes, q.until, q.since].anyIt(it.len > 0))
 
 proc renderSearchPanel*(query: Query): VNode =
   let user = query.fromUser.join(",")
@@ -83,8 +83,8 @@ proc renderSearchPanel*(query: Query): VNode =
             span(class="search-title"): text "-"
             genDate("until", query.until)
         tdiv:
-          span(class="search-title"): text "Near"
-          genInput("near", "", query.near, "Location...", autofocus=false)
+          span(class="search-title"): text "Minimum likes"
+          genNumberInput("min_faves", "", query.minLikes, "Number...", autofocus=false)
 
 proc renderTweetSearch*(results: Timeline; prefs: Prefs; path: string;
                         pinned=none(Tweet)): VNode =