From 7343508263c889d6b3f0215135a1d58284387ebc Mon Sep 17 00:00:00 2001
From: Josh Smith <joshdotsmith@gmail.com>
Date: Mon, 13 Feb 2017 15:12:29 -0800
Subject: [PATCH] Update designs of project page to be responsive

---
 app/styles/base/_helpers.scss                 |  2 +-
 .../donations/donation-progress.scss          | 51 +++++++++++--------
 .../components/donations/donation-status.scss |  3 +-
 .../components/organization-members.scss      | 30 ++++++++---
 .../components/project-long-description.scss  |  6 ---
 app/styles/templates/project/index.scss       | 13 +++++
 .../donations/donation-progress.hbs           | 19 +++----
 app/templates/project/index.hbs               |  5 +-
 app/templates/project/tasks/task.hbs          | 32 ++++++------
 .../donations/donation-progress-test.js       |  4 +-
 .../components/donations/donation-progress.js |  6 +--
 11 files changed, 102 insertions(+), 69 deletions(-)

diff --git a/app/styles/base/_helpers.scss b/app/styles/base/_helpers.scss
index 65e8897a6..e369ff738 100644
--- a/app/styles/base/_helpers.scss
+++ b/app/styles/base/_helpers.scss
@@ -1,5 +1,5 @@
 .container {
-  max-width: 1040px;
+  max-width: 1200px;
   margin: 0 auto;
   padding: 0 10px;
   height: 100%;
diff --git a/app/styles/components/donations/donation-progress.scss b/app/styles/components/donations/donation-progress.scss
index 44ff55215..02cf06508 100644
--- a/app/styles/components/donations/donation-progress.scss
+++ b/app/styles/components/donations/donation-progress.scss
@@ -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 {
diff --git a/app/styles/components/donations/donation-status.scss b/app/styles/components/donations/donation-status.scss
index ab9812b26..e3ccdc5fa 100644
--- a/app/styles/components/donations/donation-status.scss
+++ b/app/styles/components/donations/donation-status.scss
@@ -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 {
diff --git a/app/styles/components/organization-members.scss b/app/styles/components/organization-members.scss
index aa736180e..6284b5d38 100644
--- a/app/styles/components/organization-members.scss
+++ b/app/styles/components/organization-members.scss
@@ -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) {
+    margin-right: 0;
+  }
+}
+
 .organization-members {
   h3 {
     display: flex;
@@ -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);
+    }
   }
 }
diff --git a/app/styles/components/project-long-description.scss b/app/styles/components/project-long-description.scss
index 30adad528..1c2efc658 100644
--- a/app/styles/components/project-long-description.scss
+++ b/app/styles/components/project-long-description.scss
@@ -1,10 +1,4 @@
-.project-long-description {
-  @include span-columns(8);
-}
-
 .long-description {
-  @include span-columns(12);
-
   &.empty {
     background: $background-gray;
     border-radius: 6px;
diff --git a/app/styles/templates/project/index.scss b/app/styles/templates/project/index.scss
index 6cfaeb261..e1cbe8138 100644
--- a/app/styles/templates/project/index.scss
+++ b/app/styles/templates/project/index.scss
@@ -5,10 +5,23 @@
 
 .project-main {
   @include span-columns(8);
+  @include media($lg-screen) {
+    @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 {
diff --git a/app/templates/components/donations/donation-progress.hbs b/app/templates/components/donations/donation-progress.hbs
index 661e64793..bb5c15be4 100644
--- a/app/templates/components/donations/donation-progress.hbs
+++ b/app/templates/components/donations/donation-progress.hbs
@@ -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>
diff --git a/app/templates/project/index.hbs b/app/templates/project/index.hbs
index b0c704fa1..9e7acfa9d 100644
--- a/app/templates/project/index.hbs
+++ b/app/templates/project/index.hbs
@@ -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}}
+    </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
diff --git a/app/templates/project/tasks/task.hbs b/app/templates/project/tasks/task.hbs
index 5d9591e23..2bbe6e3a7 100644
--- a/app/templates/project/tasks/task.hbs
+++ b/app/templates/project/tasks/task.hbs
@@ -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>
diff --git a/tests/integration/components/donations/donation-progress-test.js b/tests/integration/components/donations/donation-progress-test.js
index 5d9225805..111700ac9 100644
--- a/tests/integration/components/donations/donation-progress-test.js
+++ b/tests/integration/components/donations/donation-progress-test.js
@@ -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');
@@ -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');
 });
diff --git a/tests/pages/components/donations/donation-progress.js b/tests/pages/components/donations/donation-progress.js
index d0372bb4b..cd98ebf76 100644
--- a/tests/pages/components/donations/donation-progress.js
+++ b/tests/pages/components/donations/donation-progress.js
@@ -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')
 };