From 4335a65a56e9bc434504e62ad145e961c3aee264 Mon Sep 17 00:00:00 2001
From: wrzesinski-hubert <wrzesinski.hubert@gmail.com>
Date: Sun, 14 Jun 2020 17:21:00 +0200
Subject: [PATCH] css class component

---
 src/App.scss                       |   3 ---
 src/App.tsx                        |   3 ++-
 src/components/Class/expand.png    | Bin 0 -> 535 bytes
 src/components/Class/index.scss    |  30 +++++++++++++++++++++++++++--
 src/components/Class/index.tsx     |  25 +++++++++++++++++-------
 src/components/RightBar/index.scss |   1 -
 src/components/RightBar/index.tsx  |   3 ++-
 src/components/Transfer/index.scss |   6 +++---
 8 files changed, 53 insertions(+), 18 deletions(-)
 create mode 100644 src/components/Class/expand.png

diff --git a/src/App.scss b/src/App.scss
index 0887f99..5204e1a 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -7,9 +7,6 @@ body {
   }
   .wraper{
     display: flex;
-    &__rightbar{
-      flex-grow: 1;
-    }
     &__calendar{
       width: 85%;
     }
diff --git a/src/App.tsx b/src/App.tsx
index 5e976e8..933d34b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -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>
 
diff --git a/src/components/Class/expand.png b/src/components/Class/expand.png
new file mode 100644
index 0000000000000000000000000000000000000000..239474f92cd6e1e7dc3dca1926ca72b4c97dbd11
GIT binary patch
literal 535
zcmV+y0_gpTP)<h;3K|Lk000e1NJLTq001-q001-y1^@s6#dsU*00006VoOIv0RI60
z0RN!9r;`8x0nAB6K~!jg?U>0*13?gmzo_pd;>9NrFRr-nMvWWdh9C$c2qK6ef`}K<
zXYrog^{6M~%`6^f8k0E5bUD+R2=zfhE>-n^6PR=w6h%=KMNt%`#pwi|fh^FQaF$AX
zfgE18PTQt#-~%Z8RRAVjq!Tg(eDRa(6X*$Rs+BQS1g0DXwPA#687rwSARo|FDK+OX
zbUo($-Su+i@v{FS*PzK%30QI(znUd~XIQRmQ1iP*qmjxulrUtllPLplK?Bm3&8D`T
zsd%#`S<-P0I&>hjEzEEbHgHoo@H9r59pUbM+rb;c!Es0(33u*E7pw~xoJEj17Vg^p
z>!L;M-!x_597qXwoCxNZ@E&v|7LZ9@V<(jYE`%~`QDqGC$fRz7wh)<1p-k+*eNw4g
zf~8Wxl~86iZW%+^xvI7vfR2j(cHmAZv*Jp|FpEs;5l^ZexEIPSyOuFXUldP%Nn{q9
zC1aRD_DxA->YmM9GfliwiOLw_l4|yUt%ghyO{#=<DrqT(@h()PGDTpr`El*2y_pHC
zR=H7X$RKu71z<d(jAFv1{*{bjfMBTtFqUAhNc2-JRRBg4O%wxtz$@_Le^wMlQ4~c<
Zh;M{J0AItqBr*U1002ovPDHLkV1fug<C*{f

literal 0
HcmV?d00001

diff --git a/src/components/Class/index.scss b/src/components/Class/index.scss
index cdc6976..93d091e 100644
--- a/src/components/Class/index.scss
+++ b/src/components/Class/index.scss
@@ -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;
-  }
\ No newline at end of file
+    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);
+    }
+  }
diff --git a/src/components/Class/index.tsx b/src/components/Class/index.tsx
index d0ed795..4ea41be 100644
--- a/src/components/Class/index.tsx
+++ b/src/components/Class/index.tsx
@@ -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>
     );
   }
diff --git a/src/components/RightBar/index.scss b/src/components/RightBar/index.scss
index 9840449..75411bb 100644
--- a/src/components/RightBar/index.scss
+++ b/src/components/RightBar/index.scss
@@ -2,7 +2,6 @@
     padding-top: 10px;
     padding-left: 15px;
     padding-right: 15px;
-    align-items: center;
     text-align: center;
     font-family: Lato;
     &__text {
diff --git a/src/components/RightBar/index.tsx b/src/components/RightBar/index.tsx
index 9e442ce..3d1377a 100644
--- a/src/components/RightBar/index.tsx
+++ b/src/components/RightBar/index.tsx
@@ -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}
           />
diff --git a/src/components/Transfer/index.scss b/src/components/Transfer/index.scss
index 12d45fe..06a10f2 100644
--- a/src/components/Transfer/index.scss
+++ b/src/components/Transfer/index.scss
@@ -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;
     
   }
 }