Skip to content

Commit b66bcb6

Browse files
KristjanESPERANTOKristjanESPERANTO
committed
refactor: overhaul hints view
1 parent 7c74c0b commit b66bcb6

7 files changed

Lines changed: 203 additions & 207 deletions

File tree

‎scripts/check-modules/__tests__/result-markdown.test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ describe("result-markdown", () => {
5454
);
5555

5656
assert.ok(markdown.includes("Last update: 2026-03-22T05:08:24.251Z"));
57+
assert.ok(markdown.includes("## General notes"));
5758
assert.ok(markdown.includes("### [MMM-Example by Alice](https://github.com/example/MMM-Example)"));
5859
assert.ok(markdown.includes("1. Issue one"));
5960
assert.ok(markdown.includes("2. Issue two"));

‎website/card.js‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { openHintsDialog } from "./hints-dialog.js?v=__ASSET_VERSION__";
2-
31
const cardTemplate = document.getElementById("card-template");
42

53
function renderDescription(description) {
@@ -116,10 +114,7 @@ export function createCard(moduleData, { filterByMaintainer, filterByTag }) {
116114
const url = `result.html?module=${encodeURIComponent(moduleSlug)}#${moduleSlug}`;
117115
const issuesLink = card.querySelector(".info .container.issues .text");
118116
issuesLink.href = url;
119-
issuesLink.addEventListener("click", (event) => {
120-
event.preventDefault();
121-
openHintsDialog(moduleData, url);
122-
});
117+
issuesLink.target = "_self";
123118
}
124119
else {
125120
card.querySelector(".info .container.issues").remove();

‎website/hints-dialog.js‎

Lines changed: 0 additions & 51 deletions
This file was deleted.

‎website/index.css‎

Lines changed: 0 additions & 128 deletions
Original file line numberDiff line numberDiff line change
@@ -477,134 +477,6 @@ main {
477477
}
478478
}
479479

480-
/* ------------------------------- HINTS DIALOG */
481-
#hints-dialog {
482-
position: fixed;
483-
top: 50%;
484-
left: 50%;
485-
right: auto;
486-
bottom: auto;
487-
transform: translate(-50%, -50%);
488-
z-index: 1000;
489-
border: none;
490-
border-radius: 10px;
491-
padding: 0;
492-
width: min(600px, calc(100vw - 1rem));
493-
max-width: min(600px, calc(100vw - 1rem));
494-
max-height: min(80vh, calc(100dvh - 1rem));
495-
background-color: var(--color-card-background);
496-
color: var(--color-background);
497-
box-shadow: 0 8px 32px rgb(0 0 0 / 40%);
498-
overflow: hidden;
499-
}
500-
501-
#hints-dialog[open] {
502-
display: flex;
503-
flex-direction: column;
504-
}
505-
506-
#hints-dialog::backdrop {
507-
background: rgb(0 0 0 / 50%);
508-
}
509-
510-
#hints-dialog-header {
511-
display: flex;
512-
justify-content: space-between;
513-
align-items: center;
514-
padding: 0.8em 1em;
515-
background-color: var(--color-background);
516-
color: var(--color-foreground);
517-
gap: 1em;
518-
}
519-
520-
#hints-dialog-title {
521-
margin: 0;
522-
font-size: 1rem;
523-
font-weight: 600;
524-
flex: 1;
525-
overflow: hidden;
526-
text-overflow: ellipsis;
527-
white-space: nowrap;
528-
}
529-
530-
#hints-dialog-close {
531-
background: none;
532-
border: none;
533-
color: var(--color-foreground);
534-
cursor: pointer;
535-
font-size: 1.1rem;
536-
padding: 0.1em 0.3em;
537-
border-radius: 4px;
538-
line-height: 1;
539-
flex-shrink: 0;
540-
}
541-
542-
#hints-dialog-close:hover {
543-
background-color: #fff3;
544-
}
545-
546-
#hints-dialog-body {
547-
padding: 0.8em 1.2em;
548-
overflow-y: auto;
549-
flex: 1;
550-
-webkit-overflow-scrolling: touch;
551-
}
552-
553-
#hints-dialog-body ol {
554-
margin: 0;
555-
padding-left: 1.4em;
556-
}
557-
558-
#hints-dialog-body li {
559-
margin-bottom: 0.5em;
560-
font-size: 0.9rem;
561-
line-height: 1.4;
562-
}
563-
564-
#hints-dialog-body code {
565-
background-color: #0001;
566-
border-radius: 3px;
567-
padding: 0.1em 0.3em;
568-
font-size: 0.85em;
569-
}
570-
571-
#hints-dialog-footer {
572-
padding: 0.6em 1.2em;
573-
border-top: 1px solid #0002;
574-
text-align: right;
575-
font-size: 0.85rem;
576-
}
577-
578-
#hints-dialog-footer a {
579-
color: var(--color-selected);
580-
}
581-
582-
@media (max-width: 640px) {
583-
#hints-dialog {
584-
max-width: none;
585-
width: calc(100vw - 1rem);
586-
max-height: calc(100dvh - 1rem);
587-
border-radius: 14px;
588-
}
589-
590-
#hints-dialog-header,
591-
#hints-dialog-body,
592-
#hints-dialog-footer {
593-
padding-left: 0.9em;
594-
padding-right: 0.9em;
595-
}
596-
597-
#hints-dialog-body li {
598-
font-size: 1rem;
599-
}
600-
601-
#hints-dialog-footer {
602-
position: sticky;
603-
bottom: 0;
604-
background-color: var(--color-card-background);
605-
}
606-
}
607-
608480
[data-tag].selected {
609481
margin: 0 0.4em;
610482
}

‎website/index.html‎

Lines changed: 0 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -183,19 +183,6 @@ <h1>MagicMirror² 3rd Party Modules</h1>
183183
</div>
184184
</template>
185185

186-
<dialog id="hints-dialog" aria-labelledby="hints-dialog-title">
187-
<div id="hints-dialog-header">
188-
<h3 id="hints-dialog-title"></h3>
189-
<button id="hints-dialog-close" aria-label="Close">✕</button>
190-
</div>
191-
<div id="hints-dialog-body"></div>
192-
<div id="hints-dialog-footer">
193-
<a id="hints-dialog-fulllink" href="" target="_self" rel="noopener"
194-
>View full results page →</a
195-
>
196-
</div>
197-
</dialog>
198-
199186
<script src="script.js?v=__ASSET_VERSION__" type="module"></script>
200187
</body>
201188
</html>

‎website/result.css‎

Lines changed: 92 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@
1313
}
1414

1515
body {
16-
margin: 5rem;
16+
margin: 0;
17+
padding: clamp(1rem, 3vw, 3rem);
1718
color: var(--color-text);
1819
font-size: var(--font-size);
1920
font-family: "Segoe UI", SegoeUI, Arial, sans-serif;
@@ -22,6 +23,96 @@ body {
2223
background-color: var(--color-background);
2324
}
2425

26+
#page-header,
27+
#page-content {
28+
max-width: 72rem;
29+
margin: 0 auto;
30+
}
31+
32+
#page-header {
33+
margin-bottom: 1.5rem;
34+
}
35+
36+
#page-actions {
37+
display: flex;
38+
flex-wrap: wrap;
39+
gap: 0.75rem 1rem;
40+
margin-bottom: 0.75rem;
41+
}
42+
43+
.action-button {
44+
display: inline-flex;
45+
align-items: center;
46+
justify-content: center;
47+
gap: 0.4rem;
48+
padding: 0.7rem 1rem;
49+
border-radius: 999px;
50+
font-weight: 700;
51+
line-height: 1;
52+
text-decoration: none;
53+
border: 1px solid transparent;
54+
box-shadow: 0 8px 20px rgb(0 0 0 / 18%);
55+
transition:
56+
transform 140ms ease,
57+
box-shadow 140ms ease,
58+
background-color 140ms ease,
59+
border-color 140ms ease,
60+
color 140ms ease;
61+
}
62+
63+
.action-button:hover {
64+
text-decoration: none;
65+
transform: translateY(-1px);
66+
box-shadow: 0 10px 24px rgb(0 0 0 / 26%);
67+
}
68+
69+
.action-button:focus-visible {
70+
outline: 3px solid #fff8;
71+
outline-offset: 3px;
72+
}
73+
74+
.action-button {
75+
background: linear-gradient(135deg, #7b7b7b, #616161);
76+
color: #fff;
77+
border-color: #a9a9a9;
78+
}
79+
80+
.action-button:hover {
81+
background: linear-gradient(135deg, #8a8a8a, #707070);
82+
}
83+
84+
#page-eyebrow {
85+
margin: 0;
86+
color: #a9a9a9;
87+
font-size: 1.35rem;
88+
letter-spacing: 0.03em;
89+
text-transform: uppercase;
90+
font-weight: 700;
91+
line-height: 1.2;
92+
}
93+
94+
.module-intro {
95+
margin: 1rem 0 1.5rem;
96+
}
97+
98+
.module-section-heading {
99+
margin: 0 0 0.5rem;
100+
font-size: 1.15rem;
101+
line-height: 1.2;
102+
color: #e7e7e7;
103+
}
104+
105+
.module-intro ul {
106+
margin: 0 0 1rem;
107+
padding-left: 1.5rem;
108+
}
109+
110+
#page-title {
111+
margin: 0.15rem 0 0;
112+
font-size: clamp(2rem, 4vw, 3.5rem);
113+
line-height: 1.1;
114+
}
115+
25116
a {
26117
text-decoration: none;
27118
color: inherit;

0 commit comments

Comments
 (0)