rightbar and transfer

This commit is contained in:
wrzesinski-hubert 2020-06-09 20:07:54 +02:00
parent 69453aa2ce
commit 3fdb9f4e74
8 changed files with 99 additions and 46 deletions

View File

@ -2,6 +2,9 @@ body {
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
} }
body::-webkit-scrollbar {
display: none;
}
.wraper{ .wraper{
display: flex; display: flex;
&__rightbar{ &__rightbar{

View File

@ -114,7 +114,7 @@ export default class Calendar extends React.PureComponent<
startDayHour={8} startDayHour={8}
endDayHour={20} endDayHour={20}
excludedDays={[0, 6]} excludedDays={[0, 6]}
cellDuration={60} cellDuration={45}
dayScaleCellComponent={DayScaleCell} dayScaleCellComponent={DayScaleCell}
timeTableLayoutComponent={TimeTableLayout} timeTableLayoutComponent={TimeTableLayout}
timeTableCellComponent={TimeTableCell} timeTableCellComponent={TimeTableCell}

View File

@ -0,0 +1,13 @@
.paper {
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:10px;
border-radius: 10px;
width: 90%;
cursor: pointer;
}

View File

@ -0,0 +1,42 @@
import React from "react";
import "./index.scss";
import Collapse from '@material-ui/core/Collapse';
interface ClassProps {
name:string;
}
interface ClassState {
open: boolean;
}
export default class Class extends React.Component<ClassProps, ClassState> {
constructor(props: ClassProps) {
super(props);
this.Open = this.Open.bind(this);
this.state={
open:false,
};
}
Open(e: React.MouseEvent) {
this.setState({
open:!this.state.open
});
}
render() {
return (
<div className="paper" onClick={this.Open}>{this.props.name}
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
<p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
<p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
<p>1CB Pn 10.00 A0-1<br></br> dr inż. Michał Ren</p>
</Collapse></div>
);
}
}

View File

@ -8,15 +8,6 @@
text-align: center; text-align: center;
font-family: Lato; font-family: Lato;
} }
.paper {
display: flex;
margin-top: 10px;
height: 60px;
width: 90%;
background-color: #d4a8ff !important;
align-items: center;
justify-content: center;
}
.text { .text {
border-bottom: 1px solid; border-bottom: 1px solid;
} }

View File

@ -1,6 +1,7 @@
import React from "react"; import React from "react";
import "./index.scss"; import "./index.scss";
import Paper from "@material-ui/core/Paper"; import Class from "../Class";
interface RightBarProps {} interface RightBarProps {}
interface RightBarState {} interface RightBarState {}
@ -9,7 +10,6 @@ export default class RightBar extends React.Component<
RightBarProps, RightBarProps,
RightBarState RightBarState
> { > {
render() { render() {
return ( return (
<div className="shop-cart"> <div className="shop-cart">
@ -17,16 +17,14 @@ export default class RightBar extends React.Component<
Hubert Wrzesiński<br></br> Hubert Wrzesiński<br></br>
Semestr zimowy 2020/2021 Semestr zimowy 2020/2021
</div> </div>
<Paper className="paper">1</Paper> <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
<Paper className="paper">2</Paper> <Class name="Algorytmy grafowe" />
<Paper className="paper">3</Paper> <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
<Paper className="paper">4</Paper> <Class name="Algorytmy grafowe" />
<Paper className="paper">5</Paper> <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
<Paper className="paper">6</Paper> <Class name="Algorytmy grafowe" />
<Paper className="paper">7</Paper> <Class name="E-gospodarka - narzędzia i bezpieczeństwo" />
<Paper className="paper">8</Paper> <Class name="Algorytmy grafowe" />
<Paper className="paper">9</Paper>
<Paper className="paper">10</Paper>
</div> </div>
); );
} }

View File

@ -1,6 +1,5 @@
.wrapper { .wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
align-items: center; align-items: center;
@ -8,31 +7,34 @@
.transfer { .transfer {
display: flex; display: flex;
flex-wrap: wrap;
width: 80%; width: 80%;
height: 70%; height: 70%;
padding-top: 40px; padding-top: 40px;
background: rgba(255, 220, 97, 0.48); background: rgba(255, 220, 97, 0.48);
border: 1px solid #000000; border: 1px solid #000000;
justify-content: center; &__left {
display: flex;
justify-content: space-around;
flex-grow: 1;
}
&__right {
flex-grow: 4;
}
&__text { &__text {
font-family: Lato; font-family: Lato;
font-size: 50px; font-size: 50px;
} }
&__input{ &__input {
width: 300px; width: 300px;
height: 45px; height: 45px;
background: #D7A700; background: #d7a700;
} }
&__give{ &__give {
flex-grow: 1; }
&__recieve {
}
&__proposition {
}
&__add {
} }
&__recieve{
flex-grow: 1;
}
&__proposition{
flex-grow: 4;
}
&__add{
}
} }

View File

@ -34,6 +34,8 @@ export default class Transfer extends React.Component<
aria-describedby="simple-modal-description" aria-describedby="simple-modal-description"
> >
<div className="transfer"> <div className="transfer">
<div className="transfer__left">
{/* <button className="transfer__add">chuj</button> */}
<div className="transfer__give"> <div className="transfer__give">
<div className="transfer__text">Oddam</div> <div className="transfer__text">Oddam</div>
<input className="transfer__input"></input> <input className="transfer__input"></input>
@ -42,8 +44,10 @@ export default class Transfer extends React.Component<
<div className="transfer__text">Przyjmę</div> <div className="transfer__text">Przyjmę</div>
<input className="transfer__input"></input> <input className="transfer__input"></input>
</div> </div>
</div>
<div className="transfer__right">
<div className="transfer__proposition"></div> <div className="transfer__proposition"></div>
<button className="transfer__add">chuj</button> </div>
</div> </div>
</Modal> </Modal>
</div> </div>