webcraftmedia/host_democracy
Archived
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

faq style implemented

Browse Source
This commit is contained in:
Ulf Gebhardt 2017-12-13 18:40:20 +01:00
parent 846438f10c
commit b5a4d27e9c
5 changed files with 29 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
democracy/page/default_faq/default_faq.php
View File

@ -14,7 +14,7 @@ class default_faq implements SYSTEM\PAGE\Page {
$faqs = \SYSTEM\PAGE\text::tag('faq');
$i = 0;
while(array_key_exists('faq_q_'. ($i < 9 ? sprintf("%02d", ++$i) : ++$i), $faqs)){
$question = array( 'n' => $i, 'in' => $i == 1 ? 'in' : '',
$question = array( 'n' => $i, 'in' => $i == 1 ? 'in' : '', 'in_css' => $i == 1 ? 'transform: rotate(180deg)' : '',
'question' => '${faq_q_'.($i <= 9 ? sprintf("%02d", $i) : $i).'}', //${faq_q_0n} ${faq_q_nn}
'answer' => '${faq_a_'.($i <= 9 ? sprintf("%02d", $i) : $i).'}'); //${faq_a_0n} ${faq_a_nn}
$vars['questions'] .= \SYSTEM\PAGE\replace::replaceFile((new PPAGE('default_faq/tpl/question.tpl'))->SERVERPATH(), $question);

9
democracy/page/default_faq/js/default_faq.js
View File

@ -32,7 +32,7 @@ function init_faq(){
$("#femail").focus();
return null;
}
if (frage == "" || frage.length < 3 ){
if (frage === "" || frage.length < 3 ){
alert( "bitte eine Frage eingeben");
$("#exampleTextarea").focus();
return null;
@ -64,4 +64,11 @@ function init_faq(){
}
});
});
$('.panel').on('show.bs.collapse', function (e) {
$(".openarrow",this).css("transform","rotate(180deg)");
});
$('.panel').on('hide.bs.collapse', function (e) {
$(".openarrow",this).css("transform","rotate(0deg)");
});
}

4
democracy/page/default_faq/tpl/default_faq.tpl
View File

@ -1,4 +1,4 @@
<div class="single">
<div class="single" style="background-color: #e8e8e8;">
<div class="container">
<div class="wthree-heading"><h3>FAQ</h3></div>
<br><br>
@ -7,7 +7,7 @@
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse_ask"><b><i class="fa fa-caret-down" aria-hidden="true"></i></b>&nbsp;&nbsp;<b>Eine Frage stellen</b></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse_ask" class="faq_header"><i class="fa fa-question-circle" aria-hidden="true"></i>&nbsp;&nbsp;<b>Eine Frage stellen</b><i class="openarrow fa fa-angle-down" aria-hidden="true" style="${in_css}"></i></a>
</h4>
</div>
<div id="collapse_ask" class="panel-collapse collapse ${in}">

5
democracy/page/default_faq/tpl/question.tpl
View File

@ -1,11 +1,10 @@
<div class="panel panel-default panel-faq">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse${n}"><b><i class="fa fa-caret-down" aria-hidden="true"></i></b>&nbsp;&nbsp;${question}</a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse${n}" class="faq_header"><i class="fa fa-info-circle" aria-hidden="true"></i>&nbsp;&nbsp;${question}<i class="openarrow fa fa-angle-down" aria-hidden="true" style="${in_css}"></i></a>
</h4>
</div>
<div id="collapse${n}" class="panel-collapse collapse ${in}">
<div class="panel-body">${answer}</div>
</div>
</div>
<br>
</div>

23
democracy/page/default_page/css/default_page.css
View File

@ -383,12 +383,21 @@ body {
display: table-cell;
}
.panel-faq{border-color:#4f81bd}
.panel-faq>.panel-heading{color:#fff;background-color:#4494d3;border-color:#4f81bd}
.panel-faq>.panel-heading+.panel-collapse>.panel-body{border-top-color:#4f81bd}
.panel-faq{margin-bottom: 12px !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); border: 0; border-radius: 0;}
.panel-faq>.panel-heading{border-radius: 0; background-color: #fff; border-color: #000;}
.panel-faq>.panel-heading+.panel-collapse>.panel-body{border-color: grey}
.panel-faq>.panel-heading .badge{color:#d9edf7;background-color:#4494d3}
.panel-faq>.panel-footer+.panel-collapse>.panel-body{border-bottom-color:#4f81bd}
.panel-faq>.panel-heading>h4>a:hover{text-decoration: none;}
.panel-faq>.panel-heading>h4>a:active{text-decoration: none;}
.panel-faq>.panel-heading>h4>a:visited{text-decoration: none;}
.panel-faq>.panel-heading>h4>a:focus{text-decoration: none;}
.panel-faq>.panel-heading>.panel-title{color: #333; font-size: 22px; padding-top: 15px; padding-bottom: 15px;}
.panel-faq>.panel-heading>.panel-title>a{}
.panel-faq>.panel-heading>.panel-title>a:hover{text-decoration: none;}
.panel-faq>.panel-heading>.panel-title>a:active{text-decoration: none;}
.panel-faq>.panel-heading>.panel-title>a:visited{text-decoration: none;}
.panel-faq>.panel-heading>.panel-title>a:focus{text-decoration: none;}
.openarrow{
float:right;
font-size: 40px;
line-height: 30px;
transition: transform .2s;
}