From d610742565469d4bda4af08e793231a7f4073ce3 Mon Sep 17 00:00:00 2001 From: Yannick Date: Mon, 6 Nov 2017 19:17:26 +0100 Subject: [PATCH] Updated styling of board, Added text labels, Added days ago (status aware) --- assets/img/none-assigned.png | Bin 2221 -> 1233 bytes assets/img/none.png | Bin 0 -> 1233 bytes components/addItem/style.css | 2 +- components/groups/index.js | 8 +- components/groups/style.css | 11 ++ components/item/index.js | 221 ++++++++++++++++++++------------ components/item/style.css | 53 +++++++- components/newGroup/style.css | 2 +- components/statusComp/index.js | 21 +++ components/statusComp/style.css | 79 ++++++++++++ routes/board/index.js | 3 +- routes/board/style.css | 1 + 12 files changed, 313 insertions(+), 88 deletions(-) create mode 100644 assets/img/none.png create mode 100644 components/statusComp/index.js create mode 100644 components/statusComp/style.css diff --git a/assets/img/none-assigned.png b/assets/img/none-assigned.png index fc1a31f79bf5e8764c5356729b2f24efe2c3ce9f..fbff0ff097dbb9833e5657b069ee0f72ee2078b5 100644 GIT binary patch delta 1224 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 R*oI(W@O1TaS?83{1OQL6&A0#n diff --git a/assets/img/none.png b/assets/img/none.png new file mode 100644 index 0000000000000000000000000000000000000000..fbff0ff097dbb9833e5657b069ee0f72ee2078b5 GIT binary patch literal 1233 zcmV;?1TOoDP)vnef^!E^Du_FXwu1O7 zIHiJUD~Mb{?01gF*MVKZ=0T7RQKTqYzR5cIXFOv`B!Hg;K@if@+uIxe1^jSNVU@Md zz*2tCz+8R+NBNzAJ+M!VIo(V5)6^NMtepdEAO#j9yB~lYC=z3iQ|!2zNM-E`$be5% z3{cnsSz=6iOXtxDU<>MWnJe1AYrUegz7kj2R*BxT1E+&w*wy zi80ww+XfMlMO@Gw%`^4vT$nY=N5YE(OvL2Z}GTvy` zAtLMIZ%5%gL?WPU40;DiKB} zvN{mmYv*?EwrkCZM2x@G^Dl`p8=nGczjsJ{qYjm2sE^W<13#+Uhr}2+IOslG+M)R; zt;d~_O#MGQ*RJ4bfibp+6<&d_3pw($g4BJPGXk4Z|5+0qV!3*cB;>*j17NSh`YC}=LRdngm?Ip(xvok7XJ+RT3LHk8)WMAxkNno z%w8%3&a_|B=;-nX_0;!97;(jB9i3vyp+vGR@UyxdvZGbwa^F~GT#FAgxjs2023N_) zX2#8lv9k8awXQa!-ua&$J6bmQ>RKgjw>T3Rh3^TEcW4qFJAAp8n>%R%`84xJLF;m> zm#N#hLqy!+B_KR@1imLix?X$-KX3LcYv4T|uy&#K*_Xzz>88}9@~K;)@-U49-Cg~H zAQ4q_(phekPpxh>G6s=-q@Bi`iPX;iAFtjVB?XWCGSpF;(f@k7q<%de+rj7j8?UE5 vM&vy52Ll=p{|SeShySR?hll>m>Am0|KoMTdAL3Tc00000NkvXXu0mjfTP97G literal 0 HcmV?d00001 diff --git a/components/addItem/style.css b/components/addItem/style.css index 047224d..7e21f20 100644 --- 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 index fd1d2ed..f70ef27 100644 --- a/components/groups/index.js +++ b/components/groups/index.js @@ -101,9 +101,15 @@ export default class BoardGroup extends Component { - + + + {/* */} + diff --git a/components/groups/style.css b/components/groups/style.css index 3906950..70b7960 100644 --- 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; } \ No newline at end of file diff --git a/components/item/index.js b/components/item/index.js index 693a377..3e9d99d 100644 --- 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,6 +21,20 @@ 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 {timeAg}; + } + else if ( timeAg.indexOf('ago') >= 0){ + return {timeAg}; + } + else if (timeAg.indexOf('Invalid date') >= 0) { + return false; + } + return timeAg; + } + render() { const details = this.props.details; @@ -22,118 +42,159 @@ export default class Item extends Component { return (
+ this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" />
+ this.handleChange(e, this.props.index)} type="text" value={details.name} placeholder="This is a example header (Click to edit)" /> + opdracht Door wie p2 p3
-
- this.handleChange(e, this.props.index)} - type="text" - value={details.desc} - placeholder="This is a example description (Click to edit)" - /> +
+
+ this.handleChange(e, this.props.index)} + type="text" + value={details.desc} + placeholder="This is a example description (Click to edit)" + /> +
+
- +
+ +
+
+

{details.p1}

+
- +
+ +
+
+

{details.p2}

+
- +
+ +
+
+

{details.p3}

+
- +
+ +
+
+

{details.p4}

+
- +
+ +
+
- this.handleChange(e, this.props.index)} - type="text" - value={details.finishGoal} - placeholder="dd/mm/yy" - /> +
+ this.handleChange(e, this.props.index)} + type="text" + value={details.finishGoal} + placeholder="dd/mm/yy" + /> +
+
- this.handleChange(e, this.props.index)} - type="date" - value={details.deadline} - placeholder="dd/mm/yy" - /> +
+ this.handleChange(e, this.props.index)} + type="text" + value={details.deadline} + placeholder="dd/mm/yy" + /> +
+
+

+ { + this.checkIfPast() + } +

+
- this.handleChange(e, this.props.index)} - type="number" - value={details.tooktime} - placeholder="000" - /> +
+ this.handleChange(e, this.props.index)} + type="number" + value={details.tooktime} + placeholder="tijd in uren" + /> +
+
diff --git a/components/item/style.css b/components/item/style.css index bc9eb1f..3cb0beb 100644 --- a/components/item/style.css +++ b/components/item/style.css @@ -9,7 +9,7 @@ tbody tr.tableRow{ tbody tr.tableRow td{ margin: 1px; - border-bottom: 1px solid #e6e6e6; + border-bottom: 1px solid #e9e9e9; white-space: nowrap; padding: 0; width: 10%; @@ -17,9 +17,9 @@ tbody tr.tableRow td{ } .innerWrap{ - background: #f0f0f0; + background: #f8f8f8; padding: 0; - height: 35px; + height: 50px; color: #596496; display: block; text-decoration: none; @@ -32,6 +32,10 @@ tbody tr.tableRow td{ font-size: 13px; } +tbody tr.tableRow:nth-child(odd) td .innerWrap{ + background: #f2f2f2; +} + .innerWrap input{ background: none; width: 100%; @@ -103,4 +107,45 @@ input.deadline::-webkit-datetime-edit-day-field:not([aria-valuenow]) { /* ::-webkit-datetime-edit-month-field { color: blue; } ::-webkit-datetime-edit-day-field { color: green; } -::-webkit-datetime-edit-year-field { color: purple; } */ \ No newline at end of file +::-webkit-datetime-edit-year-field { color: purple; } */ + +.subRow{ + height: 35px; + width: 100%; + display: block; + margin: 0; + padding: 0; +} + +.subRow:last-of-type{ + height: 15px; + width: 100%; + display: block; + margin: 0; + padding: 0; + overflow: hidden; + text-overflow: ellipsis; +} + +.subRow:last-of-type p{ + padding: 0 3px; + padding-bottom: 3px; + margin: 0; + display: block; + width: 100%; + max-width: 100%; + overflow: hidden; + text-overflow: ellipsis; + text-align: center; + font-size: 0.9em; + color: #333333; + box-sizing: border-box; +} + +.inPast{ + color: red; +} + +.inPastDone{ + color: green; +} \ No newline at end of file diff --git a/components/newGroup/style.css b/components/newGroup/style.css index 1b83f37..aa5e480 100644 --- a/components/newGroup/style.css +++ b/components/newGroup/style.css @@ -16,7 +16,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/statusComp/index.js b/components/statusComp/index.js new file mode 100644 index 0000000..f3c7931 --- /dev/null +++ b/components/statusComp/index.js @@ -0,0 +1,21 @@ +import { h, Component } from 'preact'; +import { Link } from 'preact-router/match'; +import userMenu from '../user'; +import style from './style'; + +import logo from '../../assets/img/logo.svg'; +import UserMenu from '../user/index'; + +export default class StatusComp extends Component { + constructor() { + super(); + } + + render() { + return ( +
+

hallo

+
+ ); + } +} diff --git a/components/statusComp/style.css b/components/statusComp/style.css new file mode 100644 index 0000000..cdd94a3 --- /dev/null +++ b/components/statusComp/style.css @@ -0,0 +1,79 @@ +/* https://material.io/color/#!/?view.left=0&view.right=0&primary.color=F5F5F5&secondary.color=D81B60 */ +.header { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 50px; + padding: 0; + background: #9c27b0; + color: white; + z-index: 50; + display: flex; + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.25); +} + +.headWrap{ + height: 100%; + display: inline-block; + position: relative; + flex: 1 1 75%; +} + +.headWrap nav { + float: right; + font-size: 100%; +} + +.headWrap nav a { + display: inline-block; + height: 50px; + line-height: 50px; + padding: 0 15px; + min-width: 50px; + text-align: center; + background: rgba(255,255,255,0); + text-decoration: none; + color: #fff; + vertical-align: top; +} + +/* .headWrap nav a div{ + width: 100%; +} */ + +.headWrap nav a.boooooooi { + padding: 0; +} + +.headWrap nav a.boooooooi div { + width: 50px; +} + +.headWrap nav a div div { + top: 50px !important; +} + +.headWrap nav a div div ul li p{ + padding-left: 15px; +} + +.headWrap nav a div div ul li{ + transition: all .3s ease; + background: #fff; +} + +.headWrap nav a div div ul li:hover{ + background-color: #f3f3f3; +} + +.headWrap nav a:hover, +.headWrap nav a:active { + background: #9a67ea; + color: #fff +} + +.header nav a.active { + background: #320b86; + color: #ffffff; +} \ No newline at end of file diff --git a/routes/board/index.js b/routes/board/index.js index 456e4f7..bece4f2 100644 --- a/routes/board/index.js +++ b/routes/board/index.js @@ -3,6 +3,7 @@ import style from './style'; import BoardGroup from '../../components/groups'; import NewGroup from '../../components/newGroup'; +import StatusComp from '../../components/statusComp'; import base from '../../base'; export default class Board extends Component { @@ -53,7 +54,7 @@ export default class Board extends Component { render({ teamname }, { boards, members, user }) { return (
-

{teamname}

+
{ Object diff --git a/routes/board/style.css b/routes/board/style.css index d5429b5..ac39165 100644 --- a/routes/board/style.css +++ b/routes/board/style.css @@ -12,4 +12,5 @@ width: 100%; display: block; height: auto; + margin-bottom: 15px; } \ No newline at end of file