y0rune/frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

course card refactor

Browse Source
This commit is contained in:
Maciek Głowacki 2020-11-08 14:54:54 +01:00
parent c8edf64963
commit 7f019483cf
6 changed files with 88 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/bin.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

BIN
src/assets/expand.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 535 B

41
src/assets/expand.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 748 B

79
src/components/CourseCard.tsx
View File

@ -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>
);
};

3
src/components/Rightbar.tsx
View File

@ -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;

3
src/components/Topbar.tsx
View File

@ -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>
);