diff --git a/client/less/main.less b/client/less/main.less index 3eac391f5f..3c8d04333e 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -397,6 +397,7 @@ p { .big-text-field { font-size: 30px; height: 57px; + background-color: @body-bg !important; } h4 { @@ -967,6 +968,10 @@ hr { opacity: 0.5; } +.slightly-faded { + opacity: 0.75; +} + .padded-ionic-icon { padding-top: 5px; } diff --git a/client/main.js b/client/main.js index e2bfa9b476..a81e14578f 100644 --- a/client/main.js +++ b/client/main.js @@ -263,6 +263,17 @@ $(document).ready(function() { window.location.href = link; }); + if ($('.sr-only').length) { + var lastChallenge = $('.sr-only').filter(function() { + return $(this).text() === ' Complete'; + }); + if (lastChallenge.length) { + lastChallenge = lastChallenge[lastChallenge.length - 1]; + var scrollTo = $(lastChallenge).offset().top - 250; + $('html, body').scrollTop(scrollTo); + } + } + // map $('#nav-map-btn').on('click', () => { if (!main.isMapAsideLoad) { @@ -277,4 +288,35 @@ $(document).ready(function() { $('.map-aside-action-collapse').on('click', () => { $('.map-aside').addClass('is-collapsed'); }); + + $('#accordion').on('show.bs.collapse', function(e) { + $(e.target) + .prev().find('.fa-caret-right') + .removeClass('fa-caret-right').addClass('fa-caret-down'); + if ($('a[data-toggle=collapse]').length === $('.fa-caret-down').length) { + $('#showAll').text('Collapse all challenges'); + $('#showAll').addClass('active'); + } + }).on('hide.bs.collapse', function(e) { + $(e.target) + .prev().find('.fa-caret-down') + .removeClass('fa-caret-down').addClass('fa-caret-right'); + if ($('a[data-toggle=collapse]').length === $('.fa-caret-right').length) { + $('#showAll').text('Expand all challenges'); + $('#showAll').removeClass('active'); + } + }); + + $('#showAll').on('click', () => { + var mapExpanded = $('#showAll').hasClass('active'); + if (!mapExpanded) { + $('.map-collapse').collapse('show'); + $('#showAll').text('Collapse all challenges'); + return $('#showAll').addClass('active'); + } else { + $('.map-collapse').collapse('hide'); + $('#showAll').text('Expand all challenges'); + return $('#showAll').removeClass('active'); + } + }); }); diff --git a/server/views/map/show.jade b/server/views/map/show.jade index 433800dc68..b4efabda48 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -5,33 +5,35 @@ block content 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 - a.btn.btn-primary.btn-block(href='/map' target='_blank') View this map in full screen - // .btn.btn-primary.btn-block#showAll Expand + .btn.btn-primary.btn-block.active#showAll Collapse all challenges hr #accordion for superBlock, index in superBlocks h2 - i.fa.fa-caret-right + i.fa.fa-caret-down |   - a.collapsed(data-toggle='collapse', data-parent='#accordion', href='#collapse'+superBlock.name.split(' ').join('-')) + 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 = "panel-collapse collapse no-transition") - #nested.panel-group + 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-right + 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 = "panel-collapse collapse no-transition") + 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.faded(href="/challenges/#{challenge.dashedName}" target='_parent') + a(href="/challenges/#{challenge.dashedName}" target='_parent') = challenge.title span.sr-only= " Complete" else if challenge.isRequired - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     + 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" @@ -46,7 +48,7 @@ block content span.text-primary     strong * else - p.ion-ios-circle-outline.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")     + 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" @@ -59,13 +61,3 @@ block content strong em Coming Soon .spacer -script. - $(document).ready(function(){ - $('#accordProfile').on('shown', function () { - $(".fa-caret-right").removeClass("icon-chevron-down").addClass("icon-chevron-up"); - }); - - $('#accordProfile').on('hidden', function () { - $(".icon-chevron-up").removeClass("icon-chevron-up").addClass("icon-chevron-down"); - }); - }); diff --git a/server/views/stories/preliminary-submit.jade b/server/views/stories/preliminary-submit.jade index 0855f741e8..70af2d94ef 100644 --- a/server/views/stories/preliminary-submit.jade +++ b/server/views/stories/preliminary-submit.jade @@ -1,10 +1,8 @@ -.col-xs-12 - div - form.input-group(id='URLSubmit' name='URLSubmit') - input#story-url.big-text-field.field-responsive.form-control(placeholder='Paste your link here', name='link', type='url', required, autofocus) - span.input-group-btn - button#preliminary-story-submit.btn.btn-big.btn-primary.btn-responsive(type='submit') Submit - .spacer +form.input-group(id='URLSubmit' name='URLSubmit') + input#story-url.big-text-field.field-responsive.form-control(placeholder='Paste your link here', name='link', type='url', required, autofocus) + span.input-group-btn + button#preliminary-story-submit.btn.btn-bigger.btn-primary.btn-responsive(type='submit') Submit +.spacer script. $('#story-url').on('keypress', function(e) { diff --git a/server/views/stories/submit-story.jade b/server/views/stories/submit-story.jade index 60803e097c..66b91fc4f1 100644 --- a/server/views/stories/submit-story.jade +++ b/server/views/stories/submit-story.jade @@ -34,8 +34,7 @@ .spacer .row .form-group - - button.btn.btn-big.btn-block.btn-primary#story-submit(type='submit', onclick="return false;") Submit + button.btn.btn-bigger.btn-block.btn-primary#story-submit(type='submit', onclick="return false;") Submit script. if (main.storyImage) { $('#image-display').removeClass('hidden-element');