Changeset 0df6b9e for reactapp


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
Files:
1 added
6 edited

Legend:

Unmodified
Added
Removed

  • reactapp/src/App.js

    r080a3f3 r0df6b9e  
    1616        }
    1717      </style>
    18       <MainTitle>profesori.mk</MainTitle>
    19       <Search />
     18      <MainTitle>profesori.mk</MainTitle> <Search />
    2019      <Outlet />
    2120    </MainWrapper>

  • 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};

  • reactapp/src/Pages/Professor.js

    r080a3f3 r0df6b9e  
    33import JSOG from "jsog";
    44import OpinionTree from "../Components/OpinionTree";
    5 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
    6 import {
    7   solid,
    8   regular,
    9   brands,
    10 } from "@fortawesome/fontawesome-svg-core/import.macro";
    115
    126import {
    … …  
    7064    return (
    7165      <div>
    72         <p>loading</p>
     66        <p style={{ marginTop: "140px" }}>се вчитува...</p>
    7367        <Outlet />
    7468      </div>
Note: See TracChangeset for help on using the changeset viewer.