Shape layout structure

tapglue · Dec 2, 2016 · 4e0bf31 · 4e0bf31
1 parent bd4e714
commit 4e0bf31
Show file tree

Hide file tree

Showing 4 changed files with 93 additions and 33 deletions.
diff --git a/cmd/console/App.elm b/cmd/console/App.elm
@@ -50,7 +50,7 @@ update : Msg -> Model -> (Model, Cmd Msg)
 update msg model =
     case msg of
         AppList (Ok apps) ->
-            ({ model | apps = apps }, Cmd.none)
+            ({ model | apps = apps, selected = Nothing }, Cmd.none)
         AppList (Err _) ->
             (model, Cmd.none)
         Description description ->
@@ -76,6 +76,10 @@ view model =
         , viewForm model
         ]
 
+viewApp : Model -> String -> Html Msg
+viewApp model id =
+    h3 [] [ text ("App single view for " ++ id) ]
+
 viewForm : Model -> Html Msg
 viewForm model =
     form [ onSubmit Submit ]

diff --git a/cmd/console/Console.elm b/cmd/console/Console.elm
@@ -84,23 +84,39 @@ view model =
     let
         content = case model.route.current of
             Nothing ->
-                h3 [] [ text "Looks like we couldn't find the page you were looking for." ]
+                [ viewNotFound ]
             Just (Route.App id) ->
-                h3 [] [ text ("App single view for " ++ id) ]
+                [ viewContext model
+                , viewContainer (section [])
+                    [ Html.map AppMsg (App.viewApp model.appModel id)
+                    ]
+                ]
             Just Route.Apps ->
-                Html.map AppMsg (App.view model.appModel)
-            Just Route.Home ->
-                h3 [] [ text "You are home now." ]
+                [ viewContext model
+                , viewContainer (section [ class "highlight" ])
+                    [ Html.map AppMsg (App.view model.appModel)
+                    ]
+                ]
+            Just Route.Dashboard ->
+                [ viewDashboard ]
+            Just Route.Members ->
+                [ viewNotFound ]
     in
         div [ class "content" ]
-            [ viewContainer (header [])
-                [ viewHeader
-                , nav [] [ span [] [ text model.zone ] ]
-                ]
-            , viewContext model
-            , viewContainer (section [ class "highlight" ]) [ content ]
-            , viewContainer (footer []) [ viewDebug model ]
+            (List.concat
+                [ [ viewHeader model ]
+                , content
+                , [ viewFooter model ]
+                ])
+
+viewAppSelected : App.App -> Html Msg
+viewAppSelected app =
+    nav []
+        [ a [ onClick (Navigate (Route.App app.id)), title app.name ]
+            [ span [] [ text app.name ]
+            , span [ class "icon nc-icon-outline arrows-2_skew-down" ] []
             ]
+        ]
 
 viewContext : Model -> Html Msg
 viewContext model =
@@ -123,32 +139,54 @@ viewContext model =
             , info
             ]
 
-viewAppSelected : App.App -> Html Msg
-viewAppSelected app =
-    nav []
-        [ a [ onClick (Navigate (Route.App app.id)), title app.name ]
-            [ span [] [ text app.name ]
-            ]
-        ]
-
 viewContainer : Tag -> List (Html Msg) -> Html Msg
 viewContainer elem content =
     elem
         [ div [ class "container" ]
             content
         ]
 
+viewDashboard : Html Msg
+viewDashboard =
+    viewContainer (section [])
+        [ h2 []
+            [ text "Hej, start of by looking into"
+            , a [ onClick (Navigate Route.Apps), title "Apps" ]
+                [ span [ class "icon nc-icon-glyph ui-2_layers" ] []
+                , text "Apps"
+                ]
+            , text "or"
+            , a [ onClick (Navigate Route.Members), title "Members" ]
+                [ span [ class "icon nc-icon-glyph users_multiple-11" ] []
+                , text "Members"
+                ]
+            ]
+        ]
+
 viewDebug : Model -> Html Msg
 viewDebug model =
     div [ class "debug" ]
       [ text (toString model)
       ]
 
-viewHeader : Html Msg
-viewHeader =
-    h1 []
-        [ a [ onClick (Navigate Route.Home), title "Home" ]
-            [ strong [] [ text "SocialPath" ]
-            , span [] [ text "Console" ]
+viewFooter : Model -> Html Msg
+viewFooter model=
+    viewContainer (footer []) [ viewDebug model ]
+
+viewHeader : Model -> Html Msg
+viewHeader model =
+    viewContainer (header [])
+        [ h1 []
+            [ a [ onClick (Navigate Route.Dashboard), title "Home" ]
+                [ strong [] [ text "SocialPath" ]
+                , span [] [ text "Console" ]
+                ]
             ]
+        , nav [] [ span [] [ text model.zone ] ]
+        ]
+
+viewNotFound : Html Msg
+viewNotFound =
+    viewContainer (section [ class "highlight" ])
+        [ h3 [] [ text "Looks like we couldn't find the page you were looking for." ]
         ]
diff --git a/cmd/console/Route.elm b/cmd/console/Route.elm
@@ -12,7 +12,8 @@ type alias Model =
 type Route
     = App String
     | Apps
-    | Home
+    | Dashboard
+    | Members
 
 init : Location -> (Model, Cmd Msg)
 init location =
@@ -38,8 +39,10 @@ construct route =
             "/apps/" ++ id
         Apps ->
             "/apps"
-        Home ->
+        Dashboard ->
             "/"
+        Members ->
+            "/members"
 
 navigate : Route -> Cmd Msg
 navigate route =
@@ -52,7 +55,8 @@ parse location =
 routes : Parser (Route -> a) a
 routes =
     oneOf
-        [ map Home top
+        [ map Dashboard top
         , map App (s "apps" </> string)
         , map Apps (s "apps")
+        , map Members (s "members")
         ]
diff --git a/cmd/console/styles/console.css b/cmd/console/styles/console.css
@@ -35,7 +35,8 @@ button:hover {
 
 div.container {
 	margin: 0 auto;
-	width: 70%;
+	max-width: 160rem;
+	width: 80%;
 }
 
 div.debug {
@@ -75,13 +76,18 @@ h2 {
 	color: rgb(63,91,96);
 	display: flex;
 	font-size: 4rem;
-	font-weight: 500;
+	font-weight: 300;
 	margin: 0;
 	padding: 0rem 0rem 1.4rem 0rem;
 }
 
-h2 a, h2 span {
+h2 a {
+	margin: 0 2rem;
+}
+
+h2 a, h2 span.icon {
 	color: rgb(63,91,96);
+	font-weight: 500;
 }
 
 h2 span.icon {
@@ -121,6 +127,10 @@ input.description {
 	width: 40rem;
 }
 
+section#context * {
+	color: rgb(63, 91, 96);
+}
+
 section#context div.container {
 	align-items: baseline;
 	display: flex;
@@ -135,6 +145,10 @@ section#context nav {
 	font-size: 2.4rem;
 }
 
+section#context nav span.icon {
+	margin-left: 1rem;
+}
+
 section.highlight {
 	background: rgb(255, 255, 255);
 	border-top: 0.1rem solid rgba(144, 144, 144, 0.25);