From d89c75de8b293edcc8705166026a7c7c2aeaad55 Mon Sep 17 00:00:00 2001 From: Przemek Kaminski <pk@intrepidus.pl> Date: Mon, 27 May 2019 16:07:12 +0200 Subject: [PATCH] SearchField: some styling added --- dist/styles/context-menu.css | 9 +++++---- src/Gargantext/Components/Search/SearchField.purs | 9 ++++----- src/Gargantext/Pages/Layout/Specs.purs | 8 +++++--- 3 files changed, 14 insertions(+), 12 deletions(-) diff --git a/dist/styles/context-menu.css b/dist/styles/context-menu.css index 7f99b2f4d..1d737bc4a 100644 --- a/dist/styles/context-menu.css +++ b/dist/styles/context-menu.css @@ -29,13 +29,14 @@ } .search-bar-container { text-align: center; + max-width: 800px; + float: left; } .search-bar-toggle { - padding: 3px; + padding: 2px; border: 0; - } .search-field { - display: grid; - grid-template-columns: auto auto auto; + /* display: grid; */ + /* grid-template-columns: auto auto auto; */ } diff --git a/src/Gargantext/Components/Search/SearchField.purs b/src/Gargantext/Components/Search/SearchField.purs index 4626fd0d5..0e31922de 100644 --- a/src/Gargantext/Components/Search/SearchField.purs +++ b/src/Gargantext/Components/Search/SearchField.purs @@ -49,7 +49,7 @@ searchFieldComponent = R.memo (R.hooksComponent "SearchField" cpt) hasChanged term <- R.useState $ \_ -> pure search.term db <- R.useState $ \_ -> pure Nothing pure $ - div { className: "search-field form-row" } + div { className: "search-field form-inline" } [ databaseInput db props.databases , searchInput term , submitButton db term props.search @@ -58,17 +58,16 @@ searchFieldComponent = R.memo (R.hooksComponent "SearchField" cpt) hasChanged databaseInput :: R.State (Maybe Database) -> Array Database -> R.Element databaseInput (db /\ setDB) dbs = - div { className: "col-auto" } [ select { className: "database form-control", onChange } (item <$> dbs) ] + div { className: "form-group" } [ select { className: "database form-control", onChange } (item <$> dbs) ] where onChange = mkEffectFn1 $ \e -> setDB (readDatabase (e .. "target" .. "value")) item db = option { value: (show db) } [ text (show db) ] searchInput :: R.State String -> R.Element searchInput (term /\ setTerm) = - div { className: "col-auto" } [ input { defaultValue: term + div { className: "form-group" } [ input { defaultValue: term , className: "form-control" , type: "text" - , style: { maxWidth: "110px" } , onChange , placeholder } ] where onChange = mkEffectFn1 $ \e -> setTerm $ e .. "target" .. "value" @@ -76,7 +75,7 @@ searchInput (term /\ setTerm) = submitButton :: R.State (Maybe Database) -> R.State String -> R.State (Maybe Search) -> R.Element submitButton (database /\ _) (term /\ _) (_ /\ setSearch) = - div { className: "col-auto" } [ button { className: "btn", onClick: click } [ text "Search" ] ] + div { className: "form-group" } [ button { className: "btn", onClick: click } [ text "Search" ] ] where click = mkEffectFn1 $ \_ -> do case term of diff --git a/src/Gargantext/Pages/Layout/Specs.purs b/src/Gargantext/Pages/Layout/Specs.purs index 61fc94d79..2185ec8b2 100644 --- a/src/Gargantext/Pages/Layout/Specs.purs +++ b/src/Gargantext/Pages/Layout/Specs.purs @@ -76,7 +76,8 @@ layout0 :: Spec AppState {} Action -> Spec AppState {} Action layout0 layout = fold - [ outerLayout + [ searchBar + , outerLayout , layoutFooter ] where @@ -124,7 +125,8 @@ layout1 :: Spec AppState {} Action -> Spec AppState {} Action layout1 layout = fold - [ layout + [ searchBar + , layout -- , outerLayout , layoutFooter ] @@ -335,7 +337,7 @@ divDropdownRight d s = ul [className "nav navbar-nav pull-right"] [ li [className "dropdown"] [ logLinks d s ] - ] + ] layoutFooter :: Spec AppState {} Action layoutFooter = simpleSpec performAction render -- 2.21.0