Relates #26 - add progress bar and modularise pages more using Handle…

…bars

public/js/checkboxlocalstoragebackground.js

@@ -0,0 +1,18 @@
+var checkboxes = document.querySelectorAll('.govuk-checkboxes__input');
+
+checkboxes.forEach(function (i) {
+  i.addEventListener('click', clickFunc);
+  if(sessionStorage.hasOwnProperty(i.value)){
+    i.checked = true;
+  }
+})
+
+function clickFunc() {
+  if(this.checked){
+    sessionStorage.setItem(this.value + '-background', this.value);
+  } else {
+    if(sessionStorage.hasOwnProperty(this.value)){
+      sessionStorage.removeItem(this.value);
+    }
+  }
+}

public/js/checkboxlocalstorage.js → public/js/checkboxlocalstorageresources.js

@@ -9,7 +9,7 @@ checkboxes.forEach(function (i) {
 
 function clickFunc() {
   if(this.checked){
-    sessionStorage.setItem(this.value, this.value);
+    sessionStorage.setItem(this.value + '-resource', this.value);
   } else {
     if(sessionStorage.hasOwnProperty(this.value)){
       sessionStorage.removeItem(this.value);

public/stylesheets/main.scss

@@ -20,11 +20,11 @@ $body-font: 'Source Sans Pro', sans-serif;
 $bold-font: 900;
 $regular-font: 400;
 // $heading-1: 5.063em;
-$heading-1: 3.375em;
-$heading-2: 2.25em;
-$base-font-size: 1em;
-$smaller-font-size: 0.667em;
-$larger-font-size: 1.5em;
+$heading-1: 3.375rem;
+$heading-2: 2.25rem;
+$base-font-size: 1.5rem;
+$smaller-font-size: 0.667rem;
+$larger-font-size: 1.5rem;
 
 // COLOR VARIABLES
 
@@ -42,7 +42,8 @@ $accent-colour-dark: #C8A415;
 $o-grid-is-silent: false;
 
 $round-image: 50%;
-$small-image: 200px;
+$small-image: 75%;
+$very-small-image: 20px;
 
 // MIX-INS
 
@@ -73,10 +74,42 @@ h1 {
     font-size: $heading-1;
 }
 
+progress[value] {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-apperance: none;
+    width: 100%;
+    height: 100%;
+}
+
+progress[value]::-webkit-progress-bar {
+    background: $primary-bg-colour-light;
+    box-shadow: 0 2px 5px $primary-bg-colour inset;
+}
+
+progress[value]::-webkit-progress-value {
+    background-color: $accent-colour;
+}
+
+progress {
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-apperance: none;
+    width: 100%;
+    height: 100%;
+    background: $primary-bg-colour-light;
+    box-shadow: 0 2px 5px $primary-bg-colour inset;
+}
+
+progress[value]::-moz-progress-bar {
+    background-color: $accent-colour;
+    box-shadow: 0 2px 5px $primary-bg-colour inset;
+}
+
 // CLASSES
 
 .full-viewport {
-    min-height: 100vh;
+    min-height: 95vh;
     width: 100vw;
 }
 
@@ -114,6 +147,12 @@ h1 {
     padding-right: 10px;
 }
 
+.centered-content-no-padding {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .eight-padding {
     padding: 8px;
 }
@@ -126,8 +165,18 @@ h1 {
     padding: 32px;
 }
 
+.progressbar {
+    position: fixed;
+    width: 100%;
+    height: 5%;
+    left: 0;
+    bottom: 0;
+    background: white;
+}
+
 // IDS
 
+
 // #test-container {
 //     @include oGridContainer();
 // }
@@ -156,7 +205,6 @@ img {
         radius: $round-image;
     }
     width: $small-image;
-    height: $small-image;
     max-width: 90%;
 }
 

src/controllers/background.js

@@ -1,5 +1,8 @@
 exports.get = (req, res) => {
   res.render('background', {
-    layout: 'scrollable'
+    layout: 'scrollable',
+    progressamt: '40',
+    title: 'Background',
+    pageInfo: 'Please check all the boxes you feel are things holding you back from getting into tech.'
   });
 }

src/controllers/home.js

@@ -1,3 +1,8 @@
 exports.get = (req, res) => {
-  res.render('home', {activePage:{home: true}})
+  res.render('home', 
+    {
+      activePage:{home: true},
+      progressamt: '0',
+      title: 'Tech Access App'
+    })
 }

src/controllers/moreinfo.js

@@ -1,5 +1,8 @@
 exports.get = (req, res) => {
   res.render('moreinfo', {
-    layout: 'scrollable'
+    layout: 'moreinfo',
+    progressamt: '80',
+    title: 'More Info',
+    pageInfo: 'If you\'d like to, you can give us more detail about your background. We can\'t use these to tailor your results yet, but we hope to use this infromation to improve our service down the line.'
   });
 }

src/controllers/resources.js

@@ -1,5 +1,7 @@
 exports.get = (req, res) => {
   res.render('resources', {
-    layout: 'scrollable'
+    progressamt: '60',
+    title: 'Resources',
+    pageInfo: 'Please check all the boxes of the types of resources you feel would be most helpful to get you into tech.'
   });
 }

src/controllers/results.js

@@ -1,5 +1,8 @@
 exports.get = (req, res) => {
   res.render('results', {
-    layout: 'scrollable'
+    layout: 'scrollable',
+    progressamt: '100',
+    title: 'Results',
+    pageInfo: 'Based on the checkboxes you have selected, here are your results.'
   });
 }