Sunny Negi / Meteor-projects

Download as
Browse Code ยป

Commit 0f7bdd93ae1ad24b0b80e2aceddd0f2dd2abfe0a

Authored by Deepak
1 parent 4446d8fe04
Exists in master

added collapsible panel

Showing 2 changed files with 40 additions and 34 deletions   Show diff stats
client/stylesheets/custom.css
Diff comments   View file @0f7bdd9
1 body 1 body
2 { 2 {
3 background: -webkit-linear-gradient(#00b395, #00cdaa); 3 background: -webkit-linear-gradient(#00b395, #00cdaa);
4 background: -o-linear-gradient(#00b395, #00cdaa); 4 background: -o-linear-gradient(#00b395, #00cdaa);
5 background: linear-gradient(#00b395, #00cdaa); 5 background: linear-gradient(#00b395, #00cdaa);
6 } 6 }
7 7
8 table .dropdown span{ 8 table .dropdown span{
9 color: #000000; 9 color: #000000;
10 } 10 }
11 table .dropdown-toggle{ 11 table .dropdown-toggle{
12 cursor: pointer; 12 cursor: pointer;
13 } 13 }
14 table .dropdown .fa{ 14 table .dropdown .fa{
15 display: inline; 15 display: inline;
16 margin: 6px 6px; 16 margin: 6px 6px;
17 } 17 }
18 table .dropdown-menu { 18 table .dropdown-menu {
19 min-width: 100px; 19 min-width: 134px;
20 } 20 }
21 table .dropdown-menu > li { 21 table .dropdown-menu > li {
22 margin-bottom: 10px;
23 cursor: pointer; 22 cursor: pointer;
24
25 line-height: 1.5384616;
26 } 23 }
27 table .dropdown-menu > li:hover{ 24 table .dropdown-menu > li:hover{
28 text-decoration: none; 25 text-decoration: none;
29 color: #333333; 26 color: #333333;
30 background-color: #f5f5f5; 27 background-color: #f5f5f5;
31 } 28 }
32 table .dropdown-menu > li > span{ 29 table .dropdown-menu > li > span{
33 padding: 6px 16px; 30 padding: 6px 16px;
34 display: block; 31 display: block;
35 } 32 }
33 .panel-body{
34 max-height: 550px;
imports/client/views/org/admin/students/view/StudentTable.js
Diff comments   View file @0f7bdd9
1 import _ from 'lodash'; 1 import _ from 'lodash';
2 import { Meteor } from 'meteor/meteor'; 2 import { Meteor } from 'meteor/meteor';
3 3
4 import React, { Component } from 'react'; 4 import React, { Component } from 'react';
5 import { Link,browserHistory } from 'react-router'; 5 import { Link,browserHistory } from 'react-router';
6 import { FormGroup,Panel,Table, 6 import { FormGroup,Panel,Table,
7 ButtonToolbar,Modal, 7 ButtonToolbar,Modal,
8 FormControl,Glyphicon,Button } from 'react-bootstrap'; 8 FormControl,Glyphicon,Button, } from 'react-bootstrap';
9 import {moment} from 'meteor/momentjs:moment' 9 import {moment} from 'meteor/momentjs:moment'
10 import {StudentRow} from './StudentRow' 10 import {StudentRow} from './StudentRow'
11 11
12 export class StudentTable extends Component { 12 export class StudentTable extends Component {
13 13
14 constructor(props) { 14 constructor(props) {
15 super(props); 15 super(props);
16 this.state = { 16 this.state = {
17 show: false 17 show: false,
18 panleOpen: true,
18 }; 19 };
19 this.onUpdate = this.onUpdate.bind(this); 20 this.onUpdate = this.onUpdate.bind(this);
21 this.togglePanel = this.togglePanel.bind(this);
20 }; 22 };
21 onUpdate(key, value) { 23 onUpdate(key, value) {
22 this.setState({[key]: value}); 24 this.setState({[key]: value});
23 }; 25 };
24 26 togglePanel(){
27 this.setState({panleOpen: !this.state.panleOpen});
28 }
25 render() { 29 render() {
26 return ( 30 return (
27 <div className="panel panel-flat"> 31 <div className="panel panel-flat">
28 <div className="panel-heading"> 32 <div className="panel-heading">
29 <h5 className="panel-title">Student Details</h5> 33 <h5 className="panel-title">Student Details</h5>
30 <div className="heading-elements"> 34 <div className="heading-elements">
31 <ul className="icons-list"> 35 <ul className="icons-list">
32 <li><a data-action="collapse"></a></li> 36 <li onClick={this.togglePanel}><a data-action="collapse" className={this.state.panleOpen?"rotate-180":null}></a></li>
33 <li><a data-action="reload"></a></li>
34 </ul> 37 </ul>
35 </div> 38 </div>
36 </div> 39 </div>
37 <Table striped bordered condensed hover> 40 <Panel collapsible expanded={this.state.panleOpen}>
38 <thead> 41 <Table striped bordered condensed hover>
39 <tr> 42 <thead>
40 <th>First Name</th> 43 <tr>
41 <th>Last Name</th> 44 <th>First Name</th>
42 <th>Class</th> 45 <th>Last Name</th>
43 <th>DOB</th> 46 <th>Class</th>
44 <th>Status</th> 47 <th>DOB</th>
45 <th className="text-center">Actions</th> 48 <th>Status</th>
46 </tr> 49 <th className="text-center">Actions</th>
47 </thead> 50 </tr>
48 <tbody> 51 </thead>
49 { 52 <tbody>
50 this.props.students.map(function(student, i) 53 {
51 { 54 this.props.students.map(function(student, i)
52 return( 55 {
53 <StudentRow 56 return(
54 key = { i } 57 <StudentRow
55 student = {student} 58 key = { i }
56 /> 59 student = {student}
57 ) 60 />
58 }) 61 )
59 } 62 })
60 </tbody> 63 }
61 </Table> 64 </tbody>
65 </Table>
66 </Panel>
62 </div> 67 </div>
63 ); 68 );
64 }; 69 };
65 70
66 }; 71 };