diff --git a/app/static/app/js/components/ProjectList.jsx b/app/static/app/js/components/ProjectList.jsx index 452765ad..6a4b35bf 100644 --- a/app/static/app/js/components/ProjectList.jsx +++ b/app/static/app/js/components/ProjectList.jsx @@ -46,11 +46,11 @@ class ProjectList extends React.Component { return (
Loading projects...
); } else if (this.state.projects){ - return (
+ return (
); + ); }else if (this.state.error){ return (
An error occurred: {this.state.error}
); }else{ diff --git a/app/static/app/js/components/ProjectListItem.jsx b/app/static/app/js/components/ProjectListItem.jsx index 2dc26c55..0dc0295e 100644 --- a/app/static/app/js/components/ProjectListItem.jsx +++ b/app/static/app/js/components/ProjectListItem.jsx @@ -2,26 +2,49 @@ import React from 'react'; import ProjectListItemPanel from './ProjectListItemPanel'; class ProjectListItem extends React.Component { - constructor(){ - super(); + constructor(props){ + super(props); + this.state = { - collapsed: true + showPanel: false }; - this.handleClick = this.handleClick.bind(this); + this.togglePanel = this.togglePanel.bind(this); } - handleClick(){ - this.state.collapsed = !this.state.collapsed; + togglePanel(){ + this.setState({ + showPanel: !this.state.showPanel + }); } render() { return ( -
- {this.props.data.name} {this.props.data.created_at} +
  • +
    + + + + +
    - {this.props.collapsed ? "" : } -
  • + + + {this.props.data.name} + + + {this.state.showPanel ? : ""} + ); } } diff --git a/app/static/app/js/components/ProjectListItemPanel.jsx b/app/static/app/js/components/ProjectListItemPanel.jsx index f4122340..1cc25b18 100644 --- a/app/static/app/js/components/ProjectListItemPanel.jsx +++ b/app/static/app/js/components/ProjectListItemPanel.jsx @@ -7,8 +7,8 @@ class ProjectListItemPanel extends React.Component { render() { return ( -
    - Sup! +
    + TODO
    ); } diff --git a/app/static/app/js/css/Dashboard.scss b/app/static/app/js/css/Dashboard.scss index 0d005282..06afac31 100644 --- a/app/static/app/js/css/Dashboard.scss +++ b/app/static/app/js/css/Dashboard.scss @@ -1,3 +1,9 @@ #dashboard-app{ - background-color: yellow; + .project-list-item{ + min-height: 60px; + } + + .project-list-item-panel{ + min-height: 100px; + } } \ No newline at end of file