Add a separate button to the "What to search" input

FreeFeed · Oct 30, 2024 · 35db1a3 · 35db1a3
1 parent cb7acfc
commit 35db1a3
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 8 deletions.
diff --git a/src/components/advanced-search-form/advanced-search-form.jsx b/src/components/advanced-search-form/advanced-search-form.jsx
@@ -1,3 +1,4 @@
+import cn from 'classnames';
 import { browserHistory } from 'react-router';
 import { useEffect, useMemo, useReducer, useState } from 'react';
 import { useEvent } from 'react-use-event-hook';
@@ -81,13 +82,23 @@ export function AdvancedSearchForm() {
     <filtersContext.Provider value={ctxValue}>
       <div className={style.form}>
         <Section title="What to search">
-          <input
-            type="search"
-            name="q"
-            {...queryAttrs}
-            className="form-control"
-            placeholder="Text to search"
-          />
+          <div className={style.searchInputBox}>
+            <input
+              type="search"
+              name="q"
+              {...queryAttrs}
+              className="form-control"
+              placeholder="Text to search"
+            />
+            <button
+              type="button"
+              disabled={resultingQuery === ''}
+              className={cn('btn btn-primary')}
+              onClick={onSearch}
+            >
+              Search
+            </button>
+          </div>
           <div className={style.searchScopes}>
             Search for:
             <label>
@@ -199,7 +210,7 @@ export function AdvancedSearchForm() {
           <button
             type="button"
             disabled={resultingQuery === ''}
-            className="btn btn-primary col-sm-4 col-xs-12"
+            className={cn('btn btn-primary', style.bigSearchButton)}
             onClick={onSearch}
           >
             Search

diff --git a/src/components/advanced-search-form/advanced-search-form.module.scss b/src/components/advanced-search-form/advanced-search-form.module.scss
@@ -46,6 +46,20 @@
   margin-bottom: 0.5em;
 }
 
+.searchInputBox {
+  display: flex;
+  gap: 0.3em;
+
+  button {
+    padding-inline: 2em;
+    display: none;
+
+    @media (min-width: 768px) {
+      display: block;
+    }
+  }
+}
+
 .searchScopes {
   margin-top: 0.5em;
   display: flex;
@@ -148,3 +162,12 @@
 .textInputChosen {
   color: var(--text-color) !important;
 }
+
+.bigSearchButton {
+  width: 100%;
+
+  @media (min-width: 768px) {
+    // Width of one column of the form
+    width: calc(50% - 1em);
+  }
+}