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

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

Browse Source 
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
This commit is contained in:
Derek Keith
2016-01-18 10:43:37 -07:00
parent 7a53f88aad
commit 494243786b
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