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

Badges + Refactoring

Browse Source
This commit is contained in:
Jai A
2020-05-11 22:53:08 -07:00
parent 6be22c474d
commit a738998c2c
14 changed files with 337 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
templates/search.hbs
View File

@@ -5,30 +5,36 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="static/css/style.css" rel="stylesheet" type="text/css">
<link href="static/css/multiselect.css" rel="stylesheet" type="text/css">
<script src="static/js/multiselect.min.js"></script>
<link href="static/css/main.css" rel="stylesheet" type="text/css">
<link href="static/css/search.css" rel="stylesheet" type="text/css">
<title>Search</title>
</head>
<body>
<h1>Test Mod Search</h1>
<form>
<label for="search-input">Search for Mods:</label>
<input type="text" id="search-input" oninput="handleSearch()">
<header class="site-header">
<div class="temp-circle-logo"></div>
<h2>Site Name</h2>
<label for="categories">Categories:</label>
<select id="categories" multiple>
<option value="Adventure">Adventure</option>
<option value="Technology">Technology</option>
<option value="Magic">Magic</option>
<option value="Utility">Utility</option>
</select>
<div class="links-container">
<a href="home">home</a>
<a href="mods">mods</a>
<a href="modpacks">modpacks</a>
<a href="about">about</a>
</div>
</header>
<div class="search-container">
<div class="filters">
<label>
<input type="checkbox">
</label>
</div>
<input class="search-bar" type="text" id="search-input" placeholder="Search for mods..." oninput="handleSearch()">
</div>
</form>
<div id="results" class="results">
{{#each results}}
<div class="result gray-border rounded-border">
@@ -37,14 +43,49 @@
<h2>{{this.title}}</h2>
<p>{{this.description}}</p>
</div>
<div class="result-badges">
{{#contains this.keywords "Technology"}}
<div class="tech-badge result-badge">
<img alt="tech" src="static/images/icon/tech.svg">
<p>TECH</p>
</div>
{{/contains}}
{{#contains this.keywords "Adventure"}}
<div class="adventure-badge result-badge">
<img alt="adventure" src="static/images/icon/adventure.svg">
<p>ADVENTURE</p>
</div>
{{/contains}}
{{#contains this.keywords "Magic"}}
<div class="magic-badge result-badge">
<img alt="magic" src="static/images/icon/magic.svg">
<p>MAGIC</p>
</div>
{{/contains}}
{{#contains this.keywords "Utility"}}
<div class="utility-badge result-badge">
<img alt="util" src="static/images/icon/util.svg">
<p>UTILITY</p>
</div>
{{/contains}}
{{#contains this.keywords "Forge"}}
<div class="forge-badge result-badge">
<img alt="forge" src="static/images/icon/forge.jpg">
<p>FORGE</p>
</div>
{{/contains}}
{{#contains this.keywords "Fabric"}}
<div class="fabric-badge result-badge">
<img alt="fabric" src="static/images/icon/fabric.png">
<p>FABRIC</p>
</div>
{{/contains}}
</div>
</div>
{{/each}}
</div>
<script src="static/js/search.js"></script>
<script>
document.multiselect('#categories')
</script>
</body>