Mobile improvements

survey-app/public/styles/site.css

@@ -6759,7 +6759,7 @@ button.close {
 }
 #landing-top {
   background-image: url("../images/paul-gilmore-184255-unsplash.jpg");
-  background-size: 100%;
+  background-size: cover;
   background-repeat: no-repeat;
 }
 #assessment-label {
@@ -6781,6 +6781,11 @@ button.close {
   margin-bottom: 5%;
   padding: 30px;
 }
+@media screen and (max-width: 600px) {
+  #landing .jumbotron {
+    width: 100%;
+  }
+}
 #landing-mid h3 {
   padding-top: 10px;
   padding-bottom: 10px;
@@ -6796,7 +6801,11 @@ button.close {
   color: gray-light;
 }
 #moduleLinks {
-  padding-top: 10px;
+  padding-top: 65px;
+  margin-left: -35px;
+}
+#moduleLinks .nav-link {
+  background-color: #fff;
 }
 .gallery-image img {
   display: block;
@@ -6826,7 +6835,7 @@ button.close {
   margin-right: 10px;
 }
 .leftLink {
-  margin-right: 40px;
+  margin-right: 15px;
 }
 .scaleLeft {
   margin-right: 5px;
@@ -6835,7 +6844,7 @@ button.close {
   margin-left: 1em;
 }
 .leftButton {
-  margin-right: 20px;
+  margin-right: 15px;
 }
 #introTabsContent {
   margin-top: 20px;
@@ -6853,3 +6862,22 @@ button.close {
 .form-control {
   color: #000;
 }
+body {
+  padding-top: 50px;
+}
+#assessment-page h3 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.custom-select {
+  width: 100%;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  border: 0;
+  font-size: 1.5em;
+}
+.custom-select select {
+  display: none;
+}

survey-app/public/styles/site/_layout.styl

@@ -41,7 +41,7 @@
 
 #landing-top
     background-image url('../images/paul-gilmore-184255-unsplash.jpg')
-    background-size 100%
+    background-size cover
     background-repeat no-repeat
 
 #assessment-label
@@ -62,6 +62,9 @@
     margin-bottom 5%
     padding 30px
 
+    @media screen and (max-width: 600px)
+        width 100%
+
 #landing-mid h3 
     padding-top 10px
     padding-bottom 10px
@@ -77,7 +80,11 @@
     color gray-light
 
 #moduleLinks
-    padding-top 10px
+    padding-top 65px
+    margin-left -35px
+
+#moduleLinks .nav-link
+    background-color white
 
 .gallery-image img
     display block
@@ -107,7 +114,7 @@
     margin-right 10px
 
 .leftLink
-    margin-right 40px
+    margin-right 15px
 
 .scaleLeft
     margin-right 5px
@@ -116,7 +123,7 @@
     margin-left 1em
 
 .leftButton
-    margin-right 20px
+    margin-right 15px
 
 #introTabsContent
     margin-top 20px
@@ -132,4 +139,23 @@
     background-color $gray
 
 .form-control
-    color black
+    color black
+
+body 
+    padding-top 50px
+
+#assessment-page h3
+    padding-top 10px
+    padding-bottom 10px
+
+.custom-select
+    width 100%
+    margin-top 20px
+    margin-bottom 20px
+    -webkit-appearance none
+    -moz-appearance none
+    border 0
+    font-size 1.5em
+
+.custom-select select
+    display none

survey-app/routes/views/assessment.js

@@ -3,6 +3,7 @@ const _ = require('lodash');
 const grabity = require('grabity');
 
 const Module = keystone.list('Module').model;
+const ModuleProgress = keystone.list('ModuleProgress').model;
 const Question = keystone.list('Question').model;
 const Team = keystone.list('Team').model;
 const Answer = keystone.list('Answer').model;
@@ -36,7 +37,11 @@ getResourceLinkInfo = async(links) => {
     return results;
 };
 
-exports = module.exports = (req, res) => {
+getUserProgress = async (userId) => {
+    return await ModuleProgress.find({userId: userId});
+};
+
+exports = module.exports = async (req, res) => {
     const view = new keystone.View(req, res);
 
     const locals = res.locals;
@@ -45,7 +50,7 @@ exports = module.exports = (req, res) => {
 
     view.query('team', Team.findOne({'_id': req.user.team}));
 
-    getAssignedModules(req.user.assignedModules).then((mods) => {
+    getAssignedModules(req.user.assignedModules).then(async (mods) => {
     	var activeId; 
 
     	if (req.params.moduleId) {
@@ -59,7 +64,10 @@ exports = module.exports = (req, res) => {
 			return res.redirect('/assessment/' + mods[0].id);
 		}
 
-    	locals.active = activeId; 
+        locals.active = activeId; 
+
+        const userProgress = await getUserProgress(req.user.id);
+        locals.progress = userProgress;
 
 		Promise.all(mods.map(async (mod) => {
             const modId = mod._id;

survey-app/templates/layouts/default.pug

@@ -50,23 +50,14 @@ html
 			//- Customise your site's navigation by changing the navLinks Array in ./routes/middleware.js
 			//- ... or completely change this header to suit your design.
 
-		//- if !user
-		//- 	div(role="navigation").navbar.navbar-inverse.navbar-static-top
-		//- 		#landing-header: .container-fluid
-		//- 			a.navbar-logo(href='/')
-		//- 				img(alt='BCAT', src='../images/BCATlogo_white.svg')
-		//- 			h2 Broadband Connectivity Assessment Tool
-		//- else
-			//- #header: .container-fluid
-		div(role="navigation").navbar.navbar-default.navbar-static-top
-			.navbar-header: .container-fluid
-				button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
-					span.sr-only Toggle navigation
-					span.icon-bar
-					span.icon-bar
-					span.icon-bar
+		div(role="navigation").navbar.navbar-default.navbar-fixed-top
 			a.navbar-brand(href='/')
 					img(alt='BCAT', src='../images/BCATlogo_white.svg')
+			button.navbar-toggle(type='button', data-toggle='collapse', data-target='.navbar-collapse')
+				span.sr-only Toggle navigation
+				span.icon-bar
+				span.icon-bar
+				span.icon-bar
 			.collapse.navbar-collapse
 				ul.nav.navbar-nav.navbar-left
 					each link in navLinks
@@ -75,7 +66,7 @@ html
 					if user && user.canAccessKeystone
 						li: a(href='/keystone') Open Keystone
 					if team
-						li: a(href='/home') #{team.name}
+						li.hidden-xs.hidden-sm.hidden-md: a(href='/home') #{team.name}
 					if user
 						li: a(href='/keystone/signout') Sign Out
 					else

survey-app/templates/mixins/question-types.pug

@@ -69,8 +69,8 @@ mixin question-form(questions, moduleId, answers)
 
         hr
 
-        button.btn.btn-primary(type="submit" id="save-progress") Save
-        button.btn.btn-primary(type="submit", id="complete-module") Mark as complete
+        button.btn.btn-primary.leftButton(type="submit" id="save-progress") Save for Later
+        button.btn.btn-default(type="submit", id="complete-module") Mark Done
 
         script(type='text/javascript').
             localStorageStuff.setOldAnswers(!{JSON.stringify(answers)});

survey-app/templates/views/assessment.pug

@@ -2,39 +2,36 @@ extends ../layouts/default
 include ../mixins/question-types
 
 block content
-    .container-fluid: .row.show-grid
-        .container
-            if modules && Object.keys(modules).length > 0
-                .col-sm-12#moduleLinks
-                    ul.nav.nav-pills(role="tablist")
-                        each mod, index in modules
-                            if mod.id == active
-                                li.nav-item.active
-                                    a.nav-link(href="/assessment/"+mod.id) #{mod.name}
-                            else
-                                li.nav-item
-                                    a.nav-link(href="/assessment/"+mod.id) #{mod.name}
-
-        .container-fluid
+    .container
+        if modules && Object.keys(modules).length > 0
+            .visible-xs
+                select.custom-select(onchange="location=this.value;")
+                    each mod, index in modules
+                        if mod.id == active
+                            option(value="/assessment/"+mod.id selected) #{mod.name}
+                        else
+                            option(value="/assessment/"+mod.id) #{mod.name}
             .row
-                if modules && Object.keys(modules).length > 0
-                    .container
-                        .col-sm-8
-                            h3 #{modules[active].name}
-                            if modules[active].questions
-                                +question-form(modules[active].questions, modules[active].id, modules[active].answers)
-                        .col-sm-4
-                            if modules[active].resources.length > 0
-                                h3 Resources
-                                each resource in modules[active].resources
-                                    a(href=resource.link) 
-                                        .thumbnail
-                                            if resource.image
-                                                img(src=resource.image alt=resource.title onerror="this.style.display='none'")
-                                            .caption
-                                                h3 #{resource.title}
-                                                p #{resource.description}
+                .col-sm-3.hidden-xs
+                    if modules && Object.keys(modules).length > 0
+                        #moduleLinks
+                            ul.nav.nav-stacked(data-spy="affix")
+                                each mod, index in modules
+                                    if mod.id == active
+                                        li.nav-item
+                                            a.nav-link.active(href="/assessment/"+mod.id) #{mod.name}
+                                    else
+                                        li.nav-item
+                                            a.nav-link(href="/assessment/"+mod.id) #{mod.name}
+                .col-sm-9#assessment-page
+                    h3.hidden-xs #{modules[active].name}
 
-                else
-                    .container
-                        h4 You Haven't Been Assigned Any Modules 
+                    .progress
+                        .progress-bar(role="progressbar", aria-volumemax="100", aria-valuemin="0", aria-valuenow="50", style="width:50%") % Complete
+
+                    if modules[active].questions
+                        +question-form(modules[active].questions, modules[active].id, modules[active].answers)
+
+        else
+            .container
+                h4 You Haven't Been Assigned Any Modules 

survey-app/templates/views/home.pug

@@ -17,7 +17,7 @@ block content
 			.panel-body
 				| Watch this space
 			.panel-footer.text-right
-				a() View prior announcements
+				a() View Previous
 
 		.panel.panel-default
 			.panel-heading Suggested Resources
@@ -26,7 +26,7 @@ block content
 				a(href='https://i3cex.internet-is-infrastructure.org/sessions/new') this  
 				| tool for the module Local Insights on Data
 			.panel-footer.text-right
-				a() View all Resource Guides
+				a() View All Resource Guides
 
 		.panel.panel-default
 			.panel-heading Your Assessment
@@ -36,27 +36,28 @@ block content
 				else
 					.progress
 						.progress-bar(role="progressbar", aria-volumemax="100", aria-valuemin="0", aria-valuenow="50", style="width:50%") % Complete
-					table.table(id="moduleTable")
-						thead
-							tr
-								th Module Name
-								th Status
-								th Questions
-								th Last Activity
-								th Actions
-						tbody
-							each progress in assignedModules
-									tr
-										if progress
-											td 
-												a(href='/assessment/' + progress.moduleId.id) #{progress.moduleId.name}
-											td #{progress._.progress.format()}
-											td #{progress._.percentage.format('0,')}% Answered
-											td #{progress._.updatedAt.format('MM/DD/YYYY')}
-											td
-												a(href='/assessment/' + progress.moduleId.id) 
-													span.glyphicon.glyphicon-play
-												a(href='')
-													span.glyphicon.glyphicon-save
-										else
-											td Something went wrong. Please go to the assessment page for this module.
+					.table-responsive
+						table.table(id="moduleTable")
+							thead
+								tr
+									th Module Name
+									th.hidden-xs Status
+									th Progress
+									th.hidden-xs Last Activity
+									th Actions
+							tbody
+								each progress in assignedModules
+										tr
+											if progress
+												td 
+													a(href='/assessment/' + progress.moduleId.id) #{progress.moduleId.name}
+												td.hidden-xs #{progress._.progress.format()}
+												td #{progress._.percentage.format('0,')}% Answered
+												td.hidden-xs #{progress._.updatedAt.format('MM/DD/YYYY')}
+												td
+													a(href='/assessment/' + progress.moduleId.id) 
+														span.glyphicon.glyphicon-play
+													a(href='')
+														span.glyphicon.glyphicon-save
+											else
+												td Something went wrong. Please go to the assessment page for this module.