topbar dropdown width aligned with input wrapper width

This commit is contained in:
Maciek Głowacki 2020-11-08 13:40:11 +01:00
parent 0f155e928b
commit c8edf64963
3 changed files with 13 additions and 20 deletions

View File

@ -3,9 +3,7 @@ import { coursesContext } from '../contexts/CoursesProvider';
import { Course } from '../types';
import styled from 'styled-components';
const WrapperIchuj = styled.div`
max-width: 1400px;
`;
const DropdownContainer = styled.div`
position: relative;
@ -102,16 +100,16 @@ export const Dropdown = forwardRef(({ open, input, handleCloseDropdown }: Dropdo
};
return (
<WrapperIchuj>
<DropdownContainer>
{open && (
<DropdownContainer>
<>
{filteredCourses.map(({ name, id }, index) => (
<CourseContainer key={index} id={id.toString()} onClick={onCourseClick}>
<p>{name} </p>
</CourseContainer>
))}
</DropdownContainer>
</>
)}
</WrapperIchuj>
</DropdownContainer>
);
});

View File

@ -51,7 +51,7 @@ const Classes = styled.div<ClassesProps>`
height: ${({ cellHeight }) => (cellHeight * 2 * 3) / 4}px;
padding-left: 10px;
text-align: left;
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#A68820')};
background-color: ${({ groupType }) => (groupType === 'CLASS' ? '#FFDC61' : '#9ed3ff')};
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
`;
@ -109,7 +109,7 @@ export const SchedulerRow = ({ groups, indexRow, cellTop, cellWidth, cellHeight
>
<div>
<p style={{ fontWeight: 700 }}>{groups[index].name}</p>
<span>{groups[index].room}</span>
<p >{groups[index].room}</p>
</div>
</Classes>
<Popover

View File

@ -22,13 +22,12 @@ const Topbar = styled.div`
const LogoWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
flex-grow: 0.5;
justify-content: flex-start;
flex: 2;
`;
const Logo = styled.img`
flex-grow: 1;
width: 70px;
height: 70px;
@media only screen and (max-width: 670px) {
@ -38,7 +37,6 @@ const Logo = styled.img`
`;
const Text = styled.div`
flex-grow: 2;
@media only screen and (max-width: 670px) {
display: none;
}
@ -47,14 +45,11 @@ const Text = styled.div`
const FlexboxColumn = styled.div`
display: flex;
flex-direction: column;
flex-grow: 9;
max-width: 1400px;
flex: 9;
`;
const InputWrapper = styled.div`
display: flex;
align-items: center;
justify-content: center;
margin-top: 15px;
background-color: #f2f4f7;
border-radius: 6px;
@ -82,9 +77,9 @@ const InputIcon = styled.img`
const IconWrapper = styled.div`
display: flex;
justify-content: center;
align-items: center;
justify-content: space-around;
flex-grow: 0.5;
flex: 2;
`;
const Icon = styled.img`
@ -152,7 +147,7 @@ export default function ({ handleTransfer }: TopbarProps) {
</FlexboxColumn>
<IconWrapper>
{/* <Icon alt="transfer" src={Transfer} onClick={handleTransfer} /> */}
<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} />