Updated Homepage

example/src/Data/Section.elm

@@ -0,0 +1,37 @@
+module Data.Section exposing (Section(..),asList,toString,fromString)
+
+type Section
+    = ComponentViews
+    | ReusableViews
+    | StatelessViews
+
+asList : List Section
+asList =
+    [ StatelessViews, ReusableViews, ComponentViews ]
+
+toString : Section -> String
+toString section =
+    case section of
+        ComponentViews ->
+            "Component"
+
+        ReusableViews ->
+            "Reusable"
+
+        StatelessViews ->
+            "Stateless"
+
+fromString : String -> Maybe Section
+fromString string =
+    case string of
+        "Component" ->
+            Just ComponentViews
+
+        "Reusable" ->
+            Just ReusableViews
+
+        "Stateless" ->
+            Just StatelessViews
+
+        _ ->
+            Nothing

example/src/Example.elm

@@ -33,44 +33,7 @@ import Widget.FilterSelect as FilterSelect
 import Widget.ScrollingNav as ScrollingNav
 import Widget.Snackbar as Snackbar
 import Widget.ValidatedInput as ValidatedInput
-
-
-type Section
-    = ComponentViews
-    | ReusableViews
-    | StatelessViews
-
-sectionList : List Section
-sectionList =
-    [ StatelessViews, ReusableViews, ComponentViews ]
-
-sectionToString : Section -> String
-sectionToString section =
-    case section of
-        ComponentViews ->
-            "Component"
-
-        ReusableViews ->
-            "Reusable"
-
-        StatelessViews ->
-            "Stateless"
-
-stringToSection : String -> Maybe Section
-stringToSection string =
-    case string of
-        "Component" ->
-            Just ComponentViews
-
-        "Reusable" ->
-            Just ReusableViews
-
-        "Stateless" ->
-            Just StatelessViews
-
-        _ ->
-            Nothing
-
+import Data.Section as Section exposing (Section(..))
 
 type alias LoadedModel =
     { component : Component.Model
@@ -154,8 +117,8 @@ initialModel { viewport } =
     let
         ( scrollingNav, cmd ) =
             ScrollingNav.init
-                { labels = sectionToString
-                , arrangement = sectionList
+                { labels = Section.toString
+                , arrangement = Section.asList
                 }
     in
     ( { component = Component.init
@@ -250,12 +213,12 @@ view model =
                     , deviceClass = m.deviceClass
                     , menu =
                         { selected = 
-                            sectionList
+                            Section.asList
                             |> List.indexedMap (\i s -> (i,s))
                             |> List.filterMap
                                 ( \(i,s) ->
                                     if  m.scrollingNav
-                                        |> ScrollingNav.current stringToSection
+                                        |> ScrollingNav.current Section.fromString
                                         |> (==) (Just s)
                                     then
                                         Just i
@@ -265,11 +228,11 @@ view model =
                             |> List.head
                             |> Maybe.withDefault 0
                         , items =
-                            sectionList
+                            Section.asList
                             |> List.map
                                 (\label ->
                                     { icon = Element.none
-                                    , label = label |> sectionToString
+                                    , label = label |> Section.toString
                                     , onPress = Just <| JumpTo <| label
                                     }
                                 )
@@ -297,7 +260,15 @@ view model =
                           }
                         ]
                     , onChangedSidebar = ChangedSidebar
-                    , title = "Elm-Ui-Widgets"
+                    , title = 
+                        (if m.deviceClass == Phone || m.deviceClass == Tablet then
+                            m.scrollingNav
+                            |> ScrollingNav.current Section.fromString
+                            |> Maybe.map Section.toString
+                            |> Maybe.withDefault "Elm-Ui-Widgets"
+                        else
+                            "Elm-Ui-Widgets"
+                        )
                         |> Element.text 
                         |> Element.el Heading.h1
                     }

src/Layout.elm

@@ -169,25 +169,19 @@ view attributes { title, onChangedSidebar, menu, actions, deviceClass, dialog, c
                     )
 
         snackbar =
-            case layout.sheet of
-                Nothing ->
-                    layout.snackbar
-                        |> Snackbar.current
-                        |> Maybe.map
-                            (Element.text
-                                >> List.singleton
-                                >> Element.paragraph style.snackbar
-                                >> Element.el
-                                    [ Element.padding 8
-                                    , Element.alignBottom
-                                    , Element.alignRight
-                                    ]
-                            )
-                        |> Maybe.withDefault Element.none
-
-                _ ->
-                    Element.none
-
+            layout.snackbar
+                |> Snackbar.current
+                |> Maybe.map
+                    (Element.text
+                        >> List.singleton
+                        >> Element.paragraph style.snackbar
+                        >> Element.el
+                            [ Element.padding 8
+                            , Element.alignBottom
+                            , Element.alignRight
+                            ]
+                    )
+                |> Maybe.withDefault Element.none
         sheet =
             case layout.sheet of
                 Just Left ->

src/Widget/ScrollingNav.elm

@@ -1,6 +1,7 @@
 module Widget.ScrollingNav exposing
     ( Model, Msg, init, update, subscriptions, view, viewSections, current
     , jumpTo, syncPositions
+    , jumpToWithOffset
     )
 
 {-| The Scrolling Nav is a navigation bar thats updates while you scroll through
@@ -111,7 +112,7 @@ update msg model =
 {-| -}
 subscriptions : Sub (Msg msg)
 subscriptions =
-    Time.every 1000 (always TimePassed)
+    Time.every 100 (always TimePassed)
 
 
 {-| scrolls the screen to the respective section
@@ -121,10 +122,20 @@ jumpTo section { labels } =
     Dom.getElement (section |> labels)
         |> Task.andThen
             (\{ element } ->
-                Dom.setViewport 0 element.y
+                Dom.setViewport 0 (element.y)
             )
         |> Task.attempt ChangedViewport
 
+{-| scrolls the screen to the respective section with some offset
+-}
+jumpToWithOffset : Float -> section -> Model section -> Cmd (Msg msg)
+jumpToWithOffset offset section { labels } =
+    Dom.getElement (section |> labels)
+        |> Task.andThen
+            (\{ element } ->
+                Dom.setViewport 0 (element.y - offset)
+            )
+        |> Task.attempt ChangedViewport
 
 {-| -}
 syncPositions : Model section -> Cmd (Msg section)