Merge pull request #6592 from SaintPeter/fix/remove-filter-adjust-spacing

Fix/Remove Filter and Adjust Map Spacing and Coloring

client/less/lib/bootstrap/variables.less

@@ -360,7 +360,7 @@
 
 // Navbar links
 @navbar-default-link-color:                @gray-lighter;
-@navbar-default-link-hover-color:          #4a2b0f;
+@navbar-default-link-hover-color:          darkgreen;
 @navbar-default-link-hover-bg:             @gray-lighter;
 @navbar-default-link-active-color:         @gray-lighter;
 @navbar-default-link-active-bg:            darken(@navbar-default-bg, 6.5%);

client/less/main.less

@@ -1018,6 +1018,14 @@ hr {
   color: @gray-light;
 }
 
+.asterisk-explanation {
+  margin-top: -15px;
+}
+
+.map-buttons {
+  margin-top: -10px;
+}
+
 code {
   padding: 0;
 }

client/less/map.less

@@ -3,11 +3,11 @@
  * license: MIT
  */
 .map-aside {
+    width:500px;
 
     z-index: 20000;
     position: fixed;
     top: 0;
-    left: 60%;
     bottom: 0;
     right: 0;
 
@@ -39,20 +39,6 @@
       background-color: @body-bg;
     }
 
-    @media (max-width: 1150px) {
-      left: 45%;
-    }
-    @media (max-width: 944px) {
-      left: 30%;
-    }
-    @media (max-width: 600px) {
-      left: 15%;
-    }
-    @media (max-width: 500px) {
-      left: 0;
-      border-left: none;
-    }
-
     & > iframe {
       flex: 1;
       width: 100%;
@@ -87,24 +73,33 @@
 .map-fixed-header {
   position: fixed;
   background: white;
-  padding-top: 15px;
+  padding-top: 20px;
   width: 100%;
   z-index: 1;
   left: 0;
   top: 0;
+  @media (max-width: 720px) {
+    padding-top:35px;
+  }
 }
 .map-fixed-header p {
   margin: 10px 0 20px;
+  @media (max-width: 720px) {
+    margin-bottom:15px;
+  }
 }
 .map-fixed-header hr {
-  margin:30px 0;
+  margin:35px 0;
+  @media (max-width: 720px) {
+    margin:25px 0;
+  }
 }
 .map-buttons button {
   width:300px;
 }
 
 .map-accordion {
-  margin: 155px auto 0;
+  margin: 140px auto 0;
   width:700px;
   overflow-y: auto;
   position:relative;
@@ -157,11 +152,16 @@
   }
 }
 .challengeBlockTime {
-  margin-right: 20px;
-  margin-top:5px;
-  float:right;
   font-size: 18px;
   color: #BBBBBB;
+  display:block;
+  margin-left: 40px;
+  margin-bottom: 20px;
+  @media (min-width: 721px) {
+    margin-right: 20px;
+    margin-top:-30px;
+    float:right;
+  }
 }
 
 @media (max-width: 720px) {
@@ -169,7 +169,7 @@
     left:0;
     right:0;
     width:100%;
-    margin-top:194px;
+    margin-top:165px;
     h2 {
       margin:15px 0;
       padding:0;
@@ -189,10 +189,6 @@
       }
     }
   }    
-  .challengeBlockTime {
-    float:none;
-    display:block;
-  }
 }
 
 .map-aside-action-item {

client/main.js

@@ -280,6 +280,43 @@ $(document).ready(function() {
     window.location.href = link;
   });
 
+  function expandCaret(item) {
+    $(item)
+      .prev().find('.fa-caret-right')
+      .removeClass('fa-caret-right').addClass('fa-caret-down');
+  }
+
+  function collapseCaret(item) {
+    $(item)
+      .prev().find('.fa-caret-down')
+      .removeClass('fa-caret-down').addClass('fa-caret-right');
+  }
+
+  function expandBlock(item) {
+    $(item).addClass('in').css('height', '100%');
+    expandCaret(item);
+  }
+
+  function collapseBlock(item) {
+    $(item).removeClass('in').css('height', '100%');
+    collapseCaret(item);
+  }
+
+  $.each($('.sr-only'), function(i, span) {
+    if ($(span).text() === ' Complete') {
+      $(span).parents('p').addClass('manip-hidden');
+    }
+  });
+
+  $.each($('.map-collapse'), function(i, div) {
+    if ($(div).find('.manip-hidden').length ===
+        $(div).find('p').length) {
+      collapseBlock(div);
+      $(div).find('h3 > a').addClass('faded');
+      $(div).prev('h2').addClass('faded');
+    }
+  });
+
   var scrollTo, dashedName = localStorage.getItem('currentDashedName'),
     elemsToSearch = $('p.padded-ionic-icon a'), currOrLastChallenge;
   if (!dashedName && $('.sr-only').length) {
@@ -323,63 +360,31 @@ $(document).ready(function() {
   }
 
   $('#accordion').on('show.bs.collapse', function(e) {
-      $(e.target)
+      expandCaret(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)
+      collapseCaret(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');
       }
   });
 
-  $('#manipAll').on('click', () => {
-    var showAll = $('#manipAll').hasClass('active');
-    if (showAll) {
-      $.each($('.sr-only'), function(i, item) {
-        if ($(item).text() === ' Complete') {
-          $(item).parents('p').css('display', 'none');
-          $(item).parents('p').addClass('manip-hidden');
-        }
-      });
-      $('#manipAll').text('Show all challenges');
-      return $('#manipAll').removeClass('active');
-    } else {
-      $.each($('.manip-hidden'), function(i, item) {
-        $(item).css('display', 'block');
-        $(item).removeClass('manip-hidden');
-      });
-      $('#manipAll').text('Show incomplete challenges');
-      return $('#manipAll').addClass('active');
-    }
-  });
-
   $('#showAll').on('click', () => {
     var mapExpanded = $('#showAll').hasClass('active');
     if (!mapExpanded) {
-      $.each($('.map-collapse:not(".in")'), function(i, item) {
+      $.each($('.map-collapse:not(".in")'),
-        $(item).css('height', '100%');
+      function(i, div) {
-        $(item).addClass('in');
+        expandBlock(div);
-        $(item)
-          .prev().find('.fa-caret-right')
-          .removeClass('fa-caret-right').addClass('fa-caret-down');
       });
       $('#showAll').text('Collapse all challenges');
       return $('#showAll').addClass('active');
     } else {
-      $.each($('.map-collapse.in'), function(i, item) {
+      $.each($('.map-collapse.in'), function(i, div) {
-        $(item).css('height', '100%');
+        collapseBlock(div);
-        $(item).removeClass('in');
-        $(item)
-          .prev().find('.fa-caret-down')
-          .removeClass('fa-caret-down').addClass('fa-caret-right');
       });
       $('#showAll').text('Expand all challenges');
       return $('#showAll').removeClass('active');

server/views/map/show.jade

@@ -1,10 +1,9 @@
 extends ../layout-wide
 block content
-        .text-center.map-fixed-header
+        .text-center.map-fixed-header.asterisk-explanation
-            p Challenges marked with * are required for certification
+            p Challenges required for certifications are marked with a *
             .row.map-buttons
-                button.center-block.btn.btn-sm.btn-block.btn-primary.active#manipAll Show incomplete challenges
+                button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all challenges
-                button.center-block.btn.btn-sm.btn-block.btn-primary.active#showAll Collapse all
             hr
         #accordion.map-accordion
           for superBlock, index in superBlocks
@@ -21,11 +20,11 @@ block content
                               span.no-link-underline
                                 i.fa.fa-caret-down   
                               | #{challengeBlock.name}
-                              span.challengeBlockTime (#{challengeBlock.time})
+                            span.challengeBlockTime (#{challengeBlock.time})
                           div.margin-left-10(id = "nested-collapse"+challengeBlock.name.replace(/\W/gi, '').split(' ').join('-') class = "collapse in map-collapse no-transition")
                               for challenge in challengeBlock.challenges
                                   if challenge.completed
-                                      p.slightly-faded.text-primary.ion-checkmark-circled.padded-ionic-icon.negative-15(name="#{challenge.dashedName}")
+                                      p.faded.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"
@@ -69,7 +68,7 @@ block content
                     span.no-link-underline
                       i.fa.fa-caret-down  
                     | Nonprofit Projects 
-                    span.challengeBlockTime (800 hours)
+                  span.challengeBlockTime (800 hours)
                 div.margin-left-10(id = "nested-collapse-nonprofit-projects" class = "collapse in map-collapse no-transition")
                       p.challengeBlockDescription To qualify for these nonprofit projects, you must first earn all three foundational certifications: Front End, Data Visualization, and Back End
                       p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Greenfield Nonprofit Project #1") Greenfield Nonprofit Project #1
@@ -97,7 +96,7 @@ block content
                     span.no-link-underline
                       i.fa.fa-caret-down  
                     | Coding Interview Training 
-                    span.challengeBlockTime (70 hours)
+                  span.challengeBlockTime (70 hours)
                 div.margin-left-10(id = "nested-collapse-coding-interview-training" class = "collapse in map-collapse no-transition")
                       p.challengeBlockDescription To qualify for this coding interview training, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
                       p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Soft Skill Training") Soft Skill Training
@@ -108,7 +107,7 @@ block content
                       span.no-link-underline
                         i.fa.fa-caret-down  
                       | Mock Interviews 
-                      span.challengeBlockTime (10 hours)
+                    span.challengeBlockTime (10 hours)
                   div.margin-left-10(id = "nested-collapse-mock-interviews" class = "collapse in map-collapse no-transition")
                         p.challengeBlockDescription To qualify for these mock interviews, you must first earn all four certifications: Front End, Data Visualization, Back End, and Full Stack
                         p.disabled.text-primary.ion-locked.padded-ionic-icon.negative-15(name="Mock Interview #1") Mock Interview #1