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

Merge pull request #6281 from codeurge/feature/fixed_map_header_area

Browse Source 
Make map header area fixed with flex layout and overflow scroll.
This commit is contained in:
Rex Schrader
2016-01-18 14:02:34 -08:00
parent 8ca4fa878a 494243786b
commit 714c351d65
3 changed files with 80 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
client/less/map.less
View File

@ -2,6 +2,12 @@
* based off of https://github.com/gitterHQ/sidecar
* license: MIT
*/
.map {
display: flex;
flex-direction: column;
max-height: 90vh;
}
.map-aside {
z-index: 20000;
@ -80,6 +86,18 @@
z-index: 100;
}
.map-fixed-header {
background: white;
z-index: 1;
flex: 1;
padding-bottom: 25px;
}
.map-accordion {
flex: 9;
overflow-y: auto;
}
.map-aside-action-item {
display: flex;
/* main axis */

4
client/main.js
View File

@ -269,8 +269,8 @@ $(document).ready(function() {
});
if (lastChallenge.length) {
lastChallenge = lastChallenge[lastChallenge.length - 1];
var scrollTo = $(lastChallenge).offset().top - 250;
$('html, body').scrollTop(scrollTo);
var scrollTo = $(lastChallenge).offset().top - 400;
$('.map-accordion').scrollTop(scrollTo);
}
}

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

@ -1,61 +1,62 @@
extends ../layout-wide
block content
.text-center
h1 Challenge Map
p Required challenges are marked with a *
.row
.col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
.btn.btn-primary.btn-block.active#showAll Collapse all challenges
hr
#accordion
for superBlock, index in superBlocks
h2
i.fa.fa-caret-down
|  
a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
| #{superBlock.name}
div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition")
#nested
for challengeBlock in superBlock.blocks
h3
i.fa.fa-caret-down
|  
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
| #{challengeBlock.name} (#{challengeBlock.time})
div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition")
.button-spacer
for challenge in challengeBlock.challenges
if challenge.completed
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
a(href="/challenges/#{challenge.dashedName}" target='_parent')
= challenge.title
span.sr-only= " Complete"
else if challenge.isRequired
p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
span.text-primary    
strong *
else
p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
.spacer
.map
.map-fixed-header.text-center
h1 Challenge Map
p Required challenges are marked with a *
.row
.col-xs-10.col-xs-offset-1.col-sm-6.col-sm-offset-3.col-md-4.col-md-offset-4
.btn.btn-primary.btn-block.active#showAll Collapse all challenges
hr
#accordion.map-accordion
for superBlock, index in superBlocks
h2
i.fa.fa-caret-down
|  
a(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-'))
| #{superBlock.name}
div.margin-left-10(id = 'collapse'+superBlock.name.split(' ').join('-') class = "collapse in map-collapse no-transition")
#nested
for challengeBlock in superBlock.blocks
h3
i.fa.fa-caret-down
|  
a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-'))
| #{challengeBlock.name} (#{challengeBlock.time})
div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition")
.button-spacer
for challenge in challengeBlock.challenges
if challenge.completed
p.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
a(href="/challenges/#{challenge.dashedName}" target='_parent')
= challenge.title
span.sr-only= " Complete"
else if challenge.isRequired
p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
span.text-primary    
strong *
else
p.slightly-faded.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")    
a(name="#{challenge.dashedName}" target='_parent' href="/challenges/#{challenge.dashedName}" class=challenge.isComingSoon ? 'disabled' : '')
span= challenge.title
span.sr-only= " Incomplete"
if challenge.markNew
span.text-success.small    
strong
em New
if challengeBlock.isComingSoon
span.text-success.small    
strong
em Coming Soon
.spacer