mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-16 21:06:35 +08:00
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
This commit is contained in:
Derek Keith
parent
7a53f88aad
commit
494243786b
@ -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 */
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user