diff --git a/src/components/SchedulerRow.tsx b/src/components/SchedulerRow.tsx index d73d6b1..ccdde85 100644 --- a/src/components/SchedulerRow.tsx +++ b/src/components/SchedulerRow.tsx @@ -2,7 +2,6 @@ import React, { Fragment, MouseEvent, useState, useEffect, useRef } from 'react' import { GroupType, SchedulerEvent } from '../types'; import styled from 'styled-components/macro'; import Popover from '@material-ui/core/Popover'; -import Typography from '@material-ui/core/Typography'; import { makeStyles, createStyles, Theme } from '@material-ui/core/styles'; import { MONDAY_TO_FRIDAY } from '../constants'; @@ -10,15 +9,21 @@ const useStyles = makeStyles((theme: Theme) => createStyles({ popover: { pointerEvents: 'none', + fontSize: '14px', }, paper: { - padding: theme.spacing(1), - marginLeft: 5, - textAlign: 'center', + padding: '15px 15px 15px 15px', + textAlign: 'left', + lineHeight: `1 !important`, }, }), ); +const PopoverSpan = styled.span` + font-weight: 'bold'; + margin-right: 2px; +`; + interface SchedulerEventsWrapperProps { eventIndex: number; rowTop: number; @@ -61,10 +66,6 @@ const StyledSchedulerEvent = styled.div` box-shadow: 3px 3px 3px 0px rgba(0, 0, 0, 0.75); `; -const StyledTypography = styled(Typography)` - background-color: white; -`; - const threeStyles = () => { return ` white-space: nowrap; @@ -72,7 +73,6 @@ const threeStyles = () => { max-width: 70px;`; }; - type BoldParagraphProps = { isThree?: boolean; }; @@ -97,7 +97,7 @@ const ClassWrap = styled.div` const TextWrapper = styled.div` flex: 1; width: inherit; - padding: 0 5px 0 5px; + padding: 0 5px 5px 5px; display: flex; justify-content: space-between; `; @@ -120,9 +120,10 @@ const getGroupsPerDay = (groups: Array) => { export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight }: SchedulerRowProps) => { const classes = useStyles(); + const groupsPerDay = getGroupsPerDay(groups); + console.log('groups: ', groups); const [anchorEl, setAnchorEl] = React.useState(null); const [popoverId, setPopoverId] = useState(null); - const groupsPerDay = getGroupsPerDay(groups); //looks weird const handlePopoverOpen = (event: MouseEvent) => { setAnchorEl(event.currentTarget); @@ -167,11 +168,11 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight } {groupsPerDay[group.day] < 3 ? (
{`${groups[index].time[0]}-${groups[index].time[1]}`}
-
3/30
+
3/{groups[index].capacity}
) : ( -
3/30
+
3/{groups[index].capacity}
)} @@ -195,11 +196,24 @@ export const SchedulerRow = ({ groups, indexRow, rowTop, cellWidth, cellHeight } onClose={handlePopoverClose} disableRestoreFocus > - -

{groups[index].name}

-

{groups[index].lecturer}

-

{groups[index].room}

-
+
+

{groups[index].name}

+

+ Prowadzący: {groups[index].lecturer} +

+

+ Sala zajęć: {groups[index].room} +

+

+ Kod przedmiotu: ACB129 +

+

+ Kod grupy: FVJ753 +

+

+ Punkty ECTS: 2 +

+
),