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

Implement SVG sprite sheet for icons, use thumbnails for mod icons

Browse Source
This commit is contained in:
Aeledfyr
2020-06-26 15:38:04 -05:00
parent e069184721
commit 7e03f3958e
5 changed files with 65 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
templates/search-results.hbs
View File

@@ -9,22 +9,22 @@
<p>{{this.description}}</p>
<div class="mod-info">
<span class="mod-downloads" title="Downloads">
<img src="/static/images/icon/download.svg" alt="downloads"/><!--
<svg><use xlink:href="/static/images/icon/spritesheet.svg#download"/></svg><!--
-->{{format this.downloads}}
</span>
<span class="mod-created" title="Created">
<img src="/static/images/icon/created.svg" alt="created"/><!--
<svg><use xlink:href="/static/images/icon/spritesheet.svg#created"/></svg><!--
-->{{this.date_created}}
</span>
<span class="mod-updated" title="Last Updated">
<img src="/static/images/icon/updated.svg" alt="updated"/><!--
<svg><use xlink:href="/static/images/icon/spritesheet.svg#updated"/></svg><!--
-->{{this.date_modified}}
</span>
<span class="mod-version" title="Version">
<img src="/static/images/icon/version.svg" alt="version" /><!--
<svg><use xlink:href="/static/images/icon/spritesheet.svg#version"/></svg><!--
-->{{this.latest_version}}
</span>
@@ -45,43 +45,43 @@
<div class="result-badges">
{{#contains this.keywords "technology"}}
<div class="tech-badge result-badge" title="Tech">
<img alt="tech" src="/static/images/icon/tech.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#tech"/></svg>
<p>TECH</p>
</div>
{{/contains}}
{{#contains this.keywords "adventure"}}
<div class="adventure-badge result-badge" title="Adventure">
<img alt="adventure" src="/static/images/icon/adventure.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#adventure"/></svg>
<p>ADVENTURE</p>
</div>
{{/contains}}
{{#contains this.keywords "magic"}}
<div class="magic-badge result-badge" title="Magic">
<img alt="magic" src="/static/images/icon/magic.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#magic"/></svg>
<p>MAGIC</p>
</div>
{{/contains}}
{{#contains this.keywords "utility"}}
<div class="utility-badge result-badge" title="Utility">
<img alt="util" src="/static/images/icon/util.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#util"/></svg>
<p>UTILITY</p>
</div>
{{/contains}}
{{#contains this.keywords "decoration"}}
<div class="decoration-badge result-badge" title="Decoration">
<img alt="decoration" src="/static/images/icon/decoration.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#decoration"/></svg>
<p>DECORATION</p>
</div>
{{/contains}}
{{#contains this.keywords "library"}}
<div class="library-badge result-badge" title="Library">
<img alt="library" src="/static/images/icon/library.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#library"/></svg>
<p>LIBRARY</p>
</div>
{{/contains}}
{{#contains this.keywords "worldgen"}}
<div class="world-badge result-badge" title="World">
<img alt="world" src="/static/images/icon/world.svg" class="badge-image"/>
<div class="worldgen-badge result-badge" title="Worldgen">
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#world"/></svg>
<p>WORLDGEN</p>
</div>
{{/contains}}
@@ -89,30 +89,29 @@
<div class="cursed-badge result-badge" title="Cursed">
<img alt="cursed" src="/static/images/icon/cursed.png" class="badge-image"/>
<p>CURSED</p>
<p>CURSED</p>
</div>
{{/contains}}
{{#contains this.keywords "storage"}}
<div class="storage-badge result-badge" title="Storage">
<img alt="storage" src="/static/images/icon/storage.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#storage"/></svg>
<p>STORAGE</p>
</div>
{{/contains}}
{{#contains this.keywords "food"}}
<div class="food-badge result-badge" title="Food">
<img alt="food" src="/static/images/icon/food.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#food"/></svg>
<p>FOOD</p>
</div>
{{/contains}}
{{#contains this.keywords "equipment"}}
<div class="equipment-badge result-badge" title="Equipment">
<img alt="equipment" src="/static/images/icon/equipment.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#equipment"/></svg>
<p>EQUIPMENT</p>
</div>
{{/contains}}
{{#contains this.keywords "misc"}}
<div class="misc-badge result-badge" title="Misc">
<img alt="misc" src="/static/images/icon/misc.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#misc"/></svg>
<p>MISC</p>
</div>
{{/contains}}

25
templates/search.hbs
View File

@@ -10,6 +10,7 @@
<link href="/static/css/main.css" rel="stylesheet" type="text/css">
<link href="/static/css/search.css" rel="stylesheet" type="text/css">
<link href="/static/css/normalize.css" rel="stylesheet" type="text/css">
<link rel="dns-prefetch" href="//media.forgecdn.net">
<title>Search</title>
</head>
@@ -67,31 +68,31 @@
<p>Categories</p>
</a>
<a class="tech-badge category-badge category-active" id="technology" onclick="activateCategory(this)">
<img alt="tech" src="/static/images/icon/tech.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#tech"/></svg>
<p>TECH</p>
</a>
<a class="adventure-badge category-badge" id="adventure" onclick="activateCategory(this)">
<img alt="adventure" src="/static/images/icon/adventure.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#adventure"/></svg>
<p>ADVENTURE</p>
</a>
<a class="magic-badge category-badge" id="magic" onclick="activateCategory(this)">
<img alt="magic" src="/static/images/icon/magic.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#magic"/></svg>
<p>MAGIC</p>
</a>
<a class="utility-badge category-badge" id="utility" onclick="activateCategory(this)">
<img alt="util" src="/static/images/icon/util.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#util"/></svg>
<p>UTILITY</p>
</a>
<a class="decoration-badge category-badge" id="decoration" onclick="activateCategory(this)">
<img alt="decoration" src="/static/images/icon/decoration.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#decoration"/></svg>
<p>DECORATION</p>
</a>
<a class="library-badge category-badge" id="library" onclick="activateCategory(this)">
<img alt="library" src="/static/images/icon/library.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#library"/></svg>
<p>LIBRARY</p>
</a>
<a class="world-badge category-badge" id="worldgen" onclick="activateCategory(this)">
<img alt="world" src="/static/images/icon/world.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#world"/></svg>
<p>WORLDGEN</p>
</a>
<a class="cursed-badge category-badge" id="cursed" onclick="activateCategory(this)">
@@ -99,19 +100,19 @@
<p>CURSED</p>
</a>
<a class="storage-badge category-badge" id="storage" onclick="activateCategory(this)">
<img alt="storage" src="/static/images/icon/storage.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#storage"/></svg>
<p>STORAGE</p>
</a>
<a class="food-badge category-badge" id="food" onclick="activateCategory(this)">
<img alt="food" src="/static/images/icon/food.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#food"/></svg>
<p>FOOD</p>
</a>
<a class="equipment-badge category-badge" id="equipment" onclick="activateCategory(this)">
<img alt="equipment" src="/static/images/icon/equipment.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#equipment"/></svg>
<p>EQUIPMENT</p>
</a>
<a class="misc-badge category-badge" id="misc" onclick="activateCategory(this)">
<img alt="misc" src="/static/images/icon/misc.svg" class="badge-image"/>
<svg class="badge-image"><use xlink:href="/static/images/icon/spritesheet.svg#misc"/></svg>
<p>MISC</p>
</a>
</div>
@@ -121,7 +122,7 @@
<p>Loaders</p>
</a>
<a class="forge-badge category-badge" id="forge" onclick="activateCategory(this)">
<img alt="forge" src="/static/images/icon/forge-alt.svg" class="badge-image"/>
<svg class="forge" viewBox="0 0 90 46"><use xlink:href="/static/images/icon/spritesheet.svg#forge-alt" /></svg>
<p>FORGE</p>
</a>
<a class="fabric-badge category-badge" id="fabric" onclick="activateCategory(this)">