Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add advanced search options #77

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
+106 −8
Open

Add advanced search options #77

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 60 additions & 2 deletions ejs-views/partials/search_bar.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,68 @@
<div class="text-center">
<h1>Packages make Pulsar do amazing things.</h1>
<form class="my-12" action="/packages/search">
<form class="search" method="get" action="/packages/search">
<input type="search" value="<% if (locals.search) { %><%- search %><% } %>" name="q" placeholder="Search Packages..." />
<button type="submit">
<i class="fas fa-magnifying-glass"></i>
Search
</button>

<h3 class="option-title">Method to sort the search results.</h3>
<ul class="radio-option-container">
<li class="radio-option-listing">
<div class="radio-option-inner">
<input id="horizontal-list-radio-sort-relevance" type="radio" name="sort" value="relevance"
<% if (locals.sortQuery === "relevance" || locals.sortQuery === "" || typeof locals.sortQuery === "undefined") { %><%= 'checked' %><% } %> class="radio-option-input" />
<label for="horizontal-list-radio-sort-relevance" class="radio-option-label">Relevance</label>
</div>
</li>
<li class="radio-option-listing">
<div class="radio-option-inner">
<input id="horizontal-list-radio-sort-downloads" type="radio" name="sort" value="downloads"
<% if (locals.sortQuery === "downloads") { %><%= 'checked' %><% } %> class="radio-option-input" />
<label for="horizontal-list-radio-sort-downloads" class="radio-option-label">Downloads</label>
</div>
</li>
<li class="radio-option-listing">
<div class="radio-option-inner">
<input id="horizontal-list-radio-sort-created_at" type="radio" name="sort" value="created_at"
<% if (locals.sortQuery === "created_at") { %><%= 'checked' %><% } %> class="radio-option-input" />
<label for="horizontal-list-radio-sort-created_at" class="radio-option-label">Created At</label>
</div>
</li>
<li class="radio-option-listing">
<div class="radio-option-inner">
<input id="horizontal-list-radio-sort-updated_at" type="radio" name="sort" value="updated_at"
<% if (locals.sortQuery === "updated_at") { %><%= 'checked' %><% } %> class="radio-option-input" />
<label for="horizontal-list-radio-sort-updated_at" class="radio-option-label">Updated At</label>
</div>
</li>
<li class="radio-option-listing">
<div class="radio-option-inner">
<input id="horizontal-list-radio-sort-stars" type="radio" name="sort" value="stars"
<% if (locals.sortQuery === "stars") { %><%= 'checked' %><% } %> class="radio-option-input" />
<label for="horizontal-list-radio-sort-stars" class="radio-option-label">Stars</label>
</div>
</li>
</ul>

<h3 class="option-title">Direction to list search results.</h3>
<ul class="radio-option-container">
<li class="radio-option-listing">
<div class="radio-option-inner">
<input id="horizontal-list-radio-direction-desc" type="radio" name="direction" value="desc"
<% if (locals.directionQuery === "desc" || locals.directionQuery === "" || typeof locals.directionQuery === "undefined") { %><%= 'checked' %><% } %> class="radio-option-input" />
<label for="horizontal-list-radio-direction-desc" class="radio-option-label">Descending</label>
</div>
</li>
<li class="radio-option-listing">
<div class="radio-option-inner">
<input id="horizontal-list-radio-direction-asc" type="radio" name="direction" value="asc"
<% if (locals.directionQuery === "asc") { %><%= 'checked' %><% } %> class="radio-option-input" />
<label for="horizontal-list-radio-direction-asc" class="radio-option-label">Ascending</label>
</div>
</li>
</ul>

</form>
</div>
</div>
20 changes: 14 additions & 6 deletions src/handlers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,12 +117,20 @@ async function searchHandler(req, res, timecop) {
timecop.start("transcribe-json");
let obj = await utils.prepareForListing(api.body);
timecop.end("transcribe-json");
res.render("search", { dev: DEV, packages: obj, search: req.query.q, pagination, timecop: timecop.timetable, page: {
name: `Search ${req.query.q}`,
og_url: "https://web.pulsar-edit.dev/packages/search",
og_description: "The Pulsar Package Repository",
og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
og_image_type: "image/svg+xml"
res.render("search", {
dev: DEV,
packages: obj,
sortQuery: req.query.sort ?? "",
directionQuery: req.query.direction ?? "",
search: req.query.q,
pagination,
timecop: timecop.timetable,
page: {
name: `Search ${req.query.q}`,
og_url: "https://web.pulsar-edit.dev/packages/search",
og_description: "The Pulsar Package Repository",
og_image: "https://web.pulsar-edit.dev/public/pulsar_name.svg",
og_image_type: "image/svg+xml"
}});
} catch(err) {
console.log(err);
Expand Down
32 changes: 32 additions & 0 deletions src/site.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,3 +174,35 @@ nav.active {
#pagination a.disabled {
@apply pointer-events-none text-secondary;
}

/**************************/
/******** SEARCH **********/
/**************************/

.search {
@apply my-12;
}

.search .option-title {
@apply mb-4 mt-4;
}

.search .radio-option-container {
@apply items-center w-full text-sm font-medium text-gray-900 border border-secondary bg-transparent rounded-lg sm:flex;
}

.search .radio-option-container .radio-option-listing {
@apply w-full border-b border-secondary sm:border-b-0 sm:border-r;
}

.search .radio-option-container .radio-option-listing .radio-option-inner {
@apply flex items-center pl-3;
}

.search .radio-option-container .radio-option-listing .radio-option-inner .radio-option-input {
@apply w-4 h-4 text-primary bg-gray-100 border-gray-300 focus:ring-primary focus:ring-2;
}

.search .radio-option-container .radio-option-listing .radio-option-inner .radio-option-label {
@apply w-full py-3 ml-2 text-sm font-medium text-text opacity-70;
}