From 494243786b9a4efeafd1cf815794a79467cb12ff Mon Sep 17 00:00:00 2001 From: Derek Keith Date: Mon, 18 Jan 2016 10:43:37 -0700 Subject: [PATCH] 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 --- client/less/map.less | 18 ++++++ client/main.js | 4 +- server/views/map/show.jade | 119 +++++++++++++++++++------------------ 3 files changed, 80 insertions(+), 61 deletions(-) diff --git a/client/less/map.less b/client/less/map.less index a1eda748d0..5f53c4ae9b 100644 --- a/client/less/map.less +++ b/client/less/map.less @@ -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 */ diff --git a/client/main.js b/client/main.js index a81e14578f..a34ef6bd33 100644 --- a/client/main.js +++ b/client/main.js @@ -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); } } diff --git a/server/views/map/show.jade b/server/views/map/show.jade index a52215180f..7e39fd789b 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -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