Skip to content

Commit 496ee2d

Browse files
BadDaemonBadDaemon
committed
wiki: FAQ: MD3E
* Use details/summary * Simplifies CSS * Simplifies JS * Remove border-color, add rounding according to md3e guidelines Change-Id: Ie8d6f324eecb2dd3fe5350cc282eb27507d0ade6
1 parent 513af59 commit 496ee2d

2 files changed

Lines changed: 102 additions & 94 deletions

File tree

‎_sass/lineage/_theme.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@
1717
--theme-bg-neutral: #fafafa;
1818
--theme-bg-footer: #eee;
1919
--theme-bg-device: #f6fafa;
20+
--theme-bg-surface: #f6f6f6;
2021

2122
--theme-text: #3c4858;
2223
--theme-text-soft: #555555;
@@ -64,6 +65,7 @@
6465
--theme-bg-neutral: #1f2526;
6566
--theme-bg-footer: #1c1c1c;
6667
--theme-bg-device: #212626;
68+
--theme-bg-surface: #1f2526;
6769

6870
--theme-text: #e6ecef;
6971
--theme-text-soft: #d5dfe3;

‎pages/faq.html‎

Lines changed: 100 additions & 94 deletions
Original file line numberDiff line numberDiff line change
@@ -5,127 +5,133 @@
55
toc: false
66
---
77

8-
<div class="faq-accordion">
9-
{%- for category in site.data.faq %}
10-
{%- assign data = category | first %}
11-
<div class="faq-category">
12-
<h3>{{ data | first | capitalize }}</h3>
13-
<div class="accordion">
14-
{%- assign pairs = data | last %}
15-
{%- for item in pairs %}
16-
{%- assign question_id = item.question | strip_html | downcase | replace: ' ', '-' | replace_regex : '[^a-z0-9-]', '' %}
17-
<div class="accordion-item">
18-
<button class="accordion-button" aria-expanded="false" id="{{ question_id }}">
19-
{{ item.question | markdownify }}
20-
</button>
21-
<div class="accordion-content">
22-
{{ item.response | markdownify }}
23-
</div>
24-
</div>
25-
{%- endfor %}
26-
</div>
8+
{%- for category in site.data.faq %}
9+
{%- assign data = category | first %}
10+
<div class="faq-category">
11+
<h3>{{ data | first | capitalize }}</h3>
12+
{%- assign pairs = data | last %}
13+
<div>
14+
{%- for item in pairs %}
15+
{%- assign question_id = item.question | strip_html | downcase | replace: ' ', '-' | replace_regex : '[^a-z0-9-]', '' %}
16+
<details class="faq-item" id="{{ question_id }}" name="lineage-faq">
17+
<summary>
18+
{{ item.question | markdownify }}
19+
</summary>
20+
<div class="faq-content">
21+
{{ item.response | markdownify }}
22+
</div>
23+
</details>
24+
{%- endfor %}
2725
</div>
28-
{%- endfor %}
29-
</div>
26+
</div>
27+
{%- endfor %}
3028

3129
<style>
32-
.faq-accordion .faq-category h3 {
33-
margin-top: 20px;
30+
.faq-category h3 {
31+
margin-top: 1rem;
3432
border-bottom: 1px solid var(--theme-border);
35-
padding-bottom: 5px;
33+
transition: all var(--transition-speed);
34+
padding-bottom: 0rem;
3635
}
3736

38-
.accordion-item {
39-
margin-bottom: 0.5rem;
40-
border: 1px solid var(--theme-border);
41-
border-radius: 0.5rem;
37+
.faq-item {
4238
overflow: hidden;
39+
border-radius: 0.25rem;
40+
margin-bottom: 0.25rem;
4341
transition: all var(--transition-speed);
42+
background-color: var(--theme-bg-surface);
4443
}
4544

46-
.accordion-button {
47-
color: var(--theme-text);
48-
background-color: var(--theme-bg-neutral);
49-
transition: background-color 0.6s ease;
50-
padding: 10px 15px;
51-
width: 100%;
52-
text-align: left;
53-
border: none;
54-
cursor: pointer;
55-
display: flex;
56-
justify-content: space-between;
57-
align-items: center;
58-
transition: all var(--transition-speed);
45+
.faq-item:first-child, .faq-item[open] {
46+
border-top-left-radius: 1rem;
47+
border-top-right-radius: 1rem;
5948
}
6049

61-
.accordion-button::after {
62-
content: '+';
63-
font-size: 1.2em;
64-
font-family: monospace;
50+
.faq-item:last-child, .faq-item[open] {
51+
border-bottom-left-radius: 1rem;
52+
border-bottom-right-radius: 1rem;
6553
}
6654

67-
html {
68-
scroll-padding-top: 80px;
55+
.faq-item::details-content {
56+
height: 0;
57+
opacity: 0;
58+
interpolate-size: allow-keywords;
59+
transition: height var(--transition-speed), opacity var(--transition-speed);
60+
}
61+
62+
.faq-item[open]::details-content {
63+
height: auto;
64+
opacity: 1;
65+
padding: 0rem 1rem 1rem 1rem;
6966
}
7067

71-
.accordion-button[aria-expanded="true"]::after {
72-
content: '-';
68+
.faq-content p {
69+
margin: 0;
7370
}
7471

75-
.accordion-button p {
76-
margin: 0px;
72+
.faq-content ul {
73+
padding-left: 1rem;
74+
margin-bottom: 0;
7775
}
7876

79-
.accordion-content {
80-
padding: 1rem;
81-
background-color: var(--theme-bg);
82-
display: none; /* Initially hidden */
77+
summary {
78+
display: flex;
79+
justify-content: space-between;
80+
align-items: center;
81+
cursor: pointer;
82+
list-style: none;
83+
background-color: var(--theme-bg-surface);
8384
transition: background-color var(--transition-speed);
85+
font-weight: bolder;
86+
}
87+
summary::-webkit-details-marker { display: none; }
88+
89+
summary::after {
90+
content: "+";
91+
font-size: 1.2rem;
92+
font-weight: bold;
93+
transition: transform 0.3s ease;
94+
margin-right: 1rem;
8495
}
8596

86-
.accordion-content p:last-child, .accordion-content ul {
87-
margin-bottom: 0;
97+
summary p {
98+
margin: 10px 15px !important;
99+
flex-grow: 1;
100+
}
101+
102+
details[open] summary::after {
103+
content: "−";
104+
transform: rotate(180deg);
105+
}
106+
107+
html {
108+
scroll-padding-top: 80px;
88109
}
89110
</style>
90111

91112
<script>
92-
$(window).on("load", function() {
93-
const accordionItems = document.querySelectorAll('.accordion-item');
94-
95-
accordionItems.forEach(item => {
96-
const button = item.querySelector('.accordion-button');
97-
const content = item.querySelector('.accordion-content');
98-
99-
button.addEventListener('click', () => {
100-
const isExpanded = button.getAttribute('aria-expanded') === 'true' || false;
101-
button.setAttribute('aria-expanded', !isExpanded);
102-
content.style.display = isExpanded ? 'none' : 'block';
103-
if (!isExpanded) {
104-
window.location.hash = button.id;
105-
}
106-
});
107-
});
108-
109-
// Check the URL hash on page load
110-
if (window.location.hash) {
111-
const targetId = window.location.hash.substring(1); // Remove the '#'
112-
expandAccordion(targetId);
113+
const handleFaqNavigation = () => {
114+
const hash = window.location.hash;
115+
if (hash) {
116+
const target = document.querySelector(hash);
117+
if (target && target.tagName === 'DETAILS') {
118+
target.open = true;
119+
target.scrollIntoView({ behavior: 'smooth' });
120+
}
113121
}
114-
});
115-
116-
function expandAccordion(questionId) {
117-
const buttonToExpand = document.getElementById(questionId);
118-
if (buttonToExpand) {
119-
const accordionItem = buttonToExpand.closest('.accordion-item');
120-
const content = accordionItem.querySelector('.accordion-content');
121-
buttonToExpand.setAttribute('aria-expanded', 'true');
122-
content.style.display = 'block';
122+
};
123+
124+
window.addEventListener('load', handleFaqNavigation);
125+
window.addEventListener('hashchange', handleFaqNavigation);
126+
127+
document.addEventListener('toggle', (event) => {
128+
var target = event.target;
129+
if (target.tagName === 'DETAILS' && target.open) {
130+
const id = target.id;
131+
if (id && `#${id}` !== window.location.hash) {
132+
history.replaceState(null, null, `#${id}`);
133+
}
134+
target.scrollIntoView({ behavior: 'smooth' });
123135
}
124-
}
125-
126-
$(window).on("hashchange", function(e) {
127-
const targetId = window.location.hash.substring(1); // Remove the '#'
128-
expandAccordion(targetId);
129-
});
136+
}, true);
130137
</script>
131-

0 commit comments

Comments
 (0)