From ebc073a52ee780ca3d4910b1ce7982f39f730b3c Mon Sep 17 00:00:00 2001 From: Aeledfyr Date: Thu, 25 Jun 2020 16:46:56 -0500 Subject: [PATCH] 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. --- src/routes/search.rs | 49 +++++++++++---------- static/css/search.css | 48 +++++++++++++++++---- templates/search-results.hbs | 82 +++++++++++++++++++++++------------- 3 files changed, 118 insertions(+), 61 deletions(-) diff --git a/src/routes/search.rs b/src/routes/search.rs index ea05515b1..aae92286b 100644 --- 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, - f: Option, - v: Option, - o: Option, - s: Option, + #[serde(rename = "q")] + query: Option, + #[serde(rename = "f")] + filters: Option, + #[serde(rename = "v")] + version: Option, + #[serde(rename = "o")] + offset: Option, + #[serde(rename = "s")] + index: Option, } #[post("search")] @@ -93,12 +98,11 @@ pub async fn search_post( web::Query(info): web::Query, hb: Data>, ) -> 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, hb: Data>, ) -> 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) -> Vec { +fn search(info: &SearchRequest) -> Vec { 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); diff --git a/static/css/search.css b/static/css/search.css index d8e8ef2ed..16801313b 100644 --- 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; diff --git a/templates/search-results.hbs b/templates/search-results.hbs index be55396ae..0c8865d8d 100644 --- a/templates/search-results.hbs +++ b/templates/search-results.hbs @@ -3,113 +3,135 @@
-

{{this.title}}

 -

by {{this.author}}

+

{{this.title}}

by {{this.author}}

{{this.description}}

- download -

{{format this.downloads}}

+ + downloads{{format this.downloads}} + - created -

{{this.date_created}}

+ + created{{this.date_created}} + - updated -

{{this.date_modified}}

+ + updated{{this.date_modified}} + - version -

{{this.latest_version}}

+ + version{{this.latest_version}} +
{{#contains this.keywords "forge"}} - - - +
+ + + Forge +
{{/contains}} {{#contains this.keywords "fabric"}} - fabric +
+ fabricFabric +
{{/contains}}
{{#contains this.keywords "technology"}} -
+
tech

TECH

{{/contains}} {{#contains this.keywords "adventure"}} -
+
adventure

ADVENTURE

{{/contains}} {{#contains this.keywords "magic"}} -
+
magic

MAGIC

{{/contains}} {{#contains this.keywords "utility"}} -
+
util

UTILITY

{{/contains}} {{#contains this.keywords "decoration"}} -
+
decoration

DECORATION

{{/contains}} {{#contains this.keywords "library"}} -
+
library

LIBRARY

{{/contains}} {{#contains this.keywords "worldgen"}} -
+
world

WORLDGEN

{{/contains}} {{#contains this.keywords "cursed"}} -
+
cursed

CURSED

CURSED

{{/contains}} {{#contains this.keywords "storage"}} -
+
storage

STORAGE

{{/contains}} {{#contains this.keywords "food"}} -
+
food

FOOD

{{/contains}} {{#contains this.keywords "equipment"}} -
+
equipment

EQUIPMENT

{{/contains}} {{#contains this.keywords "misc"}} -
+
misc

MISC

{{/contains}}
+{{else}} +
+ {{#if ../query.q}} +

No results found for query "{{../query.q}}"

+ {{else}} +

No results found

+ {{/if}} +
{{/each}}