From cb972cacc84c6868f83e531f0130a6c0d721f7d8 Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Sat, 16 Jan 2016 01:03:22 -0800 Subject: [PATCH 1/6] Get the expand all / collapse all view working on the map --- client/less/main.less | 4 ++++ client/main.js | 19 +++++++++++++++++++ server/views/map/show.jade | 21 ++++++++++++--------- 3 files changed, 35 insertions(+), 9 deletions(-) diff --git a/client/less/main.less b/client/less/main.less index 3eac391f5f..c8dd4c62db 100644 --- a/client/less/main.less +++ b/client/less/main.less @@ -967,6 +967,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..a9b5ff0cf4 100644 --- a/client/main.js +++ b/client/main.js @@ -277,4 +277,23 @@ $(document).ready(function() { $('.map-aside-action-collapse').on('click', () => { $('.map-aside').addClass('is-collapsed'); }); + + $('.collapse').on('show.bs.collapse', function(){ + console.log(this); + $(this).siblings().find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down"); + }).on('hide.bs.collapse', function(){ + $(this).siblings().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right"); + }); + + $('#showAll').on('click', () => { + var mapExpanded = $('#showAll').hasClass('active'); + if (!mapExpanded) { + $('.map-collapse').addClass('in'); + $('#showAll').text('Collapse all challenges'); + return $('#showAll').addClass('active'); + }; + $('.map-collapse').removeClass('in'); + $('#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..16eeff380c 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -6,7 +6,8 @@ block content .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#showAll Expand all challenges + hr #accordion for superBlock, index in superBlocks @@ -15,23 +16,25 @@ block content |   a.collapsed(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 map-collapse no-transition") + #nested for challengeBlock in superBlock.blocks h3 - i.fa.fa-caret-right - |   a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) + i.fa.fa-caret-right + |   + |   | #{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 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 +49,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" From 1d23f855a25ce22d44643d9685da1748565c44fc Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Sat, 16 Jan 2016 01:10:06 -0800 Subject: [PATCH 2/6] make look of camper news submission flow more consistent --- client/less/main.less | 1 + server/views/stories/preliminary-submit.jade | 12 +++++------- server/views/stories/submit-story.jade | 3 +-- 3 files changed, 7 insertions(+), 9 deletions(-) diff --git a/client/less/main.less b/client/less/main.less index c8dd4c62db..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 { 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'); From 57f7e04f4450bd9d6b8b6c15f05ced461e7c1abc Mon Sep 17 00:00:00 2001 From: Quincy Larson Date: Sat, 16 Jan 2016 01:21:05 -0800 Subject: [PATCH 3/6] start working on accordion caret animation --- client/main.js | 13 +++++++------ server/views/map/show.jade | 5 +++-- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/client/main.js b/client/main.js index a9b5ff0cf4..a30e86c592 100644 --- a/client/main.js +++ b/client/main.js @@ -278,12 +278,13 @@ $(document).ready(function() { $('.map-aside').addClass('is-collapsed'); }); - $('.collapse').on('show.bs.collapse', function(){ - console.log(this); - $(this).siblings().find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down"); - }).on('hide.bs.collapse', function(){ - $(this).siblings().find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right"); - }); + // I am going crazy trying to get this to work. Any takers? + // $('.collapse').on('show.bs.collapse', function(){ + // console.log(this); + // $(this).sibling().eq(0).find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down"); + // }).on('hide.bs.collapse', function(){ + // $(this).sibling().eq(0).find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right"); + // }); $('#showAll').on('click', () => { var mapExpanded = $('#showAll').hasClass('active'); diff --git a/server/views/map/show.jade b/server/views/map/show.jade index 16eeff380c..54b0b2b853 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -20,9 +20,10 @@ block content #nested for challengeBlock in superBlock.blocks h3 + i.fa.fa-caret-right + |   a(data-toggle='collapse', data-parent='#nested', href='#nested-collapse'+challengeBlock.name.replace(/(\W)/gi, '').split(' ').join('-')) - i.fa.fa-caret-right - |   + |   | #{challengeBlock.name} (#{challengeBlock.time}) div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse map-collapse no-transition") From 2e5a1937f3a562778ab64d6bcaf843068e3df72b Mon Sep 17 00:00:00 2001 From: Arsen Melikyan Date: Sat, 16 Jan 2016 15:55:09 +0400 Subject: [PATCH 4/6] Fix map list icon not toggling and Expand all button issues --- client/main.js | 41 ++++++++++++++++++++++++-------------- server/views/map/show.jade | 24 ++++++---------------- 2 files changed, 32 insertions(+), 33 deletions(-) diff --git a/client/main.js b/client/main.js index a30e86c592..9e7e43c886 100644 --- a/client/main.js +++ b/client/main.js @@ -278,23 +278,34 @@ $(document).ready(function() { $('.map-aside').addClass('is-collapsed'); }); - // I am going crazy trying to get this to work. Any takers? - // $('.collapse').on('show.bs.collapse', function(){ - // console.log(this); - // $(this).sibling().eq(0).find(".fa-caret-right").removeClass("fa-caret-right").addClass("fa-caret-down"); - // }).on('hide.bs.collapse', function(){ - // $(this).sibling().eq(0).find(".fa-caret-down").removeClass("fa-caret-down").addClass("fa-caret-right"); - // }); - - $('#showAll').on('click', () => { - var mapExpanded = $('#showAll').hasClass('active'); - if (!mapExpanded) { - $('.map-collapse').addClass('in'); + $('#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'); - return $('#showAll').addClass('active'); - }; - $('.map-collapse').removeClass('in'); + $('#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 54b0b2b853..b4efabda48 100644 --- a/server/views/map/show.jade +++ b/server/views/map/show.jade @@ -5,28 +5,26 @@ 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 all challenges - + .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 = "collapse map-collapse no-transition") + 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 = "collapse map-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 @@ -63,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"); - }); - }); From 6b0c41f6160ad74bb1155efebe526f9b4717d111 Mon Sep 17 00:00:00 2001 From: Arsen Melikyan Date: Sat, 16 Jan 2016 21:30:47 +0400 Subject: [PATCH 5/6] Auto-scroll the map to the last completed challenge --- client/main.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/client/main.js b/client/main.js index 9e7e43c886..9b08476590 100644 --- a/client/main.js +++ b/client/main.js @@ -263,6 +263,15 @@ $(document).ready(function() { window.location.href = link; }); + if ($('.sr-only').length) { + var lastChallenge = $('.sr-only').filter(function() { + return $(this).text() === ' Complete'; + }); + lastChallenge = lastChallenge[lastChallenge.length - 1]; + var scrollTo = $(lastChallenge).offset().top - 250; + $('html, body').scrollTop(scrollTo); + } + // map $('#nav-map-btn').on('click', () => { if (!main.isMapAsideLoad) { From d0f1edf245b84f103db46facafc09bc43e086b3f Mon Sep 17 00:00:00 2001 From: Arsen Melikyan Date: Sat, 16 Jan 2016 22:31:42 +0400 Subject: [PATCH 6/6] Fix incorrect auto-scrolling logic --- client/main.js | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/client/main.js b/client/main.js index 9b08476590..a81e14578f 100644 --- a/client/main.js +++ b/client/main.js @@ -267,9 +267,11 @@ $(document).ready(function() { var lastChallenge = $('.sr-only').filter(function() { return $(this).text() === ' Complete'; }); - lastChallenge = lastChallenge[lastChallenge.length - 1]; - var scrollTo = $(lastChallenge).offset().top - 250; - $('html, body').scrollTop(scrollTo); + if (lastChallenge.length) { + lastChallenge = lastChallenge[lastChallenge.length - 1]; + var scrollTo = $(lastChallenge).offset().top - 250; + $('html, body').scrollTop(scrollTo); + } } // map