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 './index.scss';
import Collapse from '@material-ui/core/Collapse';
import ExpandIcon from './expand.png';
import { Course, Group } from '../../../types/index';
import { coursesContext } from '../../../contexts/CoursesProvider';
import { group } from 'console';
import styled from 'styled-components';
import { makeStyles } from '@material-ui/core/styles';
interface CourseCardProps {
onGroupMouseOver: (id: number, name: string) => void;
@ -14,7 +15,70 @@ interface CourseCardProps {
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) {
const classes = useStyles();
const { addGroup, courses } = useContext(coursesContext)!;
function onGroupClick(group: Group) {
@ -22,14 +86,13 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
}
return (
<div className="class" onClick={onCardClick} id={id}>
<div className="class__name">{course.name}</div>
<Collapse className="expanded" in={isSelected} timeout="auto" unmountOnExit>
<ClassStyled onClick={onCardClick} id={id}>
<ClassNameStyled>{course.name}</ClassNameStyled>
<Collapse className={classes.expanded} in={isSelected} timeout="auto" unmountOnExit>
{courses.map((course, index) => (
<>
{course.groups.map((group, index) => (
<div
className="class__group"
<ClassGroupStyled
key={index}
onMouseOver={() => onGroupMouseOver(group.id, course.name)}
onClick={() => onGroupClick(group)}
@ -37,14 +100,14 @@ export function CourseCard({ onGroupMouseOver, onCardClick, course, id, isSelect
<p>
{group.time} {group.room} <br></br> {group.lecturer}
</p>{' '}
</div>
</ClassGroupStyled>
))}
</>
))}
</Collapse>
<div onClick={onCardClick} id={id}>
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${isSelected ? 'Rotate' : ''}`} />
<ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
</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,111 +1,152 @@
import React from "react";
import "./index.scss";
import Transfer from "./transfer.png";
import Search from "./search.svg";
import UK from "./UK.png";
import PL from "./PL.png";
import User from "./user.png";
import CloseIcon from "./close.svg";
import { Profile } from "./Profile";
import {Results} from "./Results";
import React from 'react';
import Transfer from './transfer.png';
import Search from './search.svg';
import UK from './UK.png';
import PL from './PL.png';
import User from './user.png';
import CloseIcon from './close.svg';
import { Profile } from './Profile';
import { Results } from './Results';
import styled from 'styled-components';
interface TopBarProps {
handleTransfer: (e: React.MouseEvent) => void;
onLangChange: (lang: boolean) => void;
handleLogout: () => void;
handleTransfer: (e: React.MouseEvent) => void;
onLangChange: (lang: boolean) => void;
handleLogout: () => void;
}
interface TopBarState {
isPolish: boolean;
anchorEl: HTMLElement | null;
isPolish: boolean;
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> {
constructor(props: TopBarProps) {
super(props);
this.handleProfile = this.handleProfile.bind(this);
this.handleClose = this.handleClose.bind(this);
this.onLangChange = this.onLangChange.bind(this);
this.handleTransfer = this.handleTransfer.bind(this);
this.state = {
isPolish: true,
anchorEl: null,
};
}
constructor(props: TopBarProps) {
super(props);
this.handleProfile = this.handleProfile.bind(this);
this.handleClose = this.handleClose.bind(this);
this.onLangChange = this.onLangChange.bind(this);
this.handleTransfer = this.handleTransfer.bind(this);
this.state = {
isPolish: true,
anchorEl: null,
};
}
handleTransfer(e: React.MouseEvent) {
this.props.handleTransfer(e);
}
handleTransfer(e: React.MouseEvent) {
this.props.handleTransfer(e);
}
onLangChange(e: React.MouseEvent) {
this.setState({
isPolish: !this.state.isPolish,
});
this.props.onLangChange(this.state.isPolish);
}
onLangChange(e: React.MouseEvent) {
this.setState({
isPolish: !this.state.isPolish,
});
this.props.onLangChange(this.state.isPolish);
}
handleProfile(event: React.MouseEvent<HTMLImageElement>) {
this.setState({
anchorEl: event.currentTarget,
});
}
handleProfile(event: React.MouseEvent<HTMLImageElement>) {
this.setState({
anchorEl: event.currentTarget,
});
}
handleClose() {
this.setState({
anchorEl: null,
});
}
handleClose() {
this.setState({
anchorEl: null,
});
}
render() {
return (
<div className="top-bar">
<div className="top-bar__logo">
<img
className="top-bar__logo-image"
alt="logo"
src="https://plannaplan.pl/img/logo.svg"
/>
<div className="top-bar__tekst"> plan na plan </div>
</div>
<div className="top-bar__input-div">
<img
className="top-bar__input-icon"
alt="search"
src={Search}
/>
<div className="top-bar__input-field"><Results/></div>
<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
anchorEl={this.state.anchorEl}
handleClose={this.handleClose}
handleLogout={this.props.handleLogout}
/>
</div>
</div>
);
}
render() {
return (
<TopBarStyled>
<TopBarLogoStyled>
<TopBarLogoImageStyled alt="logo" src="https://plannaplan.pl/img/logo.svg" />
<TopBarTekstStyled> plan na plan </TopBarTekstStyled>
</TopBarLogoStyled>
<TopBarInputDivStyled>
<TopBarInputIconStyled alt="search" src={Search} />
<TopBarInputFieldStyled>
<Results />
</TopBarInputFieldStyled>
<TopBarInputIconStyled alt="close" src={CloseIcon} />
</TopBarInputDivStyled>
<TopBarIconBox>
<TopBarIcon alt="transfer" src={Transfer} onClick={this.handleTransfer} />
<TopBarIcon alt="change_language" src={this.state.isPolish ? UK : PL} onClick={this.onLangChange} />
<TopBarIcon alt="profile" src={User} onClick={this.handleProfile} />
<Profile
anchorEl={this.state.anchorEl}
handleClose={this.handleClose}
handleLogout={this.props.handleLogout}
/>
</TopBarIconBox>
</TopBarStyled>
);
}
}

View File

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