Make styling passable 🎨

src/Client/Client.fsproj

@@ -64,7 +64,7 @@
         <Compile Include="MainComponents\Navbar.fs" />
         <Compile Include="MainComponents\FooterTabs.fs" />
         <Compile Include="SidebarComponents\DarkmodeButton.fs" />
-        <Compile Include="SidebarComponents\FunctionContainer.fs" />
+        <Compile Include="SidebarComponents\LayoutHelper.fs" />
         <Compile Include="SidebarComponents\ResponsiveFA.fs" />
         <Compile Include="SidebarComponents\AnnotationTableMissingWarning.fs" />
         <Compile Include="SidebarComponents\Navbar.fs" />

src/Client/MainComponents/Navbar.fs

@@ -50,7 +50,6 @@ let quickAccessButtonListStart (model: Model) dispatch =
         ]
     ]
 
-
 let quickAccessButtonListEnd (model: Model) dispatch =
     Html.div [
         prop.style [

src/Client/Pages/BuildingBlock/BuildingBlockView.fs

@@ -370,7 +370,7 @@ let addBuildingBlockComponent (model:Model) (dispatch:Messages.Msg -> unit) =
         // https://keycode.info/
         OnKeyDown (fun k -> if k.key = "Enter" then k.preventDefault())
     ] [
-        Bulma.label "Building Blocks"
+        pageHeader "Building Blocks"
 
         // Input forms, etc related to add building block.
         Bulma.label "Add annotation building blocks (columns) to the annotation table."
@@ -386,5 +386,5 @@ let addBuildingBlockComponent (model:Model) (dispatch:Messages.Msg -> unit) =
             Bulma.label "Add/Update unit reference to existing building block."
             // Input forms, etc related to add unit to existing building block.
             addUnitToExistingBlockElements model dispatch
-        | _ -> ()
+        | _ -> Html.none
     ]

src/Client/Pages/BuildingBlock/SearchComponent.fs

@@ -668,5 +668,4 @@ let Main (model: Model) dispatch =
             AdvancedSearch.modal_container model dispatch
             AdvancedSearch.links_container state_bb.BuildingBlockType dispatch
         add_button state_bb state_searchHeader state_searchBody state_searchForUnit model dispatch
-        Html.div []
     ]

src/Client/Pages/Dag/Dag.fs

@@ -92,7 +92,7 @@ let mainElement (model:Messages.Model) dispatch =
         prop.onSubmit    (fun e -> e.preventDefault())
         prop.onKeyDown   (fun k -> if (int k.which) = 13 then k.preventDefault())
         prop.children [
-            Bulma.label "DAG"
+            pageHeader "Visualize Protocol Flow"
 
             Bulma.label "Display directed acyclic graph"
 

src/Client/Pages/FilePicker/FilePickerView.fs

@@ -275,15 +275,9 @@ let fileContainer (model:Messages.Model) dispatch inputId=
 let filePickerComponent (model:Messages.Model) (dispatch:Messages.Msg -> unit) =
     let inputId = "filePicker_OnFilePickerMainFunc"
     Bulma.content [
-        Bulma.label [
-            Bulma.color.hasTextPrimary
-            prop.text "File Picker"
-        ]
+        pageHeader "File Picker"
 
-        Bulma.label [
-            Bulma.color.hasTextPrimary
-            prop.text "Select files from your computer and insert their names into Excel"
-        ]
+        Bulma.label "Select files from your computer and insert their names into Excel"
 
         // Colored container element for all uploaded file names and sort elements
         fileContainer model dispatch inputId

src/Client/Pages/Info/InfoView.fs

@@ -16,12 +16,9 @@ open Fable.Core
 open Feliz
 open Feliz.Bulma
 
-let swateHeader model dispatch =
-    Html.h3 "SWATE"
-
 let introductionElement model dispatch =
     p [Style [TextAlign TextAlignOptions.Justify]] [
-        b [] [str "SWATE"]
+        b [] [str "Swate"]
         str " is a "
         b [] [str "S"]
         str "wate "
@@ -38,13 +35,25 @@ let introductionElement model dispatch =
     ]
 
 
+let iconContainer (left: ReactElement list) (icon) =
+    Bulma.field.div [
+        prop.className "is-flex"
+        prop.children [
+            Html.div [
+                prop.style [style.marginRight(length.rem 2)]
+                prop.children left
+            ]
+            icon
+        ]
+    ]
+
 let getInContactElement (model:Model) dispatch =
     Bulma.content [
         prop.style [style.textAlign.justify]
         prop.children [
             Bulma.label "Get In Contact With Us"
 
-            h5 [] [str "Swate is part of the DataPLANT organisation."]
+            p [] [str "Swate is part of the DataPLANT organisation."]
             p [] [
                 a [Href "https://nfdi4plants.de/"; Target "_Blank"; Title "DataPLANT"; Class "nfdiIcon"; Style [Float FloatOptions.Right; MarginLeft "2em"]] [
                     img [Src "https://raw.githubusercontent.com/nfdi4plants/Branding/138420e3b6f9ec9e125c1ca8840874b2be2a1262/logos/DataPLANT_logo_minimal_square_bg_darkblue.svg"; Style [Width "54px"]]
@@ -55,41 +64,47 @@ let getInContactElement (model:Model) dispatch =
                 a [Href "https://twitter.com/search?q=%23NFDI&src=hashtag_click"] [ str "#NFDI" ]
             ]
 
-            p [Style [MarginBottom "2.5em"]] [
+            p [] [
                 str "Got a good idea or just want to get in touch? "
                 a [Href Shared.URLs.Helpdesk.Url;Target "_Blank"] [str "Reach out to us!"]
             ]
 
-            p [Style [MarginBottom "2.5em"]] [
-                a [Href Shared.URLs.NFDITwitterUrl; Target "_Blank"; Style [Float FloatOptions.Right; MarginLeft "2em"]; Title "@nfdi4plants on Twitter"] [
-                    Html.i [
-                        prop.classes ["fa-xl"; "fa-brands fa-x-twitter"; "myFaBrand myFaTwitter"]
-                    ]
-                ]
-                str "Follow us on Twitter for the more up-to-date information about research data management! "
-                a [Href Shared.URLs.NFDITwitterUrl; Target "_Blank";] [str "@nfdi4plants"]
-            ]   
+            iconContainer
+                ([
+                    Html.span "Follow us on Twitter for the more up-to-date information about research data management! "
+                    a [Href Shared.URLs.NFDITwitterUrl; Target "_Blank";] [str "@nfdi4plants"]
+                ])
+                (Bulma.icon [
+                    prop.href Shared.URLs.NFDITwitterUrl;
+                    prop.target "_Blank";
+                    prop.title "@nfdi4plants on Twitter"
+                    Bulma.icon.isLarge;
+                    Html.i [prop.classes ["fa-brands fa-twitter"; "myFaBrand myFaTwitter"; "is-size-3"]]
+                    |> prop.children
+                ])
 
-            p [] [
-                a [Href Shared.URLs.SwateRepo; Target "_Blank"; Style [Float FloatOptions.Right; MarginLeft "2em"]; Title "Swate on GitHub"] [
-                    Html.i [
-                        prop.classes ["fa-xl"; "fa-brands fa-github"; "myFaBrand myFaGithub"]
-                    ]
-                ]
-                str "You can find the Swate source code  "
-                a [Href Shared.URLs.SwateRepo; Target "_Blank"] [str "here"]
-                str ". Our developers are always happy to get in contact with you! If you don't have a GitHub account but want to reach out or want to snitch on some nasty bugs 🐛 you can tell us "
-                a [Href Shared.URLs.Helpdesk.UrlSwateTopic; Target "_Blank"] [str "here"]
-                str "."
-            ]
+            iconContainer
+                ([
+                    str "You can find the Swate source code  "
+                    a [Href Shared.URLs.SwateRepo; Target "_Blank"] [str "here"]
+                    str ". Our developers are always happy to get in contact with you! If you don't have a GitHub account but want to reach out or want to snitch on some nasty bugs 🐛 you can tell us "
+                    a [Href Shared.URLs.Helpdesk.UrlSwateTopic; Target "_Blank"] [str "here"]
+                    str "."
+                ])
+                (Bulma.icon [
+                    prop.href Shared.URLs.SwateRepo;
+                    prop.target "_Blank";
+                    prop.title "Swate on GitHub"
+                    Bulma.icon.isLarge;
+                    Html.i [prop.classes ["fa-brands fa-github"; "myFaBrand myFaGithub"; "is-size-3"]]
+                    |> prop.children
+                ])                
         ]
     ]
 
 let infoComponent (model : Model) (dispatch : Msg -> unit) =
     Bulma.content [
-        Bulma.field.div [
-            swateHeader model dispatch
-        ]
+        pageHeader "Swate"
         Bulma.field.div [
             introductionElement model dispatch
         ]

src/Client/Pages/ProtocolTemplates/ProtocolView.fs

@@ -241,7 +241,7 @@ let fileUploadViewComponent (model:Messages.Model) dispatch =
         OnKeyDown (fun k -> if k.key = "Enter" then k.preventDefault())
     ] [
 
-        Bulma.label "Templates"
+        pageHeader "Templates"
 
         // Box 1
         Bulma.label "Add template from database."

src/Client/Pages/TermSearch/TermSearchView.fs

@@ -241,7 +241,7 @@ let termSearchComponent (model:Messages.Model) dispatch =
         OnKeyDown   (fun k -> if (int k.which) = 13 then k.preventDefault())
     ] [
 
-        Bulma.label "Ontology term search"
+        pageHeader "Ontology term search"
 
         Bulma.label "Search for an ontology term to fill into the selected field(s)"
 

src/Client/Routing.fs

@@ -73,7 +73,7 @@ type Route =
         | Route.TermSearch          ->
             createElem [Html.i [prop.className "fa-solid fa-magnifying-glass-plus" ]] p.toStringRdbl
         | Route.BuildingBlock       ->
-            createElem [ Html.i [prop.className "fa-solid fa-circle-plus" ]; Html.i [prop.className "fa-solid fa-table-column" ]]  p.toStringRdbl
+            createElem [ Html.i [prop.className "fa-solid fa-circle-plus" ]; Html.i [prop.className "fa-solid fa-table-columns" ]]  p.toStringRdbl
         | Route.Protocol            ->
             createElem [ Html.i [prop.className "fa-solid fa-circle-plus" ];Html.i [prop.className "fa-solid fa-table" ]] p.toStringRdbl
         | Route.ProtocolSearch      ->

src/Client/SidebarComponents/FunctionContainer.fs → src/Client/SidebarComponents/LayoutHelper.fs

@@ -1,5 +1,5 @@
 [<AutoOpen>]
-module FunctionContainer
+module LayoutHelper
 
 open Fable.React
 open Fable.React.Props
@@ -32,4 +32,7 @@ let mainFunctionContainer children =
             order <- not order
     ] ] children
 
+open Feliz
+open Feliz.Bulma
 
+let pageHeader (header: string) = Bulma.title [Bulma.title.is5; prop.text header]

src/Client/SidebarComponents/Navbar.fs

@@ -164,6 +164,7 @@ let NavbarComponent (model : Model) (dispatch : Msg -> unit) (sidebarsize: Model
                         prop.children [
                             // Logo
                             Bulma.navbarItem.div [
+                                prop.id "logo"
                                 prop.onClick (fun _ -> Routing.Route.BuildingBlock |> Some |> UpdatePageState |> dispatch)
                                 prop.style [style.width 100; style.cursor.pointer; style.padding (0,length.rem 0.4)]
                                 let path = if model.PageState.IsExpert then "_e" else ""
@@ -206,9 +207,11 @@ let NavbarComponent (model : Model) (dispatch : Msg -> unit) (sidebarsize: Model
                             prop.children [
                                 Bulma.navbarItem.a [
                                     prop.href Shared.URLs.NFDITwitterUrl ;
-                                    prop.target "_Blank"; 
-
-                                    Bulma.icon [Html.i [prop.className "fa-brand fa-twitter"; Bulma.icon.isLarge; prop.style [style.color "#1DA1F2"]] |> prop.children; prop.text "News "] |> prop.children
+                                    prop.target "_Blank";
+                                    prop.children [
+                                        Html.span "News "
+                                        Html.i [prop.className "fa-brands fa-twitter"; prop.style [style.color "#1DA1F2"; style.marginLeft 2]] 
+                                    ]
                                 ]
                                 Bulma.navbarItem.a [
                                     prop.href Shared.URLs.SwateWiki ;

src/Client/Views/MainWindowView.fs

@@ -9,7 +9,6 @@ let private spreadsheetSelectionFooter (model: Messages.Model) dispatch =
         prop.style [
             style.position.sticky;
             style.bottom 0
-            style.backgroundColor "whitesmoke"
         ]
         prop.children [
             Html.div [
@@ -70,6 +69,6 @@ let Main (model: Messages.Model) dispatch =
                         MainComponents.AddRows.Main init_RowsToAdd state_rows setState_rows dispatch
                 ]
             ]
-            match activeTableIsEmpty with | true -> () | false -> spreadsheetSelectionFooter model dispatch
+            match activeTableIsEmpty with | true -> Html.none | false -> spreadsheetSelectionFooter model dispatch
         ]
     ]

src/Client/Views/SidebarView.fs

@@ -29,17 +29,13 @@ let private createNavigationTab (pageLink: Routing.Route) (model:Model) (dispatc
     let isActive = pageLink.isActive(model.PageState.CurrentPage)
     Bulma.tab [
         if isActive then Bulma.tab.isActive
-        a [ //Href (Routing.Route.toRouteUrl pageLink)
-            OnClick (fun e -> UpdatePageState (Some pageLink) |> dispatch)
-        ] [
-            span [] [
-                match sidebarsize with
-                | Mini | MobileMini -> 
-                    span [] [pageLink |> Routing.Route.toIcon]
-                | _ -> 
-                    span [] [str pageLink.toStringRdbl]
-            ]
-
+        Html.a [
+            prop.onClick (fun e -> e.preventDefault(); UpdatePageState (Some pageLink) |> dispatch)
+            match sidebarsize with
+            | Mini | MobileMini -> 
+                prop.children (pageLink |> Routing.Route.toIcon)
+            | _ -> 
+                prop.text pageLink.toStringRdbl
         ]
         |> prop.children
     ]
@@ -51,7 +47,8 @@ let private tabRow (model:Model) (tabs: seq<ReactElement>) =
             //style.custom ("overflow","visible")
             style.paddingTop(length.rem 1)
         ]
-        prop.children tabs
+        tabs
+        |> prop.children
     ]
 
 let private tabs (model:Model) dispatch (sidebarsize: Model.WindowSize) =
@@ -62,9 +59,9 @@ let private tabs (model:Model) dispatch (sidebarsize: Model.WindowSize) =
             createNavigationTab Routing.Route.TermSearch            model dispatch sidebarsize
             createNavigationTab Routing.Route.Protocol              model dispatch sidebarsize
             createNavigationTab Routing.Route.FilePicker            model dispatch sidebarsize
-            if not isIEBrowser then
+            //if not isIEBrowser then
                 // docsrc attribute not supported in iframe in IE
-                createNavigationTab Routing.Route.Dag               model dispatch sidebarsize
+                //createNavigationTab Routing.Route.Dag               model dispatch sidebarsize
             createNavigationTab Routing.Route.Info                  model dispatch sidebarsize
         else
             createNavigationTab Routing.Route.JsonExport            model dispatch sidebarsize