css class component
This commit is contained in:
parent
8f43a785b7
commit
4335a65a56
@ -7,9 +7,6 @@ body {
|
||||
}
|
||||
.wraper{
|
||||
display: flex;
|
||||
&__rightbar{
|
||||
flex-grow: 1;
|
||||
}
|
||||
&__calendar{
|
||||
width: 85%;
|
||||
}
|
||||
|
@ -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>
|
||||
|
||||
|
BIN
src/components/Class/expand.png
Normal file
BIN
src/components/Class/expand.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 535 B |
@ -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);
|
||||
}
|
||||
}
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
@ -2,7 +2,6 @@
|
||||
padding-top: 10px;
|
||||
padding-left: 15px;
|
||||
padding-right: 15px;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
font-family: Lato;
|
||||
&__text {
|
||||
|
@ -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}
|
||||
/>
|
||||
|
@ -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;
|
||||
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user