Merge pull request #1006 from WildMeOrg/header_quick_search_patch

a few minor changes regarding search result display

Author: naknomum

frontend/src/components/header/HeaderQuickSearch.jsx

@@ -1,14 +1,11 @@
-import React, { useState, useContext } from "react";
+import React, { useState } from "react";
 import { Dropdown, FormControl, Spinner } from "react-bootstrap";
-import MainButton from "../MainButton";
 import { FormattedMessage } from "react-intl";
-import ThemeColorContext from "../../ThemeColorProvider";
 import usePostHeaderQuickSearch from "../../models/usePostHeaderQuickSearch";
 
 export default function HeaderQuickSearch() {
   const [search, setSearch] = useState("");
   const [showDropdown, setShowDropdown] = useState(false);
-  const theme = useContext(ThemeColorContext);
 
   const { searchResults, loading } = usePostHeaderQuickSearch(search);
 
@@ -17,7 +14,7 @@ export default function HeaderQuickSearch() {
   };
 
   const handleClearSearch = () => {
-    setSearch(""); //
+    setSearch("");
     setShowDropdown(false);
   };
 
@@ -55,7 +52,11 @@ export default function HeaderQuickSearch() {
             }}
             onClick={handleClearSearch}
           >
-            <i className="bi bi-x"></i>
+            {search ? (
+              <i className="bi bi-x"></i>
+            ) : (
+              <i className="bi bi-search"></i>
+            )}
           </button>
         </div>
 
@@ -87,62 +88,58 @@ export default function HeaderQuickSearch() {
             </Dropdown.Item>
           )}
           {!loading &&
-            searchResults.map((result, index) => (
-              <React.Fragment key={index}>
-                <Dropdown.Item
-                  key={index}
-                  as="button"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  onMouseDown={(e) => {
-                    e.preventDefault();
-                    window.open(`/individuals.jsp?id=${result.id}`);
-                  }}
-                >
-                  <div className="d-flex flex-row justify-content-between">
+            searchResults.map((result, index) => {
+              const context = result?.id
+                ?.toLowerCase()
+                .includes(search.toLowerCase())
+                ? "SYSTEM_ID"
+                : "FILTER_NAME";
+
+              let value = result.id;
+
+              if (context === "SYSTEM_ID") {
+                value = result.id;
+              } else {
+                value =
+                  result.names.find((name) =>
+                    name.toLowerCase().includes(search.toLowerCase()),
+                  ) || result.names.join(" | ");
+              }
+
+              return (
+                <React.Fragment key={index}>
+                  <Dropdown.Item
+                    key={index}
+                    as="button"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onMouseDown={(e) => {
+                      e.preventDefault();
+                      window.open(`/individuals.jsp?id=${result.id}`);
+                    }}
+                  >
                     <div
-                      className="individual-name"
+                      className="d-flex flex-row justify-content-between"
                       style={{
-                        width: "180px",
-                        fontSize: "0.8rem",
-                        overflow: "hidden",
+                        height: "40px",
                       }}
                     >
-                      <div>{search}</div>
-                      <div>{result.taxonomy}</div>
+                      <div
+                        className="individual-name w-100"
+                        style={{
+                          fontSize: "0.8rem",
+                          overflow: "hidden",
+                        }}
+                      >
+                        <div>{value}</div>
+                        <div>{result.taxonomy}</div>
+                      </div>
                     </div>
-                    <MainButton
-                      noArrow={true}
-                      style={{
-                        width: "80px",
-                        height: "30px",
-                        color: "white",
-                        fontSize: "0.8rem",
-                        marginRight: 0,
-                      }}
-                      backgroundColor={theme.primaryColors.primary500}
-                    >
-                      <FormattedMessage
-                        id={
-                          result?.id
-                            ?.toLowerCase()
-                            .includes(search.toLowerCase())
-                            ? "SYSTEM_ID"
-                            : result?.names?.some((name) =>
-                                  name
-                                    .toLowerCase()
-                                    .includes(search.toLowerCase()),
-                                )
-                              ? "FILTER_NAME"
-                              : "UNKNOWN"
-                        }
-                      />
-                    </MainButton>
-                  </div>
-                  {index < searchResults.length - 1 && <Dropdown.Divider />}
-                </Dropdown.Item>
-              </React.Fragment>
-            ))}
+                    {index < searchResults.length - 1 && <Dropdown.Divider />}
+                  </Dropdown.Item>
+                </React.Fragment>
+              );
+            })}
         </Dropdown.Menu>
       </Dropdown>
     </div>

src/main/resources/bundles/de/header.properties

@@ -103,11 +103,11 @@ sessionModalContent = Ihre Sitzung l\u00E4uft in K\u00FCrze ab.
 sessionLoginButton = Anmelden
 sessionLoginModalContent = Sie wurden vom System abgemeldet.
 
-systemId = System-ID
+systemId = System ID
 Name = Name
 unknown = Unbekannt
 loading = Lade...
 noMatchResults = Keine \u00DCbereinstimmungsergebnisse
 errorOccurred = Fehler aufgetreten
-searchResultDisplay = Suchergebnisanzeige
+searchResultDisplay = Deine Suchergebnisse werden hier angezeigt.
 searchIndividuals = Individuen suchen

src/main/resources/bundles/en/header.properties

@@ -104,12 +104,12 @@ sessionLoginButton = Log in
 sessionLoginModalContent = You've been logged out of the system.
 
 
-systemId = System-ID
+systemId = System ID
 Name = Name
 unknown = Unknown
 loading = Loading...
 noMatchResults = No matching results
 errorOccurred = An error occurred
-searchResultDisplay = Search Result Display
+searchResultDisplay = Your search results will appear here
 searchIndividuals = Search Individuals
 

src/main/resources/bundles/es/header.properties

@@ -109,5 +109,5 @@ unknown = Desconocido
 loading = Cargando...
 noMatchResults = No hay resultados coincidentes
 errorOccurred = Se ha producido un error
-searchResultDisplay = Mostrar resultados de b\u00fasqueda
+searchResultDisplay = Tus resultados de b\u00FAsqueda aparecer\u00E1n aqu\u00ED.
 searchIndividuals = Buscar individuos

src/main/resources/bundles/it/header.properties

@@ -109,5 +109,5 @@ unknown = Sconosciuto
 loading = Caricamento...
 noMatchResults = Nessun risultato corrispondente
 errorOccurred = Si \u00E8 verificato un errore
-searchResultDisplay = Visualizzazione dei risultati della ricerca
+searchResultDisplay = I tuoi risultati di ricerca appariranno qui
 searchIndividuals = Cerca individui

src/main/webapp/css/header.css

@@ -154,7 +154,7 @@
   height: 40px;
   display: flex;
   align-items: center;
-  margin-left: 35px;
+  margin-left: 10px;
 }
 
 .profile-wrapper:hover .dropdown-menu {
@@ -186,7 +186,7 @@
   /* width: 250px; */
   /* height: 100%; */
   max-height: 60px;
-  margin-right: 60px;
+  margin-right: 20px;
   font-size: 24px;
   display: flex;
   align-items: center;
@@ -196,6 +196,7 @@
 }
 
 .nav-brand {
+  flex-shrink: 0;
   width: 100px;
   height: 50px;
   display: block !important;
@@ -208,7 +209,7 @@
 }
 
 .search-and-secondary-wrapper {
-  margin-left: 50px;
+  margin-left: 30px;
   margin-bottom: 0 !important;
   display: flex;
   flex-direction: row !important;
@@ -262,15 +263,12 @@
 .site-name {
   color: white;
   font-size: 1.5em;
-  /* margin-left: 10px; */
 }
 
 .navbar-header {
   display: flex;
-  margin-left: auto;
   align-items: center;
   justify-content: space-between;
-  /* width: 80%; */
 }
 
 /* .nav-brand img {
@@ -300,11 +298,6 @@
 
 /* Responsive adjustments */
 @media (max-width: 991px) {
-
-  .site-name {
-    display: none !important;
-  }
-
   .navbar-toggle {
     display: block;
     margin-left: 20% !important;
@@ -390,7 +383,7 @@
   }
 
   .site-name {
-    margin-right: 10px;
+    margin-right: 30px;
   }
 
 }
@@ -447,7 +440,7 @@
   border-radius: 20px; 
   color: white; 
   height: 33px; 
-  width: 150px; 
+  width: 160px; 
   position: relative; 
   display: flex; 
 }
@@ -456,9 +449,7 @@
   display: flex; 
   justify-content: center; 
   align-items: center; 
-  margin: 0 10px; 
   position: relative;
-  width: 200px;
 }
 
 .quick-search-result{
@@ -485,12 +476,3 @@
   color: black;
   height: 25px;
 }
-
-.quick-search-result-context{
-  height: 25px; width: 100px; 
-  background-color: #00ACCE; 
-  border-radius: 4px; 
-  display: flex; 
-  align-items: center; 
-  justify-content: center
-}