Skip to content

Update designs of project page to be responsive #1049

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

Merged
merged 1 commit into from
Feb 14, 2017
Merged

Update designs of project page to be responsive #1049

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
2 changes: 1 addition & 1 deletion app/styles/base/_helpers.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
.container {
max-width: 1040px;
max-width: 1200px;
margin: 0 auto;
padding: 0 10px;
height: 100%;
Expand Down
51 changes: 29 additions & 22 deletions app/styles/components/donations/donation-progress.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,35 +1,42 @@
.donation-progress {
margin-bottom: 20px;

.information {
.progress-bar-container {
height: 8px;
margin: 10px 0 20px 0;
}

&__details {
display: flex;
justify-content: space-between;
margin: 20px 0;

.percentage {
text-align: right;
}
&__amount, &__percentage {
text-align: center;

.description {
color: $text--light;
font-size: $body-font-size-small;
}
&__label {
color: $text--light;
font-size: 13px;
}

.value {
font-size: $header-font-size-large;
font-weight: 700;
}
}
&__value {
font-size: $header-font-size-medium;
font-weight: 600;
line-height: 2rem;
}

.progress-bar-container {
height: 10px;
margin: 20px 0;
}
&:first-child {
text-align: left;
}

&__description-header {
color: $text--light;
font-size: $body-font-size-small;
font-weight: 600;
text-transform: uppercase;
&:last-child {
text-align: right;
}
}

&__amount__value {
color: $blue;
}
}

&__description {
Expand Down
3 changes: 2 additions & 1 deletion app/styles/components/donations/donation-status.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,13 @@
.show-donation {
background: $blue--lighter;
border-radius: 4px;
padding: 10px 15px;
padding: 1em;

.info {
display: flex;
font-weight: 700;
line-height: 30px;
margin: 0;
vertical-align: middle;

&:before {
Expand Down
30 changes: 24 additions & 6 deletions app/styles/components/organization-members.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,16 @@
@mixin member-list-item($number, $margin-right) {
$percentage: 100 / $number;
$total-margins: $margin-right * $number;
$width: calc(#{$percentage}% - #{$total-margins / $number});

margin-right: $margin-right;
width: $width;

&nth-child(#{$number}n) {
Copy link
Contributor

@npendery npendery Feb 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is the last n here the placeholder that was supposed to be taken out?

Copy link
Contributor Author

@joshsmith joshsmith Feb 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No this is the _x_n-th item we want that to happen on. That means it repeats.

Copy link
Contributor

@npendery npendery Feb 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ahh gotcha, makes sense

margin-right: 0;
}
}

.organization-members {
h3 {
display: flex;
Expand All @@ -16,16 +29,21 @@
}

li {
width: calc(20% - 16px/5);
margin-right: 4px;

&:nth-child(5n) {
margin-right: 0;
}
$number: 6;
$margin-right: 3px;
@include member-list-item(6, 3px);

.icon {
height: auto;
width: 100%;
}

@include media($md-screen) {
@include member-list-item(9, 3px);
}

@include media($sm-screen) {
@include member-list-item(6, 3px);
}
}
}
6 changes: 0 additions & 6 deletions app/styles/components/project-long-description.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
.project-long-description {
@include span-columns(8);
}

.long-description {
Copy link
Contributor

@npendery npendery Feb 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also remove the class in the component js file?

Copy link
Contributor Author

@joshsmith joshsmith Feb 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I didn't remove that because I like to keep the component 1-1 with classes, even if it doesn't have styling.

@include span-columns(12);

&.empty {
background: $background-gray;
border-radius: 6px;
Expand Down
13 changes: 13 additions & 0 deletions app/styles/templates/project/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,23 @@

.project-main {
@include span-columns(8);
@include media($lg-screen) {
Copy link
Contributor

@npendery npendery Feb 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just for my knowledge, where does the media($lg-screen) come into play? I see from the _breakpoints.scss its defining sizes but how does it recognize/render this?

Copy link
Contributor Author

@joshsmith joshsmith Feb 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just normal media breakpoints. Browser behavior comes into play here.

@include span-columns(7);
}
@include media($md-screen) {
@include span-columns(12);
}
}

.project-sidebar {
@include span-columns(4);
@include media($lg-screen) {
@include span-columns(5);
}
@include media($md-screen) {
@include span-columns(12);
}

.project-sidebar__section {
margin: 40px 0;
&:first-child {
Expand Down
19 changes: 8 additions & 11 deletions app/templates/components/donations/donation-progress.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,14 @@
<div class="information">
<div class="amount">
<div class="value">{{format-currency amountDonated trimZero=true}}</div>
<div class="description">given each month</div>
{{progress-bar-container percentage=percentage}}
<div class="donation-progress__details">
<div class="donation-progress__details__amount">
<div class="donation-progress__details__amount__value">{{format-currency amountDonated trimZero=true}}</div>
<div class="donation-progress__details__amount__label">given each month</div>
</div>
<div class="percentage">
<div class="value">{{format-percentage percentage trimZero=true}}</div>
<div class="description">of {{format-currency donationGoal.amount trimZero=true}} goal</div>
<div class="donation-progress__details__percentage">
<div class="donation-progress__details__percentage__value">{{format-percentage percentage trimZero=true}}</div>
<div class="donation-progress__details__percentage__label">of {{format-currency donationGoal.amount trimZero=true}} goal</div>
</div>
</div>
{{progress-bar-container percentage=percentage}}
<p class="donation-progress__description-header">
Current Goal
</p>
<p class="donation-progress__description">
{{description}}
</p>
5 changes: 3 additions & 2 deletions app/templates/project/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,14 @@
<div class="container">
<div class="project-wrapper">

{{project-long-description project=project}}
<div class="project-main">
{{project-long-description project=project}}
Copy link
Contributor

@npendery npendery Feb 13, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Include this tag and class in the component js?

Copy link
Contributor Author

@joshsmith joshsmith Feb 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There may be more things that go into the main area.

Copy link
Contributor Author

@joshsmith joshsmith Feb 14, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See the sidebar below to see what I mean.

</div>

<aside class="project-sidebar">

{{#if project.donationsActive}}
<section class="project-sidebar__section">
<h4>Donations</h4>
{{donations/donation-progress
amountDonated=project.totalMonthlyDonated
donationGoal=project.currentDonationGoal
Expand Down
32 changes: 17 additions & 15 deletions app/templates/project/tasks/task.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,21 @@
{{task-header task=task saveTask=(action 'saveTask')}}
{{task-status task=task}}
<div class="container">
{{task-header task=task saveTask=(action 'saveTask')}}
{{task-status task=task}}

<div class="task-wrapper">
<div class="task-timeline">
{{task-details task=task saveTask=(action 'saveTask')}}
{{task-comment-list comments=comments onSaveError=(action 'onSaveError')}}
<div>
{{#create-comment-form comment=newComment save=(action 'saveComment')}}
{{#if (can "edit task" task)}}{{task-status-button task=task}}{{/if}}
{{/create-comment-form}}
{{#if error}}
{{error-formatter error=error}}
{{/if}}
<div class="task-wrapper">
<div class="task-timeline">
{{task-details task=task saveTask=(action 'saveTask')}}
{{task-comment-list comments=comments onSaveError=(action 'onSaveError')}}
<div>
{{#create-comment-form comment=newComment save=(action 'saveComment')}}
{{#if (can "edit task" task)}}{{task-status-button task=task}}{{/if}}
{{/create-comment-form}}
{{#if error}}
{{error-formatter error=error}}
{{/if}}
</div>
</div>
<div class="task-sidebar">
</div>
</div>
<div class="task-sidebar">
</div>
</div>
4 changes: 2 additions & 2 deletions tests/integration/components/donations/donation-progress-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ test('it renders proper information', function(assert) {
page.render(hbs`{{donations/donation-progress donationGoal=donationGoal amountDonated=500}}`);

assert.equal(page.amountValue, '$500', 'Correct amount value is rendered');
assert.equal(page.percentageDescription, 'of $1,000 goal', 'Correct percentage description is rendered');
assert.equal(page.percentageLabel, 'of $1,000 goal', 'Correct percentage label is rendered');
assert.equal(page.percentageValue, '50%', 'Correct percentage value is rendered');
assert.equal(page.goalDescription, mockGoal.description, 'Goal description is rendered');
assert.ok(page.rendersProgressBar, 'Progress bar component is rendered');
Expand All @@ -42,7 +42,7 @@ test('it renders decimal values if there are any', function(assert) {
page.render(hbs`{{donations/donation-progress donationGoal=donationGoal amountDonated=505.50}}`);

assert.equal(page.amountValue, '$505.50', 'Correct amount is rendered');
assert.equal(page.percentageDescription, 'of $1,000 goal', 'Correct percentage description is rendered');
assert.equal(page.percentageLabel, 'of $1,000 goal', 'Correct percentage label is rendered');
assert.equal(page.percentageValue, '50.5%', 'Correct percentage is rendered');
assert.ok(page.rendersProgressBar, 'Progress bar component is rendered');
});
6 changes: 3 additions & 3 deletions tests/pages/components/donations/donation-progress.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { isVisible, text } from 'ember-cli-page-object';
export default {
scope: '.donation-progress',

amountValue: text('.amount .value'),
amountValue: text('.donation-progress__details__amount__value'),
goalDescription: text('.donation-progress__description'),
percentageDescription: text('.percentage .description'),
percentageValue: text('.percentage .value'),
percentageLabel: text('.donation-progress__details__percentage__label'),
percentageValue: text('.donation-progress__details__percentage__value'),
rendersProgressBar: isVisible('.progress-bar')
};