Add categories + Infinite Scroll

This commit is contained in:
Jai A
2020-05-23 21:06:36 -07:00
parent 506a68ee6a
commit c24ab9831a
12 changed files with 287 additions and 26 deletions

View File

@@ -12,7 +12,7 @@
<title>Search</title>
</head>
<body>
<body onscroll="loadExtra()">
<header class="site-header">
<div class="temp-circle-logo"></div>
@@ -26,6 +26,10 @@
</div>
</header>
<a href="#" class="back-to-top" id="backToTop">
<img src="static/images/icon/up.svg" alt="up">
</a>
<div class="main-flex">
<div class="left-flex">
<div class="filters">
@@ -73,6 +77,18 @@
<img alt="cursed" src="static/images/icon/cursed.png" class="result-image"/>
<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="result-image"/>
<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="result-image"/>
<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="result-image"/>
<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="result-image"/>
<p>MISC</p>
@@ -84,7 +100,7 @@
<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"/>
<img alt="forge" src="static/images/icon/forge-alt.svg" class="result-image"/>
<p>FORGE</p>
</a>
<a class="fabric-badge category-badge" id="fabric" onclick="activateCategory(this)">
@@ -96,7 +112,7 @@
<div class="search-main">
<div class="search-div">
<input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch()">
<input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch(0)">
</div>
<div id="results" class="results">
@@ -130,7 +146,6 @@
</div>
</div>
<script src="static/js/search.js"></script>
</body>

View File

@@ -11,6 +11,9 @@
<img src="static/images/icon/download.svg" alt="download" title="Downloads"/>
<p title="Downloads">{{format this.downloads}}</p>
<img src="static/images/icon/created.svg" alt="created" title="Created"/>
<p title="Created">{{this.date_created}}</p>
<img src="static/images/icon/updated.svg" alt="updated" title="Last Updated"/>
<p title="Last Updated">{{this.date_modified}}</p>
@@ -19,7 +22,7 @@
<div class="loader-icons">
{{#contains this.keywords "forge"}}
<img alt="forge" src="static/images/icon/forge.jpg" class="forge"/>
<img alt="forge" src="static/images/icon/forge.svg" class="forge"/>
{{/contains}}
{{#contains this.keywords "fabric"}}
<img alt="fabric" src="static/images/icon/fabric.png"/>
@@ -76,6 +79,24 @@
<p>CURSED</p>
</div>
{{/contains}}
{{#contains this.keywords "storage"}}
<div class="storage-badge result-badge">
<img alt="storage" src="static/images/icon/storage.svg" class="result-image"/>
<p>STORAGE</p>
</div>
{{/contains}}
{{#contains this.keywords "food"}}
<div class="food-badge result-badge">
<img alt="food" src="static/images/icon/food.svg" class="result-image"/>
<p>FOOD</p>
</div>
{{/contains}}
{{#contains this.keywords "equipment"}}
<div class="equipment-badge result-badge">
<img alt="equipment" src="static/images/icon/equipment.svg" class="result-image"/>
<p>EQUIPMENT</p>
</div>
{{/contains}}
{{#contains this.keywords "misc"}}
<div class="misc-badge result-badge">
<img alt="misc" src="static/images/icon/misc.svg" class="result-image"/>