initial topbar and dropdown redesign
This commit is contained in:
Maciek Głowacki
@ -1,19 +1,21 @@
|
||||
import React, { useState, useContext, useEffect, MouseEvent, ChangeEvent } from 'react';
|
||||
import { Input } from '@material-ui/core';
|
||||
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
|
||||
import { coursesContext } from '../contexts/CoursesProvider';
|
||||
import { Course } from '../types';
|
||||
import styled from 'styled-components';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
|
||||
const DropdownContainer = styled.div`
|
||||
max-height: 420px;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
left: 280px;
|
||||
top: 65px;
|
||||
z-index: 99;
|
||||
min-width: 70%;
|
||||
max-height: 420px;
|
||||
border-radius:3px;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0.05em 0.2em 0.6em rgba(0,0,0,.2);
|
||||
scroll-snap-type: y mandatory;
|
||||
scroll-behavior: smooth;
|
||||
z-index: 100;
|
||||
position: relative;
|
||||
border-radius: 0px 0px 0px 15px;
|
||||
::-webkit-scrollbar-track {
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
@ -24,33 +26,35 @@ const DropdownContainer = styled.div`
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #d4b851;
|
||||
background-color: black;
|
||||
border: 1px solid;
|
||||
}
|
||||
`;
|
||||
|
||||
const CourseContainer = styled.div`
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding: 5px;
|
||||
padding-left: 20px;
|
||||
background-color: #e6c759;
|
||||
background-color: #f2f4f7;
|
||||
font-size: 18px;
|
||||
font-family: Lato;
|
||||
font-weight: 500;
|
||||
scroll-snap-align: end;
|
||||
border-bottom: 1px solid;
|
||||
:hover {
|
||||
background-color: #d4b851;
|
||||
background-color: #ECEEF4;
|
||||
cursor: pointer;
|
||||
}
|
||||
`;
|
||||
|
||||
const useStyles = makeStyles({
|
||||
topbarInput: {
|
||||
marginTop: '8px',
|
||||
width: '100%',
|
||||
},
|
||||
});
|
||||
const Input = styled.input`
|
||||
background-color: #F1F2F5;
|
||||
font-size: 20px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
`
|
||||
|
||||
interface DropdownProps {
|
||||
clearInput: boolean;
|
||||
@ -58,7 +62,6 @@ interface DropdownProps {
|
||||
}
|
||||
|
||||
export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
||||
const classes = useStyles();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
const [input, setInput] = useState('');
|
||||
@ -111,12 +114,10 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
||||
};
|
||||
|
||||
return (
|
||||
<ClickAwayListener onClickAway={handleClickAway}>
|
||||
<div>
|
||||
// <ClickAwayListener onClickAway={handleClickAway}>
|
||||
<>
|
||||
<Input
|
||||
placeholder="Wyszukaj..."
|
||||
inputProps={{ 'aria-label': 'description' }}
|
||||
className={classes.topbarInput}
|
||||
placeholder="Wyszukaj przedmiot..."
|
||||
onChange={handleChange}
|
||||
onClick={handleClick}
|
||||
value={input}
|
||||
@ -130,7 +131,7 @@ export const Dropdown = ({ clearInput, handleClearInput }: DropdownProps) => {
|
||||
))}
|
||||
</DropdownContainer>
|
||||
)}
|
||||
</div>
|
||||
</ClickAwayListener>
|
||||
</>
|
||||
// </ClickAwayListener>
|
||||
);
|
||||
};
|
||||
|
||||
@ -9,7 +9,6 @@ const RightbarStyled = styled.div`
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
text-align: center;
|
||||
font-family: Lato;
|
||||
height: 100%;
|
||||
width: 300px;
|
||||
overflow-y: scroll;
|
||||
@ -64,10 +63,6 @@ export const Rightbar = () => {
|
||||
return (
|
||||
<RightbarStyled>
|
||||
<RightbarTextStyled>
|
||||
<p>
|
||||
Hubert Wrzesiński<br></br>
|
||||
Semestr zimowy 2020/2021
|
||||
</p>
|
||||
<SaveButton onClick={handleSave}>ZAPISZ</SaveButton>
|
||||
</RightbarTextStyled>
|
||||
{filteredCourses.map((course, index) => (
|
||||
|
||||
@ -1,80 +1,94 @@
|
||||
import React, { useState, MouseEvent } from 'react';
|
||||
import Transfer from '../assets/transfer.png';
|
||||
import Search from '../assets/search.svg';
|
||||
import UK from '../assets/UK.png';
|
||||
import PL from '../assets/PL.png';
|
||||
import User from '../assets/user.png';
|
||||
import CloseIcon from '../assets/close.svg';
|
||||
import ProfileIcon from '../assets/account.svg';
|
||||
import { Profile } from './Profile';
|
||||
import { Dropdown } from './Dropdown';
|
||||
import styled from 'styled-components';
|
||||
import PolishIcon from '../assets/poland.svg';
|
||||
import EnglishIcon from '../assets/united-kingdom.svg';
|
||||
import styled from 'styled-components/macro';
|
||||
|
||||
|
||||
const TopbarTextStyled = styled.div`
|
||||
@media only screen and (max-width: 670px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Topbar = styled.div`
|
||||
background-color: #ffdc61;
|
||||
background-color:#ECEEF4;
|
||||
height: 80px;
|
||||
padding: 5px;
|
||||
font-family: comic sans MS;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
`;
|
||||
|
||||
const TopbarLogoWrapperStyled = styled.div`
|
||||
const LogoWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 0.5;
|
||||
justify-content: flex-start;
|
||||
`;
|
||||
|
||||
const TopbarLogoStyled = styled.img`
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
const Logo = styled.img`
|
||||
flex-grow: 1;
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
@media only screen and (max-width: 670px) {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
`;
|
||||
|
||||
const TopbarInputStyled = styled.div`
|
||||
width: 70%;
|
||||
const Text = styled.div`
|
||||
flex-grow: 2;
|
||||
@media only screen and (max-width: 670px) {
|
||||
display: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const InputWrapper = styled.div`
|
||||
display: flex;
|
||||
flex-grow: 3;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 10px;
|
||||
flex-grow: 9;
|
||||
background-color:#f2f4f7;
|
||||
border-radius: 5px;
|
||||
`;
|
||||
|
||||
const TopbarInputFieldStyled = styled.div`
|
||||
width: 96%;
|
||||
margin-top: 10px;
|
||||
const Input = styled.div`
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const TopbarInputIconStyled = styled.img`
|
||||
width: 35px;
|
||||
const InputIcon = styled.img`
|
||||
width: 30px;
|
||||
@media only screen and (max-width: 670px) {
|
||||
width: 25px;
|
||||
}
|
||||
cursor: pointer;
|
||||
`;
|
||||
|
||||
const TopbarIcon = styled.img`
|
||||
width: 50px;
|
||||
const IconWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-grow: 0.5;
|
||||
`;
|
||||
|
||||
const Icon = styled.img`
|
||||
width: 40px;
|
||||
cursor: pointer;
|
||||
@media only screen and (max-width: 670px) {
|
||||
width: 35px;
|
||||
}
|
||||
`;
|
||||
|
||||
const TopbarIconBox = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
flex-grow: 1.5;
|
||||
`;
|
||||
|
||||
|
||||
const VerticalLine = styled.div`
|
||||
border-left: 1px solid black;
|
||||
height: 30px;
|
||||
`
|
||||
|
||||
|
||||
interface TopbarProps {
|
||||
handleTransfer: (e: MouseEvent) => void;
|
||||
@ -95,23 +109,25 @@ export default function ({ handleTransfer }: TopbarProps) {
|
||||
|
||||
return (
|
||||
<Topbar>
|
||||
<TopbarLogoWrapperStyled>
|
||||
<TopbarLogoStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
|
||||
<TopbarTextStyled> plan na plan </TopbarTextStyled>
|
||||
</TopbarLogoWrapperStyled>
|
||||
<TopbarInputStyled>
|
||||
<TopbarInputIconStyled alt="search" src={Search} />
|
||||
<TopbarInputFieldStyled>
|
||||
<LogoWrapper>
|
||||
<Logo alt="logo" src="https://plannaplan.pl/img/logo.svg" />
|
||||
<Text> plan na plan </Text>
|
||||
</LogoWrapper>
|
||||
<InputWrapper>
|
||||
<Input>
|
||||
<Dropdown clearInput={clearInput} handleClearInput={handleClearInput} />
|
||||
</TopbarInputFieldStyled>
|
||||
<TopbarInputIconStyled alt="close" src={CloseIcon} onClick={handleClearInput} />
|
||||
</TopbarInputStyled>
|
||||
<TopbarIconBox>
|
||||
{/* <TopbarIcon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
|
||||
<TopbarIcon alt="change_language" src={isPolish ? UK : PL} onClick={onLangChange} />
|
||||
<TopbarIcon alt="profile" src={User} onClick={handleProfile} />
|
||||
</Input>
|
||||
<InputIcon alt="close" src={CloseIcon} onClick={handleClearInput} />
|
||||
<VerticalLine/>
|
||||
<InputIcon alt="search" src={Search} />
|
||||
</InputWrapper>
|
||||
<IconWrapper>
|
||||
{/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
|
||||
<Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
|
||||
<Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
|
||||
<Profile anchorEl={anchorEl} handleClose={handleClose} />
|
||||
</TopbarIconBox>
|
||||
<span>nasz student</span>
|
||||
</IconWrapper>
|
||||
</Topbar>
|
||||
);
|
||||
}
|
||||
|
||||
@ -53,7 +53,6 @@ const TransferReceiveStyled = styled.div`
|
||||
`;
|
||||
|
||||
const TransferTextStyled = styled.div`
|
||||
font-family: Lato;
|
||||
font-size: 30px;
|
||||
margin-bottom: 10px;
|
||||
`;
|
||||
|
||||
Reference in New Issue
Block a user