ascribe
/
wp-theme
mirror of https://github.com/ascribe/wp-theme
1
0
Fork 0
Code Issues Releases Wiki Activity

refactor FAQ styles & markup

This commit is contained in:
Matthias Kretschmann 2016-03-12 16:12:07 +01:00
parent fbd72a9be9
commit f5f61168fa
4 changed files with 90 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/_src/js/ascribe.js
View File

@ -39,11 +39,14 @@ $(document).ready(function(){
});
}
function featuredFAQ() {
$('.featured-faqs dt').click(function() {
$(this).next('dd').toggleClass('open');
$('.faq--featured .faq__question').click(function() {
$(this).toggleClass('open');
$(this).next('.faq__answer').toggleClass('open');
});
}
function marketplaces() {
$('.top-tab').click(function(){
$('.top-tab').removeClass('active');

40
assets/_src/less/ascribe.less
View File

@ -31,6 +31,7 @@
@import 'ascribe/_team.less';
@import 'ascribe/_blog.less';
@import 'ascribe/_testimonials.less';
@import 'ascribe/_faq.less';
@import '_page-api.less';
@ -372,45 +373,6 @@
}
}
.faq {
> h1 { margin-top: 0; }
dl,dt,dd {
margin: 0;
padding: 0;
}
dd:not(:last-child) {
margin-bottom: @spacer;
}
dt {
&:extend(.bold);
}
.featured-faqs {
dt {
color: @pink;
cursor: pointer;
}
dd {
max-height:0;
overflow-y:hidden;
transition: .2s ease-out;
margin-bottom: @spacer;
&.open {
max-height: 800px;
}
}
}
.regular-faqs {
}
}
.values {
padding-bottom: @spacer;

69
assets/_src/less/ascribe/_faq.less Normal file
View File

@ -0,0 +1,69 @@
.subtemplate--faq {
}
.faq {
// reset default dl,dt,dd styles
&,
.faq__answer {
margin: 0;
padding: 0;
}
}
.faq__title { margin-top: 0; }
.faq__question {
&:extend(.h4);
display: block;
margin-bottom: (@spacer / 2);
}
.faq__answer {
&:not(:last-child) {
margin-bottom: @spacer;
}
}
.faq--featured {
margin-left: 20px;
.faq__question {
color: @pink;
cursor: pointer;
.caret {
margin-left: -20px;
margin-right: 10px;
}
&.open .caret {
transform: rotate(90deg);
}
}
.faq__answer {
transition: .2s ease-out;
height: 0;
opacity: 0;
margin-bottom: @spacer;
&.open {
height: 100%;
opacity: 1;
max-height: 800px;
}
}
}
.caret {
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 5px 0 5px 6px;
border-color: transparent transparent transparent @greySocial;
transition: .2s ease-out;
}

27
controller/classes/Subtemplate.php
View File

@ -654,18 +654,21 @@ class Subtemplate {
//
public function faq($subtemplateTitle) {
$featuredFAQ = '';
$regularFAQ = '';
if (have_rows('featured_faqs')) {
$featuredFAQ = '<dl class="featured-faqs">';
$featuredFAQ = '<dl class="faq faq--featured">';
while (have_rows('featured_faqs')) {
the_row();
$question = get_sub_field('question');
$answer = get_sub_field('answer');
$question = get_sub_field('question');
$answer = get_sub_field('answer');
$featuredFAQ .= "<dt>{$question}</dt>
<dd>{$answer}</dd>";
$featuredFAQ .= "<dt class='faq__question'><i class='caret'></i>{$question}</dt>
<dd class='faq__answer'>{$answer}</dd>";
}
$featuredFAQ .= "</dl>";
@ -673,23 +676,23 @@ class Subtemplate {
if (have_rows('regular_faqs')) {
$regularFAQ = '<dl class="regular-faqs">';
$regularFAQ = '<dl class="faq faq--regular">';
while (have_rows('regular_faqs')) {
the_row();
$question = get_sub_field('question');
$answer = get_sub_field('answer');
$question = get_sub_field('question');
$answer = get_sub_field('answer');
$regularFAQ .= "<dt>Q: {$question}</dt>
<dd>A: {$answer}</dd>";
$regularFAQ .= "<dt class='faq__question'>{$question}</dt>
<dd class='faq__answer'>{$answer}</dd>";
}
$regularFAQ .= "</dl>";
}
$result = "<section class='subtemplate row row--content content faq'>
<h1>{$subtemplateTitle}</h1>
$result = "<section class='subtemplate row row--content content subtemplate--faq'>
<h1 class='faq__title'>{$subtemplateTitle}</h1>
{$featuredFAQ}
{$regularFAQ}
</section>";