From 0197e98aeecd407db92dfc932cabffcb99a91d22 Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Sat, 2 Oct 2021 21:44:04 +0100 Subject: [PATCH 1/8] Feat: Added Event elements and factories --- src/components/comments/elements.js | 96 +++++++++++++++++++++++++++++ src/components/comments/index.js | 34 +++++++--- 2 files changed, 120 insertions(+), 10 deletions(-) create mode 100644 src/components/comments/elements.js diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js new file mode 100644 index 0000000..7849bef --- /dev/null +++ b/src/components/comments/elements.js @@ -0,0 +1,96 @@ +/** + * ProfilePicture Component + */ + +export class ProfilePicture { + constructor(imgSrc) { + this.imgSrc = imgSrc; + } + + render() { + return ` + Profile Picture + ` + } +} + +/** + * Title Component + */ + +export class Title { + constructor(name, donation) { + this.name = name; + this.donation = donation; + } + + renderTitle() { + + return this.donation === 0 ? + this.name : + `${this.name} donated ${this.donation}` + } + + render() { + return ` +

${this.renderTitle()}

+ ` + } +} + +/** + * Message Component + */ + +export class Message { + constructor(message) { + this.message = message; + } + + render() { + return ` +

${this.message}

+ ` + } +} + +/** + * Comment Component + */ + +export class Comment { + constructor(ProfilePicture, Title, Message, children) { + this.profilePicture = ProfilePicture; + this.title = Title; + this.message = Message; + this.children = children; + } + + renderChildren() { + return this.children ? this.children.map((child) => { + const childComment = new Comment( + new ProfilePicture('images/faces/128-1.jpg'), + new Title(child.name, child.donation), + new Message(child.comment), + child.children + ) + + return ` +
+ ${childComment.render()} +
+ ` + }) : '' + } + + render() { + return ` +
+ ${this.profilePicture.render()} + ${this.title.render()} + ${this.message.render()} + ${this.renderChildren()} +
+ ` + } +} diff --git a/src/components/comments/index.js b/src/components/comments/index.js index 63b7db8..ded92f1 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -1,14 +1,28 @@ +import {ProfilePicture, Title, Message, Comment} from "./elements"; + export default class { - constructor(data) { - this.data = data; - this.createFactories(); - this.render(); - } + constructor(data) { + this.data = data; + this.createFactories(); + this.render(); + } - createFactories() { - } + createFactories() { + this.comments = this.data.comments.map(comment => + new Comment( + new ProfilePicture('images/faces/128-1.jpg'), + new Title(comment.name, comment.donation), + new Message(comment.comment), + comment.children, + ) + ); + } - render() { - return "comments"; - } + render() { + return ` +
+ ${this.comments.map(comment => comment.render()).join("")} +
+ ` + } } From 188ef2944d32c6ef88ee992aa704e292ac03e5a4 Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Sun, 3 Oct 2021 18:39:00 +0100 Subject: [PATCH 2/8] Feat: Added CSS for application --- public/css/styles.css | 191 +++++++++++++++++++++++++++++++++++++++++- 1 file changed, 190 insertions(+), 1 deletion(-) diff --git a/public/css/styles.css b/public/css/styles.css index c410bf2..5b490cd 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,3 +1,192 @@ body { - font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color:#F8F8F8; + font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; +} + +div.comments { + display:flex; + flex-flow:column nowrap; + justify-content:center; +} + +div.comments > div.comments__comment > div.comments__comment__card { + margin-top:4%; +} + +div.comments > div.comments__comment:first-child > div.comments__comment__card { + margin-top:0; +} + +div.comments__child > div.comments__comment { + float:right; + width:calc(100% - 10%); +} + +div.comments__child > div.comments__comment > div.comments__comment__card { + background-color:#FFF; +} + +div.comments__child > div.comments__comment > div.comments__comment__triangle::after { + border-color:#FFF transparent transparent; +} + +div.comments__comment > div.comments__comment__triangle { + border-color:#e1e1e1 transparent transparent; + border-style:solid; + border-width:24px 30px 0 0; + position:relative; + width:0; +} + +div.comments__comment > div.comments__comment__triangle::after { + border-color:#f4f4f4 transparent transparent; + border-style:solid; + border-width:23px 29px 0 0; + content:""; + left:1px; + position:absolute; + top:-25px; +} + +div.comments__comment > div.comments__comment__triangle::before { + border-color:#e1e1e1 transparent transparent; + border-style:solid; +} + +div.comments__comment__card { + align-items:center; + background-color:#F5F5F5; + border:1px solid #E1E1E1; + border-radius:2% 2% 2% 0; + display:flex; + min-height:106px; +} + +div.comments__comment__card > div.comments__comment__card__body { + display:flex; + flex-flow:column; + padding-left:2%; +} + +div.comments__comment__card > div.comments__comment__card__body > p.comments__message { + margin-top:1%; +} + +div.comments__comment__card > div.comments__comment__card__body > p.comments__title { + font-size:.9rem; + font-weight:700; + margin-bottom:0; +} + +div.comments__comment__card > div.comments__comment__card__body > p.comments__title > span { + font-weight:400; +} + +div.comments__comment__card > img.comments__profile_picture { + height:75px; + padding:4%; + width:75px; +} + +div.container { + margin:7% 2.5%; +} + +div.container > div.row { + align-items:center; + display:flex; + flex-flow:column nowrap; + justify-content:center; +} + +div.container > div.row > div.column { + margin:0 25px; + max-width:463px; + width:100%; +} + +div.container > div.row > div.column > div.event { + background-color:#FFF; + border:1px solid #E1E1E1; + border-radius:1%; + margin-bottom:5%; + max-width:463px; +} + +div.event > div.event__description { + height:35%; + padding:1% 2%; +} + +div.event > div.event__details { + background-color:#F5F5F5; + border:1px solid #E1E1E1; + display:flex; + font-size:.8rem; + margin:2%; + padding:0 2%; +} + +div.event > div.event__details > div { + padding:2%; + width:46%; +} + +div.event > div.event__details > div[class*="event__details__"] > strong { + text-transform:uppercase; +} + +div.event > div.event__funding { + border-top:1px solid #E1E1E1; + margin:2%; +} + +div.event > div.event__funding > div.event__progress { + background-color:#F5F5F5; + border:1px solid #E1E1E1; +} + +div.event > div.event__funding > div.event__progress > b.event__progress_meter { + background-color:#32cd32; + display:block; + height:20px; +} + +div.event > div.event__funding > div.event__progress > p.event__progress__total { + display:none; +} + +div.event > div.event__funding > p.event__funding__totals { + color:#245626; + font-size:1.3rem; + margin:4% 1%; +} + +div.event > div.event__funding > p.event__funding__totals > span.event__funding__raised { + display:block; + font-size:2.3rem; + font-weight:700; +} + +div.event > h1.event__title { + background-color:#F5F5F5; + border-bottom:1px solid #E1E1E1; + border-radius:2%; + font-size:1rem; + height:12%; + margin:0; + padding:2%; +} + +@media screen and (min-width: 1247px) { + div.container > div.row { + align-items:flex-start; + display:flex; + flex-flow:row nowrap; + justify-content:center; + } + + div.container > div.row > div.column { + width:48%; + } } From e5f580c3a4fd44a686dea3cb253ecabe5b26bb32 Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Sun, 3 Oct 2021 18:39:36 +0100 Subject: [PATCH 3/8] Feat: Updated event funding to include currency symbol and "raised" --- src/components/event/elements.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/event/elements.js b/src/components/event/elements.js index fdf6c6d..d20abce 100644 --- a/src/components/event/elements.js +++ b/src/components/event/elements.js @@ -54,7 +54,7 @@ export class Funding { return `

- £${this.funding.raised/100} + £${this.funding.raised/100} raised of £${this.funding.target/100} target.

${this.renderProgress()} From e2adb557d25a1d85d35175208ac7b2a1a8bc9a90 Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Sun, 3 Oct 2021 18:40:31 +0100 Subject: [PATCH 4/8] Feat: Updated Comment Component Elements --- src/components/comments/elements.js | 27 ++++++++++++++++----------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js index 7849bef..8ba8266 100644 --- a/src/components/comments/elements.js +++ b/src/components/comments/elements.js @@ -9,7 +9,7 @@ export class ProfilePicture { render() { return ` - Profile Picture + Profile Picture ` } } @@ -28,12 +28,12 @@ export class Title { return this.donation === 0 ? this.name : - `${this.name} donated ${this.donation}` + `${this.name} donated £${this.donation}` } render() { return ` -

${this.renderTitle()}

+

${this.renderTitle()}

` } } @@ -49,7 +49,7 @@ export class Message { render() { return ` -

${this.message}

+

${this.message}

` } } @@ -68,7 +68,7 @@ export class Comment { renderChildren() { return this.children ? this.children.map((child) => { - const childComment = new Comment( + const childComment = new Comment( new ProfilePicture('images/faces/128-1.jpg'), new Title(child.name, child.donation), new Message(child.comment), @@ -76,7 +76,7 @@ export class Comment { ) return ` -
+
${childComment.render()}
` @@ -85,12 +85,17 @@ export class Comment { render() { return ` -
- ${this.profilePicture.render()} - ${this.title.render()} - ${this.message.render()} - ${this.renderChildren()} +
+
+ ${this.profilePicture.render()} +
+ ${this.title.render()} + ${this.message.render()} +
+
+
+ ${this.renderChildren()} ` } } From 5efd1eb353f2d16bf54e43da3f5564dd2b165e29 Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Sun, 3 Oct 2021 18:56:31 +0100 Subject: [PATCH 5/8] Feat: Updated ProfilePicture and Updated Comment --- src/components/comments/elements.js | 19 ++++++++++--------- src/components/comments/index.js | 11 ++++++----- 2 files changed, 16 insertions(+), 14 deletions(-) diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js index 8ba8266..57acd24 100644 --- a/src/components/comments/elements.js +++ b/src/components/comments/elements.js @@ -3,8 +3,8 @@ */ export class ProfilePicture { - constructor(imgSrc) { - this.imgSrc = imgSrc; + constructor(userId) { + this.imgSrc = `images/faces/128-${userId}.jpg`; } render() { @@ -59,19 +59,20 @@ export class Message { */ export class Comment { - constructor(ProfilePicture, Title, Message, children) { - this.profilePicture = ProfilePicture; - this.title = Title; - this.message = Message; + constructor(userId, name, donationAmount, message, children) { + this.profilePicture = new ProfilePicture(userId); + this.title = new Title(name, donationAmount); + this.message = new Message(message); this.children = children; } renderChildren() { return this.children ? this.children.map((child) => { const childComment = new Comment( - new ProfilePicture('images/faces/128-1.jpg'), - new Title(child.name, child.donation), - new Message(child.comment), + 1, + child.name, + child.donation, + child.comment, child.children ) diff --git a/src/components/comments/index.js b/src/components/comments/index.js index ded92f1..74c5584 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -1,4 +1,4 @@ -import {ProfilePicture, Title, Message, Comment} from "./elements"; +import {Comment} from "./elements"; export default class { constructor(data) { @@ -10,10 +10,11 @@ export default class { createFactories() { this.comments = this.data.comments.map(comment => new Comment( - new ProfilePicture('images/faces/128-1.jpg'), - new Title(comment.name, comment.donation), - new Message(comment.comment), - comment.children, + 1, + comment.name, + comment.donation, + comment.comment, + comment.children ) ); } From d60f7e00c43160f6503a7dc91fdced6caf0e98ce Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Sun, 3 Oct 2021 19:23:21 +0100 Subject: [PATCH 6/8] Fun: Added a way to get unique profile pictures as no userID is supplied. --- src/components/comments/elements.js | 4 +++- src/components/comments/helper.js | 21 +++++++++++++++++++++ src/components/comments/index.js | 3 ++- 3 files changed, 26 insertions(+), 2 deletions(-) create mode 100644 src/components/comments/helper.js diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js index 57acd24..b3cc0dc 100644 --- a/src/components/comments/elements.js +++ b/src/components/comments/elements.js @@ -1,3 +1,5 @@ +import {uniqueRandomProfilePicture} from "./helper"; + /** * ProfilePicture Component */ @@ -69,7 +71,7 @@ export class Comment { renderChildren() { return this.children ? this.children.map((child) => { const childComment = new Comment( - 1, + uniqueRandomProfilePicture(), child.name, child.donation, child.comment, diff --git a/src/components/comments/helper.js b/src/components/comments/helper.js new file mode 100644 index 0000000..aa95a38 --- /dev/null +++ b/src/components/comments/helper.js @@ -0,0 +1,21 @@ +// Just for fun, a way to get a unique photo for each user, since data provides no user id. + + function uniqueRandomUserId() { + const takenNumbers = [] + + function generate() { + let number = randomNumberBetween(1,20) + while (takenNumbers.indexOf(number) !== -1){ + number = randomNumberBetween(1,20) + } + takenNumbers.push(number) + return number + } + return generate +} + +function randomNumberBetween(min, max) { + return Math.floor(Math.random() * (max - min + 1) + min ) +} + +export const uniqueRandomProfilePicture = uniqueRandomUserId() diff --git a/src/components/comments/index.js b/src/components/comments/index.js index 74c5584..d6459a2 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -1,4 +1,5 @@ import {Comment} from "./elements"; +import {uniqueRandomProfilePicture} from "./helper"; export default class { constructor(data) { @@ -10,7 +11,7 @@ export default class { createFactories() { this.comments = this.data.comments.map(comment => new Comment( - 1, + uniqueRandomProfilePicture(), comment.name, comment.donation, comment.comment, From 205cdd5025d8e687e08b1dcd1f107bc93aba0e39 Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Sun, 3 Oct 2021 19:29:11 +0100 Subject: [PATCH 7/8] Chore: Added missing semicolons --- src/components/comments/elements.js | 16 ++++++++-------- src/components/comments/helper.js | 24 +++++++++++++----------- src/components/comments/index.js | 2 +- 3 files changed, 22 insertions(+), 20 deletions(-) diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js index b3cc0dc..bffc739 100644 --- a/src/components/comments/elements.js +++ b/src/components/comments/elements.js @@ -12,7 +12,7 @@ export class ProfilePicture { render() { return ` Profile Picture - ` + `; } } @@ -30,13 +30,13 @@ export class Title { return this.donation === 0 ? this.name : - `${this.name} donated £${this.donation}` + `${this.name} donated £${this.donation}`; } render() { return `

${this.renderTitle()}

- ` + `; } } @@ -52,7 +52,7 @@ export class Message { render() { return `

${this.message}

- ` + `; } } @@ -76,14 +76,14 @@ export class Comment { child.donation, child.comment, child.children - ) + ); return `
${childComment.render()}
- ` - }) : '' + `; + }) : ''; } render() { @@ -99,6 +99,6 @@ export class Comment {
${this.renderChildren()} - ` + `; } } diff --git a/src/components/comments/helper.js b/src/components/comments/helper.js index aa95a38..066e1ec 100644 --- a/src/components/comments/helper.js +++ b/src/components/comments/helper.js @@ -1,21 +1,23 @@ // Just for fun, a way to get a unique photo for each user, since data provides no user id. - function uniqueRandomUserId() { - const takenNumbers = [] +function uniqueRandomUserId() { + const takenNumbers = []; - function generate() { - let number = randomNumberBetween(1,20) - while (takenNumbers.indexOf(number) !== -1){ - number = randomNumberBetween(1,20) + function generate() { + let number = randomNumberBetween(1, 20); + while (takenNumbers.indexOf(number) !== -1) { + number = randomNumberBetween(1, 20); } - takenNumbers.push(number) - return number + + takenNumbers.push(number); + return number; } - return generate + + return generate; } function randomNumberBetween(min, max) { - return Math.floor(Math.random() * (max - min + 1) + min ) + return Math.floor(Math.random() * (max - min + 1) + min); } -export const uniqueRandomProfilePicture = uniqueRandomUserId() +export const uniqueRandomProfilePicture = uniqueRandomUserId(); diff --git a/src/components/comments/index.js b/src/components/comments/index.js index d6459a2..32b920f 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -25,6 +25,6 @@ export default class {
${this.comments.map(comment => comment.render()).join("")}
- ` + `; } } From 842085c4adc84ca3628f4a8c865cfd37fab3cc90 Mon Sep 17 00:00:00 2001 From: Cameron-Lee Rothenburg Date: Mon, 4 Oct 2021 00:19:00 +0100 Subject: [PATCH 8/8] Chore: Cleaned up Comment params --- src/components/comments/elements.js | 15 ++++++++------- src/components/comments/index.js | 12 +++++++----- 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js index bffc739..3ed2ecb 100644 --- a/src/components/comments/elements.js +++ b/src/components/comments/elements.js @@ -61,7 +61,7 @@ export class Message { */ export class Comment { - constructor(userId, name, donationAmount, message, children) { + constructor({userId, name, donationAmount, message, children}) { this.profilePicture = new ProfilePicture(userId); this.title = new Title(name, donationAmount); this.message = new Message(message); @@ -70,12 +70,13 @@ export class Comment { renderChildren() { return this.children ? this.children.map((child) => { - const childComment = new Comment( - uniqueRandomProfilePicture(), - child.name, - child.donation, - child.comment, - child.children + const childComment = new Comment({ + userId: uniqueRandomProfilePicture(), + name: child.name, + donationAmount: child.donation, + message: child.comment, + children: child.children + } ); return ` diff --git a/src/components/comments/index.js b/src/components/comments/index.js index 32b920f..43b32de 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -11,11 +11,13 @@ export default class { createFactories() { this.comments = this.data.comments.map(comment => new Comment( - uniqueRandomProfilePicture(), - comment.name, - comment.donation, - comment.comment, - comment.children + { + userId: uniqueRandomProfilePicture(), + name: comment.name, + donationAmount: comment.donation, + message: comment.comment, + children: comment.children + } ) ); }