dropdown working correctly

This commit is contained in:
Maciek Głowacki 2020-11-03 00:59:42 +01:00
parent 3cbd961d3a
commit 0f155e928b
6 changed files with 18 additions and 17 deletions

View File

@ -10,7 +10,8 @@
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link href="https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;1,700&display=swap" rel="stylesheet"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<title>PlanNaPlan</title> <title>PlanNaPlan</title>
</head> </head>

View File

@ -4,7 +4,7 @@ import { Course } from '../types';
import styled from 'styled-components'; import styled from 'styled-components';
const WrapperIchuj = styled.div` const WrapperIchuj = styled.div`
max-width: 1200px; max-width: 1400px;
`; `;
const DropdownContainer = styled.div` const DropdownContainer = styled.div`
@ -86,8 +86,9 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
); );
setFilteredCourses(filteredCourses); setFilteredCourses(filteredCourses);
}; };
console.log("filtering courses");
filterCourses(input); filterCourses(input);
}, [input, basket]); }, [open, input, basket]);
const onCourseClick = async (event: MouseEvent) => { const onCourseClick = async (event: MouseEvent) => {
const target = event.currentTarget; const target = event.currentTarget;

View File

@ -47,13 +47,10 @@ const Classes = styled.div<ClassesProps>`
align-items: center; align-items: center;
z-index: 2; z-index: 2;
border-radius: 10px; border-radius: 10px;
font-size: 0.9vw;
/* background-color: rgb(100, 181, 246); */
width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px; width: ${({ cellWidth }) => (cellWidth * 2.5) / 3}px;
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px; height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
margin-right: 5px; padding-left: 10px;
text-align: center; text-align: left;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')}; background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')};
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59); box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
`; `;
@ -98,7 +95,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
{groups.map( {groups.map(
(group, index) => (group, index) =>
group.day === eventIndex && ( group.day === eventIndex && (
<div key={index}> <>
<Classes <Classes
groupType={group.type} groupType={group.type}
cellWidth={cellWidth} cellWidth={cellWidth}
@ -110,11 +107,10 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
onMouseEnter={(e) => handlePopoverOpen(e)} onMouseEnter={(e) => handlePopoverOpen(e)}
onMouseLeave={handlePopoverClose} onMouseLeave={handlePopoverClose}
> >
<p> <div>
{groups[index].name} <p style={{ fontWeight: 700 }}>{groups[index].name}</p>
<br></br> <span>{groups[index].room}</span>
{groups[index].room} </div>
</p>
</Classes> </Classes>
<Popover <Popover
id={`mouse-over-popover`} id={`mouse-over-popover`}
@ -141,7 +137,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
<p>{groups[index].room}</p> <p>{groups[index].room}</p>
</Typography> </Typography>
</Popover> </Popover>
</div> </>
), ),
)} )}
</SchedulerEvent> </SchedulerEvent>

View File

@ -48,7 +48,7 @@ const FlexboxColumn = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex-grow: 9; flex-grow: 9;
max-width: 1200px; max-width: 1400px;
`; `;
const InputWrapper = styled.div` const InputWrapper = styled.div`

View File

@ -20,3 +20,6 @@ export const hours = [
"18:00", "18:00",
"19:00", "19:00",
]; ];
export const MONDAY_TO_FRIDAY = 5;

View File

@ -11,7 +11,7 @@ export const GlobalStyles = createGlobalStyle`
margin: 0; margin: 0;
padding: 0; padding: 0;
line-height: 24px; line-height: 24px;
font-family: 'B612', sans-serif; font-family: 'Roboto', sans-serif;
} }
body::-webkit-scrollbar { body::-webkit-scrollbar {