styled components
This commit is contained in:
wrzesinski-hubert
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 './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' : ''}`} />
|
||||
</div>
|
||||
<ClassExandIconStyled isSelected={isSelected} alt="expand" src={ExpandIcon} />
|
||||
</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 "./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;
|
||||
@ -20,6 +20,72 @@ interface TopBarState {
|
||||
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);
|
||||
@ -58,54 +124,29 @@ export default class TopBar extends React.Component<TopBarProps, TopBarState> {
|
||||
|
||||
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}
|
||||
/>
|
||||
<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}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</TopBarIconBox>
|
||||
</TopBarStyled>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user