Mirror/MarginaliaSearch
1
0
Fork 0
mirror of https://github.com/MarginaliaSearch/MarginaliaSearch.git synced 2025-02-23 21:18:58 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

(search) Move linked/similar domains to a popover style menu on mobile

Browse Source
This commit is contained in:
Viktor Lofgren 2025-01-01 15:23:25 +01:00
parent 81cdd6385d
commit e9f71ee39b
4 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
code/services-application/search-service/resources/jte/siteinfo/main.jte
View File

@ -134,4 +134,5 @@
@template.part.footerLegal() @template.part.footerLegal()
</body> </body>
<script lang="javascript" src="/js/mobile-button.js"></script>
</html> </html>

16
code/services-application/search-service/resources/jte/siteinfo/part/linkedDomains.jte
View File

@ -8,16 +8,18 @@
@if (!list.isEmpty()) @if (!list.isEmpty())
<div class="bg-white dark:bg-gray-800 shadow-sm rounded overflow-hidden border dark:border-gray-600"> <div class="bg-white dark:bg-gray-800 shadow-sm rounded overflow-hidden border dark:border-gray-600">
<div class="px-4 py-2 bg-margeblue text-white border-b border-gray-200 dark:border-gray-600"> <div class="px-4 py-2 bg-margeblue text-white border-b border-gray-200 dark:border-gray-600 flex place-items-baseline">
<h2 class="text-md">${title}</h2> <h2 class="text-md">${title}</h2>
<div class="grow"></div>
<button class="hide-filter-button fas fa-close"></button>
</div> </div>
<div class="overflow-x-auto"> <div class="overflow-x-auto">
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600"> <table class="min-w-full divide-y divide-gray-200 dark:divide-gray-600">
<thead> <thead>
<tr class="bg-gray-50 dark:bg-gray-700"> <tr class="bg-gray-50 dark: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">Link</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">Link</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">Rank</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 hidden md:visible">Rank</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">Domain</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">Domain</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">Similarity</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">Similarity</th>
</tr> </tr>
@ -25,7 +27,7 @@
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600 text-xs"> <tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-600 text-xs">
@for(SimilarDomain item : list) @for(SimilarDomain item : list)
<tr class="hover:bg-gray-50 dark:hover:bg-gray-700"> <tr class="hover:bg-gray-50 dark:hover:bg-gray-700">
<td class="px-3 py-3 whitespace-nowrap"> <td class="px-3 py-6 md:py-3 whitespace-nowrap">
@if(item.linkType().isLinked()) @if(item.linkType().isLinked())
<a href="/crosstalk/?domains=${domainName},${item.url().getDomain().toString()}" <a href="/crosstalk/?domains=${domainName},${item.url().getDomain().toString()}"
class="text-liteblue dark:text-blue-200 ${item.linkType().faIcon()}" class="text-liteblue dark:text-blue-200 ${item.linkType().faIcon()}"
@ -33,7 +35,7 @@
</a> </a>
@endif @endif
</td> </td>
<td class="px-3 py-3 whitespace-nowrap"> <td class="px-3 py-6 md:py-3 whitespace-nowrap hidden md:visible">
<div class="flex items-center"> <div class="flex items-center">
<span title="${item.rank()}%" class="text-sm text-gray-600 dark:text-yellow-200"> <span title="${item.rank()}%" class="text-sm text-gray-600 dark:text-yellow-200">
$unsafe{item.getRankSymbols()} $unsafe{item.getRankSymbols()}
@ -41,7 +43,7 @@
</div> </div>
</td> </td>
<td class="px-3 py-3 whitespace-nowrap"> <td class="px-3 py-6 md:py-3 whitespace-nowrap">
<a href="/site/${item.url().getDomain().toString()}?view=similar" <a href="/site/${item.url().getDomain().toString()}?view=similar"
rel="external noopener nofollow" rel="external noopener nofollow"
class="text-liteblue dark:text-blue-200 dark:text-blue-200"> class="text-liteblue dark:text-blue-200 dark:text-blue-200">
@ -49,7 +51,7 @@
</a> </a>
</td> </td>
<td class="px-3 py-3"> <td class="px-3 py-6 md:py-3">
<div class="w-16"> <div class="w-16">
<div class="dark:bg-gray-600 bg-gray-200 rounded-full h-2 overflow-hidden"> <div class="dark:bg-gray-600 bg-gray-200 rounded-full h-2 overflow-hidden">
<div class="bg-margeblue dark:bg-blue-400 h-2 rounded-full" <div class="bg-margeblue dark:bg-blue-400 h-2 rounded-full"

13
code/services-application/search-service/resources/jte/siteinfo/view/overview.jte
View File

@ -211,8 +211,19 @@
</div> </div>
@if (!siteInfo.similar().isEmpty() || !siteInfo.linking().isEmpty()) @if (!siteInfo.similar().isEmpty() || !siteInfo.linking().isEmpty())
<div class="mx-auto md:py-4 px-4 flex-1 space-y-4 content md:block w-full md:w-auto"> <div class="mx-auto md:py-4 px-4 flex-1 space-y-4 content md:block w-full md:w-auto hidden md:visible">
@template.siteinfo.part.linkedDomains("Similar Domains", siteInfo.domain(), siteInfo.similar()) @template.siteinfo.part.linkedDomains("Similar Domains", siteInfo.domain(), siteInfo.similar())
@template.siteinfo.part.linkedDomains("Linked Domains", siteInfo.domain(), siteInfo.linking()) @template.siteinfo.part.linkedDomains("Linked Domains", siteInfo.domain(), siteInfo.linking())
</div> </div>
<aside id="mobile-menu" class="fixed inset-0 z-50 flex justify-center bg-white/90 dark:bg-black/90 backdrop-blur-sm hidden p-2">
<div class="w-full">
@template.siteinfo.part.linkedDomains("Similar Domains", siteInfo.domain(), siteInfo.similar())
@template.siteinfo.part.linkedDomains("Linked Domains", siteInfo.domain(), siteInfo.linking())
</div>
</aside>
<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>
Similar
</button>
@endif @endif

12
code/services-application/search-service/resources/static/js/mobile-button.js
View File

@ -1,6 +1,14 @@
document.getElementById("filter-button").addEventListener("click", function() { document.getElementById("filter-button").addEventListener("click", function() {
document.getElementById("mobile-menu").classList.toggle("hidden"); document.getElementById("mobile-menu").classList.toggle("hidden");
}); });
document.getElementById("hide-filter-button").addEventListener("click", function() {
document.getElementById("mobile-menu").classList.toggle("hidden"); document.querySelectorAll("#hide-filter-button").forEach(button => {
button.addEventListener("click", function() {
document.getElementById("mobile-menu").classList.toggle("hidden");
});
});
document.querySelectorAll(".hide-filter-button").forEach(button => {
button.addEventListener("click", function() {
document.getElementById("mobile-menu").classList.toggle("hidden");
});
}); });