y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

table ready

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-08 18:05:21 +01:00
parent 26d6056a2b
commit cdbbeecc70
6 changed files with 77 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/App.tsx
View File

@ -8,6 +8,8 @@ import styled from 'styled-components';
const Wrapper = styled.div`
display: flex;
height: calc(100vh - 80px);
background-color: #ECEEF4;
padding: 20px;
`;
export const App = () => {

5
src/components/Profile.tsx
View File

@ -12,9 +12,8 @@ export const Profile = ({ anchorEl, handleClose }: ProfileProps) => {
return (
<Menu anchorEl={anchorEl} keepMounted open={Boolean(anchorEl)} onClose={handleClose}>
<MenuItem>Profile</MenuItem>
<MenuItem>My account</MenuItem>
<MenuItem onClick={logout}>Logout</MenuItem>
<MenuItem>Profil</MenuItem>
<MenuItem onClick={logout}>Wyloguj</MenuItem>
</Menu>
);
};

3
src/components/Rightbar.tsx
View File

@ -25,6 +25,9 @@ const RightbarStyled = styled.div`
background-color: black;
border: 1px solid;
}
background-color: white;
border-radius: 5px;
box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59);
`;
const SaveButton = styled.div`
display: flex;

44
src/components/Scheduler.tsx
View File

@ -5,8 +5,17 @@ import { days, hours } from '../constants/index';
import styled from 'styled-components/macro';
const SchedulerWrapper = styled.div`
display: flex;
border-collapse: collapse;
flex: 1;
background-color: white;
padding: 5px 15px 5px 5px;
border-radius: 5px;
margin-right: 20px;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 3px 3px 3px -2px rgba(0, 0, 0, 0.59);
`;
const TableBody = styled.div`
@ -31,10 +40,9 @@ interface TableCellProps {
const TableCell = styled.div<TableCellProps>`
height: ${({ height }) => height}px;
/* border: ${({ isHourColumn }) => !isHourColumn && '1px solid #ddd'}; */
border-width: ${({ isHourColumn }) => !isHourColumn && '1px'};
border-style: ${({ isHourColumn }) => !isHourColumn && 'solid dotted dotted dotted'};
/* border-bottom: ${({ isHourColumn }) => !isHourColumn && '1px dotted #ddd'}; */
border-width: ${({ isHourColumn }) => !isHourColumn && '2px'};
border-style: ${({ isHourColumn }) => !isHourColumn && 'none solid dotted none'};
border-color: rgb(242, 243, 245);
margin-top: ${({ isHourColumn, height }) => isHourColumn ? -(height / 2) : 0}px;
display: flex;
align-items: center;
@ -44,7 +52,11 @@ const TableCell = styled.div<TableCellProps>`
font-size: 0.75vw;
user-select: none;
border-collapse:collapse;
`;
:nth-child(2) {
border-left: 2px solid rgb(242, 243, 245);
}
font-weight: bold;
`;
export const Scheduler = () => {
@ -77,7 +89,7 @@ export const Scheduler = () => {
{day}
</TableCell>
) : (
<TableCell height={wrapperHeight / 26} key={indexCell} ref={cellRef}>
<TableCell height={wrapperHeight / 26} style={{ borderStyle: 'none none solid none' }} key={indexCell} ref={cellRef}>
{day}
</TableCell>
),
@ -91,11 +103,21 @@ export const Scheduler = () => {
<TableCell height={wrapperHeight / 26} isHourColumn={true} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : (
<TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
),
) : indexRow === 23 ? (
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexCell === 5 ? (
<TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : indexRow % 2 !== 0 ? (
<TableCell height={wrapperHeight / 26} style={{ borderBottom: '2px solid rgb(242, 243, 245)' }} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
) : <TableCell height={wrapperHeight / 26} key={`${indexRow}${indexCell}`}>
{value}
</TableCell>
)}
</TableRow>
))}

41
src/components/Topbar.tsx
View File

@ -1,7 +1,7 @@
import React, { useState, MouseEvent, ChangeEvent, useEffect } from 'react';
import Transfer from '../assets/transfer.png';
import Search from '../assets/search.svg';
import CloseIcon from '../assets/close.svg';
import { ReactComponent as Close } from '../assets/close.svg';
import ProfileIcon from '../assets/account.svg';
import { Profile } from './Profile';
import { Dropdown } from './Dropdown';
@ -11,7 +11,7 @@ import styled from 'styled-components/macro';
import ClickAwayListener from 'react-click-away-listener';
const Topbar = styled.div`
background-color: #eceef4;
background-color: #E3E5ED;
height: 80px;
padding: 5px;
font-size: 24px;
@ -22,9 +22,10 @@ const Topbar = styled.div`
const LogoWrapper = styled.div`
display: flex;
justify-content: center;
justify-content: flex-start;
align-items: center;
flex: 2;
margin-left: 10px;
`;
const Logo = styled.img`
@ -37,6 +38,8 @@ const Logo = styled.img`
`;
const Text = styled.div`
margin-left: 10px;
font-size: 1.4rem;
user-select: none;
@media only screen and (max-width: 670px) {
display: none;
@ -46,7 +49,7 @@ const Text = styled.div`
const FlexboxColumn = styled.div`
display: flex;
flex-direction: column;
flex: 9;
flex: 12;
`;
const InputWrapper = styled.div`
@ -54,6 +57,7 @@ const InputWrapper = styled.div`
margin-top: 15px;
background-color: #f2f4f7;
border-radius: 6px;
align-items: center;
`;
const Input = styled.input`
@ -61,40 +65,45 @@ const Input = styled.input`
font-size: 20px;
height: 40px;
width: 100%;
margin-left: 5px;
border: none;
margin-left: 5px;
border-top-left-radius: 6px;
border-bottom-left-radius: 6px;
&:focus {
outline: none;
}
`;
const InputIcon = styled.img`
const CloseIcon = styled(Close)`
width: 30px;
height: 30px;
margin-right: 5px;
@media only screen and (max-width: 670px) {
width: 25px;
}
cursor: pointer;
:hover {
fill: grey;
}
`;
const IconWrapper = styled.div`
display: flex;
justify-content: center;
justify-content: flex-end;
align-items: center;
flex: 2;
width: 335px;
`;
const Icon = styled.img`
width: 40px;
margin: 5px;
cursor: pointer;
@media only screen and (max-width: 670px) {
width: 35px;
}
`;
const VerticalLine = styled.div`
border-left: 1px solid black;
height: 30px;
`;
@ -139,20 +148,18 @@ export default function ({ handleTransfer }: TopbarProps) {
<ClickAwayListener onClickAway={handleClickAway}>
<InputWrapper>
<Input placeholder="Wyszukaj przedmiot..." onChange={handleChange} onClick={handleClick} value={input} />
<InputIcon alt="close" src={CloseIcon} onClick={handleClearInput} />
<VerticalLine />
<InputIcon alt="search" src={Search} />
<CloseIcon onClick={handleClearInput} />
</InputWrapper>
<Dropdown open={open} input={input} handleCloseDropdown={handleCloseDropdown} />
</ClickAwayListener>
</FlexboxColumn>
<IconWrapper>
<Icon alt="transfer" src={Transfer} onClick={handleTransfer} />
{/* <Text>Maciej Głowacki</Text> */}
{/* <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} />
<Text>nasz student</Text>
</IconWrapper>
</Topbar>
);

24
src/constants/index.ts
View File

@ -8,29 +8,29 @@ export const days = [
];
export const hours = [
"8:00",
"8:30",
"",
"9:00",
"9:30",
"",
"10:00",
"10:30",
"",
"11:00",
"11:30",
"",
"12:00",
"12:30",
"",
"13:00",
"13:30",
"",
"14:00",
"14:30",
"",
"15:00",
"15:30",
"",
"16:00",
"16:30",
"",
"17:00",
"17:30",
"",
"18:00",
"18:30",
"",
"19:00",
"19:30",
"",
];