From 7f019483cf9c35b5405572dfcba238a96ae5c16c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Maciek=20G=C5=82owacki?= Date: Sun, 8 Nov 2020 14:54:54 +0100 Subject: [PATCH] course card refactor --- src/assets/bin.svg | 1 + src/assets/expand.png | Bin 535 -> 0 bytes src/assets/expand.svg | 41 ++++++++++++++++++ src/components/CourseCard.tsx | 79 ++++++++++++++++++---------------- src/components/Rightbar.tsx | 3 +- src/components/Topbar.tsx | 3 +- 6 files changed, 88 insertions(+), 39 deletions(-) create mode 100644 src/assets/bin.svg delete mode 100644 src/assets/expand.png create mode 100644 src/assets/expand.svg diff --git a/src/assets/bin.svg b/src/assets/bin.svg new file mode 100644 index 0000000..cbfe7d7 --- /dev/null +++ b/src/assets/bin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/expand.png b/src/assets/expand.png deleted file mode 100644 index 239474f92cd6e1e7dc3dca1926ca72b4c97dbd11..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 535 zcmV+y0_gpTP)0*13?gmzo_pd;>9NrFRr-nMvWWdh9C$c2qK6ef`}K< zXYrog^{6M~%`6^f8k0E5bUD+R2=zfhE>-n^6PR=w6h%=KMNt%`#pwi|fh^FQaF$AX zfgE18PTQt#-~%Z8RRAVjq!Tg(eDRa(6X*$Rs+BQS1g0DXwPA#687rwSARo|FDK+OX zbUo($-Su+i@v{FS*PzK%30QI(znUd~XIQRmQ1iP*qmjxulrUtllPLplK?Bm3&8D`T zsd%#`S<-P0I&>hjEzEEbHgHoo@H9r59pUbM+rb;c!Es0(33u*E7pw~xoJEj17Vg^p z>!L;M-!x_597qXwoCxNZ@E&v|7LZ9@V<(jYE`%~`QDqGC$fRz7wh)<1p-k+*eNw4g zf~8Wxl~86iZW%+^xvI7vfR2j(cHmAZv*Jp|FpEs;5l^ZexEIPSyOuFXUldP%Nn{q9 zC1aRD_DxA->YmM9GfliwiOLw_l4|yUt%ghyO{#= + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/CourseCard.tsx b/src/components/CourseCard.tsx index b5511bd..8fae122 100644 --- a/src/components/CourseCard.tsx +++ b/src/components/CourseCard.tsx @@ -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` +const ExpandIcon = styled(Expand) ` 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 ( - - deleteFromBasket(course.id)}> - setSelected(!isSelected)}>{course.name} + + + deleteFromBasket(course.id)}> + setSelected(!isSelected)}>{course.name} + setSelected(!isSelected)} isSelected={isSelected} /> + {groups .sort((a, b) => b.type.localeCompare(a.type)) @@ -127,9 +135,6 @@ export const CourseCard = ({ course }: CourseCardProps) => { ))} - setSelected(!isSelected)}> - - - + ); }; diff --git a/src/components/Rightbar.tsx b/src/components/Rightbar.tsx index 9d79658..78cce70 100644 --- a/src/components/Rightbar.tsx +++ b/src/components/Rightbar.tsx @@ -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; diff --git a/src/components/Topbar.tsx b/src/components/Topbar.tsx index 33a9308..02a0c7c 100644 --- a/src/components/Topbar.tsx +++ b/src/components/Topbar.tsx @@ -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) { - nasz student + nasz student );