web: make dashboard header sticky on mobile

also add a lot of tests, use more elm-css #2434 Signed-off-by: Jamie Klassen <cklassen@pivotal.io>
concourse · Oct 18, 2018 · 6ca695a · 6ca695a
1 parent 692dce4
commit 6ca695a
Show file tree

Hide file tree

Showing 15 changed files with 1,078 additions and 348 deletions.
diff --git a/web/assets/css/dashboard.less b/web/assets/css/dashboard.less
@@ -394,6 +394,7 @@
 .dashboard-footer {
   position: fixed;
   bottom: 0;
+  left: 0;
   width: 100%;
   background: @base00;
   text-align: right;
@@ -481,11 +482,9 @@
 
 @media (max-width: 812px) {
   .dashboard .dashboard-content {
-    padding-top: (84px * @scale * 2) + (60px * @scale);
   }
 
   .dashboard-footer {
-    position: inherit;
     display: block;
 
     .dashboard-legend {

diff --git a/web/assets/css/main.less b/web/assets/css/main.less
@@ -31,8 +31,6 @@
 
 @import "build.less";
 
-@import "newtopbar.less";
-
 @import "dashboard.less";
 @import "dashboardhd.less";
 

diff --git a/web/assets/css/newtopbar.less b/web/assets/css/newtopbar.less
diff --git a/web/elm/elm-package.json b/web/elm/elm-package.json
@@ -29,6 +29,7 @@
         "elm-lang/navigation": "2.1.0 <= v < 3.0.0",
         "elm-lang/svg": "2.0.0 <= v < 3.0.0",
         "elm-lang/websocket": "1.0.2 <= v < 2.0.0",
+        "elm-lang/window": "1.0.1 <= v < 2.0.0",
         "fapian/elm-html-aria": "1.2.2 <= v < 2.0.0",
         "krisajenkins/remotedata": "4.3.0 <= v < 5.0.0",
         "lukewestby/elm-http-builder": "5.0.0 <= v < 6.0.0",

diff --git a/web/elm/src/Dashboard.elm b/web/elm/src/Dashboard.elm
@@ -26,13 +26,15 @@ import Monocle.Optional
 import Monocle.Lens
 import MonocleHelpers exposing (..)
 import NewTopBar
+import NewTopBar.Styles as NTBS
 import NoPipeline exposing (Msg, view)
 import Regex exposing (HowMany(All), regex, replace)
 import RemoteData
 import Routes
 import Simple.Fuzzy exposing (filter, match, root)
 import Task
 import Time exposing (Time)
+import Window
 
 
 type alias Ports =
@@ -41,7 +43,7 @@ type alias Ports =
 
 
 type alias PinTeamConfig =
-    { pageHeaderClass : String
+    { pageHeaderHeight : Float
     , pageBodyClass : String
     , sectionHeaderClass : String
     , sectionClass : String
@@ -123,7 +125,7 @@ init ports flags =
             [ fetchData
             , Cmd.map TopBarMsg topBarMsg
             , pinTeamNames
-                { pageHeaderClass = "module-topbar"
+                { pageHeaderHeight = NTBS.pageHeaderHeight
                 , pageBodyClass = "dashboard"
                 , sectionClass = "dashboard-team-group"
                 , sectionHeaderClass = "dashboard-team-header"
@@ -384,13 +386,14 @@ subscriptions model =
         , Mouse.clicks (\_ -> ShowFooter)
         , Keyboard.presses KeyPressed
         , Keyboard.downs KeyDowns
+        , Window.resizes (TopBarMsg << NewTopBar.ScreenResized)
         ]
 
 
 view : Model -> Html Msg
 view model =
     Html.div [ class "page" ]
-        [ (Html.map TopBarMsg << Html.fromUnstyled) (NewTopBar.view model.topBar)
+        [ (Html.map TopBarMsg) (NewTopBar.view model.topBar)
         , dashboardView model
         ]
 
@@ -410,7 +413,7 @@ dashboardView model =
                     [ Html.div [ class "dashboard-no-content", css [ Css.height (Css.pct 100) ] ] [ (Html.map (always Noop) << Html.fromUnstyled) NoPipeline.view ] ]
 
                 Ok substate ->
-                    [ Html.div [ class "dashboard-content" ] (pipelinesView substate model.topBar.query ++ [ footerView substate ]) ]
+                    [ Html.div [ class "dashboard-content" ] (pipelinesView substate (NewTopBar.query model.topBar) ++ [ footerView substate ]) ]
     in
         Html.div
             [ classList [ ( "dashboard", True ), ( "dashboard-hd", model.highDensity ) ] ]

diff --git a/web/elm/src/DashboardHd.elm b/web/elm/src/DashboardHd.elm
@@ -14,6 +14,7 @@ import Html exposing (Html)
 import Html.Attributes exposing (class, classList, id, href, src, attribute)
 import Html.Attributes.Aria exposing (ariaLabel)
 import Html.Events exposing (onMouseEnter)
+import Html.Styled as HS
 import Http
 import Mouse
 import NewTopBar
@@ -183,7 +184,7 @@ subscriptions model =
 view : Model -> Html Msg
 view model =
     Html.div [ class "page" ]
-        [ Html.map TopBarMsg (NewTopBar.view model.topBar)
+        [ (Html.map TopBarMsg << HS.toUnstyled) (NewTopBar.view model.topBar)
         , dashboardView model
         ]
 

diff --git a/web/elm/src/MobileState.elm b/web/elm/src/MobileState.elm
@@ -0,0 +1,6 @@
+module MobileState exposing (MobileState(..))
+
+
+type MobileState
+    = Expanded
+    | Collapsed