table ready
This commit is contained in:
Maciek Głowacki
parent
26d6056a2b
commit
cdbbeecc70
@ -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 = () => {
|
||||
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
@ -43,8 +51,12 @@ const TableCell = styled.div<TableCellProps>`
|
||||
margin-right: ${({ isHourColumn }) => isHourColumn ? '10px' : '0px'};
|
||||
font-size: 0.75vw;
|
||||
user-select: none;
|
||||
border-collapse:collapse;
|
||||
`;
|
||||
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>
|
||||
))}
|
||||
|
||||
@ -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>
|
||||
);
|
||||
|
||||
@ -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",
|
||||
"",
|
||||
];
|
||||
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user