rightbar and transfer
This commit is contained in:
parent
69453aa2ce
commit
3fdb9f4e74
@ -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{
|
||||||
|
@ -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}
|
||||||
|
13
src/components/Class/index.scss
Normal file
13
src/components/Class/index.scss
Normal 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;
|
||||||
|
}
|
42
src/components/Class/index.tsx
Normal file
42
src/components/Class/index.tsx
Normal 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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
@ -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;
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -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{
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user