css class component

This commit is contained in:
wrzesinski-hubert 2020-06-14 17:21:00 +02:00
parent 8f43a785b7
commit 4335a65a56
8 changed files with 53 additions and 18 deletions

View File

@ -7,9 +7,6 @@ body {
}
.wraper{
display: flex;
&__rightbar{
flex-grow: 1;
}
&__calendar{
width: 85%;
}

View File

@ -75,7 +75,8 @@ function App() {
<Schedule data={appointments} />
</div>
<div className="wraper__rightbar">
<RightBar onClassHover={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}} lectures={data}/>
<RightBar onClassHover={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}} lectures={data}
onClassClick={(group_id,class_id)=>{console.log("group id: ",group_id,"class id",class_id)}}/>
</div>
</div>

Binary file not shown.

After

Width:  |  Height:  |  Size: 535 B

View File

@ -6,7 +6,33 @@
justify-content: center;
flex-direction: column;
margin-top: 10px;
padding: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);
}
}

View File

@ -1,6 +1,7 @@
import React from "react";
import "./index.scss";
import Collapse from "@material-ui/core/Collapse";
import ExpandIcon from "./expand.png";
type ClassType = {
group_id: string;
@ -17,6 +18,7 @@ export type Group = {
interface ClassProps {
onClassHover: (group_id: String, class_id: String) => void;
onClassClick: (group_id: String, class_id: String) => void;
data: Group;
}
@ -42,11 +44,11 @@ export default class Class extends React.Component<ClassProps, ClassState> {
render() {
return (
<div className="class" onClick={this.Open}>
{this.props.data.classname}
<div className="class" >
<div className="class__name" onClick={this.Open}>{this.props.data.classname}</div>
<Collapse in={this.state.open} timeout="auto" unmountOnExit>
<div className="class__group">
{this.props.data.classgroups.map((classgroup, index) => (
{this.props.data.classgroups.map((classgroup, index) => (
<div className="class__group">
<p
onMouseOver={() =>
this.props.onClassHover(
@ -54,13 +56,22 @@ export default class Class extends React.Component<ClassProps, ClassState> {
this.props.data.classgroups[index].group_id
)
}
onClick={() =>
this.props.onClassClick(
this.props.data.classname,
this.props.data.classgroups[index].group_id
)
}
>
{classgroup.group_id} {classgroup.day} {classgroup.time}{" "}
{classgroup.room} <br></br> {classgroup.lecturer}
</p>
))}
</div>
</p>{" "}
</div>
))}
</Collapse>
<div onClick={this.Open}>
<img alt="expand" src={ExpandIcon} className={`class__expandIcon${this.state.open?"Rotate":""}`} />
</div>
</div>
);
}

View File

@ -2,7 +2,6 @@
padding-top: 10px;
padding-left: 15px;
padding-right: 15px;
align-items: center;
text-align: center;
font-family: Lato;
&__text {

View File

@ -4,7 +4,7 @@ import Class, { Group } from "../Class";
interface RightBarProps {
onClassHover: (group_id: String, class_id: String) => void;
// onClick(group_id:String,class_id:String):() => void;
onClassClick: (group_id: String, class_id: String) => void;
lectures: Array<Group>;
}
@ -24,6 +24,7 @@ export default class RightBar extends React.Component<
{this.props.lectures.map((classgroup, index) => (
<Class
onClassHover={this.props.onClassHover}
onClassClick={this.props.onClassClick}
data={classgroup}
key={index}
/>

View File

@ -45,9 +45,9 @@
}
input:focus {
-webkit-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
box-shadow: 0px 0px 18px 8px rgba(0,0,0,0.75);
-webkit-box-shadow: 0px 0px 18px 8px #ffae00;
-moz-box-shadow: 0px 0px 18px 8px #ffae00;
box-shadow: 0px 0px 18px 8px #ffae00;
}
}