squirrel/app/templates/search_results.html

55 lines
1.9 KiB
HTML

{% extends "base.html" %}
{% block content %}
<div x-data="query">
<div id="search-header" class="flex m-2 items-center border-b pb-2 border-red-900 mx-10">
<a href="/" class="mx-10 text-2xl text-red-900 font-beyond-the-mountains">Squirrel</a>
<form action="/search" method="get">
<input
class="shadow appearance-none border-slate-600 rounded-full w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
type="text" size="80" name="q"
onfocus="this.select()"
x-bind:value="query"></input>
</form>
<div class="grow text-right">
Foo
</div>
</div>
<div id="search-main" class="mx-auto w-2/3">
<div id="search-info" class="flex">
<p class="grow"></p>
<p>Page <span x-text="page"></span> of <span x-text="pages"></span>,
<span x-text="total"></span> results.</p>
</div>
<div id="search-results">
<template x-for="result in results">
<div class="p-4 m-4">
<div class="m-2 flex">
<img class="w-16 h-16 m-2" x-bind:src="'/icons/' + result.mtype.replace('/', '-') + '.svg'"></img>
<div>
<a class="text-xl text-red-900" x-text="result.title" x-bind:href="'/docs/' + result.fpath" target="_blank"></a><br/>
<span class="text-sm" x-text="result.relevancyrating"></span>
</div>
</div>
<div>
<template x-for="snippet in result.snippets">
<span class="text-sm"><span x-html="snippet[2]"></span><br/></span>
</template>
</div>
</div>
</template>
</div>
<div id="search-footer" class="text-sm">
XQuery: <span x-text="xquery"></span>
</div>
</div>
<div>
<script>
var query = {{ search|tojson }};
</script>
{% endblock %}