eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Merge pull request #7 from Aeledfyr/master

Browse Source 
Improve styling for narrower screens
This commit is contained in:
Geometrically
2020-06-25 19:23:16 -07:00
committed by GitHub
parent 23503dc439 d560f656f4
commit 1bf0eab2d9
4 changed files with 161 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/routes/search.rs
View File

@@ -81,11 +81,16 @@ impl Document for SearchMod {
#[derive(Serialize, Deserialize)] #[derive(Serialize, Deserialize)]
pub struct SearchRequest { pub struct SearchRequest {
q: Option<String>, #[serde(rename = "q")]
f: Option<String>, query: Option<String>,
v: Option<String>, #[serde(rename = "f")]
o: Option<String>, filters: Option<String>,
s: Option<String>, #[serde(rename = "v")]
version: Option<String>,
#[serde(rename = "o")]
offset: Option<String>,
#[serde(rename = "s")]
index: Option<String>,
} }
#[post("search")] #[post("search")]
@@ -93,12 +98,11 @@ pub async fn search_post(
web::Query(info): web::Query<SearchRequest>, web::Query(info): web::Query<SearchRequest>,
hb: Data<Handlebars<'_>>, hb: Data<Handlebars<'_>>,
) -> HttpResponse { ) -> HttpResponse {
let results = search(web::Query(info)); let results = search(&info);
let data = json!({ let data = json!({
"query": info,
"results": results, "results": results,
}); });
let body = hb.render("search-results", &data).unwrap(); let body = hb.render("search-results", &data).unwrap();
HttpResponse::Ok().body(body) HttpResponse::Ok().body(body)
@@ -109,9 +113,10 @@ pub async fn search_get(
web::Query(info): web::Query<SearchRequest>, web::Query(info): web::Query<SearchRequest>,
hb: Data<Handlebars<'_>>, hb: Data<Handlebars<'_>>,
) -> HttpResponse { ) -> HttpResponse {
let results = search(web::Query(info)); let results = search(&info);
let data = json!({ let data = json!({
"query": info,
"results": results, "results": results,
}); });
@@ -120,40 +125,40 @@ pub async fn search_get(
HttpResponse::Ok().body(body) 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 client = Client::new("http://localhost:7700", "");
let search_query: String; let search_query: &str;
let mut filters = "".to_string(); let mut filters = String::new();
let mut offset = 0; 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, Some(q) => search_query = q,
None => search_query = "{}{}{}".to_string(), None => search_query = "{}{}{}",
} }
if let Some(f) = info.f { if let Some(f) = info.filters.as_ref() {
filters = f; filters = f.clone();
} }
if let Some(v) = info.v { if let Some(v) = info.version.as_ref() {
if filters.is_empty() { if filters.is_empty() {
filters = v; filters = v.clone();
} else { } else {
filters = format!("({}) AND ({})", filters, v); filters = format!("({}) AND ({})", filters, v);
} }
} }
if let Some(o) = info.o { if let Some(o) = info.offset.as_ref() {
offset = o.parse().unwrap(); offset = o.parse().unwrap();
} }
if let Some(s) = info.s { if let Some(s) = info.index.as_ref() {
index = s; 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() { if !filters.is_empty() {
query = query.with_filters(&filters); query = query.with_filters(&filters);

68
static/css/search.css
View File

@@ -145,10 +145,10 @@
background-color: var(--content-background); background-color: var(--content-background);
border-color: var(--border); border-color: var(--border);
height: 2em; height: 2em;
margin-top: 30px; margin: 30px auto 15px auto;
margin-bottom: 15px;
top: 80px; top: 80px;
width: 100%; width: calc(100% - 20px);
display: block;
} }
.mod-info { .mod-info {
@@ -156,6 +156,7 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
flex-wrap: wrap;
} }
.mod-info img { .mod-info img {
@@ -163,9 +164,22 @@
padding: 0; padding: 0;
} }
.mod-info p { .mod-info span {
font-size: 12px; 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 { .results {
@@ -173,12 +187,16 @@
margin: 0 auto; margin: 0 auto;
} }
.search-error {
text-align: center;
word-break: break-word;
}
.result { .result {
display: flex; display: flex;
height: 100px; min-height: 100px;
margin: 15px auto; margin: 15px 5px;
padding: 5px; padding: 5px;
width: 100%; width: calc(100% - 20px);
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
background-color: var(--content-background); background-color: var(--content-background);
@@ -187,6 +205,11 @@
.result-image { .result-image {
object-fit: scale-down; object-fit: scale-down;
padding: 0 10px 0 5px; padding: 0 10px 0 5px;
min-width: 75px;
}
.badge-image {
object-fit: scale-down;
padding: 0 10px 0 5px;
} }
.result-info { .result-info {
@@ -194,17 +217,34 @@
flex-direction: column; flex-direction: column;
} }
.result-info * { .result-info > * {
padding: 0 5px 0 0; padding: 0 5px 0 0;
margin: 0; margin: 0;
} }
.result-title { .result-title {
display: flex;
flex-direction: row;
align-items: baseline;
text-decoration: none; text-decoration: none;
} }
.result-title * {
display: inline;
padding-right: 5px;
}
.result-name > * {
margin: 0;
}
.result-author-container {
white-space: nowrap;
display: inline-block;
}
@media screen and (max-width: 1340px) {
.result-badge.result-badge {
width: initial;
}
.result-badge > p {
display: none;
}
}
.result-name { .result-name {
text-decoration: none; text-decoration: none;
@@ -326,14 +366,14 @@
.forge { .forge {
height: 12px; height: 12px;
padding-top: 5px !important;
fill: var(--forge-color); fill: var(--forge-color);
} }
.back-to-top { .back-to-top {
position: fixed; position: fixed;
top: 80%; top: 80%;
left: 19%; /* left column = 25%, width ~= 90px, left column padding = 20px */
left: calc(25% - 90px - 20px);
background-color: var(--highlight); background-color: var(--highlight);
text-align: center; text-align: center;
padding: 20px; padding: 20px;

98
templates/search-results.hbs
View File

@@ -3,113 +3,127 @@
<img src="{{this.icon_url}}" width="75px" height="75px" class="result-image"/> <img src="{{this.icon_url}}" width="75px" height="75px" class="result-image"/>
<div class="result-info"> <div class="result-info">
<div class="result-title"> <div class="result-title">
<a class="result-name" href="{{this.page_url}}"><h2>{{this.title}}</h2></a> <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> --><span class="muted result-author-container">by <a class="result-author" href="{{this.author_url}}">{{this.author}}</a></span>
</div> </div>
<p>{{this.description}}</p> <p>{{this.description}}</p>
<div class="mod-info"> <div class="mod-info">
<img src="/static/images/icon/download.svg" alt="download" title="Downloads"/> <span class="mod-downloads" title="Downloads">
<p title="Downloads">{{format this.downloads}}</p> <img src="/static/images/icon/download.svg" alt="downloads"/><!--
-->{{format this.downloads}}
</span>
<img src="/static/images/icon/created.svg" alt="created" title="Created"/> <span class="mod-created" title="Created">
<p title="Created">{{this.date_created}}</p> <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"/> <span class="mod-updated" title="Last Updated">
<p title="Last Updated">{{this.date_modified}}</p> <img src="/static/images/icon/updated.svg" alt="updated"/><!--
-->{{this.date_modified}}
</span>
<img src="/static/images/icon/version.svg" alt="version" title="Version"/> <span class="mod-version" title="Version">
<p title="Version">{{this.latest_version}}</p> <img src="/static/images/icon/version.svg" alt="version" /><!--
-->{{this.latest_version}}
</span>
<div class="loader-icons"> <div class="loader-icons">
{{#contains this.keywords "forge"}} {{#contains this.keywords "forge"}}
<svg viewBox="0 0 120 66.7" class="forge"> <div class="loader-forge" title="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 <svg class="forge" viewbox="0 0 120 66.7"><use href="#forge" xlink:href="#forge"/></svg>
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 </div>
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>
{{/contains}} {{/contains}}
{{#contains this.keywords "fabric"}} {{#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"/>
</div>
{{/contains}} {{/contains}}
</div> </div>
</div> </div>
</div> </div>
<div class="result-badges"> <div class="result-badges">
{{#contains this.keywords "technology"}} {{#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"/> <img alt="tech" src="/static/images/icon/tech.svg" class="badge-image"/>
<p>TECH</p> <p>TECH</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "adventure"}} {{#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"/> <img alt="adventure" src="/static/images/icon/adventure.svg" class="badge-image"/>
<p>ADVENTURE</p> <p>ADVENTURE</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "magic"}} {{#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"/> <img alt="magic" src="/static/images/icon/magic.svg" class="badge-image"/>
<p>MAGIC</p> <p>MAGIC</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "utility"}} {{#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"/> <img alt="util" src="/static/images/icon/util.svg" class="badge-image"/>
<p>UTILITY</p> <p>UTILITY</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "decoration"}} {{#contains this.keywords "decoration"}}
<div class="decoration-badge result-badge"> <div class="decoration-badge result-badge" title="Decoration">
<img alt="decoration" src="/static/images/icon/decoration.svg" class="result-image"/> <img alt="decoration" src="/static/images/icon/decoration.svg" class="badge-image"/>
<p>DECORATION</p> <p>DECORATION</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "library"}} {{#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"/> <img alt="library" src="/static/images/icon/library.svg" class="badge-image"/>
<p>LIBRARY</p> <p>LIBRARY</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "worldgen"}} {{#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"/> <img alt="world" src="/static/images/icon/world.svg" class="badge-image"/>
<p>WORLDGEN</p> <p>WORLDGEN</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "cursed"}} {{#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"/> <img alt="cursed" src="/static/images/icon/cursed.png" class="badge-image"/>
<p>CURSED</p> <p>CURSED</p>
<p>CURSED</p> <p>CURSED</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "storage"}} {{#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"/> <img alt="storage" src="/static/images/icon/storage.svg" class="badge-image"/>
<p>STORAGE</p> <p>STORAGE</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "food"}} {{#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"/> <img alt="food" src="/static/images/icon/food.svg" class="badge-image"/>
<p>FOOD</p> <p>FOOD</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "equipment"}} {{#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"/> <img alt="equipment" src="/static/images/icon/equipment.svg" class="badge-image"/>
<p>EQUIPMENT</p> <p>EQUIPMENT</p>
</div> </div>
{{/contains}} {{/contains}}
{{#contains this.keywords "misc"}} {{#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"/> <img alt="misc" src="/static/images/icon/misc.svg" class="badge-image"/>
<p>MISC</p> <p>MISC</p>
</div> </div>
{{/contains}} {{/contains}}
</div> </div>
</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}} {{/each}}

38
templates/search.hbs
View File

@@ -26,6 +26,16 @@
</div> </div>
</header> </header>
<svg display="none">
<symbol viewBox="0 0 120 66.7" id="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"/>
</symbol>
</svg>
<a href="#" class="back-to-top" id="backToTop"> <a href="#" class="back-to-top" id="backToTop">
<img src="/static/images/icon/up.svg" alt="up"> <img src="/static/images/icon/up.svg" alt="up">
</a> </a>
@@ -46,51 +56,51 @@
<p>Categories</p> <p>Categories</p>
</a> </a>
<a class="tech-badge category-badge category-active" id="technology" onclick="activateCategory(this)"> <a class="tech-badge category-badge category-active" id="technology" onclick="activateCategory(this)">
<img alt="tech" src="/static/images/icon/tech.svg" class="result-image"/> <img alt="tech" src="/static/images/icon/tech.svg" class="badge-image"/>
<p>TECH</p> <p>TECH</p>
</a> </a>
<a class="adventure-badge category-badge" id="adventure" onclick="activateCategory(this)"> <a class="adventure-badge category-badge" id="adventure" onclick="activateCategory(this)">
<img alt="adventure" src="/static/images/icon/adventure.svg" class="result-image"/> <img alt="adventure" src="/static/images/icon/adventure.svg" class="badge-image"/>
<p>ADVENTURE</p> <p>ADVENTURE</p>
</a> </a>
<a class="magic-badge category-badge" id="magic" onclick="activateCategory(this)"> <a class="magic-badge category-badge" id="magic" onclick="activateCategory(this)">
<img alt="magic" src="/static/images/icon/magic.svg" class="result-image"/> <img alt="magic" src="/static/images/icon/magic.svg" class="badge-image"/>
<p>MAGIC</p> <p>MAGIC</p>
</a> </a>
<a class="utility-badge category-badge" id="utility" onclick="activateCategory(this)"> <a class="utility-badge category-badge" id="utility" onclick="activateCategory(this)">
<img alt="util" src="/static/images/icon/util.svg" class="result-image"/> <img alt="util" src="/static/images/icon/util.svg" class="badge-image"/>
<p>UTILITY</p> <p>UTILITY</p>
</a> </a>
<a class="decoration-badge category-badge" id="decoration" onclick="activateCategory(this)"> <a class="decoration-badge category-badge" id="decoration" onclick="activateCategory(this)">
<img alt="decoration" src="/static/images/icon/decoration.svg" class="result-image"/> <img alt="decoration" src="/static/images/icon/decoration.svg" class="badge-image"/>
<p>DECORATION</p> <p>DECORATION</p>
</a> </a>
<a class="library-badge category-badge" id="library" onclick="activateCategory(this)"> <a class="library-badge category-badge" id="library" onclick="activateCategory(this)">
<img alt="library" src="/static/images/icon/library.svg" class="result-image"/> <img alt="library" src="/static/images/icon/library.svg" class="badge-image"/>
<p>LIBRARY</p> <p>LIBRARY</p>
</a> </a>
<a class="world-badge category-badge" id="worldgen" onclick="activateCategory(this)"> <a class="world-badge category-badge" id="worldgen" onclick="activateCategory(this)">
<img alt="world" src="/static/images/icon/world.svg" class="result-image"/> <img alt="world" src="/static/images/icon/world.svg" class="badge-image"/>
<p>WORLDGEN</p> <p>WORLDGEN</p>
</a> </a>
<a class="cursed-badge category-badge" id="cursed" onclick="activateCategory(this)"> <a class="cursed-badge category-badge" id="cursed" onclick="activateCategory(this)">
<img alt="cursed" src="/static/images/icon/cursed.png" class="result-image"/> <img alt="cursed" src="/static/images/icon/cursed.png" class="badge-image"/>
<p>CURSED</p> <p>CURSED</p>
</a> </a>
<a class="storage-badge category-badge" id="storage" onclick="activateCategory(this)"> <a class="storage-badge category-badge" id="storage" onclick="activateCategory(this)">
<img alt="storage" src="/static/images/icon/storage.svg" class="result-image"/> <img alt="storage" src="/static/images/icon/storage.svg" class="badge-image"/>
<p>STORAGE</p> <p>STORAGE</p>
</a> </a>
<a class="food-badge category-badge" id="food" onclick="activateCategory(this)"> <a class="food-badge category-badge" id="food" onclick="activateCategory(this)">
<img alt="food" src="/static/images/icon/food.svg" class="result-image"/> <img alt="food" src="/static/images/icon/food.svg" class="badge-image"/>
<p>FOOD</p> <p>FOOD</p>
</a> </a>
<a class="equipment-badge category-badge" id="equipment" onclick="activateCategory(this)"> <a class="equipment-badge category-badge" id="equipment" onclick="activateCategory(this)">
<img alt="equipment" src="/static/images/icon/equipment.svg" class="result-image"/> <img alt="equipment" src="/static/images/icon/equipment.svg" class="badge-image"/>
<p>EQUIPMENT</p> <p>EQUIPMENT</p>
</a> </a>
<a class="misc-badge category-badge" id="misc" onclick="activateCategory(this)"> <a class="misc-badge category-badge" id="misc" onclick="activateCategory(this)">
<img alt="misc" src="/static/images/icon/misc.svg" class="result-image"/> <img alt="misc" src="/static/images/icon/misc.svg" class="badge-image"/>
<p>MISC</p> <p>MISC</p>
</a> </a>
</div> </div>
@@ -100,11 +110,11 @@
<p>Loaders</p> <p>Loaders</p>
</a> </a>
<a class="forge-badge category-badge" id="forge" onclick="activateCategory(this)"> <a class="forge-badge category-badge" id="forge" onclick="activateCategory(this)">
<img alt="forge" src="/static/images/icon/forge-alt.svg" class="result-image"/> <img alt="forge" src="/static/images/icon/forge-alt.svg" class="badge-image"/>
<p>FORGE</p> <p>FORGE</p>
</a> </a>
<a class="fabric-badge category-badge" id="fabric" onclick="activateCategory(this)"> <a class="fabric-badge category-badge" id="fabric" onclick="activateCategory(this)">
<img alt="fabric" src="/static/images/icon/fabric.png" class="result-image"/> <img alt="fabric" src="/static/images/icon/fabric.png" class="badge-image"/>
<p>FABRIC</p> <p>FABRIC</p>
</a> </a>
</div> </div>