diff --git a/assets/_src/js/_faq.js b/assets/_src/js/_faq.js new file mode 100644 index 0000000..9719c68 --- /dev/null +++ b/assets/_src/js/_faq.js @@ -0,0 +1,66 @@ + +//=include ../../../node_modules/toc/dist/toc.js + +var Faq = (function(w, d, $) { + + 'use strict' + + var app, _private, _config + + _config = { + faqQuestion: $('.faq__question'), + faqAnswer: $('.faq__answer'), + faqTitle: $('.faq__title'), + faqTocColumn: $('.grid__col--toc'), + faqToc: $('#toc'), + minWidth: 768 // $screen-sm + } + + _private = { + faqToggle: function() { + _config.faqQuestion.click(function() { + $(this).toggleClass('open'); + $(this).next(_config.faqAnswer).toggleClass('open'); + }); + }, + faqTocInit: function() { + _config.faqToc.toc({ + 'selectors': _config.faqTitle, // elements to use as headings + 'container': 'body', // element to find all selectors in + 'smoothScrolling': true, // enable or disable smooth scrolling on click + 'highlightOffset': 200, // offset to trigger the next headline + }); + }, + faqTocSticky: function() { + var win = $(window); + + win.on('load resize scroll',function(e) { + if (_private.isWide()) { + if ( win.scrollTop() > _config.faqTocColumn.offset().top) { + _config.faqToc.addClass('sticky'); + } else { + _config.faqToc.removeClass('sticky'); + } + + // TODO: remove sticky when bottom of content has been reached + } + }); + }, + isWide: function() { + return $(window).width() >= _config.minWidth; + } + + // TODO: actually make section jumps work + } + + app = { + init: function() { + _private.faqToggle(); + _private.faqTocInit(); + _private.faqTocSticky(); + } + } + + return app + +})(window, document, jQuery) diff --git a/assets/_src/js/ascribe.js b/assets/_src/js/ascribe.js index dcb32a6..66ff5b2 100644 --- a/assets/_src/js/ascribe.js +++ b/assets/_src/js/ascribe.js @@ -1,8 +1,11 @@ +//=include _faq.js + $(document).ready(function(){ + Faq.init(); + slider(); - faqToggle(); marketplaces(); tourNav(); mobileNav(); @@ -40,13 +43,6 @@ $(document).ready(function(){ }); } - function faqToggle() { - $('.faq__question').click(function() { - $(this).toggleClass('open'); - $(this).next('.faq__answer').toggleClass('open'); - }); - } - function marketplaces() { $('.top-tab').click(function(){ $('.top-tab').removeClass('active'); diff --git a/assets/_src/less/ascribe/_faq.less b/assets/_src/less/ascribe/_faq.less index 4e19975..e131236 100644 --- a/assets/_src/less/ascribe/_faq.less +++ b/assets/_src/less/ascribe/_faq.less @@ -1,5 +1,5 @@ -.subtemplate--faq { +.section-faq { padding-top: @spacer; padding-bottom: @spacer; } @@ -8,7 +8,10 @@ margin-left: 20px; } -.faq__title { margin-top: 0; } +.faq__title { + &:extend(.h2); + margin-top: 0; +} .faq__question { &:extend(.bold); @@ -54,3 +57,57 @@ border-color: transparent transparent transparent @greySocial; transition: .2s ease-out; } + +.grid__col--toc { + @media (@screen-sm) { + flex: 0 0 33% !important; + } +} + +.grid__col--toc { + position: relative; +} + +#toc { + margin-top: @spacer; + + &.sticky { + position: fixed; + top: 0; + padding-top: @spacer; + } + + ul { + &:extend(.list-unstyled all); + + li, + a { + line-height: @line-height-base; + } + + li { + display: inline-block; + + @media (@screen-sm) { + display: block; + } + } + + a { + &:extend(.h4); + color: @link-color; + display: block; + margin: 0; + padding: 8px 12px; + + @media (@screen-sm) { + padding: 6px 0; + } + } + + a:hover, + .toc-active a { + color: @link-hover-color; + } + } +} diff --git a/assets/_src/less/ascribe/_typography.less b/assets/_src/less/ascribe/_typography.less index 7c138cc..f52a52a 100644 --- a/assets/_src/less/ascribe/_typography.less +++ b/assets/_src/less/ascribe/_typography.less @@ -105,6 +105,11 @@ h1, h2, h3, h4, h5, h6, color: @black; } +.page-title { + margin-top: 0; + text-align: center; +} + // Reset fonts for relevant elements diff --git a/content-main.php b/content-main.php index b52fb41..c08d6da 100644 --- a/content-main.php +++ b/content-main.php @@ -1,4 +1,24 @@ -
- loopSubtemplates(); ?> + +
+ + +
+ +

+ +
+
+
+
+ +
+ loopSubtemplates(); ?> +
+ +
+ loopSubtemplates(); + } ?> +
diff --git a/controller/classes/Subtemplate.php b/controller/classes/Subtemplate.php index 9fc5318..34635c8 100644 --- a/controller/classes/Subtemplate.php +++ b/controller/classes/Subtemplate.php @@ -691,8 +691,11 @@ class Subtemplate { $regularFAQ .= ""; } - $result = "
-

{$subtemplateTitle}

+ // create ID for section jumps from lowercased & sanitized title + $subtemplateTitleID = strtolower(sanitize_html_class($subtemplateTitle)); + + $result = "
+

{$subtemplateTitle}

{$featuredFAQ} {$regularFAQ}
"; diff --git a/package.json b/package.json index 31e84e0..899bc1b 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ }, "dependencies": { "normalize-css": ">=2.3.1", - "normalize-opentype.css": ">=0.2.4" + "normalize-opentype.css": ">=0.2.4", + "toc": "jgallen23/toc" }, "devDependencies": { "browser-sync": "^2.10.0",