Add list view for results and improve grid view

web/src/cities/Cities.tsx

@@ -1,6 +1,5 @@
 import moment from "moment";
 import { createSignal } from "solid-js";
-import { QueryResult } from "./result/QueryResult";
 
 import { SelectCity } from "../components/SelectCity";
 import { SelectTimeRange } from "../components/SelectTimeRange";
@@ -8,6 +7,7 @@ import { SelectField } from "../components/SelectField";
 
 import { SelectGranularity } from "./SelectGranularity";
 import { SelectKey } from "./SelectKey";
+import { QueryView } from "./result/QueryView";
 
 const nowRounded = new Date(new Date().setMinutes(30));
 const dayAgo = moment(nowRounded).subtract(1, "days").subtract(30, "minutes").toDate();
@@ -45,7 +45,7 @@ export function Cities() {
                     </div>
                 </div>
                 <div class="column">
-                    <QueryResult
+                    <QueryView
                         getCities={getCities}
                         getStart={getStart}
                         getEnd={getEnd}

web/src/cities/result/GridResult.tsx

@@ -3,14 +3,14 @@ import { Component } from "solid-js";
 import { CityChart } from "../../components/chart/CityChart";
 import { DataQuery } from "../helpers";
 
-export const CityResult: Component<{ city: string, query: DataQuery, result: any }> = ({ city, query, result }) => {
+export const GridResult: Component<{ city: string, query: DataQuery, result: any }> = ({ city, query, result }) => {
     return (
-        <div class="result-item">
+        <div class="item">
             <h4>{ city }</h4>
             {
                 isDateNumber(result)
                     ? <CityChart city={()=>city} data={()=>result} query={()=>query}/>
-                    : result
+                    : <p>{ result }</p>
             }
         </div>
     );

web/src/cities/result/QueryView.tsx

@@ -4,10 +4,10 @@ import { Accessor, Component, createResource, createSignal } from "solid-js";
 import "../../css/Result.css"
 import { FETCH_DELAY_MS, apiHost } from "../../consts";
 import { isQueryResult } from "../helpers";
-import { Result } from "./Result";
 import { LoadingSpinner } from "../../components/LoadingSpinner";
+import { ResultView } from "./ResultView";
 
-export const QueryResult: Component<{
+export const QueryView: Component<{
     getCities: Accessor<Set<string>>,
     getStart: Accessor<Date>,
     getEnd: Accessor<Date>,
@@ -46,7 +46,7 @@ export const QueryResult: Component<{
                 <div>{ queryResource().message }</div>
             }
             { queryResource() && isQueryResult( queryResource() ) &&
-                <Result result={queryResource} />
+                <ResultView result={queryResource} />
             }
         </div>
     );

web/src/cities/result/ResultView.tsx

@@ -3,16 +3,16 @@ import { Component, createSignal, Resource, Show } from "solid-js";
 import "../../css/Result.css"
 import { ResultKeyVal, resultOrder, ResultOrderKeys } from "../../consts";
 import { SelectOrder } from "../SelectOrder";
-import { CityResult } from "./CityResult";
 import { QueryResult } from "../helpers";
 import { MapView } from "../map/MapView";
+import { GridResult } from "./GridResult";
 
-export const Result: Component<{
+export const ResultView: Component<{
     result: Resource<QueryResult>
 }> = ({ result: resultResource }) => {
     const [getOrderKey, setOrderKey] = createSignal<ResultOrderKeys>("A -> Z");
-    type ResultView = "text" | "map_1920x1080" | "map_3840x1440";
-    const [getResultView, setResultView] = createSignal<ResultView>("text");
+    type ResultView = "grid" | "list" | "map_1920x1080" | "map_3840x1440";
+    const [getResultView, setResultView] = createSignal<ResultView>("grid");
 
     const cityData = () =>
         Object.entries(resultResource()!.result)
@@ -24,11 +24,18 @@ export const Result: Component<{
             <div class="resultTitle">
                 <h3>Result:</h3>
                 <span>
+                <input
+                        type="button"
+                        class="secondary"
+                        value="grid"
+                        onClick={() => setResultView("grid")}
+                    /> 
+                    &nbsp; | &nbsp;
                     <input
                         type="button"
                         class="secondary"
-                        value="text"
-                        onClick={() => setResultView("text")}
+                        value="list"
+                        onClick={() => setResultView("list")}
                     /> 
                     &nbsp; | &nbsp;
                     <input
@@ -45,18 +52,30 @@ export const Result: Component<{
                         onClick={() => setResultView("map_3840x1440")}
                     />
                 </span>
-                <span style={{ visibility: getResultView() === "text" ? "visible" : "hidden" }}>
+                <span style={{ visibility: ["grid", "list"].includes(getResultView()) ? "visible" : "hidden" }}>
                     <SelectOrder getter={getOrderKey} setter={setOrderKey} />
                 </span>
             </div>
-            <div class={getResultView() === "text" ? "result-container" : ""}>
-                <Show when={getResultView() === "text"}>
-                    {cityData().map(([city, data]) =>
-                    <CityResult
-                        city={city}
-                        query={resultResource()!.query}
-                        result={data}
-                    />)}
+            <div>
+                <Show when={getResultView() === "grid"}>
+                    <div class="grid-view">
+                        {cityData().map(([city, data]) =>
+                        <GridResult
+                            city={city}
+                            query={resultResource()!.query}
+                            result={data}
+                        />)}
+                    </div>
+                </Show>
+                <Show when={getResultView() === "list"}>
+                    <div class="list-view">
+                        {cityData().map(([city, data]) =>
+                        <GridResult
+                            city={city}
+                            query={resultResource()!.query}
+                            result={data}
+                        />)}
+                    </div>
                 </Show>
                 <Show when={getResultView() === "map_1920x1080"}>
                     <MapView type="map_1920x1080" data={cityData} />

web/src/css/Result.css

@@ -1,15 +1,3 @@
-.result-container {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  grid-gap: 10px;
-}
-
-.result-item {
-  background-color: #f2f2f2;
-  padding: 10px;
-  text-align: center;
-}
-
 .resultTitle {
   display: flex;
   align-items: center;
@@ -20,3 +8,32 @@
 .resultTitle h3 {
   margin: 0;
 }
+
+.grid-view {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  grid-gap: 10px;
+}
+
+.grid-view .item {
+  background-color: #f2f2f2;
+  padding: 10px;
+  text-align: center;
+}
+
+.list-view {
+  display: flex;
+  flex-direction: column;
+  grid-gap: 10px;
+}
+
+.list-view .item {
+  background-color: #f2f2f2;
+  padding: 10px;
+  max-width: 300px;
+}
+
+.list-view .item h4 {
+  float: right;
+  display: block;
+}