Merge pull request #110 from CodeforAustralia/features/97-about-page

adds about page

prototype/src/About.elm

@@ -0,0 +1,60 @@
+module About (view) where
+
+import Html exposing (Html, section, header, div, p, span, img, a, i, text)
+import Html.Attributes exposing (class, src, href)
+
+
+{-| The main HTML view for about page  -}
+view : Html
+view =
+    let
+        appInfo =
+            { image = "images/logo.png"
+            , description = "Heritage Near Me is a government initiative to implement transformational change to protect, share, and celebrate heritage in NSW at the local level by working closely with local government and communities to ensure that local heritage values have greater recognition."
+            , title = "Heritage Near Me"
+            , url = "http://github.com/CodeforAustralia/heritage-near-me"
+            }
+        creditInfo =
+            { image = "images/logo-code-for-australia.png"
+            , description = "Code for Australia is nonprofit whose vision is a responsive government that works seamlessly with the public to create meaningful change through technology. This project was built by Code for Australia's 2016 fellows in Sydney."
+            , title = "Code for Australia"
+            , url = "http://codeforaustralia.org"
+            }
+    in
+        div [class "content-area"]
+            [ aboutSectionHtml appInfo
+            , aboutSectionHtml creditInfo
+            ]
+
+
+
+type alias URL = String
+
+type alias AboutEntry =
+    { image : URL
+    , description : String
+    , title : String
+    , url : URL
+    }
+
+aboutSectionHtml : AboutEntry -> Html
+aboutSectionHtml entry =
+    section []
+        [ header []
+            [ img [src entry.image, class "about-image"] [] ]
+        , div []
+            [ p [] [text entry.description] ]
+        , div []
+            [ linkHtml entry.title entry.url ]
+        ]
+
+
+{-| The HTML for a single story link -}
+linkHtml : String -> String -> Html
+linkHtml name url = a [class "block-link", href url]
+    [ text name
+    , span [class "link-arrow"]
+        [ span [class "external-link"] [text "External Link"]
+        , i [class "fa fa-angle-right"] []
+        ]
+    ]

prototype/src/App.elm

@@ -213,6 +213,7 @@ updateModel action app = case (app.location, action) of
     --(_, View story')                          -> {app | location = Viewing story' initialItemView screen1}
     (_, View story' screen')                  -> {app | location = Viewing story' initialItemView screen'}
     (_, ViewFavourites)                       -> {app | location = ViewingFavourites}
+    (_, ViewAboutScreen)                      -> {app | location = AboutScreen}
     -- Data update actions
     (_, LoadData updateItems)                 -> {app | items = updateItems app.items}
     (_, LoadDiscoveryData items updateItems)  -> {app | items = updateItems app.items, discovery = updateDiscoverableItems app.discovery items}

prototype/src/Navigation.elm

@@ -23,6 +23,9 @@ titleHtml location =
 
             SplashPage -> none
 
+            AboutScreen ->
+                container [h1 [] [text "About"]]
+
             Discovering ->
                 container [logoDiv]
 
@@ -42,14 +45,21 @@ buttonHtml address location =
 
         SplashPage -> none
 
+        AboutScreen ->
+            backButton address
+
         Discovering ->
             button [onClick address ViewFavourites] [i [class "fa fa-heart fa-2x"] []]
 
         Viewing _ _ _ ->
-            button [onClick address Back] [i [class "fa fa-angle-left fa-3x"] []]
+            backButton address
 
         ViewingFavourites ->
              button [onClick address Discover] [i [class "fa fa-map fa-2x"] []]
 
+backButton : Signal.Address AppAction -> Html
+backButton address =
+    button [onClick address Back] [i [class "fa fa-angle-left fa-3x"] []]
+
 none : Html
 none = text ""

prototype/src/Route.elm

@@ -13,6 +13,7 @@ action : List String -> List AppAction
 action url = case url of
     "discover"::_ -> [Discover]
     "favourites"::_ -> [ViewFavourites]
+    "about"::_ -> [ViewAboutScreen]
     "story"::storyId::storyScreen::_ ->
         let
             id = parseStoryId storyId
@@ -32,6 +33,7 @@ url : AppModel -> AppModel -> Maybe HashUpdate
 url old new = if old.location /= new.location then
         Just <| case new.location of
             SplashPage        -> RouteHash.set [""]
+            AboutScreen       -> RouteHash.set ["about"]
             Discovering       -> RouteHash.set ["discover"]
             ViewingFavourites -> RouteHash.set ["favourites"]
             Viewing storyId _ storyScreen -> RouteHash.set ["story", storyIdToStr storyId, urliseStoryScreen storyScreen]

prototype/src/Types.elm

@@ -26,6 +26,7 @@ App screens:
 -}
 type Location id =
       SplashPage
+    | AboutScreen
     | Discovering
     | Viewing id ItemView StoryScreen
     | ViewingFavourites
@@ -54,6 +55,7 @@ type Action id a =
     | View id StoryScreen
     | ViewFavourites
     | ViewSplashPage
+    | ViewAboutScreen
     | Back
     | LoadData UpdaterFunction
     | LoadDiscoveryData (RemoteData (List id)) UpdaterFunction

prototype/src/View.elm

@@ -14,6 +14,7 @@ import Types exposing (..)
 import Remote.Data
 import Data
 import Splash
+import About
 import Navigation exposing (navigation)
 import Discover
 import Story
@@ -39,6 +40,11 @@ screenView address app = case app.location of
 
     SplashPage -> Splash.view
 
+    AboutScreen -> div [class "about-screen"]
+        [ navigation address app.location
+        , About.view
+        ]
+
     Discovering -> Discover.view address app
         <| navigation address app.location
 

prototype/style.css

@@ -39,6 +39,7 @@ html, body, body > div {
 
 /* adjust some screens to start after nav bar
    (but not all: screens with photos start beneath nav bar) */
+.about-screen .content-area,
 .favourites-screen .favourites,
 .story-screen.story-body .fullStory-meta,
 .story-screen.story-more-info .content-area,
@@ -54,12 +55,19 @@ html, body, body > div {
         height: 100%;
         text-align: center;
     }
-    .favourites-screen .navigation-center {
+/*    .favourites-screen .navigation-center {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }*/
+    .navigation-center {
         display: flex;
         align-items: center;
         justify-content: center;
     }
-        .favourites-screen .navigation-center h1 {
+        /*.favourites-screen .navigation-center h1 {*/
+
+        .navigation-center h1 {
             color: white;
             font-size: 24px;
             font-weight: 400;
@@ -166,6 +174,34 @@ html, body, body > div {
         }
 
 
+/* About screen style */
+.about-screen {
+    background: #383636;
+}
+    .about-screen section {
+        margin: 0 16px;
+        color: #F9F9FB;
+    }
+    .about-screen p {
+        padding: 0;
+        color: #F9F9FB;
+    }
+    .about-image {
+        margin-top: 12px;
+        max-height: 40px;
+    }
+    .about-screen a {
+        color: white;
+        border-bottom: 1px solid #DCDCDC;
+        margin-bottom: 15px;
+    }
+    .about-screen a .external-link {
+        color: #DCDCDC;
+    }
+    .about-screen .content-area {
+        padding-bottom: 15px;
+    }
+
 /* Discovery (swiping) style */
 .discovery {
     display: flex;
@@ -737,7 +773,7 @@ html, body, body > div {
             border-bottom: none;
         }
 
-            .links ul li a {
+            .links ul li a, .block-link {
                 display: flex;
                 justify-content: space-between;
                 align-items: center;
@@ -753,7 +789,10 @@ html, body, body > div {
                 background-color: #eee;
             }
 
-                .links ul li a .link-arrow {
+                /*.links ul li a .link-arrow {*/
+                /*.links ul li a .link-arrow .external-link {*/
+
+                .link-arrow {
                     flex-shrink: 0;
                 }
 
@@ -766,7 +805,7 @@ html, body, body > div {
                     display: inline-block;
                 }
 
-                .links ul li a .link-arrow i {
+                .link-arrow i {
                     float: right;
                     margin-left: 5px;
                     padding: 2px;