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 * based off of https://github.com/gitterHQ/sidecar
* license: MIT * license: MIT
*/ */
.map {
display: flex;
flex-direction: column;
max-height: 90vh;
}
.map-aside { .map-aside {
z-index: 20000; z-index: 20000;
@ -80,6 +86,18 @@
z-index: 100; 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 { .map-aside-action-item {
display: flex; display: flex;
/* main axis */ /* main axis */

4
client/main.js
View File

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

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

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