Version Selector

This commit is contained in:
Jai A
2020-05-13 22:34:19 -07:00
parent e0308a11c9
commit c29ab25dd2
6 changed files with 279 additions and 32 deletions

View File

@@ -26,10 +26,19 @@
</header>
<div class="main-flex">
<div class="categories-flex">
<div class="left-flex">
<div class="filters">
<select id="filters">
<option value="relevance">Relevance</option>
<option value="mercedes">Total Downloads</option>
<option value="updated">Last Updated</option>
<option value="audi">Newest</option>
</select>
</div>
<div class="categories">
<a class="categories-label category-badge category-active">
<p>CATEGORIES</p>
<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="result-image"/>
@@ -55,7 +64,7 @@
<img alt="library" src="static/images/icon/library.svg" class="result-image"/>
<p>LIBRARY</p>
</a>
<a class="world-badge category-badge" id="world" 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"/>
<p>WORLDGEN</p>
</a>
@@ -63,6 +72,12 @@
<img alt="cursed" src="static/images/icon/cursed.png" class="result-image"/>
<p>CURSED</p>
</a>
</div>
<div class="categories">
<a class="categories-label category-badge category-active">
<p>Loaders</p>
</a>
<a class="forge-badge category-badge" id="forge" onclick="activateCategory(this)">
<img alt="forge" src="static/images/icon/forge.jpg" class="result-image"/>
<p>FORGE</p>
@@ -74,7 +89,7 @@
</div>
</div>
<div class="column">
<div class="search-main">
<div class="search-div">
<input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch()">
</div>
@@ -83,6 +98,31 @@
{{> search_results}}
</div>
</div>
<div class="versions">
<button type="button" class="clear-button" onclick="clearFilters()">Clear Filters</button>
<div class="version-type">
<p class="version-type-label" onclick="toggleVisibility(this)">[+] Releases</p>
<div class="version-scroll" id="releases" style="display: none">
</div>
</div>
<div class="version-type">
<p class="version-type-label" onclick="toggleVisibility(this)">[+] Snapshots</p>
<div class="version-scroll" id="snapshots" style="display: none">
</div>
</div>
<div class="version-type">
<p class="version-type-label" onclick="toggleVisibility(this)">[+] Archaic</p>
<div class="version-scroll" id="archaic" style="display: none">
</div>
</div>
</div>
</div>

View File

@@ -16,6 +16,15 @@
<img src="static/images/icon/version.svg" alt="version" title="Version"/>
<p title="Version">1.2.3</p>
<div class="loader-icons">
{{#contains this.keywords "forge"}}
<img alt="forge" src="static/images/icon/forge.jpg" class="forge"/>
{{/contains}}
{{#contains this.keywords "fabric"}}
<img alt="fabric" src="static/images/icon/fabric.png"/>
{{/contains}}
</div>
</div>
</div>
<div class="result-badges">
@@ -67,18 +76,6 @@
<p>CURSED</p>
</div>
{{/contains}}
{{#contains this.keywords "forge"}}
<div class="forge-badge result-badge">
<img alt="forge" src="static/images/icon/forge.jpg" class="result-image"/>
<p>FORGE</p>
</div>
{{/contains}}
{{#contains this.keywords "fabric"}}
<div class="fabric-badge result-badge">
<img alt="fabric" src="static/images/icon/fabric.png" class="result-image"/>
<p>FABRIC</p>
</div>
{{/contains}}
</div>
</div>
{{/each}}