-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[FEATURE] add new element Simple accordion (Podio feature_34) (#37)
- Loading branch information
1 parent
d7e8f75
commit 6d4e32f
Showing
5 changed files
with
310 additions
and
3 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .panel-title>a{ | ||
| display:block; | ||
| padding:10px 15px; | ||
| margin:-10px -15px; | ||
| } | ||
|
|
||
| .panel-title>a.empty{ | ||
| display:block; | ||
| padding:19px 15px 18px 15px; | ||
| margin:-10px -15px; | ||
| } |
20 changes: 20 additions & 0 deletions
20
dev/templates/pages/content/contentElements/simpleAccordion.hbs
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,20 @@ | ||
| --- | ||
| #layout: default.hbs #by default it is default.hbs, but you can specify another one | ||
| title: Simple Accordion #title in menu | ||
| position: 10 #position in menu | ||
| hideInMenu: false #if true, will be hidden in menu | ||
| hideInBreadcrumbs: false #if true, will be hidden in breadcrumbs | ||
| externalLink: false #just add link (http://link.com) instead of "false" to use this page like a link to external page. | ||
| --- | ||
|
|
||
| {{> breadcrumbs}} | ||
|
|
||
| <div class="container"> | ||
| <div class="row"> | ||
| <div class="col-md-12"> | ||
|
|
||
| {{>simpleAccordion}} | ||
|
|
||
| </div> | ||
| </div> | ||
| </div> |
272 changes: 272 additions & 0 deletions
272
dev/templates/parts/content/contentElements/simpleAccordion.hbs
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,272 @@ | ||
| <h3>Accordion mode: First item is expanded at load + Multiple items:false</h3> | ||
| <div class="panel-group" id="group-373" role="tablist"> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-187"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-187" data-toggle="collapse" class=" " data-parent="#group-373" href="#collapse-187" aria-expanded="true" role="button"> | ||
| iconTextButton | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-187" class="panel-collapse collapse in" role="tabpanel" aria-expanded="true" aria-labelledby="heading-187"> | ||
| <div class="panel-body"> | ||
| <div id="c187" class=" "> | ||
| {{ renderContent 'iconTextButton' | ||
| headerLeftIcon="laptop-phone" | ||
| header="iconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-374"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-374" data-toggle="collapse" class="collabsed " data-parent="#group-373" href="#collapse-374" aria-expanded="false" role="button"> | ||
| John Doe, VP of Marketing | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-374" class="panel-collapse collapse " role="tabpanel" aria-expanded="false" aria-labelledby="heading-374"> | ||
| <div class="panel-body"> | ||
| <div id="c374" class=" "> | ||
| {{ renderContent 'quote' | ||
| text="Top service. It’s nice to come back. Thank you for the support, efficient and fast. You are true professionals" | ||
| name="John Doe" | ||
| title="VP of Marketing" | ||
| linkText="Royal Trader" | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-375"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-375" data-toggle="collapse" class="collabsed " data-parent="#group-373" href="#collapse-375" aria-expanded="false" role="button"> | ||
| bigIconTextButton | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-375" class="panel-collapse collapse " role="tabpanel" aria-expanded="false" aria-labelledby="heading-375"> | ||
| <div class="panel-body"> | ||
| <div id="c375" class=" "> | ||
| {{ renderContent 'bigIconTextButton' | ||
| bigTopIcon="gift" | ||
| header="bigIconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" | ||
| btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h3>Accordion mode: First item is expanded at load + Multiple items:true</h3> | ||
|
|
||
| <div class="panel-group" id="group-374" role="tablist"> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-188"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-188" data-toggle="collapse" class=" " href="#collapse-188" aria-expanded="true" role="button"> | ||
| iconTextButton | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-188" class="panel-collapse collapse in" role="tabpanel" aria-expanded="true" aria-labelledby="heading-188"> | ||
| <div class="panel-body"> | ||
| <div id="c188" class=" "> | ||
| {{ renderContent 'iconTextButton' | ||
| headerLeftIcon="laptop-phone" | ||
| header="iconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-377"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-377" data-toggle="collapse" class="collabsed " href="#collapse-377" aria-expanded="false" role="button"> | ||
| John Doe, VP of Marketing | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-377" class="panel-collapse collapse " role="tabpanel" aria-expanded="false" aria-labelledby="heading-377"> | ||
| <div class="panel-body"> | ||
| <div id="c377" class=" "> | ||
| {{ renderContent 'quote' | ||
| text="Top service. It’s nice to come back. Thank you for the support, efficient and fast. You are true professionals" | ||
| name="John Doe" | ||
| title="VP of Marketing" | ||
| linkText="Royal Trader" | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-376"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-376" data-toggle="collapse" class="collabsed " href="#collapse-376" aria-expanded="false" role="button"> | ||
| bigIconTextButton | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-376" class="panel-collapse collapse " role="tabpanel" aria-expanded="false" aria-labelledby="heading-376"> | ||
| <div class="panel-body"> | ||
| <div id="c376" class=" "> | ||
| {{ renderContent 'bigIconTextButton' | ||
| bigTopIcon="gift" | ||
| header="bigIconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" | ||
| btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <h3>Accordion mode: All items are expanded at load + Multiple items:true</h3> | ||
| <div class="panel-group" id="group-375" role="tablist"> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-189"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-189" data-toggle="collapse" class="" href="#collapse-189" aria-expanded="false" role="button"> | ||
| Lorem ipsum | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-189" class="panel-collapse collapse in" role="tabpanel" aria-expanded="true" aria-labelledby="heading-189"> | ||
| <div class="panel-body"> | ||
| <div id="c189" class=" "> | ||
| {{ renderContent 'iconTextButton' | ||
| headerLeftIcon="laptop-phone" | ||
| header="iconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-378"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-378" data-toggle="collapse" class="" href="#collapse-378" aria-expanded="false" role="button"> | ||
| John Doe, VP of Marketing | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-378" class="panel-collapse collapse in" role="tabpanel" aria-expanded="true" aria-labelledby="heading-378"> | ||
| <div class="panel-body"> | ||
| <div id="c378" class=" "> | ||
| {{ renderContent 'quote' | ||
| text="Top service. It’s nice to come back. Thank you for the support, efficient and fast. You are true professionals" | ||
| name="John Doe" | ||
| title="VP of Marketing" | ||
| linkText="Royal Trader" | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-379"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-379" data-toggle="collapse" class="" href="#collapse-379" aria-expanded="false" role="button"> | ||
| bigIconTextButton | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-379" class="panel-collapse collapse in" role="tabpanel" aria-expanded="true" aria-labelledby="heading-379"> | ||
| <div class="panel-body"> | ||
| <div id="c379" class=" "> | ||
| {{ renderContent 'bigIconTextButton' | ||
| bigTopIcon="gift" | ||
| header="bigIconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" | ||
| btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <h3>Accordion mode: All items are expanded at load + Multiple items:false</h3> | ||
|
|
||
| <div class="panel-group" id="group-376" role="tablist"> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-190"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-190" data-toggle="collapse" class="collabsed " data-parent="#group-376" href="#collapse-190" aria-expanded="true" role="button"> | ||
| iconTextButton | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-190" class="panel-collapse collapse" role="tabpanel" aria-expanded="false" aria-labelledby="heading-190"> | ||
| <div class="panel-body"> | ||
| <div id="c190" class=" "> | ||
| {{ renderContent 'iconTextButton' | ||
| headerLeftIcon="laptop-phone" | ||
| header="iconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-380"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-380" data-toggle="collapse" class="collabsed " data-parent="#group-376" href="#collapse-380" aria-expanded="true" role="button"> | ||
| John Doe, VP of Marketing | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-380" class="panel-collapse collapse" role="tabpanel" aria-expanded="false" aria-labelledby="heading-380"> | ||
| <div class="panel-body"> | ||
| <div id="c380" class=" "> | ||
| {{ renderContent 'quote' | ||
| text="Top service. It’s nice to come back. Thank you for the support, efficient and fast. You are true professionals" | ||
| name="John Doe" | ||
| title="VP of Marketing" | ||
| linkText="Royal Trader" | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="panel panel-default "> | ||
| <div class="panel-heading" role="tab" id="heading-381"> | ||
| <h4 class="panel-title"> | ||
| <a aria-controls="collapse-381" data-toggle="collapse" class="collabsed " data-parent="#group-376" href="#collapse-381" aria-expanded="true" role="button"> | ||
| bigIconTextButton | ||
| </a> | ||
| </h4> | ||
| </div> | ||
| <div id="collapse-381" class="panel-collapse collapse" role="tabpanel" aria-expanded="false" aria-labelledby="heading-381"> | ||
| <div class="panel-body"> | ||
| <div id="c381" class=" "> | ||
| {{ renderContent 'bigIconTextButton' | ||
| bigTopIcon="gift" | ||
| header="bigIconTextButton" | ||
| text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitfhghfhor. Ut in nulla enim. Phasellus class aptent taciti sociosqu." | ||
| buttonName="Read more" | ||
| btnAsLink=false | ||
| }} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> |
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