dropdown working correctly
This commit is contained in:
parent
3cbd961d3a
commit
0f155e928b
@ -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>
|
||||||
|
|
||||||
|
@ -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;
|
||||||
|
@ -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>
|
||||||
|
@ -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`
|
||||||
|
@ -20,3 +20,6 @@ export const hours = [
|
|||||||
"18:00",
|
"18:00",
|
||||||
"19:00",
|
"19:00",
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|
||||||
|
export const MONDAY_TO_FRIDAY = 5;
|
@ -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 {
|
||||||
|
Loading…
Reference in New Issue
Block a user