From 4e0bf31a7e01e723a2a06f40fc9a147741b0a3b2 Mon Sep 17 00:00:00 2001 From: Alexander Simmerl Date: Wed, 30 Nov 2016 11:02:34 +0100 Subject: [PATCH] Shape layout structure --- cmd/console/App.elm | 6 ++- cmd/console/Console.elm | 90 ++++++++++++++++++++++++---------- cmd/console/Route.elm | 10 ++-- cmd/console/styles/console.css | 20 ++++++-- 4 files changed, 93 insertions(+), 33 deletions(-) diff --git a/cmd/console/App.elm b/cmd/console/App.elm index 5a80717..401a0f3 100644 --- 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 index 3cd58ea..8984f4a 100644 --- 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,14 +139,6 @@ 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 @@ -138,17 +146,47 @@ viewContainer elem content = 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." ] ] \ No newline at end of file diff --git a/cmd/console/Route.elm b/cmd/console/Route.elm index fd323d0..57d2057 100644 --- 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 index 143125b..f355897 100644 --- 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);