Commits: 3
Make navigation bar fixed
Move navigationBar from document to view.
Add background color to contentNavigationBar.
Co-Authored-By: Tadeusz Łazurski tadeusz@lazurski.pl
index 5d2609b..64223f3 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -158,6 +158,18 @@ view model =
= Loaded documentView ->
= documentView model
=
+ navigationBar =
+ case Routes.parse model.location of
+ Routes.Home ->
+ -- TODO: Implement different navigation bar for home
+ contentNavigationBar model.location
+
+ Routes.Content _ ->
+ contentNavigationBar model.location
+
+ Routes.NotFound ->
+ contentNavigationBar model.location
+
= loadingView : View
= loadingView =
= { title = "Loading Content"
@@ -297,13 +309,14 @@ view model =
= in
= { title = "Software Garden : " ++ content.title
= , body =
- [ Element.layout
- [ -- Below is a hack that enables static site generation
- Element.htmlAttribute (Html.Attributes.id "app-container")
- , Element.htmlAttribute (Html.Attributes.lang "en")
- , Font.family [ Font.typeface "Montserrat", Font.sansSerif ]
- ]
- content.body
+ [ content.body
+ |> Element.layout
+ [ -- Below is a hack that enables static site generation
+ Element.htmlAttribute (Html.Attributes.id "app-container")
+ , Element.htmlAttribute (Html.Attributes.lang "en")
+ , Font.family [ Font.typeface "Montserrat", Font.sansSerif ]
+ , Element.inFront navigationBar
+ ]
= ]
= }
=
@@ -485,7 +498,10 @@ contentNavigationBar location =
= |> List.elemIndex route
= |> Maybe.withDefault 0
= in
- Element.column [ Element.width Element.fill ]
+ Element.column
+ [ Element.width Element.fill
+ , Background.color (Element.rgb 1 1 1)
+ ]
= [ linksRow
= , progressBar
= (List.length links)
@@ -506,33 +522,13 @@ document =
= -> Model
= -> View
= page { title, children } model =
- let
- navigationBar =
- case Routes.parse model.location of
- Routes.Home ->
- -- TODO: Implement different navigation bar for home
- contentNavigationBar model.location
-
- Routes.Content _ ->
- contentNavigationBar model.location
-
- Routes.NotFound ->
- contentNavigationBar model.location
-
- content =
- children
- |> List.map (\child -> child model.examples)
- |> Element.textColumn
- [ Element.centerX
- , Element.spacing 20
- , Element.paddingXY 0 80
- ]
- in
- [ navigationBar
- , content
- ]
- |> Element.column
- [ Element.width Element.fill ]
+ children
+ |> List.map (\child -> child model.examples)
+ |> Element.textColumn
+ [ Element.centerX
+ , Element.spacing 20
+ , Element.paddingXY 0 80
+ ]
= |> View title
=
= {- The document has to start with a Title block containing a String (i.e. single line of unforamtted text). This String will be used in two ways:Make progress bar respond to scroll position.
Co-Authored-By: Tadeusz Łazurski tadeusz@lazurski.pl
index 64223f3..d7e3485 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -36,7 +36,9 @@ import Examples.ViewBox
=import FeatherIcons exposing (icons)
=import Html exposing (Html)
=import Html.Attributes
+import Html.Events
=import Http
+import Json.Decode exposing (Decoder)
=import List.Extra as List
=import Mark
=import Mark.Custom
@@ -71,6 +73,7 @@ type alias Model =
= , key : Navigation.Key
= , content : Content
= , examples : Examples.Model
+ , scroll : Float
= }
=
=
@@ -80,6 +83,7 @@ type Msg
= | UrlChanged Url
= | ContentFetched (Result Http.Error String)
= | ExamplesMsg Examples.Msg
+ | Scroll Float
=
=
=type Content
@@ -113,6 +117,7 @@ init flags url key =
= , key = key
= , content = Loading
= , examples = examplesModel
+ , scroll = 1
= }
= , Cmd.batch
= [ url
@@ -162,13 +167,13 @@ view model =
= case Routes.parse model.location of
= Routes.Home ->
= -- TODO: Implement different navigation bar for home
- contentNavigationBar model.location
+ contentNavigationBar model
=
= Routes.Content _ ->
- contentNavigationBar model.location
+ contentNavigationBar model
=
= Routes.NotFound ->
- contentNavigationBar model.location
+ contentNavigationBar model
=
= loadingView : View
= loadingView =
@@ -306,6 +311,19 @@ view model =
= ++ ":"
= ++ String.fromInt col
= )
+
+ scrollDecoder : Decoder Msg
+ scrollDecoder =
+ Json.Decode.field "target"
+ (Json.Decode.map3
+ (\top height clientHeight ->
+ top / (height - clientHeight)
+ )
+ (Json.Decode.field "scrollTop" Json.Decode.float)
+ (Json.Decode.field "scrollHeight" Json.Decode.float)
+ (Json.Decode.field "clientHeight" Json.Decode.float)
+ )
+ |> Json.Decode.map Scroll
= in
= { title = "Software Garden : " ++ content.title
= , body =
@@ -316,6 +334,9 @@ view model =
= , Element.htmlAttribute (Html.Attributes.lang "en")
= , Font.family [ Font.typeface "Montserrat", Font.sansSerif ]
= , Element.inFront navigationBar
+ , Element.height Element.fill
+ , Element.scrollbars
+ , Element.htmlAttribute (Html.Events.on "scroll" scrollDecoder)
= ]
= ]
= }
@@ -345,6 +366,7 @@ update msg model =
= ( { model
= | location = url
= , content = Loading
+ , scroll = 0
= }
= , Cmd.batch
= [ url
@@ -380,6 +402,11 @@ update msg model =
= , Cmd.map ExamplesMsg examplesCmd
= )
=
+ Scroll position ->
+ ( { model | scroll = position }
+ , Cmd.none
+ )
+
=
=subscriptions : Model -> Sub Msg
=subscriptions model =
@@ -407,8 +434,8 @@ loadContent route =
= Cmd.none
=
=
-contentNavigationBar : Url -> Element Msg
-contentNavigationBar location =
+contentNavigationBar : Model -> Element Msg
+contentNavigationBar { location, scroll } =
= let
= links : List { url : String, label : String }
= links =
@@ -501,6 +528,7 @@ contentNavigationBar location =
= Element.column
= [ Element.width Element.fill
= , Background.color (Element.rgb 1 1 1)
+ , Element.htmlAttribute (Html.Attributes.id "navigation-bar")
= ]
= [ linksRow
= , progressBar
@@ -508,7 +536,7 @@ contentNavigationBar location =
= -- index of current route
= past
= -- scroll position (0 - 1)
- 0.5
+ scroll
= ]
=
=Hide navigation bar when printing.
Co-Authored-By: Tadeusz Łazurski tadeusz@lazurski.pl
index 1f43711..b2d458d 100644
--- a/container.html
+++ b/container.html
@@ -5,6 +5,17 @@
= <title>Software Garden</title>
= <style>
= @import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,700|Source+Code+Pro:300,400,700');
+
+ @media print {
+ #app-container {
+ height: auto;
+ }
+
+ #navigation-bar {
+ display: none;
+ }
+
+ }
= </style>
= </head>
= <body>