Tweak styles for narrower screens, add indicator for no results

Makes the styles of search results work better with narrower screens. The category badges on each result collapse to just an icon (with title text) when the screen is too narrow. Adds a text label for the Forge/Fabric icons. Adds a message for when a query returns no results.
2020-06-25 16:46:56 -05:00 · 2020-06-25 16:46:56 -05:00 · ebc073a52e
commit ebc073a52e
parent 23503dc439
3 changed files with 118 additions and 61 deletions
--- a/src/routes/search.rs
+++ b/src/routes/search.rs
@ -81,11 +81,16 @@ impl Document for SearchMod {

 #[derive(Serialize, Deserialize)]
 pub struct SearchRequest {
-    q: Option<String>,
-    f: Option<String>,
-    v: Option<String>,
-    o: Option<String>,
-    s: Option<String>,
+    #[serde(rename = "q")]
+    query: Option<String>,
+    #[serde(rename = "f")]
+    filters: Option<String>,
+    #[serde(rename = "v")]
+    version: Option<String>,
+    #[serde(rename = "o")]
+    offset: Option<String>,
+    #[serde(rename = "s")]
+    index: Option<String>,
 }

 #[post("search")]
@ -93,12 +98,11 @@ pub async fn search_post(
    web::Query(info): web::Query<SearchRequest>,
    hb: Data<Handlebars<'_>>,
 ) -> HttpResponse {
-    let results = search(web::Query(info));
-
+    let results = search(&info);
    let data = json!({
+        "query": info,
        "results": results,
    });
-
    let body = hb.render("search-results", &data).unwrap();

    HttpResponse::Ok().body(body)
@ -109,9 +113,10 @@ pub async fn search_get(
    web::Query(info): web::Query<SearchRequest>,
    hb: Data<Handlebars<'_>>,
 ) -> HttpResponse {
-    let results = search(web::Query(info));
+    let results = search(&info);

    let data = json!({
+        "query": info,
        "results": results,
    });

@ -120,40 +125,40 @@ pub async fn search_get(
    HttpResponse::Ok().body(body)
 }

-fn search(web::Query(info): web::Query<SearchRequest>) -> Vec<SearchMod> {
+fn search(info: &SearchRequest) -> Vec<SearchMod> {
    let client = Client::new("http://localhost:7700", "");

-    let search_query: String;
-    let mut filters = "".to_string();
+    let search_query: &str;
+    let mut filters = String::new();
    let mut offset = 0;
-    let mut index = "relevance".to_string();
+    let mut index = "relevance";

-    match info.q {
+    match info.query.as_ref() {
        Some(q) => search_query = q,
-        None => search_query = "{}{}{}".to_string(),
+        None => search_query = "{}{}{}",
    }

-    if let Some(f) = info.f {
-        filters = f;
+    if let Some(f) = info.filters.as_ref() {
+        filters = f.clone();
    }

-    if let Some(v) = info.v {
+    if let Some(v) = info.version.as_ref() {
        if filters.is_empty() {
-            filters = v;
+            filters = v.clone();
        } else {
            filters = format!("({}) AND ({})", filters, v);
        }
    }

-    if let Some(o) = info.o {
+    if let Some(o) = info.offset.as_ref() {
        offset = o.parse().unwrap();
    }

-    if let Some(s) = info.s {
+    if let Some(s) = info.index.as_ref() {
        index = s;
    }

-    let mut query = Query::new(&search_query).with_limit(10).with_offset(offset);
+    let mut query = Query::new(search_query).with_limit(10).with_offset(offset);

    if !filters.is_empty() {
        query = query.with_filters(&filters);
--- a/static/css/search.css
+++ b/static/css/search.css
@ -156,6 +156,7 @@
    display: flex;
    flex-direction: row;
    align-items: center;
+    flex-wrap: wrap;
 }

 .mod-info img {
@ -163,9 +164,22 @@
    padding: 0;
 }

-.mod-info p {
+.mod-info span {
    font-size: 12px;
-    padding: 0 15px 0 5px !important;
+    padding-right: 15px;
+    white-space: nowrap;
+}
+.mod-info > span > img {
+    padding-right: 5px;
+    vertical-align: top;
+}
+.loader-icons > * {
+    vertical-align: top;
+    white-space: nowrap;
+    display: inline-block;
+}
+.loader-icons img {
+    padding-right: 5px;
 }

 .results {
@ -173,9 +187,12 @@
    margin: 0 auto;
 }

+.search-error {
+    text-align: center;
+}
 .result {
    display: flex;
-    height: 100px;
+    min-height: 100px;
    margin: 15px auto;
    padding: 5px;
    width: 100%;
@ -194,17 +211,30 @@
    flex-direction: column;
 }

-.result-info * {
+.result-info > * {
    padding: 0 5px 0 0;
    margin: 0;
 }

 .result-title {
-    display: flex;
-    flex-direction: row;
-    align-items: baseline;
    text-decoration: none;
 }
+.result-title * {
+    display: inline;
+    padding-right: 5px;
+}
+.result-author-container {
+    white-space: nowrap;
+}
+
+@media screen and (max-width: 1340px) {
+    .result-badge.result-badge {
+        width: initial;
+    }
+    .result-badge > p {
+        display: none;
+    }
+}

 .result-name {
    text-decoration: none;
@ -326,14 +356,14 @@

 .forge {
 	height: 12px;
-	padding-top: 5px !important;
 	fill: var(--forge-color);
 }

 .back-to-top {
    position: fixed;
    top: 80%;
-    left: 19%;
+    /* left column = 25%, width ~= 90px, left column padding = 20px */
+    left: calc(25% - 90px - 20px);
    background-color: var(--highlight);
    text-align: center;
    padding: 20px;
--- a/templates/search-results.hbs
+++ b/templates/search-results.hbs
@ -3,113 +3,135 @@
        <img src="{{this.icon_url}}" width="75px" height="75px" class="result-image"/>
        <div class="result-info">
            <div class="result-title">
-                <a class="result-name" href="{{this.page_url}}"><h2>{{this.title}}</h2></a>
-                <p class="muted"> by  <a class="result-author" href="{{this.author_url}}">{{this.author}}</a></p>
+                <a class="result-name" href="{{this.page_url}}"><h2>{{this.title}}</h2></a><!--
+                --><p class="muted result-author-container">by <a class="result-author" href="{{this.author_url}}">{{this.author}}</a></p>
            </div>
            <p>{{this.description}}</p>
            <div class="mod-info">
-                <img src="/static/images/icon/download.svg" alt="download" title="Downloads"/>
-                <p title="Downloads">{{format this.downloads}}</p>
+                <span class="mod-downloads" title="Downloads">
+                    <img src="/static/images/icon/download.svg" alt="downloads"/><!--
+                    -->{{format this.downloads}}
+                </span>

-                <img src="/static/images/icon/created.svg" alt="created" title="Created"/>
-                <p title="Created">{{this.date_created}}</p>
+                <span class="mod-created" title="Created">
+                    <img src="/static/images/icon/created.svg" alt="created"/><!--
+                    -->{{this.date_created}}
+                </span>

-                <img src="/static/images/icon/updated.svg" alt="updated" title="Last Updated"/>
-                <p title="Last Updated">{{this.date_modified}}</p>
+                <span class="mod-updated" title="Last Updated">
+                    <img src="/static/images/icon/updated.svg" alt="updated"/><!--
+                    -->{{this.date_modified}}
+                </span>

-                <img src="/static/images/icon/version.svg" alt="version" title="Version"/>
-                <p title="Version">{{this.latest_version}}</p>
+                <span class="mod-version" title="Version">
+                    <img src="/static/images/icon/version.svg" alt="version" /><!--
+                    -->{{this.latest_version}}
+                </span>

                <div class="loader-icons">
                    {{#contains this.keywords "forge"}}
-						<svg viewBox="0 0 120 66.7" class="forge">
-							<path d="M91.6,16.7l-37.8-1.9l46.2,0v-3.7H47.8l0,7.8v6.2c0,0.1-1.5-9.1-1.9-11.7h-4.1v6.8v6.2
-										c0,0.1-1.8-10.9-1.9-12.3c-10.4,0-27.9,0-27.9,0c1.9,1.6,12.4,10.6,19.9,14.3c3.7,1.8,8.3,1.9,12.4,2c2.1,0.1,4.2,0.2,5.8,1.8
-										c2.3,2.2,2.8,5.7,0.8,8.3c-1.9,2.6-7.3,3.2-7.3,3.2L39,49.1v6.4h10.3l0.3-6.3l8.9-6.3c-0.9,0.8-3.1,2.8-6.2,7.7
-										c-0.7,1.1-1.3,2.3-1.7,3.5c2.2-1.9,6.8-3.2,12.2-3.2c5.3,0,9.9,1.3,12.1,3.2c-0.4-1.2-1-2.4-1.7-3.5c-3.2-4.9-5.3-6.9-6.2-7.7
-										l8.9,6.3l0.3,6.3h9.6v-6.4l-4.5-5.5c0,0-6.7-0.4-8.4-3.2C67.7,32.6,74.8,20.4,91.6,16.7z"/>
-						</svg>
+                        <div class="loader-forge" title="Forge">
+                            <svg viewBox="0 0 120 66.7" class="forge">
+                                <path d="M91.6,16.7l-37.8-1.9l46.2,0v-3.7H47.8l0,7.8v6.2c0,0.1-1.5-9.1-1.9-11.7h-4.1v6.8v6.2
+                                            c0,0.1-1.8-10.9-1.9-12.3c-10.4,0-27.9,0-27.9,0c1.9,1.6,12.4,10.6,19.9,14.3c3.7,1.8,8.3,1.9,12.4,2c2.1,0.1,4.2,0.2,5.8,1.8
+                                            c2.3,2.2,2.8,5.7,0.8,8.3c-1.9,2.6-7.3,3.2-7.3,3.2L39,49.1v6.4h10.3l0.3-6.3l8.9-6.3c-0.9,0.8-3.1,2.8-6.2,7.7
+                                            c-0.7,1.1-1.3,2.3-1.7,3.5c2.2-1.9,6.8-3.2,12.2-3.2c5.3,0,9.9,1.3,12.1,3.2c-0.4-1.2-1-2.4-1.7-3.5c-3.2-4.9-5.3-6.9-6.2-7.7
+                                            l8.9,6.3l0.3,6.3h9.6v-6.4l-4.5-5.5c0,0-6.7-0.4-8.4-3.2C67.7,32.6,74.8,20.4,91.6,16.7z"/>
+                            </svg><!--
+                            --><span>Forge</span>
+                        </div>
                    {{/contains}}
                    {{#contains this.keywords "fabric"}}
-                        <img alt="fabric" src="/static/images/icon/fabric.png"/>
+                        <div class="loader-fabric" title="Fabric">
+                            <img alt="fabric" src="/static/images/icon/fabric.png"/><!--
+                            --><span>Fabric</span>
+                        </div>
                    {{/contains}}
                </div>
            </div>
        </div>
        <div class="result-badges">
            {{#contains this.keywords "technology"}}
-                <div class="tech-badge result-badge">
+                <div class="tech-badge result-badge" title="Tech">
                    <img alt="tech" src="/static/images/icon/tech.svg" class="result-image"/>
                    <p>TECH</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "adventure"}}
-                <div class="adventure-badge result-badge">
+                <div class="adventure-badge result-badge" title="Adventure">
                    <img alt="adventure" src="/static/images/icon/adventure.svg" class="result-image"/>
                    <p>ADVENTURE</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "magic"}}
-                <div class="magic-badge result-badge">
+                <div class="magic-badge result-badge" title="Magic">
                    <img alt="magic" src="/static/images/icon/magic.svg" class="result-image"/>
                    <p>MAGIC</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "utility"}}
-                <div class="utility-badge result-badge">
+                <div class="utility-badge result-badge" title="Utility">
                    <img alt="util" src="/static/images/icon/util.svg" class="result-image"/>
                    <p>UTILITY</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "decoration"}}
-                <div class="decoration-badge result-badge">
+                <div class="decoration-badge result-badge" title="Fecoration">
                    <img alt="decoration" src="/static/images/icon/decoration.svg" class="result-image"/>
                    <p>DECORATION</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "library"}}
-                <div class="library-badge result-badge">
+                <div class="library-badge result-badge" title="Library">
                    <img alt="library" src="/static/images/icon/library.svg" class="result-image"/>
                    <p>LIBRARY</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "worldgen"}}
-                <div class="world-badge result-badge">
+                <div class="world-badge result-badge" title="World">
                    <img alt="world" src="/static/images/icon/world.svg" class="result-image"/>
                    <p>WORLDGEN</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "cursed"}}
-                <div class="cursed-badge result-badge">
+                <div class="cursed-badge result-badge" title="Cursed">
                    <img alt="cursed" src="/static/images/icon/cursed.png" class="result-image"/>
                    <p>CURSED</p>
                    <p>CURSED</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "storage"}}
-                <div class="storage-badge result-badge">
+                <div class="storage-badge result-badge" title="Storage">
                    <img alt="storage" src="/static/images/icon/storage.svg" class="result-image"/>
                    <p>STORAGE</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "food"}}
-                <div class="food-badge result-badge">
+                <div class="food-badge result-badge" title="Food">
                    <img alt="food" src="/static/images/icon/food.svg" class="result-image"/>
                    <p>FOOD</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "equipment"}}
-                <div class="equipment-badge result-badge">
+                <div class="equipment-badge result-badge" title="Equipment">
                    <img alt="equipment" src="/static/images/icon/equipment.svg" class="result-image"/>
                    <p>EQUIPMENT</p>
                </div>
            {{/contains}}
            {{#contains this.keywords "misc"}}
-                <div class="misc-badge result-badge">
+                <div class="misc-badge result-badge" title="Misc">
                    <img alt="misc" src="/static/images/icon/misc.svg" class="result-image"/>
                    <p>MISC</p>
                </div>
            {{/contains}}
        </div>
    </div>
+{{else}}
+    <div class="search-error">
+        {{#if ../query.q}}
+        <h2>No results found for query <code>"{{../query.q}}"</code></h2>
+        {{else}}
+        <h2>No results found</h2>
+        {{/if}}
+    </div>
 {{/each}}