search nw displays the search results.

other section are being hidden in the case of a search and vice versa.
a 'nothing found' div was implemented
This commit is contained in:
J-Klinke
2024-06-24 17:03:47 +02:00
parent 43d3ff17d5
commit d96da1b1e7
7 changed files with 137 additions and 19 deletions

View File

@@ -15,6 +15,22 @@
<p>The place to launch and discover datasets and API endpoints.</p>
</header>
<template id="dataset-template">
<li class="dataset" data-id="id">
<div class="dataset-info">
<div class="details">
<h3>title</h3>
<p>Simply daily accountability phone call, powered by AI</p>
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
</template>
<section id="tool-bar">
<select id="sort-btn" class="btn flat" title="Sort entries">Sort by
<option>Author A-Z</option>
@@ -43,21 +59,9 @@
<section id="recents">
<h2>Recently added:</h2>
<ul class="datasets">
<!-- Preliminary content to be replaced by data from our server: -->
<li class="dataset" data-id="">
<div class="dataset-info">
<div class="icon standup"></div>
<div class="details">
<h3>Standup</h3>
<p>Simply daily accountability phone call, powered by AI</p>
</div>
</div>
<aside class="upvote">
<button class="upvote-btn btn flat">Upvote</button>
<span class="upvote-count">0</span>
<button class="downvote-btn btn flat">Downvote</button>
</aside>
</li>
<li class="dataset">
<div class="dataset-info">
<div class="icon tori"></div>
@@ -136,10 +140,13 @@
</ul>
</section>
<section id="search">
<section id="search" class="hidden">
<h2>Search results:</h2>
<div id="nothing-found">
<div id="nothing-found-bg"></div>
<h3 id="nothing-found-text">Nothing found</h3>
</div>
<ul class="datasets">
</ul>
</section>
</main>