Trigger dropdown when track is selected

Author: Nick Litwin

app/skill-picker/skill-picker.controller.js

@@ -8,6 +8,7 @@
   function SkillPickerController() {
     var vm = this;
     vm.toggleSkill = toggleSkill;
+    vm.selectTrack = selectTrack;
 
     activate();
 
@@ -21,7 +22,7 @@
       vm.skills = {
         design: ['Photoshop', 'Illustrator', 'InDesign', 'UX', 'UI', 'Sketch'],
         develop: ['Java', 'JavaScript', 'Ruby', 'Objective C', 'Python', 'SASS', 'HTML', 'CSS', 'LESS', 'C#', 'iOS', 'C++', 'Xcode', '.NET', 'PHP', 'MySQL', 'MongoDB'],
-        data_science: ['Java', 'JavaScript', 'Ruby', 'Objective C', 'Python', 'SASS', 'HTML', 'CSS', 'LESS', 'C#', 'iOS', 'C++', 'Xcode', '.NET', 'PHP', 'MySQL', 'MongoDB']
+        data_science: ['Java', 'Algorithms', 'Ruby', 'Objective C', 'Python', 'SASS', 'HTML', 'CSS', 'LESS', 'C#', 'iOS', 'C++', 'Xcode', '.NET', 'PHP', 'MySQL', 'MongoDB']
       };
 
       vm.selectedSkills = {
@@ -38,14 +39,23 @@
     }
 
     function toggleSkill(track, skill) {
-      if (!vm.selectedSkills[track][skill]) {
-        vm.selectedSkills[track][skill] = true;
+      var selectedSkill = vm.selectedSkills[track][skill];
+      if (!selectedSkill) {
+        selectedSkill = true;
         vm.selectedSkills[track].numSkills += 1;
 
       } else {
-        vm.selectedSkills[track][skill] = false;
+        selectedSkill = false;
         vm.selectedSkills[track].numSkills -= 1;
       }
     }
+
+    function selectTrack(track) {
+      if (vm.tracks[track] === vm.dropdown[track]) {
+        vm.dropdown[track] = !vm.dropdown[track];
+      }
+
+      vm.tracks[track] = !vm.tracks[track];
+    }
   }
 })();

app/skill-picker/skill-picker.jade

@@ -12,9 +12,9 @@
           .track-checkbox
             input(type="checkbox", id="checkbox-design-mobile", ng-checked="vm.tracks.design")
 
-            label(for="checkbox-design-mobile", ng-click="vm.tracks.design = !vm.tracks.design", ng-class="{ 'checked-track': vm.tracks.design }") #[span] Design
+            label(for="checkbox-design-mobile", ng-click="vm.selectTrack('design')", ng-class="{ 'checked-track': vm.tracks.design }") #[span] Design
 
-            span.subscript [{{vm.selectedSkills.design.numSkills || 0}}]
+            span.subscript [{{vm.selectedSkills.design.numSkills}}]
 
           .dropdown-mobile(ng-click="vm.dropdown.design = !vm.dropdown.design")
             i.fa(ng-class="{'fa-caret-down': !vm.dropdown.design, 'fa-caret-up': vm.dropdown.design}")
@@ -27,9 +27,9 @@
         .track-checkbox
           input(type="checkbox", id="checkbox-develop-mobile", ng-checked="vm.tracks.develop")
 
-          label(for="checkbox-develop-mobile", ng-click="vm.tracks.develop = !vm.tracks.develop", ng-class="{ 'checked-track': vm.tracks.develop }") #[span] Development
+          label(for="checkbox-develop-mobile", ng-click="vm.selectTrack('develop')", ng-class="{ 'checked-track': vm.tracks.develop }") #[span] Development
 
-          span.subscript [{{vm.selectedSkills.develop.numSkills || 0}}]
+          span.subscript [{{vm.selectedSkills.develop.numSkills}}]
 
         .dropdown-mobile(ng-click="vm.dropdown.develop = !vm.dropdown.develop")
           i.fa(ng-class="{'fa-caret-down': !vm.dropdown.develop, 'fa-caret-up': vm.dropdown.develop}")
@@ -41,16 +41,16 @@
         .track-checkbox
           input(type="checkbox", id="checkbox-data-science-mobile", ng-checked="vm.tracks.data_science")
 
-          label(for="checkbox-data-science-mobile", ng-click="vm.tracks.data_science = !vm.tracks.data_science", ng-class="{ 'checked-track': vm.tracks.data_science }") #[span] Data Science
+          label(for="checkbox-data-science-mobile", ng-click="vm.selectTrack('data_science')", ng-class="{ 'checked-track': vm.tracks.data_science }") #[span] Data Science
 
-          span.subscript [{{vm.selectedSkills.data_science.numSkills || 0}}]
+          span.subscript [{{vm.selectedSkills.data_science.numSkills}}]
 
         .dropdown-mobile(ng-click="vm.dropdown.data_science = !vm.dropdown.data_science")
           i.fa(ng-class="{'fa-caret-down': !vm.dropdown.data_science, 'fa-caret-up': vm.dropdown.data_science}")
 
       .track-skills(ng-show="vm.dropdown.data_science")
         .track-skill(ng-repeat="skill in vm.skills.data_science", ng-click="vm.toggleSkill('data_science', skill)", ng-class="{'skill-selected': vm.selectedSkills.data_science[skill]}") {{skill}}
 
-    p Please pick at least one track, you can always change it later.
+    p.reminder Please pick at least one track, you can always change it later.
 
     button(type="button", ng-class="{'enabled-button': vm.tracks.design || vm.tracks.develop || vm.tracks.data_science}") Done

assets/css/skill-picker/skill-picker.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: column;
   justify-content: center;
+  align-items: center;
 
   h1 {
     margin-bottom: 20px;
@@ -15,6 +16,7 @@
   p {
     font-size: 15px;
     padding: 5px 20px;
+    max-width: 440px;
   }
 
   .track-picker {
@@ -87,6 +89,10 @@
     }
 
     .mobile {
+      @media only screen and (min-width: 960px) {
+        display: none;
+      }
+
       .dropdown-mobile {
         width: 55px;
         height: 40px;
@@ -124,6 +130,10 @@
       }
     }
 
+    .reminder {
+      margin-top: 5px;
+    }
+
     button {
       @include ui-submit-button;