course card refactor
This commit is contained in:
Maciek Głowacki
parent
c8edf64963
commit
7f019483cf
|
|
@ -0,0 +1 @@
|
|||
<svg id="Capa_1" enable-background="new 0 0 512 512" height="512" viewBox="0 0 512 512" width="512" xmlns="http://www.w3.org/2000/svg"><g><path d="m256 441.142c8.284 0 15-6.716 15-15v-201.409c0-8.284-6.716-15-15-15s-15 6.716-15 15v201.409c0 8.284 6.716 15 15 15z"/><path d="m173.412 427.552c.78 8.263 8.115 14.303 16.344 13.523 8.248-.779 14.302-8.096 13.523-16.344l-19.018-201.409c-.779-8.247-8.083-14.303-16.344-13.523-8.248.779-14.302 8.096-13.523 16.344z"/><path d="m322.244 441.076c8.238.779 15.564-5.269 16.344-13.523l19.018-201.409c.779-8.248-5.276-15.565-13.523-16.344-8.26-.784-15.565 5.276-16.344 13.523l-19.018 201.409c-.779 8.247 5.276 15.565 13.523 16.344z"/><path d="m57.646 168.875h8.967l43.448 330.083c.982 7.463 7.344 13.042 14.872 13.042h262.135c7.528 0 13.889-5.579 14.872-13.042l43.448-330.083h8.967c8.284 0 15-6.716 15-15v-65.629c0-8.284-6.716-15-15-15h-128.357v-5.911c0-37.128-30.207-67.335-67.335-67.335h-5.325c-37.128 0-67.335 30.207-67.335 67.335v5.911h-128.357c-8.284 0-15 6.716-15 15v65.629c0 8.284 6.715 15 15 15zm316.267 313.125h-235.826l-41.215-313.125h318.257zm-157.911-414.665c0-20.586 16.749-37.335 37.335-37.335h5.325c20.586 0 37.335 16.749 37.335 37.335v5.911h-79.995zm-143.356 35.911h366.709v35.629c-3.207 0-362.709 0-366.709 0z"/></g></svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 535 B |
|
|
@ -0,0 +1,41 @@
|
|||
<?xml version="1.0" encoding="iso-8859-1"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="306px" height="306px" viewBox="0 0 306 306" style="enable-background:new 0 0 306 306;" xml:space="preserve">
|
||||
<g>
|
||||
<g id="expand-more">
|
||||
<polygon points="270.3,58.65 153,175.95 35.7,58.65 0,94.35 153,247.35 306,94.35 "/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
<g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 748 B |
|
|
@ -1,32 +1,51 @@
|
|||
import React, { useState, useContext, MouseEvent } from 'react';
|
||||
import Collapse from '@material-ui/core/Collapse';
|
||||
import ExpandIcon from '../assets/expand.png';
|
||||
import { ReactComponent as Expand } from '../assets/expand.svg';
|
||||
import { Course, Group } from '../types/index';
|
||||
import { coursesContext } from '../contexts/CoursesProvider';
|
||||
import styled from 'styled-components';
|
||||
import { makeStyles } from '@material-ui/core/styles';
|
||||
import { ReactComponent as CloseIcon } from '../assets/close.svg';
|
||||
import { ReactComponent as Bin } from '../assets/bin.svg';
|
||||
|
||||
const CourseStyled = styled.div`
|
||||
const CourseCardWrapper = styled.div`
|
||||
position: relative;
|
||||
display: flex;
|
||||
min-height: 40px;
|
||||
background-color: rgb(100, 181, 246) !important;
|
||||
background-color: rgb(100, 181, 246);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
margin-top: 10px;
|
||||
padding-top: 10px;
|
||||
border-radius: 10px;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
align-items: stretch;
|
||||
position: relative;
|
||||
box-shadow: 9px 9px 8px -2px rgba(0, 0, 0, 0.59);
|
||||
`;
|
||||
|
||||
const CourseNameStyled = styled.div`
|
||||
padding-top: 25px;
|
||||
padding-bottom: 5px;
|
||||
|
||||
const TitleWrapper = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 10px;
|
||||
`
|
||||
|
||||
const BinIcon = styled(Bin)`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
min-width: 20px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
const CourseName = styled.div`
|
||||
padding-left: 3px;
|
||||
padding-right: 3px;
|
||||
font-size: 16px;
|
||||
user-select: none;
|
||||
`;
|
||||
|
||||
const ClassGroupStyled = styled.div`
|
||||
|
|
@ -43,18 +62,13 @@ interface ExpandIconProps {
|
|||
isSelected: boolean;
|
||||
}
|
||||
|
||||
const Flexbox = styled.div`
|
||||
padding-bottom: 5px;
|
||||
padding-top: 5px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
`;
|
||||
|
||||
const Expand = styled.img<ExpandIconProps>`
|
||||
const ExpandIcon = styled(Expand) <ExpandIconProps>`
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
max-width: 20px;
|
||||
min-width: 20px;
|
||||
transition: 0.2s;
|
||||
transform: ${(props) => (props.isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
|
||||
transform: ${({ isSelected }) => (isSelected ? 'scaleY(-1);' : 'scaleY(1);')};
|
||||
`;
|
||||
|
||||
const TypeClass = styled.div`
|
||||
|
|
@ -88,16 +102,7 @@ const useStyles = makeStyles({
|
|||
},
|
||||
});
|
||||
|
||||
const DeleteFromBasketIcon = styled(CloseIcon)`
|
||||
width: 20px;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
left: 230px;
|
||||
top: -5px;
|
||||
&:hover {
|
||||
fill: white;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
interface CourseCardProps {
|
||||
course: Course;
|
||||
|
|
@ -112,9 +117,12 @@ export const CourseCard = ({ course }: CourseCardProps) => {
|
|||
const onGroupClick = (group: Group, id: number) => addGroup(group, id);
|
||||
|
||||
return (
|
||||
<CourseStyled>
|
||||
<DeleteFromBasketIcon onClick={() => deleteFromBasket(course.id)}></DeleteFromBasketIcon>
|
||||
<CourseNameStyled onClick={() => setSelected(!isSelected)}>{course.name}</CourseNameStyled>
|
||||
<CourseCardWrapper>
|
||||
<TitleWrapper>
|
||||
<BinIcon onClick={() => deleteFromBasket(course.id)}></BinIcon>
|
||||
<CourseName onClick={() => setSelected(!isSelected)}>{course.name}</CourseName>
|
||||
<ExpandIcon onClick={() => setSelected(!isSelected)} isSelected={isSelected} />
|
||||
</TitleWrapper>
|
||||
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
|
||||
{groups
|
||||
.sort((a, b) => b.type.localeCompare(a.type))
|
||||
|
|
@ -127,9 +135,6 @@ export const CourseCard = ({ course }: CourseCardProps) => {
|
|||
</ClassGroupStyled>
|
||||
))}
|
||||
</Collapse>
|
||||
<Flexbox onClick={() => setSelected(!isSelected)}>
|
||||
<Expand isSelected={isSelected} alt="expand" src={ExpandIcon} />
|
||||
</Flexbox>
|
||||
</CourseStyled>
|
||||
</CourseCardWrapper>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ const RightbarStyled = styled.div`
|
|||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 10px;
|
||||
background-color: #d4b851;
|
||||
background-color: black;
|
||||
border: 1px solid;
|
||||
}
|
||||
`;
|
||||
|
|
@ -30,6 +30,7 @@ const SaveButton = styled.div`
|
|||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
user-select: none;
|
||||
background-color: #417cab;
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const Logo = styled.img`
|
|||
`;
|
||||
|
||||
const Text = styled.div`
|
||||
user-select: none;
|
||||
@media only screen and (max-width: 670px) {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -151,7 +152,7 @@ export default function ({ handleTransfer }: TopbarProps) {
|
|||
<Icon alt="change_language" src={isPolish ? EnglishIcon : PolishIcon} onClick={onLangChange} />
|
||||
<Icon alt="profile" src={ProfileIcon} onClick={handleProfile} />
|
||||
<Profile anchorEl={anchorEl} handleClose={handleClose} />
|
||||
<span>nasz student</span>
|
||||
<Text>nasz student</Text>
|
||||
</IconWrapper>
|
||||
</Topbar>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue