Skip to content

Commit 758945e

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

4 files changed

Lines changed: 83 additions & 13 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: 44 additions & 7 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);
@@ -412,11 +413,19 @@ main {
412413

413414
/* ------------------------------- HINTS DIALOG */
414415
#hints-dialog {
416+
position: fixed;
417+
top: 50%;
418+
left: 50%;
419+
right: auto;
420+
bottom: auto;
421+
transform: translate(-50%, -50%);
422+
z-index: 1000;
415423
border: none;
416424
border-radius: 10px;
417425
padding: 0;
418-
max-width: min(600px, 90vw);
419-
max-height: 80vh;
426+
width: min(600px, calc(100vw - 1rem));
427+
max-width: min(600px, calc(100vw - 1rem));
428+
max-height: min(80vh, calc(100dvh - 1rem));
420429
background-color: var(--color-card-background);
421430
color: var(--color-background);
422431
box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
@@ -472,6 +481,7 @@ main {
472481
padding: 0.8em 1.2em;
473482
overflow-y: auto;
474483
flex: 1;
484+
-webkit-overflow-scrolling: touch;
475485
}
476486

477487
#hints-dialog-body ol {
@@ -503,6 +513,32 @@ main {
503513
color: var(--color-selected);
504514
}
505515

516+
@media (max-width: 640px) {
517+
#hints-dialog {
518+
max-width: none;
519+
width: calc(100vw - 1rem);
520+
max-height: calc(100dvh - 1rem);
521+
border-radius: 14px;
522+
}
523+
524+
#hints-dialog-header,
525+
#hints-dialog-body,
526+
#hints-dialog-footer {
527+
padding-left: 0.9em;
528+
padding-right: 0.9em;
529+
}
530+
531+
#hints-dialog-body li {
532+
font-size: 1rem;
533+
}
534+
535+
#hints-dialog-footer {
536+
position: sticky;
537+
bottom: 0;
538+
background-color: var(--color-card-background);
539+
}
540+
}
541+
506542
[data-tag].selected {
507543
margin: 0 0.4em;
508544
}
@@ -679,18 +715,19 @@ input:checked + .slider::before {
679715

680716
#nav-menu {
681717
color: #fff;
682-
position: absolute;
683-
right: -200%;
718+
position: fixed;
719+
right: 0;
684720
top: 0;
685721
z-index: 10000;
686722
background-color: #303030;
687-
transition: right 0.5s ease;
723+
transform: translateX(100%);
724+
transition: transform 0.5s ease;
725+
max-width: min(90vw, 420px);
688726
}
689727

690728
#nav-menu.visible {
691729
overflow: hidden auto;
692-
right: 0;
693-
transition: right 0.5s ease;
730+
transform: translateX(0);
694731
}
695732

696733
.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)