Merge pull request #24 from InFact-coop/bug-fixes

Fixes #22 #21 and adds usertesting
InFact-coop · Jan 5, 2018 · db79a46 · db79a46
2 parents 27fede2 + a0f14a1
commit db79a46
Show file tree

Hide file tree

Showing 15 changed files with 257 additions and 53 deletions.
diff --git a/elm-package.json b/elm-package.json
@@ -1,14 +1,17 @@
 {
-  "version": "1.0.0",
-  "summary": "an elm boilerplate",
-  "repository": "https://github.com/astroash/elm-spa-boiler-plate.git",
-  "license": "BSD3",
-  "source-directories": ["src/elm"],
-  "exposed-modules": [],
-  "dependencies": {
-    "elm-lang/core": "5.1.1 <= v < 6.0.0",
-    "elm-lang/html": "2.0.0 <= v < 3.0.0",
-    "elm-lang/navigation": "2.1.0 <= v < 3.0.0"
-  },
-  "elm-version": "0.18.0 <= v < 0.19.0"
+    "version": "1.0.0",
+    "summary": "an elm boilerplate",
+    "repository": "https://github.com/astroash/elm-spa-boiler-plate.git",
+    "license": "BSD3",
+    "source-directories": [
+        "src/elm"
+    ],
+    "exposed-modules": [],
+    "dependencies": {
+        "elm-lang/core": "5.1.1 <= v < 6.0.0",
+        "elm-lang/dom": "1.1.1 <= v < 2.0.0",
+        "elm-lang/html": "2.0.0 <= v < 3.0.0",
+        "elm-lang/navigation": "2.1.0 <= v < 3.0.0"
+    },
+    "elm-version": "0.18.0 <= v < 0.19.0"
 }
diff --git a/public/assets/IDEO's Field Guide to Human-Centred Design.pdf b/public/assets/IDEO's Field Guide to Human-Centred Design.pdf
diff --git a/public/assets/err.svg b/public/assets/err.svg
diff --git a/public/audioMessages.js b/public/audioMessages.js
@@ -8,7 +8,9 @@ if (navigator.mediaDevices) {
   var chunks = [];
   var mediaRecorder;
 
+
   app.ports.recordStart.subscribe(function() {
+    console.log("HELLO");
     navigator.mediaDevices.getUserMedia(constraints).then(function(stream) {
       mediaRecorder = new MediaRecorder(stream);
       mediaRecorder.start();
@@ -20,7 +22,7 @@ if (navigator.mediaDevices) {
 
         var blob = new Blob(chunks, {'type': 'audio/ogg; codecs=opus'});
         chunks = [];
-        // jstoelm
+        // js to elm
         var audioURL = window.URL.createObjectURL(blob);
         console.log("blob", blob)
         app.ports.audioUrl.send(audioURL);
@@ -31,7 +33,11 @@ if (navigator.mediaDevices) {
       mediaRecorder.ondataavailable = function(e) {
         chunks.push(e.data);
       };
-    })
+    }).catch(function(err) {
+      // js to elm
+      console.log("Can't start audio!");
+        app.ports.recordError.send("Can't start audio!");
+    });
   });
 
   app.ports.recordStop.subscribe(function() {

diff --git a/src/css/_custom.css b/src/css/_custom.css
@@ -10,6 +10,8 @@ body {
   color: var(--brand-teal);
   margin: 0;
   font-weight: 400;
+  background: linear-gradient(180deg, #FFFFFF 0%, rgba(242, 242, 242, 0.9) 100%);
+  min-height: 100vh;
 }
 
 button {
@@ -22,17 +24,8 @@ h1 {
   font-weight: 700;
 }
 
-.main {
-  background: linear-gradient(180deg, #FFFFFF 0%, rgba(242, 242, 242, 0.9) 100%);
-  min-height: 667px;
-  min-width: 375px;
-  max-height: 736px;
-  max-width: 414px;
-}
 .main--red {
   background: var(--red);
-  max-height: 700px;
-  max-width: 400px;
 }
 
 .w6 {
@@ -67,36 +60,37 @@ h1 {
   height: var(--height-10);
 }
 
-/*folded page*/
+/* folded page */
 
 .homeContainer {
   position: relative;
+  min-height: 100vh;
   box-shadow:0 1px 0 rgba(0,0,0,.2);
 }
 
 .corner-right {
   position: absolute;
   bottom: 0;
   right: 0;
-  width: 1em;
-  height: 1em;
+  width: 2.5rem;
+  height: 2.5rem;
   background-color: #aedeef;
 }
 
-.homeContainer .corner-right .corner-right-triangle {
+.corner-right-triangle {
   position: absolute;
   width: 0;
   height: 0;
   border-style: solid;
-  border-width: 0 0 1em 1em;
+  border-width: 0 0 2.5rem 2.5rem;
   border-color: transparent transparent #00b5d6 transparent;
 }
 
 /* Icon Stuff */
 
 .iconGrid {
   display: grid;
-  /*justify-items: center;*/
+  height: 0;
   grid-template-columns: 1fr 1fr;
   grid-template-rows: 4fr 4fr 4fr;
   align-items: center;
@@ -206,6 +200,13 @@ h1 {
   background-position: 14% center;
 }
 
+.err-checked {
+  background:url('assets/err.svg') no-repeat;
+  background-color: var(--red);
+  background-size: 14%;
+  background-position: 14% center;
+}
+
 .write {
   background:url('assets/write.svg') no-repeat;
   background-size: 17%;
@@ -244,15 +245,15 @@ h1 {
 }
 
 .mw5half {
-  max-width: var(--max-width-5half);
+  /* max-width: var(--max-width-5half); */
 }
 
 .sans {
   font-family: var(--sans-serif);
 }
 
 .mh-100 {
-  min-height: 100vh;
+  /* min-height: 100vh; */
 }
 
 .star {
@@ -302,7 +303,7 @@ h1 {
   margin-left: 12rem;
 }
 
-.borrowbooks{
+.borrowbooks {
   background: url("assets/borrowbooks.svg") no-repeat;
   background-size: 100%;
   width: 8rem;
@@ -312,5 +313,8 @@ h1 {
 
 .audio {
   background-color: var(--red);
+}
 
+.footer {
+  height: 2.5rem;
 }
diff --git a/src/elm/Routes/Home.elm b/src/elm/Routes/Home.elm
@@ -32,14 +32,14 @@ home model =
                 , span
                     [ class "db f4" ]
                     [ text "Edinburgh Central Library" ]
-                , div
-                    [ class "corner-right" ]
-                    [ a [ href "#secondPage" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pt3 pr2" ] [ text "1" ] ] ] ]
                 ]
             ]
         , a
             [ class "mt4 db br-100 w9 h9 center bg-bookbug", href "#secondPage" ]
             []
-        , div [ style [ ( "display", "none" ) ] ]
-            [ Routes.SecondPage.secondPage model ]
+        , div [ class "footer" ]
+            [ div
+                [ class "corner-right" ]
+                [ a [ href "#secondPage" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "1" ] ] ] ]
+            ]
         ]
diff --git a/src/elm/Routes/ReviewPage.elm b/src/elm/Routes/ReviewPage.elm
@@ -8,8 +8,8 @@ import Types exposing (..)
 
 reviewPage : Model -> Html Msg
 reviewPage model =
-    div [ class <| "center main mw6 homeContainer" ++ (hasChanged model) ]
-        [ h1 [ class "tc f3 pt6" ] [ text "How would you rate your experience?" ]
+    div [ class <| "center main homeContainer" ]
+        [ h1 [ class "tc f3 pa4" ] [ text "How would you rate your experience?" ]
         , Html.form [ class "star-rating center pl2 tc pt4" ]
             [ fieldset [ class "bn" ]
                 [ span [ class "star-group" ]
@@ -18,8 +18,11 @@ reviewPage model =
                     )
                 ]
             ]
-        , div [ class "corner-right" ]
-            [ a [ href "#thirdPage" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "3" ] ] ] ]
+        , div [ class "footer" ]
+            [ div
+                [ class "corner-right" ]
+                [ a [ href "#thirdPage" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "3" ] ] ] ]
+            ]
         ]
 
 
@@ -48,6 +51,6 @@ lightStar model =
 hasChanged : Model -> String
 hasChanged model =
     if (model.backgroundColor == True) then
-        "bg-blue"
+        " bg-blue"
     else
         ""
diff --git a/src/elm/Routes/SecondPage.elm b/src/elm/Routes/SecondPage.elm
@@ -8,11 +8,14 @@ import Types exposing (..)
 
 secondPage : Model -> Html Msg
 secondPage model =
-    div [ class "center main flex flex-column homeContainer" ]
-        [ section [] [ h1 [ class "tc f3 pa3 ma4" ] [ text "What brings you here?" ] ]
+    div [ class "center main homeContainer" ]
+        [ section [] [ h1 [ class "tc f3 pa3 ma2" ] [ text "What brings you here?" ] ]
         , createIcons model
-        , div [ class "corner-right" ]
-            [ a [ href "#reviewPage" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "2" ] ] ] ]
+        , div [ class "footer" ]
+            [ div
+                [ class "corner-right" ]
+                [ a [ href "#reviewPage" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "2" ] ] ] ]
+            ]
         ]
 
 

diff --git a/src/elm/Routes/Sent.elm b/src/elm/Routes/Sent.elm
@@ -14,4 +14,9 @@ sent model =
             , h1 [ class "white sans ma0 f1 pv5 link" ]
                 [ text "Thanks!" ]
             ]
+        , div [ class "footer" ]
+            [ div
+                [ class "corner-right" ]
+                [ a [ href "#storyboard" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "..." ] ] ] ]
+            ]
         ]
diff --git a/src/elm/Routes/StoryBoard.Elm b/src/elm/Routes/StoryBoard.Elm
@@ -7,7 +7,7 @@ import Types exposing (..)
 
 storyBoard : Model -> Html Msg
 storyBoard model =
-    div [ class "center main mw6 homeContainer mh-100" ]
+    div [ class "center main homeContainer" ]
         [ h1 [ class "tc ma0 pt2 b f3 pa2" ] [ text "Story Board" ]
         , section [ class "bubbles dib pt2" ]
             [ section [ class "blueBubble" ] []
@@ -22,4 +22,9 @@ storyBoard model =
             , class "audio"
             ]
             []
+            , div [ class "footer" ]
+                [ div
+                    [ class "corner-right" ]
+                    [ a [ href "#home" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "5" ] ] ] ]
+                ]
         ]
diff --git a/src/elm/Routes/ThirdPage.elm b/src/elm/Routes/ThirdPage.elm
@@ -8,10 +8,15 @@ import Types exposing (..)
 
 thirdPage : Model -> Html Msg
 thirdPage model =
-    div [ class "center main" ]
+    div [ class "center main homeContainer" ]
         [ h1 [ class "tc f3 pa3 ma4" ]
             [ text "What's your story?" ]
         , makeIcons model
+        , div [ class "footer" ]
+            [ div
+                [ class "corner-right" ]
+                [ a [ href "#storyBoard" ] [ div [ class "corner-right-triangle" ] [ p [ class "white f4 fr pr1" ] [ text "4" ] ] ] ]
+            ]
         ]
 
 
@@ -26,7 +31,7 @@ makeIcons model =
 
 makeIcon : ( Message, Stage ) -> Model -> Html Msg
 makeIcon ( message, stage ) model =
-    div [ class <| (messageToClass ( message, stage )) ++ " pointer ba bw2 br-pill pa4 pl5 tc mw5half center mv5", onClick (messageToMsg ( message, stage )) ] [ text <| messageToText ( message, stage ) model ]
+    div [ class <| (messageToClass ( message, stage )) ++ " pointer ba bw2 br-pill pa4 pl5 tc mw5half mv5 mh3", onClick (messageToMsg ( message, stage )) ] [ text <| messageToText ( message, stage ) model ]
 
 
 messageToMsg : ( Message, Stage ) -> Msg
@@ -78,7 +83,7 @@ messageToText ( message, stage ) model =
             "SEND IT"
 
         _ ->
-            ""
+            "error :( click here"
 
 
 messageToClass : ( Message, Stage ) -> String
@@ -102,5 +107,14 @@ messageToClass ( message, stage ) =
         ( Text, Stage2 ) ->
             "write brand b--brand"
 
-        _ ->
+        ( Video, Stage0 ) ->
+            "dn"
+
+        ( Video, Stage1 ) ->
             "dn"
+
+        ( Video, Stage2 ) ->
+            "dn"
+
+        _ ->
+            "err-checked b--red white f4"