Updated styling of board, Added text labels,

Added days ago (status aware)
zoeyfrisart · Nov 6, 2017 · d610742 · d610742
1 parent 35af81d
commit d610742
Show file tree

Hide file tree

Showing 12 changed files with 313 additions and 88 deletions.
diff --git a/assets/img/none-assigned.png b/assets/img/none-assigned.png
diff --git a/assets/img/none.png b/assets/img/none.png
diff --git a/components/addItem/style.css b/components/addItem/style.css
@@ -26,7 +26,7 @@
  box-shadow: none;
  outline: none;
  border: none;
- border-left: 7.5px solid #eee;
+ border-left: 3.5px solid #eee;
  border-top: 1px solid #eee;
  border-right: 1px solid #eee;
  border-bottom: 1px solid #eee;

diff --git a/components/groups/index.js b/components/groups/index.js
@@ -101,9 +101,15 @@ export default class BoardGroup extends Component {
  <table cellpadding="2" cellSpacing="2" class={style.group}>
  <thead class={style.tableHead} style={`display: table-header-group;`}>
  <tr>
- <th scope="row" style={`text-align: left; font-size: 18px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0;`}>
+ <th scope="row" style={`text-align: left; font-size: 22px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0; padding-left: 12px;`}>
  <input class={style.inputHeader} style={`color: ${this.props.details.color}`} name="name" onChange={(e) => this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" />
  </th>
+ </tr>
+ <tr class={style.tableH}>
+ {/* <th scope="row" style={`text-align: left; font-size: 18px; color: ${this.props.details.color}; width: 25%; min-width: 300px; margin: 0 1px 0 0;`}>
+ <input class={style.inputHeader} style={`color: ${this.props.details.color}`} name="name" onChange={(e) => this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" />
+ </th> */}
+ <th style={`width: 25%; min-width: 300px;`}>opdracht</th>
  <th style={`width: 5%; min-width: 60px; max-width: 90px;`}>Door wie</th>
  <th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p2</th>
  <th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p3</th>

diff --git a/components/groups/style.css b/components/groups/style.css
@@ -22,6 +22,9 @@
 .group{
  width: 100%;
  display: table;
+ padding: 3px;
+ box-sizing: border-box;
+ box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
 }
 
 .group thead{
@@ -116,4 +119,12 @@
 
 .tdAddItem{
  padding: 0;
+}
+
+.tableH{
+ background: #f8f8f8;
+}
+
+.tableH th{
+ border-bottom: 1px solid #e9e9e9;
 }
diff --git a/components/item/index.js b/components/item/index.js
@@ -2,10 +2,16 @@ import { h, Component } from 'preact';
 import style from './style';
 import SelectPerson from '../selectPerson';
 import SelectStatus from '../selectStatus';
+import moment from 'moment';
 
 import trashIcon from '../../assets/img/trash-alt.svg';
 
 export default class Item extends Component {
+ constructor() {
+ super();
+
+ this.checkIfPast = this.checkIfPast.bind(this);
+ }
  handleChange(e, key) {
  const item = this.props.details;
  const updatedOpdracht = {
@@ -15,125 +21,180 @@ export default class Item extends Component {
  this.props.updateItem(key, updatedOpdracht);
  }
 
+ checkIfPast() {
+ let timeAg = moment(this.props.details.deadline, 'DD/MM/YY').fromNow();
+ if ( timeAg.indexOf('ago') >= 0 && this.props.details.status !== 'Done'){
+ return <span class={style.inPast}>{timeAg}</span>;
+ }
+ else if ( timeAg.indexOf('ago') >= 0){
+ return <span class={style.inPastDone}>{timeAg}</span>;
+ }
+ else if (timeAg.indexOf('Invalid date') >= 0) {
+ return false;
+ }
+ return timeAg;
+ }
+
 
  render() {
  const details = this.props.details;
  const index = this.props.index;
  return (
  <tr class={style.tableRow}>
  <td style={`width: 25%; min-width: 300px;`}>
- <div class={style.innerWrap} style={`border-left: 7.5px solid ${this.props.color}`}>
- <input
- class={style.inputDesc}
- name="desc"
- onChange={(e) => this.handleChange(e, this.props.index)}
- type="text"
- value={details.desc}
- placeholder="This is a example description (Click to edit)"
- />
+ <div class={style.innerWrap} style={`border-left: 3.5px solid ${this.props.color}`}>
+ <div class={style.subRow}>
+ <input
+ class={style.inputDesc}
+ name="desc"
+ onChange={(e) => this.handleChange(e, this.props.index)}
+ type="text"
+ value={details.desc}
+ placeholder="This is a example description (Click to edit)"
+ />
+ </div>
+ <div class={style.subRow} />
  </div>
  </td>
  <td style={`min-width: 60px; width: 5%; max-width: 90px;`}>
  <div class={style.innerWrap}>
- <SelectPerson
- personI={`p1`}
- index={this.props.index}
- details={this.props.details}
- updateItem={this.props.updateItem}
- teamname={this.props.teamname}
- boardName={this.props.boardName}
- groupI={this.props.groupI}
- />
+ <div class={style.subRow}>
+ <SelectPerson
+ personI={`p1`}
+ index={this.props.index}
+ details={this.props.details}
+ updateItem={this.props.updateItem}
+ teamname={this.props.teamname}
+ boardName={this.props.boardName}
+ groupI={this.props.groupI}
+ />
+ </div>
+ <div class={style.subRow} >
+ <p>{details.p1}</p>
+ </div>
  </div>
  </td>
  <td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
  <div class={style.innerWrap}>
- <SelectPerson
- personI={`p2`}
- index={this.props.index}
- details={this.props.details}
- updateItem={this.props.updateItem}
- teamname={this.props.teamname}
- boardName={this.props.boardName}
- groupI={this.props.groupI}
- />
+ <div class={style.subRow}>
+ <SelectPerson
+ personI={`p2`}
+ index={this.props.index}
+ details={this.props.details}
+ updateItem={this.props.updateItem}
+ teamname={this.props.teamname}
+ boardName={this.props.boardName}
+ groupI={this.props.groupI}
+ />
+ </div>
+ <div class={style.subRow} >
+ <p>{details.p2}</p>
+ </div>
  </div>
  </td>
  <td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
  <div class={style.innerWrap}>
- <SelectPerson
- personI={`p3`}
- index={this.props.index}
- details={this.props.details}
- updateItem={this.props.updateItem}
- teamname={this.props.teamname}
- boardName={this.props.boardName}
- groupI={this.props.groupI}
- />
+ <div class={style.subRow} >
+ <SelectPerson
+ personI={`p3`}
+ index={this.props.index}
+ details={this.props.details}
+ updateItem={this.props.updateItem}
+ teamname={this.props.teamname}
+ boardName={this.props.boardName}
+ groupI={this.props.groupI}
+ />
+ </div>
+ <div class={style.subRow} >
+ <p>{details.p3}</p>
+ </div>
  </div>
  </td>
  <td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
  <div class={style.innerWrap}>
- <SelectPerson
- personI={`p4`}
- index={this.props.index}
- details={this.props.details}
- updateItem={this.props.updateItem}
- teamname={this.props.teamname}
- boardName={this.props.boardName}
- groupI={this.props.groupI}
- />
+ <div class={style.subRow}>
+ <SelectPerson
+ personI={`p4`}
+ index={this.props.index}
+ details={this.props.details}
+ updateItem={this.props.updateItem}
+ teamname={this.props.teamname}
+ boardName={this.props.boardName}
+ groupI={this.props.groupI}
+ />
+ </div>
+ <div class={style.subRow} >
+ <p>{details.p4}</p>
+ </div>
  </div>
  </td>
  <td style={`min-width: 130px;`}>
  <div class={style.innerWrap}>
- <SelectStatus
- statusI={`status`}
- formId={`${details.in1d + 4}`}
- index={this.props.index}
- details={this.props.details}
- updateItem={this.props.updateItem}
- boardName={this.props.boardName}
- groupI={this.props.groupI}
- />
+ <div class={style.subRow} >
+ <SelectStatus
+ statusI={`status`}
+ formId={`${details.in1d + 4}`}
+ index={this.props.index}
+ details={this.props.details}
+ updateItem={this.props.updateItem}
+ boardName={this.props.boardName}
+ groupI={this.props.groupI}
+ />
+ </div>
+ <div class={style.subRow} />
  </div>
  </td>
  <td style={`min-width: 100px;`}>
  <div class={style.innerWrap}>
- <input
- autocomplete="nope"
- class={style.deadline}
- name="finishGoal"
- onChange={(e) => this.handleChange(e, this.props.index)}
- type="text"
- value={details.finishGoal}
- placeholder="dd/mm/yy"
- />
+ <div class={style.subRow} >
+ <input
+ autocomplete="nope"
+ class={style.deadline}
+ name="finishGoal"
+ onChange={(e) => this.handleChange(e, this.props.index)}
+ type="text"
+ value={details.finishGoal}
+ placeholder="dd/mm/yy"
+ />
+ </div>
+ <div class={style.subRow} />
  </div>
  </td>
  <td style={`min-width: 100px;`}>
  <div class={style.innerWrap}>
- <input
- autocomplete="nope"
- class={style.deadline}
- name="deadline"
- onChange={(e) => this.handleChange(e, this.props.index)}
- type="date"
- value={details.deadline}
- placeholder="dd/mm/yy"
- />
+ <div class={style.subRow} >
+ <input
+ autocomplete="nope"
+ class={style.deadline}
+ name="deadline"
+ onChange={(e) => this.handleChange(e, this.props.index)}
+ type="text"
+ value={details.deadline}
+ placeholder="dd/mm/yy"
+ />
+ </div>
+ <div class={style.subRow}>
+ <p>
+ {
+ this.checkIfPast()
+ }
+ </p>
+ </div>
  </div>
  </td>
  <td style={`min-width: 100px;`}>
  <div class={style.innerWrap}>
- <input
- class={style.tookTime}
- name="tooktime"
- onChange={(e) => this.handleChange(e, this.props.index)}
- type="number"
- value={details.tooktime}
- placeholder="000"
- />
+ <div class={style.subRow} >
+ <input
+ class={style.tookTime}
+ name="tooktime"
+ onChange={(e) => this.handleChange(e, this.props.index)}
+ type="number"
+ value={details.tooktime}
+ placeholder="tijd in uren"
+ />
+ </div>
+ <div class={style.subRow} />
  </div>
  </td>
  <td style={`width: 3%;`}>