+ Create Help Modal

 + Change Snapshot to Data Tool
 + Log Status of GetComments API Request in State

Relates #134

src/css/_custom.css

@@ -82,6 +82,38 @@ body {
   grid-auto-rows: max-content;
 }
 
+.help-icon-above {
+  transform: translate(-50%, -4.9rem);
+  left: 50%;
+}
+
+.w-11 {
+  width: 11rem;
+}
+
+.w-1d5 {
+  width: 1.5rem;
+}
+.h-1d5 {
+  height: 1.5rem;
+}
+
+.top-1d5 {
+  top: 1.5rem;
+}
+
+.content-box {
+  box-sizing: content-box;
+}
+
+.right-1d5 {
+  right: 1.5rem;
+}
+
+.o-6-hover:hover {
+  opacity: 0.6;
+}
+
 /* Remove blue border highlight on inputs */
 
 input:-webkit-autofill,
@@ -93,8 +125,7 @@ input:-webkit-autofill:active {
 
 input::-webkit-outer-spin-button,
 input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
+  opacity: 1;
 }
 
 /*  Modal Centering */

src/elm/Components/Button.elm

@@ -57,6 +57,7 @@ bigColouredButton validationPassed colour label clickMsg =
                 "bg-gray disableButton o-30"
             , submitButtonStyle
             , topicButtonFont
+            , ifThenElse (clickMsg /= NoOp) "pointer" ""
             ]
         , onClick <| ifThenElse validationPassed clickMsg NoOp
         ]

src/elm/Components/HelpModal.elm

@@ -0,0 +1,43 @@
+module Components.HelpModal exposing (helpModal)
+
+import Components.StyleHelpers exposing (classes, displayElement)
+import Html exposing (..)
+import Html.Attributes exposing (..)
+import Html.Events exposing (..)
+import Types exposing (..)
+
+
+helpModal : Model -> Html Msg
+helpModal model =
+    section
+        [ classes
+            [ "modal fixed f3 ph5-ns ph4 pb3 pt4 bg-white br2 w-70-ns w-90 z-3 center tc content-box overflow-y-scroll overflow-y-visible-ns"
+            , displayElement model.displayHelpModal
+            ]
+        ]
+        [ img
+            [ src "assets/help_icon_background.svg"
+            , classes
+                [ "db-ns"
+                , "dn"
+                , "help-icon-above"
+                , "h4"
+                , "w4"
+                , "absolute"
+                , "z-3"
+                ]
+            , alt "Help"
+            ]
+            []
+        , img [ src "assets/cross.svg", class "h1d5 w1d5 absolute right-1d5 top-1d5 pointer", onClick ToggleHelpModal ] []
+        , section [ class "tl" ]
+            [ h1 [ classes [ "f2", "mb4", "mt3", "b" ] ] [ text "How do I use LCN's Data Tool?" ]
+            , section [ class "fw3 f3" ]
+                [ p [ class "mb3" ] [ text "Now you have logged in for the first time, you will go through a very short set-up." ]
+                , p [ class "mb3" ] [ text "This is so that when you drop by next time, you will only be asked questions relevant to what you do, and as few of them as possible." ]
+                , p [ class "mb3" ] [ text "The first part of the app asks how many cases you have worked on this week and what kinds. The point is not to need to go through your papers, just give your best estimate. These are just 3-4 simple questions that should take a minute to answer, anonymously." ]
+                , p [ class "mb3" ] [ text "When you are done logging this, you will also see a ‘dashboard’ with the wider picture across Law Centres at the moment. At this point you can leave it there or continue to the next part." ]
+                , p [ class "mb3" ] [ text "The second part lets you share more, this time using your name, about what you have seen during the week: what’s emerging? What has stood out? Others are sharing, too: you will be able to see what they have written, and comment on it\nHere you can also ask LCN to take up an issue you raise in its national policy work\nThe point is to help us all share what we see for maximum benefit – at minimum effort." ]
+                ]
+            ]
+        ]

src/elm/Components/StyleHelpers.elm

@@ -46,7 +46,7 @@ inputFont =
 
 submitButtonStyle : String
 submitButtonStyle =
-    "pointer bn br2 pv3 ph3 w5 white"
+    "bn br2 pv3 ph3 w5 white"
 
 
 textareaFont : String

src/elm/Router.elm

@@ -1,11 +1,14 @@
 module Router exposing (getCurrentView, getHash, getView, modalBackground, view, viewFromUrl)
 
 import Components.CommentModal exposing (commentModal)
+import Components.HelpModal exposing (helpModal)
 import Components.Nav exposing (navBar)
 import Components.StatsModal exposing (statsModal)
-import Components.StyleHelpers exposing (classes, displayElement)
+import Components.StyleHelpers exposing (classes, displayElement, emptySpan)
+import Helpers exposing (ifThenElse)
 import Html exposing (..)
 import Html.Attributes exposing (..)
+import Html.Events exposing (..)
 import Navigation exposing (..)
 import Types exposing (..)
 import Views.About exposing (..)
@@ -27,25 +30,46 @@ view model =
     in
     div [ class "w-100 fixed overflow-y-scroll top-0 bottom-0 bg-light-blue m0-auto cover", id "container" ]
         [ modalBackground model
-        , helpButton
+        , ifThenElse (model.view == SplashScreen) emptySpan (helpButton model)
+        , helpModal model
         , statsModal model
         , commentModal model
         , div [ class "fixed w-100 bg-white flex flex-row justify-center z-1" ] [ navBar model activeLink ]
         , div [ class "mt6 center pt3-ns mw8" ] [ view ]
         ]
 
 
-helpButton : Html Msg
-helpButton =
-    button [ class "bn shadow-4 br-100 h4 w4 fixed right-2 top-8 pointer", style [ ( "background", "url(./assets/help_icon.svg) no-repeat center center white" ) ] ] []
+helpButton : Model -> Html Msg
+helpButton model =
+    div [ class "fixed right-2 top-8 flex flex-column items-end w-11" ]
+        [ div [ class "flex items-start justify-end w-100 mb1" ]
+            [ ifThenElse model.displayHelpInfo (img [ src "./assets/help_arrow.svg", class "mr2 mt3" ] []) emptySpan
+            , button
+                [ class "bn grow shadow-4 br-100 h3 w3 pointer"
+                , style [ ( "background", "url(./assets/help_icon.svg) no-repeat center center white" ) ]
+                , onClick ToggleHelpModal
+                ]
+                []
+            ]
+        , ifThenElse model.displayHelpInfo
+            (div [ class "shadow-4 bg-white pa3 tc fw3 o-6-hover", onClick ToggleHelpInfo ]
+                [ text "You can always click here if you want to "
+                , span [ class "fw5" ] [ text "learn more" ]
+                , text " about Data Tool or need "
+                , span [ class "fw5" ] [ text "help" ]
+                , text " using the app!"
+                ]
+            )
+            emptySpan
+        ]
 
 
 modalBackground : Model -> Html Msg
 modalBackground model =
     div
         [ classes
             [ "vh-100 w-100 bg-black o-70 z-2 fixed"
-            , displayElement (model.displayStatsModal || model.displayCommentModal)
+            , displayElement (model.displayStatsModal || model.displayCommentModal || model.displayHelpModal )
             ]
         ]
         []

src/elm/State.elm

@@ -36,12 +36,15 @@ initModel =
     , commentBody = ""
     , commentType = Success
     , comments = []
-    , commentStatus = NotAsked
+    , postCommentStatus = NotAsked
     , postStatsStatus = NotAsked
     , listStatsStatus = NotAsked
+    , listCommentsStatus = NotAsked
     , peopleSeenWeeklyAll = 0
     , displayStatsModal = False
     , displayCommentModal = False
+    , displayHelpModal = False
+    , displayHelpInfo = False
     , problems = []
     , agencies = []
     , postUserDetailsStatus = NotAsked
@@ -71,17 +74,23 @@ update : Msg -> Model -> ( Model, Cmd Msg )
 update msg model =
     case msg of
         UrlChange location ->
+            let
+                view =
+                    getView location.hash
+            in
             { model
-                | view = getView location.hash
+                | view = view
                 , displayStatsModal = False
                 , displayCommentModal = False
                 , peopleSeenWeekly = Nothing
                 , peopleTurnedAwayWeekly = Nothing
                 , newCasesWeekly = Nothing
                 , signpostedInternallyWeekly = Nothing
                 , signpostedExternallyWeekly = Nothing
+                , displayHelpModal = False
+                , displayHelpInfo = view == BeforeYouBegin
             }
-                ! [ scrollToTop, handleGetComments location ]
+                ! [ scrollToTop, ifThenElse (view == ListComments) (msgToCmd GetComments) Cmd.none ]
 
         ChangeView view ->
             { model
@@ -95,9 +104,15 @@ update msg model =
             }
                 ! [ newUrl <| getHash view ]
 
+        ToggleHelpModal ->
+            { model | displayHelpModal = not model.displayHelpModal } ! []
+
         NoOp ->
             model ! []
 
+        ToggleHelpInfo ->
+            { model | displayHelpInfo = not model.displayHelpInfo } ! []
+
         UpdateLawArea la ->
             let
                 updatedModel =
@@ -181,7 +196,7 @@ update msg model =
             updatedModel ! []
 
         PostComment ->
-            { model | commentStatus = Loading } ! [ postComment model ]
+            { model | postCommentStatus = Loading } ! [ postComment model ]
 
         PostStats ->
             { model | postStatsStatus = Loading, listStatsStatus = Loading } ! [ postStats model ]
@@ -195,14 +210,14 @@ update msg model =
                     ifThenElse (model.view == AddComment) True False
             in
             { model
-                | commentStatus = ResponseSuccess
+                | postCommentStatus = ResponseSuccess
                 , displayCommentModal = displayModal
                 , commentBody = ""
             }
                 ! [ getComments, scrollToTop ]
 
         ReceiveCommentStatus (Err err) ->
-            { model | commentStatus = ResponseFailure } ! [ getComments, scrollToTop ]
+            { model | postCommentStatus = ResponseFailure } ! [ getComments, scrollToTop ]
 
         ReceiveStats (Ok response) ->
             if response.getSuccess then
@@ -233,11 +248,21 @@ update msg model =
         ToggleStatsModal ->
             { model | displayStatsModal = False } ! []
 
-        ReceiveComments (Ok comments) ->
-            { model | comments = comments } ! []
+        GetComments ->
+            { model | listCommentsStatus = Loading } ! [ getComments ]
 
         ReceiveComments (Err err) ->
-            model ! []
+            { model
+                | listCommentsStatus = ResponseFailure
+            }
+                ! []
+
+        ReceiveComments (Ok comments) ->
+            { model
+                | comments = comments
+                , listCommentsStatus = ResponseSuccess
+            }
+                ! []
 
         ToggleProblem string checked ->
             let
@@ -340,6 +365,12 @@ delay time msg =
         |> perform (\_ -> msg)
 
 
+msgToCmd : Msg -> Cmd Msg
+msgToCmd msg =
+    Task.succeed msg
+        |> Task.perform identity
+
+
 updateCommentLikes : UpvoteResponse -> Comment -> Comment
 updateCommentLikes upvote comment =
     { comment

src/elm/Types.elm

@@ -50,17 +50,20 @@ type alias Model =
     , commentBody : String
     , commentType : CommentType
     , comments : List Comment
-    , commentStatus : RemoteData
+    , postCommentStatus : RemoteData
     , postStatsStatus : RemoteData
     , postUpvoteStatus : RemoteData
     , getUserDetailsStatus : RemoteData
     , postUserDetailsStatus : RemoteData
     , listStatsStatus : RemoteData
+    , listCommentsStatus : RemoteData
     , peopleSeenWeeklyAll : Int
     , displayStatsModal : Bool
     , displayCommentModal : Bool
     , problems : List String
     , agencies : List String
+    , displayHelpModal : Bool
+    , displayHelpInfo : Bool
     }
 
 
@@ -224,3 +227,6 @@ type Msg
     | UpdateMediaCoverageWeekly String
     | UpvoteComment Comment
     | ChangeView View
+    | ToggleHelpInfo
+    | ToggleHelpModal               
+    | GetComments