Skip to content

Commit 427b327

Browse files
author
Yannick
authored
Merge pull request #2 from yannick1691/dev
Updated styling of board and added Text labels
2 parents a3347bb + d610742 commit 427b327

File tree

12 files changed

+313
-88
lines changed

12 files changed

+313
-88
lines changed

‎assets/img/none-assigned.png‎

-988 Bytes
Loading

‎assets/img/none.png‎

1.2 KB
Loading

‎components/addItem/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@
2626
box-shadow: none;
2727
outline: none;
2828
border: none;
29-
border-left: 7.5px solid #eee;
29+
border-left: 3.5px solid #eee;
3030
border-top: 1px solid #eee;
3131
border-right: 1px solid #eee;
3232
border-bottom: 1px solid #eee;

‎components/groups/index.js‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -101,9 +101,15 @@ export default class BoardGroup extends Component {
101101
<table cellpadding="2" cellSpacing="2" class={style.group}>
102102
<thead class={style.tableHead} style={`display: table-header-group;`}>
103103
<tr>
104-
<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;`}>
104+
<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;`}>
105105
<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)" />
106106
</th>
107+
</tr>
108+
<tr class={style.tableH}>
109+
{/* <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;`}>
110+
<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)" />
111+
</th> */}
112+
<th style={`width: 25%; min-width: 300px;`}>opdracht</th>
107113
<th style={`width: 5%; min-width: 60px; max-width: 90px;`}>Door wie</th>
108114
<th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p2</th>
109115
<th style={`width: 5%; min-width: 35px; max-width: 60px;`}>p3</th>

‎components/groups/style.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,9 @@
2222
.group{
2323
width: 100%;
2424
display: table;
25+
padding: 3px;
26+
box-sizing: border-box;
27+
box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 1px 3px 0px rgba(0, 0, 0, 0.06);
2528
}
2629

2730
.group thead{
@@ -116,4 +119,12 @@
116119

117120
.tdAddItem{
118121
padding: 0;
122+
}
123+
124+
.tableH{
125+
background: #f8f8f8;
126+
}
127+
128+
.tableH th{
129+
border-bottom: 1px solid #e9e9e9;
119130
}

‎components/item/index.js‎

Lines changed: 141 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,16 @@ import { h, Component } from 'preact';
22
import style from './style';
33
import SelectPerson from '../selectPerson';
44
import SelectStatus from '../selectStatus';
5+
import moment from 'moment';
56

67
import trashIcon from '../../assets/img/trash-alt.svg';
78

89
export default class Item extends Component {
10+
constructor() {
11+
super();
12+
13+
this.checkIfPast = this.checkIfPast.bind(this);
14+
}
915
handleChange(e, key) {
1016
const item = this.props.details;
1117
const updatedOpdracht = {
@@ -15,125 +21,180 @@ export default class Item extends Component {
1521
this.props.updateItem(key, updatedOpdracht);
1622
}
1723

24+
checkIfPast() {
25+
let timeAg = moment(this.props.details.deadline, 'DD/MM/YY').fromNow();
26+
if ( timeAg.indexOf('ago') >= 0 && this.props.details.status !== 'Done'){
27+
return <span class={style.inPast}>{timeAg}</span>;
28+
}
29+
else if ( timeAg.indexOf('ago') >= 0){
30+
return <span class={style.inPastDone}>{timeAg}</span>;
31+
}
32+
else if (timeAg.indexOf('Invalid date') >= 0) {
33+
return false;
34+
}
35+
return timeAg;
36+
}
37+
1838

1939
render() {
2040
const details = this.props.details;
2141
const index = this.props.index;
2242
return (
2343
<tr class={style.tableRow}>
2444
<td style={`width: 25%; min-width: 300px;`}>
25-
<div class={style.innerWrap} style={`border-left: 7.5px solid ${this.props.color}`}>
26-
<input
27-
class={style.inputDesc}
28-
name="desc"
29-
onChange={(e) => this.handleChange(e, this.props.index)}
30-
type="text"
31-
value={details.desc}
32-
placeholder="This is a example description (Click to edit)"
33-
/>
45+
<div class={style.innerWrap} style={`border-left: 3.5px solid ${this.props.color}`}>
46+
<div class={style.subRow}>
47+
<input
48+
class={style.inputDesc}
49+
name="desc"
50+
onChange={(e) => this.handleChange(e, this.props.index)}
51+
type="text"
52+
value={details.desc}
53+
placeholder="This is a example description (Click to edit)"
54+
/>
55+
</div>
56+
<div class={style.subRow} />
3457
</div>
3558
</td>
3659
<td style={`min-width: 60px; width: 5%; max-width: 90px;`}>
3760
<div class={style.innerWrap}>
38-
<SelectPerson
39-
personI={`p1`}
40-
index={this.props.index}
41-
details={this.props.details}
42-
updateItem={this.props.updateItem}
43-
teamname={this.props.teamname}
44-
boardName={this.props.boardName}
45-
groupI={this.props.groupI}
46-
/>
61+
<div class={style.subRow}>
62+
<SelectPerson
63+
personI={`p1`}
64+
index={this.props.index}
65+
details={this.props.details}
66+
updateItem={this.props.updateItem}
67+
teamname={this.props.teamname}
68+
boardName={this.props.boardName}
69+
groupI={this.props.groupI}
70+
/>
71+
</div>
72+
<div class={style.subRow} >
73+
<p>{details.p1}</p>
74+
</div>
4775
</div>
4876
</td>
4977
<td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
5078
<div class={style.innerWrap}>
51-
<SelectPerson
52-
personI={`p2`}
53-
index={this.props.index}
54-
details={this.props.details}
55-
updateItem={this.props.updateItem}
56-
teamname={this.props.teamname}
57-
boardName={this.props.boardName}
58-
groupI={this.props.groupI}
59-
/>
79+
<div class={style.subRow}>
80+
<SelectPerson
81+
personI={`p2`}
82+
index={this.props.index}
83+
details={this.props.details}
84+
updateItem={this.props.updateItem}
85+
teamname={this.props.teamname}
86+
boardName={this.props.boardName}
87+
groupI={this.props.groupI}
88+
/>
89+
</div>
90+
<div class={style.subRow} >
91+
<p>{details.p2}</p>
92+
</div>
6093
</div>
6194
</td>
6295
<td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
6396
<div class={style.innerWrap}>
64-
<SelectPerson
65-
personI={`p3`}
66-
index={this.props.index}
67-
details={this.props.details}
68-
updateItem={this.props.updateItem}
69-
teamname={this.props.teamname}
70-
boardName={this.props.boardName}
71-
groupI={this.props.groupI}
72-
/>
97+
<div class={style.subRow} >
98+
<SelectPerson
99+
personI={`p3`}
100+
index={this.props.index}
101+
details={this.props.details}
102+
updateItem={this.props.updateItem}
103+
teamname={this.props.teamname}
104+
boardName={this.props.boardName}
105+
groupI={this.props.groupI}
106+
/>
107+
</div>
108+
<div class={style.subRow} >
109+
<p>{details.p3}</p>
110+
</div>
73111
</div>
74112
</td>
75113
<td style={`min-width: 35px; width: 5%; max-width: 60px;`}>
76114
<div class={style.innerWrap}>
77-
<SelectPerson
78-
personI={`p4`}
79-
index={this.props.index}
80-
details={this.props.details}
81-
updateItem={this.props.updateItem}
82-
teamname={this.props.teamname}
83-
boardName={this.props.boardName}
84-
groupI={this.props.groupI}
85-
/>
115+
<div class={style.subRow}>
116+
<SelectPerson
117+
personI={`p4`}
118+
index={this.props.index}
119+
details={this.props.details}
120+
updateItem={this.props.updateItem}
121+
teamname={this.props.teamname}
122+
boardName={this.props.boardName}
123+
groupI={this.props.groupI}
124+
/>
125+
</div>
126+
<div class={style.subRow} >
127+
<p>{details.p4}</p>
128+
</div>
86129
</div>
87130
</td>
88131
<td style={`min-width: 130px;`}>
89132
<div class={style.innerWrap}>
90-
<SelectStatus
91-
statusI={`status`}
92-
formId={`${details.in1d + 4}`}
93-
index={this.props.index}
94-
details={this.props.details}
95-
updateItem={this.props.updateItem}
96-
boardName={this.props.boardName}
97-
groupI={this.props.groupI}
98-
/>
133+
<div class={style.subRow} >
134+
<SelectStatus
135+
statusI={`status`}
136+
formId={`${details.in1d + 4}`}
137+
index={this.props.index}
138+
details={this.props.details}
139+
updateItem={this.props.updateItem}
140+
boardName={this.props.boardName}
141+
groupI={this.props.groupI}
142+
/>
143+
</div>
144+
<div class={style.subRow} />
99145
</div>
100146
</td>
101147
<td style={`min-width: 100px;`}>
102148
<div class={style.innerWrap}>
103-
<input
104-
autocomplete="nope"
105-
class={style.deadline}
106-
name="finishGoal"
107-
onChange={(e) => this.handleChange(e, this.props.index)}
108-
type="text"
109-
value={details.finishGoal}
110-
placeholder="dd/mm/yy"
111-
/>
149+
<div class={style.subRow} >
150+
<input
151+
autocomplete="nope"
152+
class={style.deadline}
153+
name="finishGoal"
154+
onChange={(e) => this.handleChange(e, this.props.index)}
155+
type="text"
156+
value={details.finishGoal}
157+
placeholder="dd/mm/yy"
158+
/>
159+
</div>
160+
<div class={style.subRow} />
112161
</div>
113162
</td>
114163
<td style={`min-width: 100px;`}>
115164
<div class={style.innerWrap}>
116-
<input
117-
autocomplete="nope"
118-
class={style.deadline}
119-
name="deadline"
120-
onChange={(e) => this.handleChange(e, this.props.index)}
121-
type="date"
122-
value={details.deadline}
123-
placeholder="dd/mm/yy"
124-
/>
165+
<div class={style.subRow} >
166+
<input
167+
autocomplete="nope"
168+
class={style.deadline}
169+
name="deadline"
170+
onChange={(e) => this.handleChange(e, this.props.index)}
171+
type="text"
172+
value={details.deadline}
173+
placeholder="dd/mm/yy"
174+
/>
175+
</div>
176+
<div class={style.subRow}>
177+
<p>
178+
{
179+
this.checkIfPast()
180+
}
181+
</p>
182+
</div>
125183
</div>
126184
</td>
127185
<td style={`min-width: 100px;`}>
128186
<div class={style.innerWrap}>
129-
<input
130-
class={style.tookTime}
131-
name="tooktime"
132-
onChange={(e) => this.handleChange(e, this.props.index)}
133-
type="number"
134-
value={details.tooktime}
135-
placeholder="000"
136-
/>
187+
<div class={style.subRow} >
188+
<input
189+
class={style.tookTime}
190+
name="tooktime"
191+
onChange={(e) => this.handleChange(e, this.props.index)}
192+
type="number"
193+
value={details.tooktime}
194+
placeholder="tijd in uren"
195+
/>
196+
</div>
197+
<div class={style.subRow} />
137198
</div>
138199
</td>
139200
<td style={`width: 3%;`}>

0 commit comments

Comments
 (0)