MarginaliaSearch/code/services-application/search-service/resources/jte/serp/dict-lookup.jte
2024-12-13 21:47:08 +01:00

86 lines
3.4 KiB
Plaintext

@import nu.marginalia.api.math.model.DictionaryEntry
@import nu.marginalia.search.command.SearchParameters
@import nu.marginalia.search.model.NavbarModel
@import nu.marginalia.search.model.SearchFilters
@import nu.marginalia.api.math.model.DictionaryResponse
@param SearchParameters parameters
@param DictionaryResponse result
@param NavbarModel navbar
!{SearchFilters filters = new SearchFilters(parameters);}
<!DOCTYPE html>
<html lang="en">
@template.part.head(title = "Marginalia Search - " + parameters.query())
<body class="min-h-screen bg-slate-100 dark:bg-gray-900 dark:text-white font-sans " >
@template.part.navbar(navbar = navbar)
<div>
<header class="border-b border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 shadow-md">
<div class="max-w-[1400px] mx-auto px-4 py-2 sm:py-4">
<div class="flex items-center">
<div class="hidden sm:block md:w-32 md:mr-16 md:ml-16"><h1 class="text-md sm:text-xl mr-8 font-serif whitespace-nowrap"><a href="/">Marginalia Search</a></h1></div>
<div class="w-full p-2 border-none backdrop-blur-sm">
@template.serp.part.searchform(query = parameters.query(), profile = parameters.profileStr(), filters = filters)
</div>
<div class="grow"></div>
<button class="fixed bottom-10 right-5 sm:hidden text-sm bg-margeblue text-white p-4 rounded-xl active:text-slate-200" id="filter-button">
<i class="fas fa-filter mr-3"></i>
Filters
</button>
</div>
</div>
</header>
<div class="max-w-[1400px] mx-auto flex gap-6">
<!-- Sidebar -->
@template.serp.part.sidebar(filters = filters)
<!-- Main content -->
<main class="flex-1 py-4 p-2 sm:p-4 max-w-3xl space-y-4">
<div class="border dark:border-gray-600 rounded p-4 bg-white dark:bg-gray-800">
<div class="mb-4">
<i class="fas fa-book text-margeblue dark:text-slate-200 mx-2"></i> ${result.word()}
</div>
@if (result.hasEntries())
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead>
<tr class="bg-gray-700">
<th scope="col" class="px-2 py-1 text-left text-xs font-medium text-gray-500 dark:text-gray-100 uppercase tracking-wider">Type</th>
<th scope="col" class="px-2 py-2 text-left text-xs font-medium text-gray-500 dark:text-gray-100 uppercase tracking-wider">Definition</th>
</tr>
</thead>
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600 text-xs">
@for (DictionaryEntry entry : result.entries())
<tr>
<td class="px-3 py-3">${entry.type()}</td>
<td class="px-3 py-3">${entry.definition()}</td>
</tr>
@endfor
</tbody>
</table>
@else
<div>No definition found.</div>
@endif
</div>
</main>
</div>
</div>
@template.serp.part.footerHowto()
@template.part.footerLegal()
<%-- Put this last to not bother SR users with double menus --%>
@template.serp.part.mobile-menu(filters = filters)
</body>
<script lang="javascript" src="js/mobile-button.js"></script>
<script lang="javascript" src="js/typeahead.js"></script>
</html>