styled components

This commit is contained in:
wrzesinski-hubert 2020-08-17 21:15:26 +02:00
parent 738848b1bd
commit 4f7bc8aaa4
5 changed files with 222 additions and 236 deletions

View File

@ -1,59 +0,0 @@
.class {
display: flex;
min-height: 50px;
background-color: rgb(100, 181, 246) !important;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
cursor: pointer;
align-items: stretch;
&__group {
padding-top: 1px;
padding-bottom: 1px;
&:hover {
cursor: pointer;
transition: 1s;
background-color: #8bc8fb;
}
}
&__name {
padding-top: 10px;
padding-bottom: 10px;
}
&__expandIcon {
margin-top: 5px;
width: 20px;
transition: 0.2s;
}
&__expandIconRotate {
margin-top: 5px;
width: 20px;
transition: 0.5s;
transform: scaleY(-1);
}
.expanded {
max-height: 244px;
overflow-y: auto;
}
.expanded::-webkit-scrollbar-track {
border-radius: 10px;
border-radius: 10px;
background-color: #8bc8fb;
}
.expanded::-webkit-scrollbar {
width: 12px;
border-radius: 10px;
background-color: #8bc8fb;
}
.expanded::-webkit-scrollbar-thumb {
border-radius: 10px;
background-color: #d4b851;
border: 1px solid;
}
}

View File

@ -1,10 +1,11 @@
import React, { useContext } from 'react'; import React, { useContext } from 'react';
import './index.scss';
import Collapse from '@material-ui/core/Collapse'; import Collapse from '@material-ui/core/Collapse';
import ExpandIcon from './expand.png'; import ExpandIcon from './expand.png';
import { Course, Group } from '../../../types/index'; import { Course, Group } from '../../../types/index';
import { coursesContext } from '../../../contexts/CoursesProvider'; import { coursesContext } from '../../../contexts/CoursesProvider';
import { group } from 'console'; import { group } from 'console';
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
interface CourseCardProps { interface CourseCardProps {
onGroupMouseOver: (id: number, name: string) => void; onGroupMouseOver: (id: number, name: string) => void;
@ -14,7 +15,70 @@ interface CourseCardProps {
isSelected: boolean; isSelected: boolean;
} }
interface ClassExandIconProps {
isSelected: boolean;
}
const ClassStyled = styled.div`
display: flex;
min-height: 50px;
background-color: rgb(100, 181, 246) !important;
align-items: center;
justify-content: center;
flex-direction: column;
margin-top: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
cursor: pointer;
align-items: stretch;
`;
const ClassNameStyled = styled.div`
padding-top: 10px;
padding-bottom: 10px;
`;
const ClassGroupStyled = styled.div`
padding-top: 1px;
padding-bottom: 1px;
:hover {
cursor: pointer;
transition: 1s;
background-color: #8bc8fb;
}
`;
const ClassExandIconStyled = styled.img<ClassExandIconProps>`
margin-top: 5px;
width: 20px;
transition: 0.2s;
transform: ${props => props.isSelected ? 'scaleY(-1);' : 'scaleY(1);'};
`
const useStyles = makeStyles({
expanded: {
maxHeight: "244px",
overflowY: "auto",
},
'@global': {
'*::-webkit-scrollbar': {
width: '0.4em'
},
'*::-webkit-scrollbar-track': {
'-webkit-box-shadow': 'inset 0 0 6px rgba(1,0,0,0.1)'
},
'*::-webkit-scrollbar-thumb': {
borderRadius: "10px",
backgroundColor: '#d4b851',
outline: '1px solid slategrey'
}
}
});
export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) { export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelected }: CourseCardProps) {
const classes = useStyles();
const { addGroup, courses } = useContext(coursesContext)!; const { addGroup, courses } = useContext(coursesContext)!;
function onGroupClick(group: Group) { function onGroupClick(group: Group) {
@ -22,14 +86,13 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
} }
return ( return (
<div className="class" onClick={onCardClick} id={id}> <ClassStyled onClick={onCardClick} id={id}>
<div className="class__name">{course.name}</div> <ClassNameStyled>{course.name}</ClassNameStyled>
<Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit> <Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{courses.map((course, index) => ( {courses.map((course, index) => (
<> <>
{course.groups.map((group, index) => ( {course.groups.map((group, index) => (
<div <ClassGroupStyled
className="class__group"
key={index} key={index}
onMouseOver={() => onGroupMouseOver(group.id, course.name)} onMouseOver={() => onGroupMouseOver(group.id, course.name)}
onClick={() => onGroupClick(group)} onClick={() => onGroupClick(group)}
@ -37,14 +100,14 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
<p> <p>
{group.time} {group.room} <br></br> {group.lecturer} {group.time} {group.room} <br></br> {group.lecturer}
</p>{' '} </p>{' '}
</div> </ClassGroupStyled>
))} ))}
</> </>
))} ))}
</Collapse> </Collapse>
<div onClick={onCardClick} id={id}> <div onClick={onCardClick} id={id}>
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} /> <ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
</div>
</div> </div>
</ClassStyled>
); );
} }

View File

@ -1,71 +0,0 @@
.top-bar {
background-color: #ffdc61;
height: 80px;
padding: 5px;
font-family: comic sans MS;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
&__logo {
display: flex;
align-items: center;
flex-grow: 0.5;
justify-content: flex-start;
&-image {
width: 80px;
height: 80px;
}
}
&__input {
&-div {
width: 70%;
display: flex;
flex-grow: 3;
}
&-field {
width: 96%;
margin-top: 10px;
}
&-icon {
width: 35px;
}
}
&__icon {
width: 50px;
cursor: pointer;
&-box {
display: flex;
align-items: center;
justify-content: space-around;
flex-grow: 1.5;
}
}
&__menu{
margin-top: 25px;
}
}
@media only screen and (max-width: 670px) {
.top-bar {
&__tekst {
display: none;
}
&__icon {
width: 35px;
}
&__logo-image {
width: 60px;
height: 60px;
}
&__input-icon {
width: 25px;
}
}
}

View File

@ -1,13 +1,13 @@
import React from "react"; import React from 'react';
import "./index.scss"; import Transfer from './transfer.png';
import Transfer from "./transfer.png"; import Search from './search.svg';
import Search from "./search.svg"; import UK from './UK.png';
import UK from "./UK.png"; import PL from './PL.png';
import PL from "./PL.png"; import User from './user.png';
import User from "./user.png"; import CloseIcon from './close.svg';
import CloseIcon from "./close.svg"; import { Profile } from './Profile';
import { Profile } from "./Profile"; import { Results } from './Results';
import {Results} from "./Results"; import styled from 'styled-components';
interface TopBarProps { interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void; handleTransfer: (e: React.MouseEvent) => void;
@ -20,6 +20,72 @@ interface TopBarState {
anchorEl: HTMLElement | null; anchorEl: HTMLElement | null;
} }
const TopBarTekstStyled = styled.div`
@media only screen and (max-width: 670px) {
display: none;
}
`;
const TopBarStyled = styled.div`
background-color: #ffdc61;
height: 80px;
padding: 5px;
font-family: comic sans MS;
font-size: 24px;
font-weight: bold;
display: flex;
justify-content: space-between;
`;
const TopBarLogoStyled = styled.div`
display: flex;
align-items: center;
flex-grow: 0.5;
justify-content: flex-start;
`;
const TopBarLogoImageStyled = styled.img`
width: 80px;
height: 80px;
@media only screen and (max-width: 670px) {
width: 60px;
height: 60px;
}
`;
const TopBarInputDivStyled = styled.div`
width: 70%;
display: flex;
flex-grow: 3;
`;
const TopBarInputFieldStyled = styled.div`
width: 96%;
margin-top: 10px;
`;
const TopBarInputIconStyled = styled.img`
width: 35px;
@media only screen and (max-width: 670px) {
width: 25px;
}
`;
const TopBarIcon = styled.img`
width: 50px;
cursor: pointer;
@media only screen and (max-width: 670px) {
width: 35px;
}
`;
const TopBarIconBox = styled.div`
display: flex;
align-items: center;
justify-content: space-around;
flex-grow: 1.5;
`;
export default class TopBar extends React.Component<TopBarProps, TopBarState> { export default class TopBar extends React.Component<TopBarProps, TopBarState> {
constructor(props: TopBarProps) { constructor(props: TopBarProps) {
super(props); super(props);
@ -58,54 +124,29 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
render() { render() {
return ( return (
<div className="top-bar"> <TopBarStyled>
<div className="top-bar__logo"> <TopBarLogoStyled>
<img <TopBarLogoImageStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
className="top-bar__logo-image" <TopBarTekstStyled> plan na plan </TopBarTekstStyled>
alt="logo" </TopBarLogoStyled>
src="https://plannaplan.pl/img/logo.svg" <TopBarInputDivStyled>
/> <TopBarInputIconStyled alt="search" src={Search} />
<div className="top-bar__tekst"> plan na plan </div> <TopBarInputFieldStyled>
</div> <Results />
<div className="top-bar__input-div"> </TopBarInputFieldStyled>
<img <TopBarInputIconStyled alt="close" src={CloseIcon} />
className="top-bar__input-icon" </TopBarInputDivStyled>
alt="search" <TopBarIconBox>
src={Search} <TopBarIcon alt="transfer" src={Transfer} onClick={this.handleTransfer} />
/> <TopBarIcon alt="change_language" src={this.state.isPolish ? UK : PL} onClick={this.onLangChange} />
<div className="top-bar__input-field"><Results/></div> <TopBarIcon alt="profile" src={User} onClick={this.handleProfile} />
<img
className="top-bar__input-icon"
alt="close"
src={CloseIcon}
/>
</div>
<div className="top-bar__icon-box">
<img
className="top-bar__icon"
alt="transfer"
src={Transfer}
onClick={this.handleTransfer}
/>
<img
className="top-bar__icon"
alt="change_language"
src={this.state.isPolish ? UK : PL}
onClick={this.onLangChange}
/>
<img
className="top-bar__icon"
alt="profile"
src={User}
onClick={this.handleProfile}
/>
<Profile <Profile
anchorEl={this.state.anchorEl} anchorEl={this.state.anchorEl}
handleClose={this.handleClose} handleClose={this.handleClose}
handleLogout={this.props.handleLogout} handleLogout={this.props.handleLogout}
/> />
</div> </TopBarIconBox>
</div> </TopBarStyled>
); );
} }
} }

View File

@ -3,6 +3,9 @@ import Modal from "@material-ui/core/Modal";
import "./index.scss"; import "./index.scss";
import Fade from '@material-ui/core/Fade'; import Fade from '@material-ui/core/Fade';
import Input from "@material-ui/core/Input"; import Input from "@material-ui/core/Input";
import { makeStyles } from '@material-ui/core/styles';
import styled from 'styled-components';
interface TransferProps { interface TransferProps {
handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void; handleClose: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
isOpen: boolean; isOpen: boolean;
@ -10,6 +13,15 @@ interface TransferProps {
interface TransferState {} interface TransferState {}
const useStyles = makeStyles({
wrapper: {
display: "flex",
justifyContent: "center",
textAlign: "center",
alignItems: "center",
},
});
export default class Transfer extends React.Component< export default class Transfer extends React.Component<
TransferProps, TransferProps,
TransferState TransferState