SearchField: some styling added

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; */
 }

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

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
   ]