rvtr/wiki
1
Fork 0
mirror of https://github.com/rvtr/wiki.git synced 2025-10-31 06:31:13 -04:00
Code Issues Actions Packages Projects Releases Wiki Activity

Use accordian for FAQ pages

Browse Source
This commit is contained in:
Pk11 2021-06-17 23:03:57 -05:00
parent 889f09b525
commit f66f7ef948
9 changed files with 125 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
_layouts/faq.html Normal file
View File

@ -0,0 +1,31 @@
---
layout: wiki
---
{% assign faqs = content | markdownify | split: "<h4 " %}
{% unless faqs[0] contains "</h4>" %}
{{ faqs[0] }}
{% endunless %}
<div class="accordion accordion-flush" id="faq-container">
{% assign faqs = faqs | where_exp: "faq", "faq contains '</h4>'" %}
{% for faq in faqs %}
{% assign id = faq | split: "</h4>" | first | split: ">" | first | replace: "id=", "" | replace: '"', "" %}
<div class="accordian-item">
<input id="faq-{{ id }}" class="d-none" name="faqs" type="radio">
<label for="faq-{{ id }}" onclick="setFaq('{{ id }}')">
<h2 class="accordion-header accordion-button collapsed flex-fill">
{{ faq | split: "</h4>" | first | split: ">" | last }}
</h2>
</label>
<div class="faq accordion-collapse show">
<div class="accordion-body">
{{ faq | split: "</h4>" | last }}
</div>
</div>
</div>
{% endfor %}
</div>
<script src="/assets/js/faq.js"></script>

6
_layouts/wiki.html
View File

@ -55,7 +55,11 @@ layout: compress
<div class="col-md-9">
<h1 class="mb-1">{{ page.long_title | default: page.title }}</h1>
<hr class="mt-0">
{% include anchor-headings.html html=content anchorBody="<small>#</small>" anchorClass="header-anchor" %}
{% if page.layout == "faq" %}
{{ content }}
{% else %}
{% include anchor-headings.html html=content anchorBody="<small>#</small>" anchorClass="header-anchor" %}
{% endif %}
<div class="alert alert-secondary small-alert" role="alert">
{{ site.data[page.collection].strings.need-help }}
</div>

16
assets/css/dark.scss
View File

@ -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);
}

5
assets/css/light.scss
View File

@ -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);

52
assets/css/style.scss
View File

@ -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;

15
assets/js/faq.js Normal file
View File

@ -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();
}
}

2
pages/_en-US/gbarunner2/faq.md
View File

@ -1,6 +1,6 @@
---
lang: en-US
layout: wiki
layout: faq
section: gbarunner2
title: FAQ & Troubleshooting
long_title: GBARunner2 FAQ & Troubleshooting

2
pages/_en-US/nds-bootstrap/faq.md
View File

@ -1,6 +1,6 @@
---
lang: en-US
layout: wiki
layout: faq
section: nds-bootstrap
title: FAQ & Troubleshooting
long_title: nds-bootstrap FAQ & Troubleshooting

2
pages/_en-US/twilightmenu/faq.md
View File

@ -1,6 +1,6 @@
---
lang: en-US
layout: wiki
layout: faq
section: twilightmenu
category: other
title: FAQ & Troubleshooting