Skip to content

Commit 25a5025

Browse files
KristjanESPERANTOKristjanESPERANTO
committed
fix: improve hints view on mobile and full-page results
1 parent 3198545 commit 25a5025

4 files changed

Lines changed: 101 additions & 14 deletions

File tree

‎website/card.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,8 @@ export function createCard(moduleData, { filterByMaintainer, filterByTag }) {
112112
}
113113

114114
if (moduleData.issues) {
115-
const url = `result.html#${moduleData.name}-by-${moduleData.maintainer.replaceAll(" ", "-").replaceAll("&", "").replaceAll("/", "")}`;
115+
const moduleSlug = `${moduleData.name}-by-${moduleData.maintainer.replaceAll(" ", "-").replaceAll("&", "").replaceAll("/", "")}`;
116+
const url = `result.html?module=${encodeURIComponent(moduleSlug)}#${moduleSlug}`;
116117
const issuesLink = card.querySelector(".info .container.issues .text");
117118
issuesLink.href = url;
118119
issuesLink.addEventListener("click", (event) => {

‎website/index.css‎

Lines changed: 62 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
--font-size-xlarge: 3.75rem;
5151
}
5252

53+
html,
5354
body {
5455
margin: 0;
5556
font-size: var(--font-size);
@@ -128,7 +129,10 @@ header {
128129
border: 1px solid #888;
129130
border-radius: 5px;
130131
background-color: #eee;
131-
min-width: 25em;
132+
min-width: 0;
133+
width: min(25em, 100%);
134+
max-width: 100%;
135+
box-sizing: border-box;
132136
}
133137

134138
#top-left {
@@ -155,6 +159,8 @@ header {
155159
background-color: var(--color-background-gray);
156160
border-radius: 5px;
157161
min-width: 37ch;
162+
max-width: 100%;
163+
box-sizing: border-box;
158164
}
159165

160166
#sort-label,
@@ -391,6 +397,14 @@ main {
391397
#header-comment {
392398
margin-top: -10px;
393399
}
400+
401+
#search-input,
402+
#sort-dropdown,
403+
#category-filter {
404+
width: calc(100% - 1rem);
405+
min-width: 0;
406+
max-width: calc(100% - 1rem);
407+
}
394408
}
395409

396410
@media (0 <= width <= 664px) {
@@ -412,11 +426,19 @@ main {
412426

413427
/* ------------------------------- HINTS DIALOG */
414428
#hints-dialog {
429+
position: fixed;
430+
top: 50%;
431+
left: 50%;
432+
right: auto;
433+
bottom: auto;
434+
transform: translate(-50%, -50%);
435+
z-index: 1000;
415436
border: none;
416437
border-radius: 10px;
417438
padding: 0;
418-
max-width: min(600px, 90vw);
419-
max-height: 80vh;
439+
width: min(600px, calc(100vw - 1rem));
440+
max-width: min(600px, calc(100vw - 1rem));
441+
max-height: min(80vh, calc(100dvh - 1rem));
420442
background-color: var(--color-card-background);
421443
color: var(--color-background);
422444
box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
@@ -472,6 +494,7 @@ main {
472494
padding: 0.8em 1.2em;
473495
overflow-y: auto;
474496
flex: 1;
497+
-webkit-overflow-scrolling: touch;
475498
}
476499

477500
#hints-dialog-body ol {
@@ -503,6 +526,32 @@ main {
503526
color: var(--color-selected);
504527
}
505528

529+
@media (max-width: 640px) {
530+
#hints-dialog {
531+
max-width: none;
532+
width: calc(100vw - 1rem);
533+
max-height: calc(100dvh - 1rem);
534+
border-radius: 14px;
535+
}
536+
537+
#hints-dialog-header,
538+
#hints-dialog-body,
539+
#hints-dialog-footer {
540+
padding-left: 0.9em;
541+
padding-right: 0.9em;
542+
}
543+
544+
#hints-dialog-body li {
545+
font-size: 1rem;
546+
}
547+
548+
#hints-dialog-footer {
549+
position: sticky;
550+
bottom: 0;
551+
background-color: var(--color-card-background);
552+
}
553+
}
554+
506555
[data-tag].selected {
507556
margin: 0 0.4em;
508557
}
@@ -679,18 +728,23 @@ input:checked + .slider::before {
679728

680729
#nav-menu {
681730
color: #fff;
682-
position: absolute;
683-
right: -200%;
731+
position: fixed;
732+
right: 0;
684733
top: 0;
685734
z-index: 10000;
686735
background-color: #303030;
687-
transition: right 0.5s ease;
736+
width: min(90vw, 420px);
737+
transform: translateX(100%);
738+
transition: transform 0.5s ease;
739+
visibility: hidden;
740+
pointer-events: none;
688741
}
689742

690743
#nav-menu.visible {
691744
overflow: hidden auto;
692-
right: 0;
693-
transition: right 0.5s ease;
745+
transform: translateX(0);
746+
visibility: visible;
747+
pointer-events: auto;
694748
}
695749

696750
.nav-item {

‎website/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ <h3 id="hints-dialog-title"></h3>
190190
</div>
191191
<div id="hints-dialog-body"></div>
192192
<div id="hints-dialog-footer">
193-
<a id="hints-dialog-fulllink" href="" target="_blank" rel="noopener"
193+
<a id="hints-dialog-fulllink" href="" target="_self" rel="noopener"
194194
>View full results page →</a
195195
>
196196
</div>

‎website/result.html‎

Lines changed: 36 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,37 @@
99
<body>
1010
<div id="markdown-container"></div>
1111
<script>
12+
function normalizeModuleSlug(text) {
13+
return text
14+
.replaceAll(" ", "-")
15+
.replaceAll("&", "")
16+
.replaceAll("/", "");
17+
}
18+
19+
function filterToModule(markdownContainer, moduleSlug) {
20+
if (!moduleSlug) {
21+
return;
22+
}
23+
24+
const headings = [...markdownContainer.querySelectorAll("h3")];
25+
const targetHeading = headings.find(
26+
(heading) => normalizeModuleSlug(heading.textContent) === moduleSlug
27+
);
28+
29+
if (!targetHeading) {
30+
return;
31+
}
32+
33+
const section = [targetHeading];
34+
let node = targetHeading.nextElementSibling;
35+
while (node && node.tagName !== "H3") {
36+
section.push(node);
37+
node = node.nextElementSibling;
38+
}
39+
40+
markdownContainer.replaceChildren(...section);
41+
}
42+
1243
async function loadAndDisplayMarkdown() {
1344
const markdownContainer = document.getElementById("markdown-container");
1445
const markdownFile = "result.md";
@@ -22,6 +53,10 @@
2253
}
2354
const markdownText = await response.text();
2455
markdownContainer.innerHTML = marked.parse(markdownText);
56+
filterToModule(
57+
markdownContainer,
58+
new URLSearchParams(window.location.search).get("module")
59+
);
2560
addHeadingAnchors();
2661
} catch (error) {
2762
console.error("Error loading markdown:", error);
@@ -33,10 +68,7 @@
3368
function addHeadingAnchors() {
3469
const headings = document.querySelectorAll("h1, h2, h3, h4");
3570
headings.forEach((heading) => {
36-
const anchorId = heading.textContent
37-
.replaceAll(" ", "-")
38-
.replaceAll("&", "")
39-
.replaceAll("/", "");
71+
const anchorId = normalizeModuleSlug(heading.textContent);
4072
const anchor = document.createElement("a");
4173
anchor.id = anchorId;
4274
anchor.href = `#${anchorId}`;

0 commit comments

Comments
 (0)