Commit cfcb5d29 authored by Alexandre Delanoë's avatar Alexandre Delanoë

[CSS] search bar in the center of the navbar top.

parent e85abd8b
...@@ -14,7 +14,7 @@ import Network.HTTP.Affjax (AJAX) ...@@ -14,7 +14,7 @@ import Network.HTTP.Affjax (AJAX)
import PageRouter (Routes(..)) import PageRouter (Routes(..))
import Prelude (class Applicative, class Bind, Unit, bind, id, map, negate, pure, unit, void, ($), (<>)) import Prelude (class Applicative, class Bind, Unit, bind, id, map, negate, pure, unit, void, ($), (<>))
import React (ReactElement) import React (ReactElement)
import React.DOM (a, div, img, li, span, text, ul, input, button, footer, p, hr) import React.DOM (a, div, img, li, span, text, ul, input, button, footer, p, hr, form)
import React.DOM.Props (_data, _id, aria, className, href, name, placeholder, _type, role, src, style, tabIndex, target, title) import React.DOM.Props (_data, _id, aria, className, href, name, placeholder, _type, role, src, style, tabIndex, target, title)
import Thermite (PerformAction, Render, Spec, _render, defaultRender, focus, modifyState, simpleSpec, withState) import Thermite (PerformAction, Render, Spec, _render, defaultRender, focus, modifyState, simpleSpec, withState)
import DocView as DV import DocView as DV
...@@ -183,74 +183,48 @@ wrap spec = ...@@ -183,74 +183,48 @@ wrap spec =
-- render dispatch _ state _ = DV.toHtml dispatch DV.exampleTree -- render dispatch _ state _ = DV.toHtml dispatch DV.exampleTree
sidebarnavSpec :: forall props eff. Spec (dom :: DOM |eff) AppState props Action
data LiNav = LiNav { title :: String sidebarnavSpec = simpleSpec performAction render
, href :: String where
, icon :: String render :: Render AppState props Action
, text :: String render dispatch _ state _ =
} [ div [ _id "dafixedtop"
, className "navbar navbar-inverse navbar-fixed-top"
liNav :: LiNav -> ReactElement , role "navigation"
liNav (LiNav { title:tit ] [ div [className "container"]
, href :h [ div [ className "navbar-inner" ]
, icon:i [ divLogo
, text: txt , div [ className "collapse navbar-collapse"]
} [ divDropdownLeft
) = li [] [ a [ tabIndex (-1) , ul [className "nav navbar-nav"][text " XXXXXXXXXXXXXXXXXXX "]
, target "blank" , divSearchBar
, title tit , divDropdownRight
, href h
]
[ span [ className i ] []
, text $ " " <> txt
] ]
] ]
divLogo :: ReactElement
divLogo = div [ className "navbar-inner" ]
[ a [ className "navbar-brand logoSmall"
, href "/index.html"
] ]
[ img [ src "images/logoSmall.png"
, title "Back to home." ]
[]
] ]
] ]
--divDropdownLeft :: ReactElement
--divDropdownLeft = undefined
sidebarnavSpec :: forall props eff. Spec (dom :: DOM |eff) AppState props Action divLogo :: ReactElement
sidebarnavSpec = simpleSpec performAction render divLogo = a [ className "navbar-brand logoSmall"
where , href "/index.html"
render :: Render AppState props Action ] [ img [ src "images/logoSmall.png"
render dispatch _ state _ = , title "Back to home."
[ ] []
div [ _id "dafixedtop"
, className "navbar navbar-inverse navbar-fixed-top"
, role "navigation"
] ]
[ div [className "container"]
[ divLogo divDropdownLeft :: ReactElement
-- divDropdownLeft divDropdownLeft = ul [className "nav navbar-nav"]
---------------------------------------------------------------------------
-- here is divDropDowLeft--------------------------------------------------
-- FIXME : divDropDownLeft and divDropDownRight seems to be intricated in dropdown?
---------------------------------------------------------------------------
, div [ className "navbar-collapse collapse"]
[ ul [className "nav navbar-nav"]
[ ul [className "nav navbar-nav pull-left"] [ ul [className "nav navbar-nav pull-left"]
[ li [className "dropdown"] [ li [className "dropdown"]
[ a [ className "dropdown-toggle navbar-text" [ a [ className "dropdown-toggle navbar-text"
, _data {toggle: "dropdown"} , _data {toggle: "dropdown"}
, href "#", role "button" , href "#", role "button"
, title "Informations about Gargantext" , title "About Gargantext"
] ][ span [ aria {hidden : true}
[ span [ aria {hidden : true}
, className "glyphicon glyphicon-info-sign" , className "glyphicon glyphicon-info-sign"
] [] ] []
, text " Info" , text " Info"
...@@ -293,10 +267,36 @@ sidebarnavSpec = simpleSpec performAction render ...@@ -293,10 +267,36 @@ sidebarnavSpec = simpleSpec performAction render
] ]
] ]
] ]
---------------------------------------------------------------------------
data LiNav = LiNav { title :: String
, href :: String
, icon :: String
, text :: String
}
liNav :: LiNav -> ReactElement
liNav (LiNav { title:tit
, href :h
, icon:i
, text: txt
}
) = li [] [ a [ tabIndex (-1)
, target "blank"
, title tit
, href h
] [ span [ className i ] []
, text $ " " <> txt
]
]
-- TODO put the search form in the center of the navBar -- TODO put the search form in the center of the navBar
, ul [ className "nav navbar-nav"] divSearchBar :: ReactElement
[ input [ className "form-control" divSearchBar = ul [ className "nav navbar-nav"]
[ div [className "navbar-form"]
[ input [ className "search-query"
, placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)" , placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)"
, _type "text" , _type "text"
, style { height: "35px" , style { height: "35px"
...@@ -304,16 +304,10 @@ sidebarnavSpec = simpleSpec performAction render ...@@ -304,16 +304,10 @@ sidebarnavSpec = simpleSpec performAction render
-- , color: "white" -- , color: "white"
-- , background : "#A1C2D8" -- , background : "#A1C2D8"
} }
] [ ] []
]
-- TODO add button in navbar (and "enter" execution) -- TODO add button in navbar (and "enter" execution)
-- , div [] [button [][]] -- , div [] [button [][]]
] ]
, divDropdownRight
]
]
]
] ]
--divDropdownRight :: Render AppState props Action --divDropdownRight :: Render AppState props Action
...@@ -337,6 +331,36 @@ divDropdownRight = ul [className "nav navbar-nav pull-right"] ...@@ -337,6 +331,36 @@ divDropdownRight = ul [className "nav navbar-nav pull-right"]
] ]
] ]
footerLegalInfo :: forall props eff. Spec (dom :: DOM |eff) AppState props Action
footerLegalInfo = simpleSpec performAction render
where
render :: Render AppState props Action
render dispatch _ state _ = [div [ className "container" ] [ hr [] [], footerLegalInfo']]
where
footerLegalInfo' = footer [] [ p [] [ text "Gargantext "
, span [className "glyphicon glyphicon-registration-mark" ] []
, text ", version 4.0"
, a [ href "http://www.cnrs.fr"
, target "blank"
, title "Project hosted by CNRS."
]
[ text ", Copyrights "
, span [ className "glyphicon glyphicon-copyright-mark" ] []
, text " CNRS 2017-Present"
]
, a [ href "http://gitlab.iscpif.fr/humanities/gargantext/blob/stable/LICENSE"
, target "blank"
, title "Legal instructions of the project."
]
[ text ", Licences aGPLV3 and CECILL variant Affero compliant" ]
, text "."
]
]
layoutSpec :: forall eff props. Spec (E eff) AppState props Action layoutSpec :: forall eff props. Spec (E eff) AppState props Action
layoutSpec = layoutSpec =
fold fold
...@@ -385,29 +409,3 @@ dispatchAction dispatcher _ UserPage = do ...@@ -385,29 +409,3 @@ dispatchAction dispatcher _ UserPage = do
footerLegalInfo :: forall props eff. Spec (dom :: DOM |eff) AppState props Action
footerLegalInfo = simpleSpec performAction render
where
render :: Render AppState props Action
render dispatch _ state _ = [div [ className "container" ] [ hr [] [], footerLegalInfo']]
where
footerLegalInfo' = footer [] [ p [] [ text "Gargantext "
, span [className "glyphicon glyphicon-registration-mark" ] []
, text ", version 4.0"
, a [ href "http://www.cnrs.fr"
, target "blank"
, title "Project hosted by CNRS."
]
[ text ", Copyrights "
, span [ className "glyphicon glyphicon-copyright-mark" ] []
, text " CNRS 2017-Present"
]
, a [ href "http://gitlab.iscpif.fr/humanities/gargantext/blob/stable/LICENSE"
, target "blank"
, title "Legal instructions of the project."
]
[ text ", Licences aGPLV3 and CECILL variant Affero compliant" ]
, text "."
]
]
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment