Ignore:
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/Components
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • reactapp/src/Components/Main.style.js

    r080a3f3 r0df6b9e  
    1717  text-decoration: underline 3px;
    1818  margin-bottom: 30px;
     19  width: fit-content;
     20  float: left;
    1921`;
  • reactapp/src/Components/ProfessorCard.style.js

    r080a3f3 r0df6b9e  
    66  padding: 10px;
    77  margin-bottom: 30px;
     8  margin-top: 140px;
    89`;
    910
  • reactapp/src/Components/Search.js

    r080a3f3 r0df6b9e  
    33import { transliterate } from "../Util/transliterate";
    44import {
    5   SearchDropdownContentSmall,
     5  SearchDropdownResultSmall,
     6  SearchDropdownTextSmall,
    67  SearchDropdownSmall,
     8  SearchDropdownResultLinkSmall,
     9  SearchSmall,
    710} from "./Search.style";
    811function Search() {
     
    3235
    3336  return (
    34     <div style={{ position: "relative" }}>
    35       <input
     37    <div
     38      style={{
     39        position: "relative",
     40        width: "fit-content",
     41        float: "right",
     42      }}
     43    >
     44      <SearchSmall
    3645        placeholder="Пребарувај..."
    3746        onChange={(e) => setQuery(e.target.value)}
    3847      />
    39 
    40       {query.length > 2 &&
    41         professors.slice(0, 10).map((professor) => (
    42           <SearchDropdownSmall>
    43             <div key={professor.professorId}>
    44               <SearchDropdownContentSmall weight="bold" size="medium">
    45                 {professor.professorName}
    46               </SearchDropdownContentSmall>
    47               <SearchDropdownContentSmall weight="normal" size="smaller">
    48                 {professor.faculty.facultyName}
    49               </SearchDropdownContentSmall>
    50             </div>
    51           </SearchDropdownSmall>
    52         ))}
     48      <SearchDropdownSmall
     49        display={query.length > 2 && professors.length > 0 ? "block" : "none"}
     50      >
     51        {query.length > 2 &&
     52          professors.slice(0, 7).map((professor) => (
     53            <SearchDropdownResultSmall key={professor.professorId}>
     54              <SearchDropdownResultLinkSmall
     55                href={"/professor/" + professor.professorId}
     56              >
     57                <SearchDropdownTextSmall weight="bold" size="medium">
     58                  {professor.professorName}
     59                </SearchDropdownTextSmall>
     60                <SearchDropdownTextSmall weight="normal" size="smaller">
     61                  {professor.faculty.facultyName}
     62                </SearchDropdownTextSmall>
     63              </SearchDropdownResultLinkSmall>
     64            </SearchDropdownResultSmall>
     65          ))}
     66      </SearchDropdownSmall>
    5367    </div>
    5468  );
  • reactapp/src/Components/Search.style.js

    r080a3f3 r0df6b9e  
    11import styled from "styled-components";
     2import searchicon from "../searchicon.png";
     3
     4export const SearchSmall = styled.input`
     5  width: 350px;
     6  box-sizing: border-box;
     7  border: 2px solid #ccc;
     8  font-size: 16px;
     9  background-color: #f9f9f9;
     10  background-image: url(${searchicon});
     11  background-position: 10px 10px;
     12  background-repeat: no-repeat;
     13  padding: 12px 20px 12px 40px;
     14  margin-top: 10px;
     15`;
    216
    317export const SearchDropdownSmall = styled.div`
    4   display: block;
     18  display: ${(props) => props.display};
     19  position: absolute;
    520  background-color: #f9f9f9;
    621  min-width: 160px;
     
    823  padding: 12px 16px;
    924  z-index: 1;
     25  width: 350px;
     26  padding: 0;
    1027`;
    1128
    12 export const SearchDropdownContentSmall = styled.p`
     29export const SearchDropdownResultSmall = styled.div`
     30  &:hover {
     31    background-color: papayawhip;
     32    border: 1px solid blue;
     33    text-decoration: underline 1px blue;
     34  }
     35  padding: 10px;
     36`;
     37
     38export const SearchDropdownResultLinkSmall = styled.a`
     39  text-decoration: none;
     40  color: black;
     41`;
     42
     43export const SearchDropdownTextSmall = styled.p`
    1344  font-weight: ${(props) => props.weight};
    1445  font-size: ${(props) => props.size};
Note: See TracChangeset for help on using the changeset viewer.