Skip to content

frontender-task_vanilla_changes_farhan #28

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ifarhanrifat wants to merge 1 commit into
base: master
Choose a base branch
from
Open

frontender-task_vanilla_changes_farhan #28

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3,884 changes: 3,884 additions & 0 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

3 changes: 1 addition & 2 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
"url": "https://github.com/thebeansgroup/frontender-task_vanilla"
},
"author": "sam",
"dependencies": {
},
"dependencies": {},
"devDependencies": {
"babel-core": "^5.5.8",
"babel-loader": "^5.1.4",
Expand Down
216 changes: 215 additions & 1 deletion public/css/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,217 @@
:root {
--border-color: #e7e7e7;
--green: #245626;
--light-green: #3dbe43;
--white-smoke: #f5f5f5;
--font-color: #3E3E3E;
--body-color: #f8f8f8;
}
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');

body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-family: 'Raleway', sans-serif;
background-color: var(--body-color);
}
.w50{
width: 50%;
}
.container{
width: 100%;
max-width: 960px;
padding: 15px 0;
margin: 0 auto;
}
.row{
margin-left: -15px;
margin-right: -15px;
}
.row:after, .row:before, .container:after, .container:before {
display: table;
content: " ";
}
.column{
width: 50%;
float: left;
padding: 0 15px;
box-sizing: border-box;
}
h1{
margin: 0;
}
.event{
float: left;
border: 1px solid var(--border-color);
border-radius: 4px;
background-color: #fff;
}
.event__title{
background-color: var(--white-smoke);
padding: 10px 15px;
border-bottom: 1px solid #e6e6e6;
font-size: 18px;
font-weight: 600;
color: var(--font-color);
}
.event__description {
margin: 15px;
border-bottom: 1px solid #ccc;
padding: 5px 0 15px;
}
.event__description > p{
margin: 0 0 10px;
}
.event__funding{
padding: 0 15px;
}
.event__funding__raised{
color: var(--green);
font-size: 36px;
font-weight: 700;
display: block;
line-height: 50px;
}
.event__funding__target{
color: var(--green);
font-size: 16px;
font-weight: 300;
}
.event__progress{
background-color: var(--white-smoke);
border: 1px solid var(--border-color);
position: relative;
height: 25px;
margin-bottom: 10px;
}
.event__progress__total{
opacity: 1;
}
.event__progress_meter{
position: absolute;
top: -1px;
right: 0;
bottom: 0;
left: 0;
background-color: var(--light-green);
height: 27px;
}
.event__progress__total{
opacity: 0;
position: absolute;
left: 50%;
bottom: 0;
z-index: 99;
background-color: var(--white-smoke);
border: 1px solid var(--border-color);
padding: 5px;
border-radius: 4px;
margin: 0;
margin-bottom: -3px;
transform: translate(-50%);
-webkit-transform: translate(-50%);
-moz-transform: translate(-50%);
-o-transform: translate(-50%);
transition: opacity 0.5s;
}
.event__details{
background-color: var(--white-smoke);
border: 1px solid var(--border-color);
padding: 12px 25px;
margin: 15px
}
.event__details strong{
text-transform: uppercase;
color: var(--font-color);
font-size: 14px;
font-weight: 600;
}
.event__details__date{
float: left;
}
.comments__container__sub, .comments__child__container{
display: inline-block;
width: 100%;
height: auto;
background-color: var(--white-smoke);
border: 1px solid var(--border-color);
border-radius: 6px;
border-bottom-left-radius: 0;
margin-bottom: 60px;
position: relative;
}
.comments__child__container{
margin-top: -40px;
}
.comments__container__sub:before, .comments__child__container:before{
content: '';
position: absolute;
width: 0px;
height: 0px;
left: -1px;
right: auto;
top: auto;
bottom: -40px;
border: 20px solid;
border-color: var(--border-color) transparent transparent var(--border-color);
}
.comments__container__sub:after, .comments__child__container:after{
content: '';
position: absolute;
width: 0px;
height: 0px;
left: 0px;
right: auto;
top: auto;
bottom: -37px;
border: 19px solid var(--white-smoke);
border-color: var(--white-smoke) transparent transparent var(--white-smoke);
}
.comments__child__container:after{
border-color: #fff transparent transparent #fff;
}
.comments__child__container{
width: 80%;
float: right;
background-color: #fff;
}
.comments__content, .comments__child__content{
padding: 20px;
}
.comments__img{
display: inline-block;
width: 20%;
height: auto;
max-width: 85px;
}
.comments__detail{
display: inline-block;
width: 75%;
padding-left: 15px;
vertical-align: top;
float: right;
}
.person__details p {
margin-bottom: 10px;
margin-top: 0;
}
.person__details span{
font-size: 14px;
color: var(--font-color);
}
.person__details__name{
font-size: 14px;
font-weight: 600;
color: var(--font-color);
}

@media only screen and (max-width: 768px) {
.event {
margin-bottom: 60px;
}
.column{
width: 100%;
}
.comments__child__container{
margin-top: -40px;
}

}
0 public/images/faces/128-1.jpg → public/images/faces/Person A.jpg
View file
Open in desktop
File renamed without changes
0 public/images/faces/128-10.jpg → public/images/faces/Person B.jpg
View file
Open in desktop
File renamed without changes
0 public/images/faces/128-12.jpg → public/images/faces/Person C.jpg
View file
Open in desktop
File renamed without changes
0 public/images/faces/128-11.jpg → public/images/faces/Person D.jpg
View file
Open in desktop
File renamed without changes
59 changes: 59 additions & 0 deletions src/components/comments/elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/***** Comments******/
export class Comments {
constructor(comments) {
this.comments = comments
}

render() {

const comments = this.comments.map((comment) => {
return `
<div class="comments__container__sub">
<div class="comments__content">
<img
src="./images/faces/${comment.name}.jpg"
class="comments__img"
alt="User Placeholder Image"
title="User Placeholder Image"
/>
<div class="comments__detail">
<div class="person__details">
<p><span class="person__details__name">${comment.name}</span> <span> donated &#163;${(comment.donation)/100}</span> </p>
</div>
<div class="person__msg">${comment.comment}
</div>
</div>
</div>
</div>

${comment.children.map((children) => {
return `
<div class="comments__child__container">
<div class="comments__child__content">
<img
src="./images/faces/${children.name}.jpg"
class="comments__img"
alt="User Placeholder Image"
title="User Placeholder Image"
/>
<div class="comments__detail">
<div class="person__details">
<p>
<span class="person__details__name">${children.name}</span>
</p>
</div>
<div class="person__msg">${children.comment}</div>
</div>
</div>
</div>
`
}).join('')}

`
}).join('')

return `
${comments}
`
}
}
9 changes: 8 additions & 1 deletion src/components/comments/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Comments } from './elements.js';

export default class {
constructor(data) {
this.data = data;
Expand All @@ -6,9 +8,14 @@ export default class {
}

createFactories() {
this.comments = new Comments(this.data.comments);
}

render() {
return "comments";
return `
<div class="comments__container">
${this.comments.render()}
</div>
`;
}
}
6 changes: 3 additions & 3 deletions src/components/event/elements.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ export class Funding {
return `
<div class="event__funding">
<p class="event__funding__totals">
<span class="event__funding__raised">£${this.funding.raised/100}</span>
of £${this.funding.target/100} target.
<span class="event__funding__raised">£${this.funding.raised/100} raised</span>
<span class="event__funding__target">of £${this.funding.target/100} target.</span>
</p>
${this.renderProgress()}
</div>
Expand All @@ -76,7 +76,7 @@ export class Details {
render() {
return `
<div class="event__details">
<div class="event__details__date">
<div class="event__details__date w50">
<strong>Date:</strong> ${this.date}
</div>
<div class="event__details__location">
Expand Down