From e65a93695c5aae46d446947b6a05868fbdf6899c Mon Sep 17 00:00:00 2001 From: Samuel Barker Date: Sat, 5 Nov 2016 15:29:17 +0000 Subject: [PATCH 1/7] Implemented left-hand pane Left-hand pane is now implemented as in the mock-up. Required smell changed to elements.js to meet mockup. Also added styling to styles.css --- public/css/styles.css | 72 ++++++++++++++++++++++++++++++++ src/components/event/elements.js | 14 ++++--- 2 files changed, 81 insertions(+), 5 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index c410bf2..fe5f921 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -1,3 +1,75 @@ body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; + background-color: #F8F8F8; +} + +.event { + background: white; + border: 2px solid #dfe0e6; + border-radius: 5px; + + float: left; + margin-left: 10%; + margin-top: 5%; + max-width: 35%; + height: 20%; +} + +.event__title__container { + background: #F5F5F5; + border-bottom: 2px solid #dfe0e6; + width: auto; +} + +.event__title { + margin: 0; + padding: 2%; + font-size: 95%; +} + +.event__description { + margin: 3%; + padding-bottom: 3%; + border-bottom: 1px solid #dfe0e6; +} + +.event__funding { + margin: 3%; +} + +.event__funding__totals { + color: #245626; +} + +.event__funding__raised { + font-size: 200%; + font-weight: bold; +} + +.event__progress__meter{ + background: #F5F5F5; + border: 1px solid #dfe0e6; +} + +.event__progress__percent { + background: #3CBF42; + padding-bottom: 5%; +} + +.event__details { + margin-left: 3%; + margin-right: 3%; + margin-bottom: 3%; + background: #F5F5F5; + border: 1px solid #dfe0e6; + overflow: hidden; + padding: 2%; +} + +.event__details__date, .event__details__location { + width: 40%; + display: inline; + float: left; + font-size: 75%; + margin-left: 10%; } diff --git a/src/components/event/elements.js b/src/components/event/elements.js index fdf6c6d..b30de12 100644 --- a/src/components/event/elements.js +++ b/src/components/event/elements.js @@ -9,7 +9,9 @@ export class Title { render() { return ` +

${this.title}

+
` } } @@ -44,8 +46,9 @@ export class Funding { return `
-

${percentage}% of total raised

- +
+
+
`; } @@ -54,7 +57,8 @@ export class Funding { return `

- £${this.funding.raised/100} + £${(this.funding.raised/100).toFixed(2)} raised +
of £${this.funding.target/100} target.

${this.renderProgress()} @@ -77,10 +81,10 @@ export class Details { return `
- Date: ${this.date} + DATE: ${this.date}
- Location: ${this.location} + LOCATION: ${this.location}
` From 4d616fd3e1e89fc81fc7e820e332d6429a28ccc4 Mon Sep 17 00:00:00 2001 From: Samuel Barker Date: Sun, 6 Nov 2016 12:24:31 +0000 Subject: [PATCH 2/7] Implemented right-hand pane Just need to add speech-bubble arrows and amend CS slightly for mobile --- public/css/styles.css | 40 +++++++++ src/components/comments/elements.js | 132 ++++++++++++++++++++++++++++ src/components/comments/index.js | 22 ++++- 3 files changed, 193 insertions(+), 1 deletion(-) create mode 100644 src/components/comments/elements.js diff --git a/public/css/styles.css b/public/css/styles.css index fe5f921..3599e62 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -73,3 +73,43 @@ body { font-size: 75%; margin-left: 10%; } + +.comments { + float: left; + margin-left: 10%; + margin-top: 5%; + max-width: 35%; + height: 20%; +} + +.comment { + background: #F5F5F5; + border: 1px solid #dfe0e6; + margin-bottom: 3%; + border-radius: 5px; + position: relative; +} + +.comment__children > .comment { + background: white; + border: 1px solid #dfe0e6; + margin-left: 10%; + margin-bottom: 3%; + border-radius: 5px; +} + +.comment__picture { + max-width: 15%; + max-height: 15%: + display: inline-block; + margin: 3%; +} + +.comment__text { + display: inline-block; + vertical-align: top; + margin-top: 3%; + font-size: 85%; + max-height: 20%; + max-width: 75%; +} diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js new file mode 100644 index 0000000..68087ae --- /dev/null +++ b/src/components/comments/elements.js @@ -0,0 +1,132 @@ +/** + * Picture component. + */ + class Picture { + constructor(personName) { + this.personName = personName; + } + + render() { + /** + * Find the correct profile image for the people with specific names. + * Otherwise just assigns a random image. + */ + function getProfileImageForPerson(personName) { + let character = personName.slice(-1); + let pictureNumber = 0; + + switch(character) { + case 'A': + pictureNumber = 13; + break; + case 'B': + pictureNumber = 12; + break; + case 'C': + pictureNumber = 11; + break; + case 'D': + pictureNumber = 10; + break; + default: + // Just select a random profile picture. + pictureNumber = Math.floor(Math.random() * 20) + 1; + break; + } + + return `128-${pictureNumber}.jpg`; + } + + return ` + + `; + } + } + + /** + * Title component. + */ + class Title { + constructor(person, donation) { + this.person = person; + this.donation = donation; + } + + render() { + /** + * Obtains the correct donation string depending on whether or not there was a donation. + */ + function getDonationString(donation) { + let donationString = ``; + if(donation > 0) { + donationString = ` + donated £${(donation/100).toFixed(2)} + `; + } + + return donationString; + } + + return ` + ${this.person} + ${getDonationString(this.donation)} + `; + } + } + +/** + * Text component. + */ + class Text { + constructor(text) { + this.text = text; + } + + render() { + return `

${this.text}

`; + } + } + +/** + * Comment component. + */ + export class Comment { + constructor(comment) { + this.picture = new Picture(comment.name); + this.title = new Title(comment.name, comment.donation); + this.text = new Text(comment.comment); + + // Recursively create child comments to this one. + this.children = comment.children.map(child => new Comment(child)); + } + + render() { + /** + * If a comment has any children, render them. + */ + function renderChildrenIfDefined(children) { + let childrenHTML = ``; + + if(children && children.length && children.length > 0) { + childrenHTML = ` +
+ ${children.map(child => child.render())} +
+ `; + } + + return childrenHTML; + } + + return ` +
+ ${this.picture.render()} +
+ ${this.title.render()} + ${this.text.render()} +
+
+ ${renderChildrenIfDefined(this.children)} + `; + } + } diff --git a/src/components/comments/index.js b/src/components/comments/index.js index 63b7db8..7e2a85a 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -1,3 +1,10 @@ +// -- comments +// -- -- profilepicture +// -- -- title +// -- -- commenttext + +import {Comment} from './elements.js' + export default class { constructor(data) { this.data = data; @@ -6,9 +13,22 @@ export default class { } createFactories() { + this.comments = this.data.comments.map(comment => new Comment(comment)); } render() { - return "comments"; + /** + * Using normal map method adds commas between entries because of the array toString() method. + * Overcome this by doing it this way. + */ + function renderComments(comments) { + let result = ``; + comments.map(comment => result = result + ' ' + comment.render()); + return result; + } + + return `
+ ${renderComments(this.comments)} +
`; } } From 86a7179a9b694f08a68538c046b094541de3c9d0 Mon Sep 17 00:00:00 2001 From: Samuel Barker Date: Sun, 6 Nov 2016 12:44:06 +0000 Subject: [PATCH 3/7] Made responsive for mobile devices Added CSS media query --- public/css/styles.css | 39 ++++++++++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index 3599e62..a80f83b 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -3,6 +3,10 @@ body { background-color: #F8F8F8; } +.event, .comments { + display: table-cell; +} + .event { background: white; border: 2px solid #dfe0e6; @@ -11,10 +15,35 @@ body { float: left; margin-left: 10%; margin-top: 5%; - max-width: 35%; + width: 35%; + max-width: 50%; + height: 20%; +} + +.comments { + float: right; + margin-right: 10%; + margin-top: 5%; + width: 35%; + max-width: 50%; height: 20%; } +@media all and (max-width: 800px) { + .event { + display: table-header-group; + width: 90%; + max-width: 90%; + margin-left: 5%; + } + .comments { + display: table-footer-group; + width: 90%; + max-width: 90%; + margin-right: 5%; + } +} + .event__title__container { background: #F5F5F5; border-bottom: 2px solid #dfe0e6; @@ -74,14 +103,6 @@ body { margin-left: 10%; } -.comments { - float: left; - margin-left: 10%; - margin-top: 5%; - max-width: 35%; - height: 20%; -} - .comment { background: #F5F5F5; border: 1px solid #dfe0e6; From b52710ca5b533c551459f3cdfc229f1d522a2cd1 Mon Sep 17 00:00:00 2001 From: Samuel Barker Date: Sun, 6 Nov 2016 13:50:11 +0000 Subject: [PATCH 4/7] Added arrows to message bubbles --- public/css/styles.css | 55 ++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 52 insertions(+), 3 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index a80f83b..e99c2fb 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -106,7 +106,7 @@ body { .comment { background: #F5F5F5; border: 1px solid #dfe0e6; - margin-bottom: 3%; + margin-bottom: 8%; border-radius: 5px; position: relative; } @@ -114,8 +114,8 @@ body { .comment__children > .comment { background: white; border: 1px solid #dfe0e6; - margin-left: 10%; - margin-bottom: 3%; + margin-left: 8%; + margin-bottom: 10%; border-radius: 5px; } @@ -134,3 +134,52 @@ body { max-height: 20%; max-width: 75%; } + +.comment:before { + transform: rotate( 135deg ) skew( 0deg ); + -moz-transform: rotate( 135deg ) skew( 0deg ); + -ms-transform: rotate( 135deg ) skew( 0deg ); + -o-transform: rotate( 135deg ) skew( 0deg ); + -webkit-transform: rotate( 135deg ) skew( 0deg ); + content: ""; + position: absolute; + top: 95%; + left: -14px; + border-top: 20px solid black; + border-top-color: #dfe0e6; + border-left: 20px solid transparent; + border-right: 20px solid transparent; + z-index: -1; +} + +.comment:after { + transform: rotate( 135deg ) skew( 0deg ); + -moz-transform: rotate( 135deg ) skew( 0deg ); + -ms-transform: rotate( 135deg ) skew( 0deg ); + -o-transform: rotate( 135deg ) skew( 0deg ); + -webkit-transform: rotate( 135deg ) skew( 0deg ); + content: ""; + position: absolute; + top: 93%; + left: -11px; + border-top: 19px solid #F5F5F5; + border-top-color: #F5F5F5; + border-left: 18px solid transparent; + border-right: 18px solid transparent; +} + +.comment__children > .comment:after { + transform: rotate( 135deg ) skew( 0deg ); + -moz-transform: rotate( 135deg ) skew( 0deg ); + -ms-transform: rotate( 135deg ) skew( 0deg ); + -o-transform: rotate( 135deg ) skew( 0deg ); + -webkit-transform: rotate( 135deg ) skew( 0deg ); + content: ""; + position: absolute; + top: 93%; + left: -11px; + border-top: 19px solid white; + border-top-color: white; + border-left: 18px solid transparent; + border-right: 18px solid transparent; +} From aab25cbe7c7622facffc434f07d5baacf24010bb Mon Sep 17 00:00:00 2001 From: Samuel Barker Date: Sun, 6 Nov 2016 13:59:45 +0000 Subject: [PATCH 5/7] Adjustments to arrows --- public/css/styles.css | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index e99c2fb..5621150 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -143,7 +143,7 @@ body { -webkit-transform: rotate( 135deg ) skew( 0deg ); content: ""; position: absolute; - top: 95%; + top: 85%; left: -14px; border-top: 20px solid black; border-top-color: #dfe0e6; @@ -160,12 +160,12 @@ body { -webkit-transform: rotate( 135deg ) skew( 0deg ); content: ""; position: absolute; - top: 93%; - left: -11px; + top: 84%; + left: -12px; border-top: 19px solid #F5F5F5; border-top-color: #F5F5F5; - border-left: 18px solid transparent; - border-right: 18px solid transparent; + border-left: 19px solid transparent; + border-right: 19px solid transparent; } .comment__children > .comment:after { @@ -176,10 +176,10 @@ body { -webkit-transform: rotate( 135deg ) skew( 0deg ); content: ""; position: absolute; - top: 93%; - left: -11px; + top: 83%; + left: -12px; border-top: 19px solid white; border-top-color: white; - border-left: 18px solid transparent; - border-right: 18px solid transparent; + border-left: 19px solid transparent; + border-right: 19px solid transparent; } From c709cbe3bfe6f786e86be24aa2c6c9cb3147a9ef Mon Sep 17 00:00:00 2001 From: Samuel Barker Date: Sun, 6 Nov 2016 15:23:20 +0000 Subject: [PATCH 6/7] Finalised changes and refactored --- public/css/styles.css | 77 +++++++++++++++-------------- src/components/comments/elements.js | 14 +++--- src/components/comments/index.js | 4 +- 3 files changed, 47 insertions(+), 48 deletions(-) diff --git a/public/css/styles.css b/public/css/styles.css index 5621150..799a554 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -3,43 +3,50 @@ body { background-color: #F8F8F8; } +/* Common border styling */ +.comment, .comment__children > .comment, .event__details, .event__progress__meter { + border: 1px solid #dfe0e6; +} + +/* Common styling between the event section and the comments section. */ .event, .comments { display: table-cell; + width: 35%; + max-width: 50%; + height: 20%; + margin-top: 5%; } +/* Styling for the event side-panel */ .event { background: white; border: 2px solid #dfe0e6; border-radius: 5px; - float: left; margin-left: 10%; margin-top: 5%; - width: 35%; - max-width: 50%; - height: 20%; } +/* Styling for the comments side-panel */ .comments { float: right; margin-right: 10%; - margin-top: 5%; - width: 35%; - max-width: 50%; - height: 20%; } +/* Handles mobile and tablet views */ @media all and (max-width: 800px) { - .event { - display: table-header-group; + .event, .comments { width: 90%; max-width: 90%; + } + + .event { + display: table-header-group; margin-left: 5%; } + .comments { display: table-footer-group; - width: 90%; - max-width: 90%; margin-right: 5%; } } @@ -77,7 +84,6 @@ body { .event__progress__meter{ background: #F5F5F5; - border: 1px solid #dfe0e6; } .event__progress__percent { @@ -90,7 +96,6 @@ body { margin-right: 3%; margin-bottom: 3%; background: #F5F5F5; - border: 1px solid #dfe0e6; overflow: hidden; padding: 2%; } @@ -103,22 +108,23 @@ body { margin-left: 10%; } +/* Styling for normal comments */ .comment { background: #F5F5F5; - border: 1px solid #dfe0e6; margin-bottom: 8%; border-radius: 5px; position: relative; } +/* Styling for child comments */ .comment__children > .comment { background: white; - border: 1px solid #dfe0e6; margin-left: 8%; margin-bottom: 10%; border-radius: 5px; } +/* Styling for the picture in a comment */ .comment__picture { max-width: 15%; max-height: 15%: @@ -126,6 +132,7 @@ body { margin: 3%; } +/* Styling for the actual text of a comment */ .comment__text { display: inline-block; vertical-align: top; @@ -135,7 +142,8 @@ body { max-width: 75%; } -.comment:before { +/* Handles the transform of the 'arrow' for the message */ +.comment:before, .comment:after, .comment__children > .comment:after { transform: rotate( 135deg ) skew( 0deg ); -moz-transform: rotate( 135deg ) skew( 0deg ); -ms-transform: rotate( 135deg ) skew( 0deg ); @@ -143,43 +151,36 @@ body { -webkit-transform: rotate( 135deg ) skew( 0deg ); content: ""; position: absolute; +} + +/* Common styling for arrows */ +.comment:after, .comment__children > .comment:after { + left: -12px; + border-left: 19px solid transparent; + border-right: 19px solid transparent; +} + +/* Styling for border of the arrow */ +.comment:before { top: 85%; left: -14px; - border-top: 20px solid black; + border-top: 20px solid #dfe0e6; border-top-color: #dfe0e6; border-left: 20px solid transparent; border-right: 20px solid transparent; z-index: -1; } +/* Styling for the arrow for a normal comment */ .comment:after { - transform: rotate( 135deg ) skew( 0deg ); - -moz-transform: rotate( 135deg ) skew( 0deg ); - -ms-transform: rotate( 135deg ) skew( 0deg ); - -o-transform: rotate( 135deg ) skew( 0deg ); - -webkit-transform: rotate( 135deg ) skew( 0deg ); - content: ""; - position: absolute; top: 84%; - left: -12px; border-top: 19px solid #F5F5F5; border-top-color: #F5F5F5; - border-left: 19px solid transparent; - border-right: 19px solid transparent; } +/* Styling for the arrow for a child comment */ .comment__children > .comment:after { - transform: rotate( 135deg ) skew( 0deg ); - -moz-transform: rotate( 135deg ) skew( 0deg ); - -ms-transform: rotate( 135deg ) skew( 0deg ); - -o-transform: rotate( 135deg ) skew( 0deg ); - -webkit-transform: rotate( 135deg ) skew( 0deg ); - content: ""; - position: absolute; top: 83%; - left: -12px; border-top: 19px solid white; border-top-color: white; - border-left: 19px solid transparent; - border-right: 19px solid transparent; } diff --git a/src/components/comments/elements.js b/src/components/comments/elements.js index 68087ae..a7a97f9 100644 --- a/src/components/comments/elements.js +++ b/src/components/comments/elements.js @@ -54,22 +54,22 @@ render() { /** - * Obtains the correct donation string depending on whether or not there was a donation. + * Obtains the correct donation HTML string depending on whether or not there was a donation. */ - function getDonationString(donation) { - let donationString = ``; + function renderDonationHTML(donation) { + let donationHTML = ``; if(donation > 0) { - donationString = ` - donated £${(donation/100).toFixed(2)} + donationHTML = ` + donated £${(donation/100).toFixed(2)} `; } - return donationString; + return donationHTML; } return ` ${this.person} - ${getDonationString(this.donation)} + ${renderDonationHTML(this.donation)} `; } } diff --git a/src/components/comments/index.js b/src/components/comments/index.js index 7e2a85a..b4a55fa 100644 --- a/src/components/comments/index.js +++ b/src/components/comments/index.js @@ -1,7 +1,5 @@ // -- comments -// -- -- profilepicture -// -- -- title -// -- -- commenttext +// -- -- comment import {Comment} from './elements.js' From fb36e1dfcf99f8a395318d8df9b0219db0178191 Mon Sep 17 00:00:00 2001 From: Samuel Barker Date: Sun, 6 Nov 2016 15:29:14 +0000 Subject: [PATCH 7/7] Added missed comments --- public/css/styles.css | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/public/css/styles.css b/public/css/styles.css index 799a554..462e792 100644 --- a/public/css/styles.css +++ b/public/css/styles.css @@ -51,46 +51,55 @@ body { } } +/* Styles the component which contains the title */ .event__title__container { background: #F5F5F5; border-bottom: 2px solid #dfe0e6; width: auto; } +/* Styles the event title */ .event__title { margin: 0; padding: 2%; font-size: 95%; } +/* Styles the event description */ .event__description { margin: 3%; padding-bottom: 3%; border-bottom: 1px solid #dfe0e6; } +/* Styles the event funding */ .event__funding { margin: 3%; } +/* Styles the totals text for the event funding */ .event__funding__totals { color: #245626; } +/* Styles the amount raised for the event funding element */ .event__funding__raised { font-size: 200%; font-weight: bold; } +/* Styles the funding progress meter */ .event__progress__meter{ background: #F5F5F5; } +/* Styles the event progress percent */ .event__progress__percent { background: #3CBF42; padding-bottom: 5%; } +/* Styles the event details */ .event__details { margin-left: 3%; margin-right: 3%; @@ -100,6 +109,7 @@ body { padding: 2%; } +/* Common styling for the event date and the event location */ .event__details__date, .event__details__location { width: 40%; display: inline;