gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

improve accordion. It is not done but way better than before

Browse Source
This commit is contained in:
Quincy Larson
2016-01-15 20:05:34 -08:00
parent 932a0a975b
commit 2f992e3df9
2 changed files with 71 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
client/less/main.less
View File

@ -403,6 +403,18 @@ h4 {
font-size: 22px; font-size: 22px;
} }
.no-transition {
-webkit-transition: height 0.001s;
-moz-transition: height 0.001s;
-ms-transition: height 0.001s;
-o-transition: height 0.001s;
transition: height 0.001s;
}
.margin-left-10 {
margin-left: 10px;
}
.btn-responsive { .btn-responsive {
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: 15px; font-size: 15px;

105
server/views/map/show.jade
View File

@ -3,56 +3,69 @@ block content
.text-center .text-center
h1 Challenge Map h1 Challenge Map
p Required challenges are marked with a * p Required challenges are marked with a *
p Click the   .row
i.fa.fa-external-link .col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
|  button to view this map in full screen. a.btn.btn-primary.btn-block(href='/map' target='_blank') View this map in full screen
// .btn.btn-primary.btn-block#showAll Expand
hr hr
#accordion.panel-group #accordion
for superBlock, index in superBlocks for superBlock, index in superBlocks
h3 h2
i.fa.fa-caret-right
|  
a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
| #{superBlock.name} | #{superBlock.name}
ul(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse") div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "panel-collapse collapse no-transition")
#nested.panel-group #nested.panel-group
for challengeBlock in superBlock.blocks for challengeBlock in superBlock.blocks
h4 h3
i.fa.fa-caret-right
|  
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
| #{challengeBlock.name} | #{challengeBlock.name} (#{challengeBlock.time})
div(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse") div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "panel-collapse collapse no-transition")
ul for challenge in challengeBlock.challenges
br if challenge.completed
for challenge in challengeBlock.challenges p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
if challenge.completed a.faded(href="/challenges/#{challenge.dashedName}" target='_parent')
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   = challenge.title
a.faded(href="/challenges/#{challenge.dashedName}" target='_parent') span.sr-only= " Complete"
= challenge.title else if challenge.isRequired
span.sr-only= " Complete" p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
else if challenge.isRequired a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   span= challenge.title
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span.sr-only= " Incomplete"
span= challenge.title if challenge.markNew
span.sr-only= " Incomplete" span.text-success.small    
if challenge.markNew strong
span.text-success.small     em New
strong if challengeBlock.isComingSoon
em New span.text-success.small    
if challengeBlock.isComingSoon strong
span.text-success.small     em Coming Soon
strong span.text-primary    
em Coming Soon strong *
span.text-primary     else
strong * p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
else a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")   span= challenge.title
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '') span.sr-only= " Incomplete"
span= challenge.title if challenge.markNew
span.sr-only= " Incomplete" span.text-success.small    
if challenge.markNew strong
span.text-success.small     em New
strong if challengeBlock.isComingSoon
em New span.text-success.small    
if challengeBlock.isComingSoon strong
span.text-success.small     em Coming Soon
strong .spacer
em Coming Soon script.
.spacer $(document).ready(function(){
$('#accordProfile').on('shown', function () {
$(".fa-caret-right").removeClass("icon-chevron-down").addClass("icon-chevron-up");
});
$('#accordProfile').on('hidden', function () {
$(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down");
});
});