greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Make map header area fixed with flex layout and overflow scroll. 

This commit makes the map header with the collapse button fixed by using
flex and overflow. This commit implements the behavior on both the aside
and map (mobile) page.

closes #6276
pull/6281/head
Derek Keith 2016-01-18 10:43:37 -07:00
parent 7a53f88aad
commit 494243786b
3 changed files with 80 additions and 61 deletions
Show Stats 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