-
Notifications
You must be signed in to change notification settings - Fork 53
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add faq section with expanding items * Add footer
- Loading branch information
1 parent
3035d4c
commit 90041bb
Showing
11 changed files
with
640 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,44 @@ | ||
| // For rendering code tabs without UIKit in the original Code Tabs plugin, also with grouping | ||
| document.addEventListener("DOMContentLoaded", function() { | ||
| var defaultTabs = document.querySelectorAll("#codeblock-default-selection") | ||
| for (i = 0; i < defaultTabs.length; i++) { | ||
| defaultTabs[i].click(); | ||
| } | ||
| }); | ||
|
|
||
| function showTab(evt, tabId) { | ||
| // Declare all variables | ||
| var i, tabcontent, tablinks; | ||
| var currentTab = evt.currentTarget | ||
| var codeblock = currentTab.parentElement.parentElement | ||
|
|
||
| // Get all elements with class="tabcontent" and hide them | ||
| tabcontent = codeblock.getElementsByClassName("tabcontent"); | ||
| for (i = 0; i < tabcontent.length; i++) { | ||
| tabcontent[i].style.display = "none"; | ||
| } | ||
|
|
||
| // Get all elements with class="tablinks" and remove the class "active" | ||
| tablinks = codeblock.getElementsByClassName("tablinks"); | ||
| for (i = 0; i < tablinks.length; i++) { | ||
| tablinks[i].className = tablinks[i].className.replace(" active", ""); | ||
| } | ||
|
|
||
| // Show the current tab, and add an "active" class to the button that opened the tab | ||
| codeblock.querySelector("#"+tabId).style.display = "block"; | ||
| evt.currentTarget.className += " active"; | ||
| } | ||
|
|
||
| function copyCodeTabToClipboard(evt) { | ||
| var range = document.createRange(); | ||
| var currentTab = evt.currentTarget | ||
| var activeTab = currentTab.parentElement.querySelector("button.active") | ||
| var tabId = activeTab.textContent | ||
|
|
||
| var codeblock = currentTab.parentElement.parentElement.querySelector("#"+tabId) | ||
| range.selectNode(codeblock); | ||
| window.getSelection().removeAllRanges(); // clear current selection | ||
| window.getSelection().addRange(range); // to select text | ||
| document.execCommand("copy"); | ||
| window.getSelection().removeAllRanges();// to deselect | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| const tabNav = document.querySelectorAll(".code-tabs-main-wrapper ul li"); | ||
| const snippetTab = document.querySelectorAll("[data-snippettab]"); | ||
|
|
||
| // console.log(snippetTab); | ||
|
|
||
| function removeActiveSnippetTab() { | ||
| tabNav.forEach((singletab) => { | ||
| singletab.classList.remove("active-tab-example"); | ||
| }); | ||
| } | ||
|
|
||
| function removeActiveSnippetTabDiv() { | ||
| snippetTab.forEach((snippetTabDiv) => { | ||
| snippetTabDiv.classList.remove("activeCodeSnippet"); | ||
| }); | ||
| } | ||
|
|
||
| tabNav.forEach((tab) => { | ||
| tab.addEventListener("click", () => { | ||
| removeActiveSnippetTab(); | ||
| const tabName = tab.innerHTML.toLowerCase(); | ||
| removeActiveSnippetTabDiv(); | ||
| snippetTab.forEach((singleSnippetTab) => { | ||
| if (tabName === singleSnippetTab.dataset.snippettab) { | ||
| singleSnippetTab.classList.add("activeCodeSnippet"); | ||
| } | ||
| // console.log(singleSnippetTab.dataset.snippettab); | ||
| }); | ||
|
|
||
| tab.classList.add("active-tab-example"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| var faqList = document.querySelector('.faq-list'); | ||
|
|
||
| if (faqList) { | ||
| document.querySelectorAll('.faq-list > dt').forEach(function (dd) { | ||
| dd.classList.add('faq-list--collapsed'); | ||
| }); | ||
|
|
||
| document.querySelector('.faq-list').addEventListener('click', function (event) { | ||
| if (event.target.tagName === 'DT') { | ||
| var dd = event.target; | ||
|
|
||
| if (dd.classList.contains('faq-list--expanded')) { | ||
| dd.classList.remove('faq-list--expanded'); | ||
| dd.classList.add('faq-list--collapsed'); | ||
| } else { | ||
| dd.classList.add('faq-list--expanded'); | ||
| dd.classList.remove('faq-list--collapsed'); | ||
| } | ||
| } | ||
| }); | ||
| } |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,111 @@ | ||
| .faq-wrapper { | ||
| margin: 36px 0; | ||
| } | ||
|
|
||
| .faq { | ||
| margin: 0 auto; | ||
|
|
||
| @include breakpoint($medium) { | ||
| display: grid; | ||
| grid-template-columns: 15% 1fr; | ||
| gap: 160px; | ||
|
|
||
| &__title { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-size: 32px; | ||
| line-height: 40px; | ||
| font-weight: 700; | ||
| color: unset; | ||
| } | ||
| } | ||
|
|
||
| &__title { | ||
| &:before { | ||
| margin-bottom: 12px; | ||
| width: 38px; | ||
| height: 38px; | ||
| border-radius: 32px; | ||
| content: url(/images/svg/faq.svg); | ||
| background: linear-gradient( | ||
| rgba(255, 149, 5, 0.5019607843), | ||
| rgba(255, 149, 5, 0) | ||
| ); | ||
| display: block; | ||
| padding: 6px; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .faq-list { | ||
| font-family: 'DM Sans', "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif; | ||
|
|
||
| @include breakpoint($large) { | ||
| margin-bottom: 100px; | ||
| } | ||
|
|
||
| dt { | ||
| padding: $p-m 0; | ||
| font-size: 20px; | ||
| color: #000; | ||
| font-weight: 500; | ||
|
|
||
| @include breakpoint($medium) { | ||
| padding: $p-l 0; | ||
| font-size: 24px; | ||
| line-height: 32px; | ||
|
|
||
| &:first-child { | ||
| padding-top: 0; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| &__icon { | ||
| align-self: flex-end; | ||
| color: #2d69f6; | ||
| margin-left: auto; | ||
| font-size: 2em; | ||
| } | ||
|
|
||
| &--expanded { | ||
| .faq-list__icon:after { | ||
| content: '-'; | ||
| } | ||
| } | ||
|
|
||
| dt { | ||
| display: flex; | ||
|
|
||
| &.faq-list--collapsed { | ||
| border-bottom: 2px solid #dbd8df; | ||
|
|
||
| .faq-list__icon:after { | ||
| content: '+'; | ||
| } | ||
|
|
||
| & + dd { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| &.faq-list--expanded { | ||
| border-bottom: none; | ||
|
|
||
| & + dd { | ||
| border-bottom: 2px solid #dbd8df; | ||
| display: block; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| dd { | ||
| margin: 0; | ||
| padding: $p-m 0; | ||
| font-size: 16px; | ||
|
|
||
| @include breakpoint($medium) { | ||
| padding-bottom: $p-l 0; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.