styled components
This commit is contained in:
parent
738848b1bd
commit
4f7bc8aaa4
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -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
|
||||||
|
Loading…
Reference in New Issue
Block a user