Skip to content

P
purescript-gargantext
Commit cfcb5d29 authored by Alexandre Delanoë's avatar Alexandre Delanoë
Browse files
Options

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

parent e85abd8b
Hide whitespace changes
Inline Side-by-side
Showing with 135 additions and 137 deletions
src/Navigation.purs
View file @ cfcb5d29
...@@ -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,6 +183,91 @@ wrap spec = ...@@ -183,6 +183,91 @@ 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
sidebarnavSpec = simpleSpec performAction render
where
render :: Render AppState props Action
render dispatch _ state _ =
[ div [ _id "dafixedtop"
, className "navbar navbar-inverse navbar-fixed-top"
, role "navigation"
] [ div [className "container"]
[ div [ className "navbar-inner" ]
[ divLogo
, div [ className "collapse navbar-collapse"]
[ divDropdownLeft
, ul [className "nav navbar-nav"][text " XXXXXXXXXXXXXXXXXXX "]
, divSearchBar
, divDropdownRight
]
]
]
]
]
divLogo :: ReactElement
divLogo = a [ className "navbar-brand logoSmall"
, href "/index.html"
] [ img [ src "images/logoSmall.png"
, title "Back to home."
] []
]
divDropdownLeft :: ReactElement
divDropdownLeft = ul [className "nav navbar-nav"]
[ ul [className "nav navbar-nav pull-left"]
[ li [className "dropdown"]
[ a [ className "dropdown-toggle navbar-text"
, _data {toggle: "dropdown"}
, href "#", role "button"
, title "About Gargantext"
][ span [ aria {hidden : true}
, className "glyphicon glyphicon-info-sign"
] []
, text " Info"
]
, ul [className "dropdown-menu"]
(( map liNav [ LiNav { title : "Quick start, tutorials and methodology"
, href : "https://iscpif.fr/gargantext/your-first-map/"
, icon : "fas fa-book"
, text : "Documentation"
}
, LiNav { title : "Report bug here"
, href : "https://www.iscpif.fr/gargantext/feedback-and-bug-reports/"
, icon : "glyphicon glyphicon-bullhorn"
, text : "Feedback"
}
]
)
<> [li [className "divider"] []] <>
(map liNav [ LiNav { title : "Interactive chat"
, href : "https://chat.iscpif.fr/channel/gargantext"
, icon : "fab fa-rocketchat"
, text : "Chat"
}
, LiNav { title : "Asynchronous discussions"
, href : "https://discourse.iscpif.fr/c/gargantext"
, icon : "fab fa-discourse"
, text : "Forum"
}
]
)
<> [li [className "divider"] []] <>
[ liNav (LiNav { title : "More about us (you)"
, href : "http://iscpif.fr"
, icon : "fas fa-question-circle"
, text : "About"
}
)
]
)
]
]
]
data LiNav = LiNav { title :: String data LiNav = LiNav { title :: String
, href :: String , href :: String
...@@ -200,121 +285,30 @@ liNav (LiNav { title:tit ...@@ -200,121 +285,30 @@ liNav (LiNav { title:tit
, target "blank" , target "blank"
, title tit , title tit
, href h , href h
] ] [ span [ className i ] []
, text $ " " <> txt
[ 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
sidebarnavSpec = simpleSpec performAction render
where
render :: Render AppState props Action
render dispatch _ state _ =
[
div [ _id "dafixedtop"
, className "navbar navbar-inverse navbar-fixed-top"
, role "navigation"
]
[ div [className "container"]
[ divLogo
-- divDropdownLeft
---------------------------------------------------------------------------
-- 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"]
[ li [className "dropdown"]
[ a [ className "dropdown-toggle navbar-text"
, _data {toggle: "dropdown"}
, href "#", role "button"
, title "Informations about Gargantext"
]
[ span [ aria {hidden : true}
, className "glyphicon glyphicon-info-sign"
] []
, text " Info"
]
, ul [className "dropdown-menu"]
(( map liNav [ LiNav { title : "Quick start, tutorials and methodology"
, href : "https://iscpif.fr/gargantext/your-first-map/"
, icon : "fas fa-book"
, text : "Documentation"
}
, LiNav { title : "Report bug here"
, href : "https://www.iscpif.fr/gargantext/feedback-and-bug-reports/"
, icon : "glyphicon glyphicon-bullhorn"
, text : "Feedback"
}
]
)
<> [li [className "divider"] []] <>
(map liNav [ LiNav { title : "Interactive chat"
, href : "https://chat.iscpif.fr/channel/gargantext"
, icon : "fab fa-rocketchat"
, text : "Chat"
}
, LiNav { title : "Asynchronous discussions"
, href : "https://discourse.iscpif.fr/c/gargantext"
, icon : "fab fa-discourse"
, text : "Forum"
}
]
)
<> [li [className "divider"] []] <>
[ liNav (LiNav { title : "More about us (you)"
, href : "http://iscpif.fr"
, icon : "fas fa-question-circle"
, text : "About"
}
)
]
)
]
]
]
---------------------------------------------------------------------------
-- 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"]
, placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)" [ div [className "navbar-form"]
, _type "text" [ input [ className "search-query"
, style { height: "35px" , placeholder "Query, URL or FILE (works with Firefox or Chromium browsers)"
, width : "450px" , _type "text"
-- , color: "white" , style { height: "35px"
-- , background : "#A1C2D8" , width : "450px"
} -- , color: "white"
] [ -- , 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
divDropdownRight :: ReactElement divDropdownRight :: ReactElement
...@@ -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