From ebc073a52ee780ca3d4910b1ce7982f39f730b3c Mon Sep 17 00:00:00 2001 From: Aeledfyr Date: Thu, 25 Jun 2020 16:46:56 -0500 Subject: [PATCH 1/3] 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}} From 0bc256aa23f07889eb34000068a153f554bf1bb3 Mon Sep 17 00:00:00 2001 From: Aeledfyr Date: Thu, 25 Jun 2020 20:19:07 -0500 Subject: [PATCH 2/3] Miscellaneous fixes and requested changes --- static/css/search.css | 20 +++++++++++++++----- templates/search-results.hbs | 34 ++++++++++++++++------------------ templates/search.hbs | 28 ++++++++++++++-------------- 3 files changed, 45 insertions(+), 37 deletions(-) diff --git a/static/css/search.css b/static/css/search.css index 16801313b..8cc3822a4 100644 --- a/static/css/search.css +++ b/static/css/search.css @@ -145,10 +145,10 @@ background-color: var(--content-background); border-color: var(--border); height: 2em; - margin-top: 30px; - margin-bottom: 15px; + margin: 30px auto 15px auto; top: 80px; - width: 100%; + width: calc(100% - 20px); + display: block; } .mod-info { @@ -189,13 +189,14 @@ .search-error { text-align: center; + word-break: break-word; } .result { display: flex; min-height: 100px; - margin: 15px auto; + margin: 15px 5px; padding: 5px; - width: 100%; + width: calc(100% - 20px); flex-direction: row; align-items: center; background-color: var(--content-background); @@ -204,6 +205,11 @@ .result-image { object-fit: scale-down; padding: 0 10px 0 5px; + min-width: 75px; +} +.badge-image { + object-fit: scale-down; + padding: 0 10px 0 5px; } .result-info { @@ -223,8 +229,12 @@ display: inline; padding-right: 5px; } +.result-name > * { + margin: 0; +} .result-author-container { white-space: nowrap; + display: inline-block; } @media screen and (max-width: 1340px) { diff --git a/templates/search-results.hbs b/templates/search-results.hbs index 0c8865d8d..8035d1b93 100644 --- a/templates/search-results.hbs +++ b/templates/search-results.hbs @@ -4,7 +4,7 @@

{{this.title}}

by {{this.author}}

+ -->by {{this.author}}

{{this.description}}

@@ -37,14 +37,12 @@ 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"/> - Forge +
{{/contains}} {{#contains this.keywords "fabric"}}
- fabricFabric + fabric
{{/contains}}
@@ -53,74 +51,74 @@
{{#contains this.keywords "technology"}}
- tech + tech

TECH

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

ADVENTURE

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

MAGIC

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

UTILITY

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

DECORATION

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

LIBRARY

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

WORLDGEN

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

CURSED

CURSED

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

STORAGE

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

FOOD

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

EQUIPMENT

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

MISC

{{/contains}} diff --git a/templates/search.hbs b/templates/search.hbs index 59cb3fb1e..391bf179f 100644 --- a/templates/search.hbs +++ b/templates/search.hbs @@ -46,51 +46,51 @@

Categories

- tech + tech

TECH

 - adventure + adventure

ADVENTURE

 - magic + magic

MAGIC

 - util + util

UTILITY

 - decoration + decoration

DECORATION

 - library + library

LIBRARY

 - world + world

WORLDGEN

 - cursed + cursed

CURSED

 - storage + storage

STORAGE

 - food + food

FOOD

 - equipment + equipment

EQUIPMENT

 - misc + misc

MISC
@@ -100,11 +100,11 @@

Loaders

- forge + forge

FORGE

 - fabric + fabric

FABRIC
From d560f656f40a6b41280cdf8b50232012eac0492d Mon Sep 17 00:00:00 2001 From: Aeledfyr Date: Thu, 25 Jun 2020 21:14:50 -0500 Subject: [PATCH 3/3] Reduce duplication of Forge logo using svg This uses svg to avoid having to duplicate the logo at every use. Surprisingly this just works with the current theme css, and doesn't require any changes. --- templates/search-results.hbs | 8 +------- templates/search.hbs | 10 ++++++++++ 2 files changed, 11 insertions(+), 7 deletions(-) diff --git a/templates/search-results.hbs b/templates/search-results.hbs index 8035d1b93..ff3215229 100644 --- a/templates/search-results.hbs +++ b/templates/search-results.hbs @@ -31,13 +31,7 @@
{{#contains this.keywords "forge"}}
- - - +
{{/contains}} {{#contains this.keywords "fabric"}} diff --git a/templates/search.hbs b/templates/search.hbs index 391bf179f..b7bec52f9 100644 --- a/templates/search.hbs +++ b/templates/search.hbs @@ -26,6 +26,16 @@
+ + + + + + up