Merge pull request #6211 from FreeCodeCamp/map-fixes

Map fixes

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;
 }

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');
+    }
+  });
 });

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");
-        });
-    });

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) {

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');