From f66f7ef948ac5617ee242ff06eaca9414a9ff31f Mon Sep 17 00:00:00 2001 From: Pk11 Date: Thu, 17 Jun 2021 23:03:57 -0500 Subject: [PATCH] Use accordian for FAQ pages --- _layouts/faq.html | 31 ++++++++++++++++++ _layouts/wiki.html | 6 +++- assets/css/dark.scss | 16 +++++++++- assets/css/light.scss | 5 ++- assets/css/style.scss | 52 +++++++++++++++++++++++++++++++ assets/js/faq.js | 15 +++++++++ pages/_en-US/gbarunner2/faq.md | 2 +- pages/_en-US/nds-bootstrap/faq.md | 2 +- pages/_en-US/twilightmenu/faq.md | 2 +- 9 files changed, 125 insertions(+), 6 deletions(-) create mode 100644 _layouts/faq.html create mode 100644 assets/js/faq.js diff --git a/_layouts/faq.html b/_layouts/faq.html new file mode 100644 index 00000000..c39b1436 --- /dev/null +++ b/_layouts/faq.html @@ -0,0 +1,31 @@ +--- +layout: wiki +--- + +{% assign faqs = content | markdownify | split: "

" %} + {{ faqs[0] }} +{% endunless %} + +
+ {% assign faqs = faqs | where_exp: "faq", "faq contains '

'" %} + {% for faq in faqs %} + {% assign id = faq | split: "" | first | split: ">" | first | replace: "id=", "" | replace: '"', "" %} +
+ + +
+
+ {{ faq | split: "" | last }} +
+
+
+ {% endfor %} + + + diff --git a/_layouts/wiki.html b/_layouts/wiki.html index fd1cbcbc..fb34e44a 100644 --- a/_layouts/wiki.html +++ b/_layouts/wiki.html @@ -55,7 +55,11 @@ layout: compress

{{ page.long_title | default: page.title }}

- {% include anchor-headings.html html=content anchorBody="#" anchorClass="header-anchor" %} + {% if page.layout == "faq" %} + {{ content }} + {% else %} + {% include anchor-headings.html html=content anchorBody="#" anchorClass="header-anchor" %} + {% endif %} diff --git a/assets/css/dark.scss b/assets/css/dark.scss index 725e32c5..79d833c2 100755 --- a/assets/css/dark.scss +++ b/assets/css/dark.scss @@ -15,12 +15,15 @@ --a-color: #58a6ff; --small-color: gray; --carousel-caption-bg: #333b; - --table-alt-bg: #2a2a2a; + --table-alt-bg: #303030; --kbd-bg: #666; --kbd-border: #444; --alert-secondary-bg: #444; --alert-secondary-border: #2f2f2f; --details-bg: #3f3f3f; + --active-accordian-bg-color: #393939; + --active-accordian-header-color: #222; + --active-accordian-header-bg-color: #4477ac; // Cards --card-background: #444; @@ -40,3 +43,14 @@ --light-border: #292929; --light-placeholder: #999; } + +// Override FAQ accordian chevron color +#faq-container input + label > h2::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ddd'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); +} + +#faq-container input:checked + label > h2::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23222'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + color: red; + transform: rotate(-180deg); +} diff --git a/assets/css/light.scss b/assets/css/light.scss index db719d51..6c26f804 100755 --- a/assets/css/light.scss +++ b/assets/css/light.scss @@ -15,12 +15,15 @@ --a-color: #0366d6; --small-color: gray; --carousel-caption-bg: #fffb; - --table-alt-bg: #f9f9f9; + --table-alt-bg: #f3f3f3; --kbd-bg: #fafafa; --kbd-border: #ddd; --alert-secondary-bg: #e9e9e9; --alert-secondary-border: #bbb; --details-bg: #f9f9f9; + --active-accordian-bg-color: #fcfcfc; + --active-accordian-header-color: #0c63e4; + --active-accordian-header-bg-color: #e7f1ff; // Cards --card-background: var(--main-bg); diff --git a/assets/css/style.scss b/assets/css/style.scss index 9db10afb..b22cd96d 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -489,6 +489,58 @@ input:checked+label.btn-outline-secondary:hover, input:checked+label.btn-outline border-color: #565e64; } +// FAQs +#faq-container { + margin-bottom: 1rem; + + > div { + > .faq { + display: none; + background-color: var(--active-accordian-bg-color); + } + + > label { + width: 100%; + + > h2 { + font-weight: normal; + color: var(--header-color); + } + } + } + + + input:checked + label > h2 { + color: var(--active-accordian-header-color); + background-color: var(--active-accordian-header-bg-color); + } + + input:checked + label > h2::after { + background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230c63e4'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); + transform: rotate(-180deg); + } + + input:checked + label + .faq { + display: block; + } + + #faq-container > label { + margin-right: 0.25rem; + } + + input:checked + label.btn-outline-secondary { + color: #fff; + background-color: #6c757d; + border-color: #6c757d; + } + + input:checked + label.btn-outline-secondary:hover, input:checked + label.btn-outline-secondary:active, input:checked + label.btn-outline-secondary:focus { + color: #fff; + background-color: #5c636a; + border-color: #565e64; + } +} + // Select .form-select-dark { background-color: #444; diff --git a/assets/js/faq.js b/assets/js/faq.js new file mode 100644 index 00000000..de78275d --- /dev/null +++ b/assets/js/faq.js @@ -0,0 +1,15 @@ +function setFaq(tab) { + let url = new URL(window.location); + url.searchParams.set("faq", tab); + history.pushState({}, "", url); +} + +// Try get FAQ from URL +let urlFaq = new URL(window.location).searchParams.get("faq"); +if(urlFaq) { + faq = Array.from(document.getElementById("faq-container").children).filter(r => r.children[0].id == `faq-${urlFaq}`)[0]; + if(faq) { + faq.children[0].click(); + faq.children[2].scrollIntoView(); + } +} diff --git a/pages/_en-US/gbarunner2/faq.md b/pages/_en-US/gbarunner2/faq.md index 51bf4f85..3f20c026 100644 --- a/pages/_en-US/gbarunner2/faq.md +++ b/pages/_en-US/gbarunner2/faq.md @@ -1,6 +1,6 @@ --- lang: en-US -layout: wiki +layout: faq section: gbarunner2 title: FAQ & Troubleshooting long_title: GBARunner2 FAQ & Troubleshooting diff --git a/pages/_en-US/nds-bootstrap/faq.md b/pages/_en-US/nds-bootstrap/faq.md index cee59408..fa6db674 100644 --- a/pages/_en-US/nds-bootstrap/faq.md +++ b/pages/_en-US/nds-bootstrap/faq.md @@ -1,6 +1,6 @@ --- lang: en-US -layout: wiki +layout: faq section: nds-bootstrap title: FAQ & Troubleshooting long_title: nds-bootstrap FAQ & Troubleshooting diff --git a/pages/_en-US/twilightmenu/faq.md b/pages/_en-US/twilightmenu/faq.md index 99ab7e48..e9e6408b 100644 --- a/pages/_en-US/twilightmenu/faq.md +++ b/pages/_en-US/twilightmenu/faq.md @@ -1,6 +1,6 @@ --- lang: en-US -layout: wiki +layout: faq section: twilightmenu category: other title: FAQ & Troubleshooting