Changeset 0df6b9e

Timestamp:

08/01/22 19:18:54 (2 years ago)

Author:

Viktor <mlviktor23@…>

Branches:

main

Children:

d654c74

Parents:

080a3f3

Message:

styled searchbar

Location:

reactapp/src

Files:

• App.js (modified) (1 diff)
• Components/Main.style.js (modified) (1 diff)
• Components/ProfessorCard.style.js (modified) (1 diff)
• Components/Search.js (modified) (2 diffs)
• Components/Search.style.js (modified) (2 diffs)
• Pages/Professor.js (modified) (2 diffs)
• searchicon.png (added)

reactapp/src/App.js

@@ -16 +16 @@
         }
       </style>
-      <MainTitle>profesori.mk</MainTitle>
-      <Search />
+      <MainTitle>profesori.mk</MainTitle> <Search />
       <Outlet />
     </MainWrapper>

reactapp/src/Components/Main.style.js

@@ -17 +17 @@
   text-decoration: underline 3px;
   margin-bottom: 30px;
+  width: fit-content;
+  float: left;
 `;

reactapp/src/Components/ProfessorCard.style.js

@@ -6 +6 @@
   padding: 10px;
   margin-bottom: 30px;
+  margin-top: 140px;
 `;
 

reactapp/src/Components/Search.js

@@ -3 +3 @@
 import { transliterate } from "../Util/transliterate";
 import {
-  SearchDropdownContentSmall,
+  SearchDropdownResultSmall,
+  SearchDropdownTextSmall,
   SearchDropdownSmall,
+  SearchDropdownResultLinkSmall,
+  SearchSmall,
 } from "./Search.style";
 function Search() {
@@ -32 +35 @@
 
   return (
-    <div style={{ position: "relative" }}>
-      <input
+    <div
+      style={{
+        position: "relative",
+        width: "fit-content",
+        float: "right",
+      }}
+    >
+      <SearchSmall
         placeholder="Пребарувај..."
         onChange={(e) => setQuery(e.target.value)}
       />
-
-      {query.length > 2 &&
-        professors.slice(0, 10).map((professor) => (
-          <SearchDropdownSmall>
-            <div key={professor.professorId}>
-              <SearchDropdownContentSmall weight="bold" size="medium">
-                {professor.professorName}
-              </SearchDropdownContentSmall>
-              <SearchDropdownContentSmall weight="normal" size="smaller">
-                {professor.faculty.facultyName}
-              </SearchDropdownContentSmall>
-            </div>
-          </SearchDropdownSmall>
-        ))}
+      <SearchDropdownSmall
+        display={query.length > 2 && professors.length > 0 ? "block" : "none"}
+      >
+        {query.length > 2 &&
+          professors.slice(0, 7).map((professor) => (
+            <SearchDropdownResultSmall key={professor.professorId}>
+              <SearchDropdownResultLinkSmall
+                href={"/professor/" + professor.professorId}
+              >
+                <SearchDropdownTextSmall weight="bold" size="medium">
+                  {professor.professorName}
+                </SearchDropdownTextSmall>
+                <SearchDropdownTextSmall weight="normal" size="smaller">
+                  {professor.faculty.facultyName}
+                </SearchDropdownTextSmall>
+              </SearchDropdownResultLinkSmall>
+            </SearchDropdownResultSmall>
+          ))}
+      </SearchDropdownSmall>
     </div>
   );

reactapp/src/Components/Search.style.js

@@ -1 +1 @@
 import styled from "styled-components";
+import searchicon from "../searchicon.png";
+
+export const SearchSmall = styled.input`
+  width: 350px;
+  box-sizing: border-box;
+  border: 2px solid #ccc;
+  font-size: 16px;
+  background-color: #f9f9f9;
+  background-image: url(${searchicon});
+  background-position: 10px 10px;
+  background-repeat: no-repeat;
+  padding: 12px 20px 12px 40px;
+  margin-top: 10px;
+`;
 
 export const SearchDropdownSmall = styled.div`
-  display: block;
+  display: ${(props) => props.display};
+  position: absolute;
   background-color: #f9f9f9;
   min-width: 160px;
@@ -8 +23 @@
   padding: 12px 16px;
   z-index: 1;
+  width: 350px;
+  padding: 0;
 `;
 
-export const SearchDropdownContentSmall = styled.p`
+export const SearchDropdownResultSmall = styled.div`
+  &:hover {
+    background-color: papayawhip;
+    border: 1px solid blue;
+    text-decoration: underline 1px blue;
+  }
+  padding: 10px;
+`;
+
+export const SearchDropdownResultLinkSmall = styled.a`
+  text-decoration: none;
+  color: black;
+`;
+
+export const SearchDropdownTextSmall = styled.p`
   font-weight: ${(props) => props.weight};
   font-size: ${(props) => props.size};

reactapp/src/Pages/Professor.js

@@ -3 +3 @@
 import JSOG from "jsog";
 import OpinionTree from "../Components/OpinionTree";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  solid,
-  regular,
-  brands,
-} from "@fortawesome/fontawesome-svg-core/import.macro";
 
 import {
@@ -70 +64 @@
     return (
       <div>
-        <p>loading</p>
+        <p style={{ marginTop: "140px" }}>се вчитува...</p>
         <Outlet />
       </div>