Change navigation tabs to display icons when vw is small

nfdi4plants · May 30, 2020 · 1851b28 · 1851b28
1 parent 2d1a0cf
commit 1851b28
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 10 deletions.
diff --git a/paket.dependencies b/paket.dependencies
@@ -16,6 +16,7 @@ group Client
     framework: netstandard2.0
     storage: none
 
+    nuget Fable.Browser.MediaQueryList
     nuget Fable.Core ~> 3
     nuget Fable.Elmish ~> 3
     nuget Fable.Elmish.Debugger ~> 3

diff --git a/paket.lock b/paket.lock
@@ -452,14 +452,6 @@ NUGET
       System.Reflection.Primitives (>= 4.3)
       System.Runtime (>= 4.3)
       System.Runtime.Handles (>= 4.3)
-    System.Runtime.InteropServices.RuntimeInformation (4.3)
-      runtime.native.System (>= 4.3)
-      System.Reflection (>= 4.3)
-      System.Reflection.Extensions (>= 4.3)
-      System.Resources.ResourceManager (>= 4.3)
-      System.Runtime (>= 4.3)
-      System.Runtime.InteropServices (>= 4.3)
-      System.Threading (>= 4.3)
     System.Runtime.InteropServices.WindowsRuntime (4.3)
       System.Runtime (>= 4.3)
     System.Runtime.Numerics (4.3)
@@ -597,6 +589,11 @@ NUGET
     Fable.Browser.Event (1.0)
       Fable.Core (>= 3.0)
       FSharp.Core (>= 4.5.2)
+    Fable.Browser.MediaQueryList (1.1)
+      Fable.Browser.Dom (>= 1.1)
+      Fable.Browser.Event (>= 1.0)
+      Fable.Core (>= 3.0)
+      FSharp.Core (>= 4.7)
     Fable.Browser.WebStorage (1.0)
       Fable.Browser.Event (>= 1.0)
       Fable.Core (>= 3.0)

diff --git a/src/Client/Routing.fs b/src/Client/Routing.fs
@@ -1,6 +1,8 @@
 module Routing
 
 open Elmish.UrlParser
+open Fable.FontAwesome
+open Fulma.Extensions.Wikiki
 
 /// The different pages of the application. If you add a new page, then add an entry here.
 [<RequireQualifiedAccess>]
@@ -28,6 +30,28 @@ type Page =
         | Page.ActivityLog          -> "ActivityLog"
         | Page.NotFound             -> "NotFound"
 
+    static member toIcon =
+        let createElem icons name =
+            Fable.React.Standard.span [
+                Fable.React.Props.Class (Tooltip.ClassName + " " + Tooltip.IsTooltipRight + " " + Tooltip.IsMultiline)
+                Tooltip.dataTooltip (name)
+            ] (
+                icons
+                |> List.map (
+                    fun icon ->
+                        Fa.span [icon] []
+                )
+            )
+
+        fun (p: Page) ->
+            match p with
+            | p when p = Page.Home             -> createElem [Fa.Solid.Home    ] (p |> Page.toString)
+            | p when p = Page.TermSearch       -> createElem [Fa.Solid.SearchPlus   ] (p |> Page.toString)
+            | p when p = Page.AddBuildingBlock -> createElem [Fa.Solid.Columns; Fa.Solid.PlusCircle ] (p |> Page.toString)
+            | p when p = Page.FilePicker       -> createElem [Fa.Solid.FileUpload; ] (p |> Page.toString)
+            | p when p = Page.ActivityLog      -> createElem [Fa.Solid.History   ] (p |> Page.toString)
+            | _  -> Fa.i [Fa.Solid.QuestionCircle]   []
+
 /// The URL is turned into a Result.
 let pageParser : Parser<Page -> Page,_> =
     oneOf [

diff --git a/src/Client/Views/BaseView.fs b/src/Client/Views/BaseView.fs
@@ -6,6 +6,9 @@ open Fulma
 open ExcelColors
 open Model
 open Messages
+open Browser
+open Browser.MediaQueryList
+open Browser.MediaQueryListExtensions
 
 open CustomComponents
 
@@ -22,7 +25,14 @@ let createNavigationTab (pageLink: Routing.Page) (model:Model) (dispatch:Msg-> u
                     BorderBottomColor model.SiteStyleState.ColorMode.Accent
             ]
         ] [
-            Text.span [] [str (Routing.Page.toString pageLink)]
+            Text.span [] [
+                let mediaQuery = window.matchMedia("(min-width:575px)")
+                if mediaQuery.matches then
+                    str (pageLink |> Routing.Page.toString)
+                else
+                    pageLink |> Routing.Page.toIcon
+            ]
+
         ]
     ]
 
@@ -40,6 +50,7 @@ let baseViewComponent (model: Model) (dispatch: Msg -> unit) (bodyChildren: Reac
                 Tabs.Props [
                     Style [
                         BackgroundColor model.SiteStyleState.ColorMode.BodyBackground
+                        OverflowX OverflowOptions.Hidden
                     ]
                 ]
             ] [

diff --git a/src/Client/paket.references b/src/Client/paket.references
@@ -10,4 +10,4 @@ group Client
     Fulma.Extensions.Wikiki.Switch
     Fable.FontAwesome.Free
     Thoth.Elmish.Debouncer
-
+    Fable.Browser.MediaQueryList