Commits: 10
Use Element.classifyDevice to choose between icons and labels in nav bar
Also tweak font (and icons) size on small screens.
Also break some long lines in code.
index e75ff71..bb9aaa1 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -503,14 +503,16 @@ contentNavigationBar { location, scroll, viewport } =
= , label = "Home"
= , icon =
= FeatherIcons.home
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/preparation.html"
= , label = "Get ready"
= , icon =
= FeatherIcons.bookOpen
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/day-1.html"
@@ -563,11 +565,25 @@ contentNavigationBar { location, scroll, viewport } =
= )
= { url = link.url
= , label =
- if viewport.width < 600 then
- Element.el [ Element.centerX ] link.icon
+ Element.el [ Element.centerX ]
+ (case ( device.class, device.orientation ) of
+ ( Element.Phone, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
+
+ ( Element.Tablet, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
=
- else
- Element.el [ Element.centerX ] (Element.text link.label)
+ _ ->
+ Element.text link.label
+ )
= }
=
= linksRow =
@@ -585,6 +601,9 @@ contentNavigationBar { location, scroll, viewport } =
= , Font.size 18
= ]
=
+ device =
+ Element.classifyDevice viewport
+
= progressBar : Int -> Int -> Float -> Element Msg
= progressBar total done progress =
= Element.row [ Element.width Element.fill ]
@@ -599,13 +618,15 @@ contentNavigationBar { location, scroll, viewport } =
= , Element.height (Element.px 4)
= ]
= [ Element.el
- [ Element.width (Element.fillPortion (round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color (Element.rgb 0 0.6 0)
+ , Background.color Mark.Custom.colors.badass
= ]
= Element.none
= , Element.el
- [ Element.width (Element.fillPortion (1000 - round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (1000 - round (progress * 1000)))
= , Element.height (Element.px 4)
= ]
= Element.noneDisable font-size-adjusting on mobile devices
index af1a472..c08e7b3 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -17,6 +17,7 @@ import Element exposing (Element)
=import Element.Background as Background
=import Element.Border as Border
=import Element.Events
+import Element.Extra as Element
=import Element.Font as Font
=import Element.Input as Input
=import Element.Lazy
@@ -335,6 +336,10 @@ view model =
= Element.htmlAttribute (Html.Attributes.id "app-container")
= , Element.htmlAttribute (Html.Attributes.lang "en")
= , Font.family [ Font.typeface "Montserrat", Font.sansSerif ]
+ , Element.css "text-size-adjust" "none"
+ , Element.css "-webkit-text-size-adjust" "none"
+ , Element.css "-moz-text-size-adjust" "none"
+ , Element.css "-ms-text-size-adjust" "none"
= , Element.inFront navigationBar
= ]
= ]Merge branch 'fix-mobile-font-size-adjustment' into 'master'
Disable font-size-adjusting on mobile devices
See merge request software-garden/software-garden.gitlab.io!13
Merge branch 'home-page-links' into 'master'
Use Element.classifyDevice to choose between icons and labels in nav bar
See merge request software-garden/software-garden.gitlab.io!14
Revert "Merge branch 'home-page-links' into 'master'"
This reverts merge request !14
index f0910c0..104eefa 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -508,16 +508,14 @@ contentNavigationBar { location, scroll, viewport } =
= , label = "Home"
= , icon =
= FeatherIcons.home
- |> FeatherIcons.toHtml
- [ Html.Attributes.style "height" "1em" ]
+ |> FeatherIcons.toHtml []
= |> Element.html
= }
= , { url = "/preparation.html"
= , label = "Get ready"
= , icon =
= FeatherIcons.bookOpen
- |> FeatherIcons.toHtml
- [ Html.Attributes.style "height" "1em" ]
+ |> FeatherIcons.toHtml []
= |> Element.html
= }
= , { url = "/day-1.html"
@@ -570,25 +568,11 @@ contentNavigationBar { location, scroll, viewport } =
= )
= { url = link.url
= , label =
- Element.el [ Element.centerX ]
- (case ( device.class, device.orientation ) of
- ( Element.Phone, Element.Portrait ) ->
- Element.el
- [ Font.size 24
- , Element.paddingXY 0 20
- ]
- link.icon
-
- ( Element.Tablet, Element.Portrait ) ->
- Element.el
- [ Font.size 24
- , Element.paddingXY 0 20
- ]
- link.icon
+ if viewport.width < 600 then
+ Element.el [ Element.centerX ] link.icon
=
- _ ->
- Element.text link.label
- )
+ else
+ Element.el [ Element.centerX ] (Element.text link.label)
= }
=
= linksRow =
@@ -606,9 +590,6 @@ contentNavigationBar { location, scroll, viewport } =
= , Font.size 18
= ]
=
- device =
- Element.classifyDevice viewport
-
= progressBar : Int -> Int -> Float -> Element Msg
= progressBar total done progress =
= Element.row [ Element.width Element.fill ]
@@ -623,15 +604,13 @@ contentNavigationBar { location, scroll, viewport } =
= , Element.height (Element.px 4)
= ]
= [ Element.el
- [ Element.width
- (Element.fillPortion (round (progress * 1000)))
+ [ Element.width (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color Mark.Custom.colors.badass
+ , Background.color (Element.rgb 0 0.6 0)
= ]
= Element.none
= , Element.el
- [ Element.width
- (Element.fillPortion (1000 - round (progress * 1000)))
+ [ Element.width (Element.fillPortion (1000 - round (progress * 1000)))
= , Element.height (Element.px 4)
= ]
= Element.noneMerge branch 'revert-9a34ba76' into 'master'
Revert home-page-links from master
See merge request software-garden/software-garden.gitlab.io!15
Use Element.classifyDevice to choose between icons and labels in nav bar
Also tweak font (and icons) size on small screens.
Also break some long lines in code.
index 104eefa..f0910c0 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -508,14 +508,16 @@ contentNavigationBar { location, scroll, viewport } =
= , label = "Home"
= , icon =
= FeatherIcons.home
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/preparation.html"
= , label = "Get ready"
= , icon =
= FeatherIcons.bookOpen
- |> FeatherIcons.toHtml []
+ |> FeatherIcons.toHtml
+ [ Html.Attributes.style "height" "1em" ]
= |> Element.html
= }
= , { url = "/day-1.html"
@@ -568,11 +570,25 @@ contentNavigationBar { location, scroll, viewport } =
= )
= { url = link.url
= , label =
- if viewport.width < 600 then
- Element.el [ Element.centerX ] link.icon
+ Element.el [ Element.centerX ]
+ (case ( device.class, device.orientation ) of
+ ( Element.Phone, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
+
+ ( Element.Tablet, Element.Portrait ) ->
+ Element.el
+ [ Font.size 24
+ , Element.paddingXY 0 20
+ ]
+ link.icon
=
- else
- Element.el [ Element.centerX ] (Element.text link.label)
+ _ ->
+ Element.text link.label
+ )
= }
=
= linksRow =
@@ -590,6 +606,9 @@ contentNavigationBar { location, scroll, viewport } =
= , Font.size 18
= ]
=
+ device =
+ Element.classifyDevice viewport
+
= progressBar : Int -> Int -> Float -> Element Msg
= progressBar total done progress =
= Element.row [ Element.width Element.fill ]
@@ -604,13 +623,15 @@ contentNavigationBar { location, scroll, viewport } =
= , Element.height (Element.px 4)
= ]
= [ Element.el
- [ Element.width (Element.fillPortion (round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color (Element.rgb 0 0.6 0)
+ , Background.color Mark.Custom.colors.badass
= ]
= Element.none
= , Element.el
- [ Element.width (Element.fillPortion (1000 - round (progress * 1000)))
+ [ Element.width
+ (Element.fillPortion (1000 - round (progress * 1000)))
= , Element.height (Element.px 4)
= ]
= Element.noneMerge branch 'home-page-links' into 'master'
Home page links
See merge request software-garden/software-garden.gitlab.io!16
In progress bar replace badass color with green
index f0910c0..3f0ebba 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -615,7 +615,7 @@ contentNavigationBar { location, scroll, viewport } =
= [ Element.el
= [ Element.width (Element.fillPortion done)
= , Element.height (Element.px 4)
- , Background.color (Element.rgb 0 0.6 0)
+ , Background.color Mark.Custom.colors.green
= ]
= Element.none
= , Element.row
@@ -626,7 +626,7 @@ contentNavigationBar { location, scroll, viewport } =
= [ Element.width
= (Element.fillPortion (round (progress * 1000)))
= , Element.height (Element.px 4)
- , Background.color Mark.Custom.colors.badass
+ , Background.color Mark.Custom.colors.green
= ]
= Element.none
= , Element.elindex ae6f285..745e5af 100644
--- a/src/Mark/Custom.elm
+++ b/src/Mark/Custom.elm
@@ -555,6 +555,6 @@ colors =
= , pink = Element.rgb 1 0.6 0.6
= , white = Element.rgb 1 1 1
= , black = Element.rgb 0 0 0
- , badass = Element.rgb255 0xBA 0xDA 0x55
+ , green = Element.rgb 0 0.6 0
= , blue = Element.rgb 0.07 0.52 0.81
= }Merge branch 'green-progress-bar' into 'master'
In progress bar replace badass color with green
See merge request software-garden/software-garden.gitlab.io!17