[#975] Convert blurbs to use Modal components. (#1098)

* Convert blurbs to use Modal components. * Add Avatar / Component option to 'element' prop for Modals. Circumvents weird behaviour of React on Rails. * Fix failing tests. * Add test case for new Modal functionality. Refactoring. * All content inside the modal. Still requires re-work of design to match Figma comps. i18n completed for avatar alts. * minor refactoring. * Add contributor avatar blurb to new German locale. * Update Modal component to match Figma comps. Add contributor blurb back into Modal with new formatting. * Address YML formatting. * Change responsive behaviour for modal. Replace SVG close icon with FAIcon. * Stylistic changes to more closely match comps + requested changes. * Add missing message for fr locale. * few minor syntax changes.
ifmeorg · Dec 2, 2018 · af94d40 · af94d40
1 parent 1c5560a
commit af94d40
Show file tree

Hide file tree

Showing 21 changed files with 1,384 additions and 1,660 deletions.
diff --git a/app/assets/javascripts/contributors_readmore.js b/app/assets/javascripts/contributors_readmore.js
diff --git a/app/assets/stylesheets/application/contributors.scss b/app/assets/stylesheets/application/contributors.scss
@@ -1,9 +1,90 @@
-.hideContent {
-  display: none;
-}
+.contributorModalBody {
+	display: flex;
+	flex-direction: row;
+
+	.contributorModalBodyPhoto {
+    flex: 0 1 30%;
+
+    &.showOnSmall {
+      display: none;
+    }
+
+    .contributorAvatar {
+      border-radius: 50%;
+      overflow: hidden;
+      object-fit: cover;
+      background: $mulberry-key-lime;
+      height: 150px;
+      width: 150px;
+      margin: 0 auto;
+    }
+
+    @media screen and (max-width: $small) {
+      flex: 0 1 25%;
+      .contributorAvatar {
+        width: 100px;
+        height: 100px;
+      }
+
+      &.hideOnSmall{
+        display: none;
+      }
+
+      &.showOnSmall {
+        display: block;
+      }
+    }
+  }
+
+	.contributorModalBodyCopy {
+    margin-left: $size-18;
+
+    .contributorModalHeader {
+      display: flex;
+      align-items: center;
+      flex-flow: row nowrap;
 
-.readMoreShow,
-.readLessShow {
-  @include staticContentFakeLink();
-  cursor: pointer;
-}
+      @media screen and (max-width: $small) {
+        flex-flow: column nowrap;
+        text-align: center;
+      }
+
+      .contributorModalName {
+        font-size: $size-36;
+        color: $mulberry;
+        line-height: $size-42;
+        font-weight: 400;
+        margin: $size-24 0 $size-10 0;
+
+        @media screen and (max-width: $small) {
+          margin-top: 0;
+        }
+      }
+
+      .contributorModalBodySocialLinks {
+        display: flex;
+        flex-flow: row nowrap;
+        font-size: $size-14;
+        text-transform: uppercase;
+        letter-spacing: 2px;
+
+        i:last-of-type {
+          margin-left: $size-10;
+        }
+
+        @media screen and (max-width: $small) {
+          flex-flow: column nowrap;
+          text-align: center;
+
+          i:last-of-type {
+            margin-left: 0;
+          }
+        }
+      }
+    }
+
+		p {
+			font-size: $size-18;
+		}
+	}
+}
diff --git a/app/assets/stylesheets/base/_sizes.scss b/app/assets/stylesheets/base/_sizes.scss
@@ -17,6 +17,7 @@ $size-28: 28px;
 $size-30: 30px;
 $size-32: 32px;
 $size-34: 34px;
+$size-35: 35px;
 $size-36: 36px;
 $size-38: 38px;
 $size-40: 40px;

diff --git a/app/views/pages/_contributor_blurb.html.erb b/app/views/pages/_contributor_blurb.html.erb
@@ -0,0 +1,43 @@
+<div class="gridManyItem center">
+  <%= react_component('Modal', props: {
+    element: { 
+      component: 'Avatar', 
+      props: { 
+        src: ProfilePicture.normalize_url(blurb["image"]),
+        alt: t('pages.contribute.contributor_avatar_alt', {
+          name: blurb['name']
+        })
+      } 
+    },
+    body: <<~HEREDOC
+      <div class="contributorModalBody">
+        <div class="contributorModalBodyPhoto hideOnSmall">
+          <img class="contributorAvatar" src="#{ProfilePicture.normalize_url(blurb["image"])}">
+        </div>
+
+        <div class="contributorModalBodyCopy">
+          <div class="contributorModalHeader">
+            <div class="contributorModalBodyPhoto showOnSmall">
+                <img class="contributorAvatar" src="#{ProfilePicture.normalize_url(blurb["image"])}">
+            </div>
+            <div>
+              <div role="heading" class="contributorModalName">
+                #{blurb["name"]}
+              </div>
+              <div class="contributorModalBodySocialLinks">
+                <div class="socialLink">
+                  <i class="fa fa-location-arrow fa-inline"></i>#{blurb["location"]}
+                </div>
+                <div class="socialLink">
+                  <i class="#{get_icon_class(blurb["social"])} fa-inline"></i>
+                  #{link_to(blurb["link_name"], blurb["link"], target: 'blank')}
+                </div>
+              </div>
+            </div>
+          </div>
+          <p>#{blurb["profile"]}</p>
+        </div>
+     
+    HEREDOC
+  }) %>
+</div>
diff --git a/app/views/pages/contribute.html.erb b/app/views/pages/contribute.html.erb
@@ -13,16 +13,9 @@
   %>
 </div>
 
-<div class="gridThree marginTop">
+<div class="gridMany marginTop">
   <% @blurbs.each do |blurb| %>
-    <div class="gridThreeItemBoxGhost center">
-      <%= ProfilePicture.fetch(blurb["image"], name: blurb['name']) %>
-      <div class="contributor_profile smallMarginTop"><%= blurb["profile"] %></div>
-      <div class="smallMarginTop">
-        <i class="fa fa-location-arrow fa-inline"></i><%= " #{blurb["location"]}" %>
-        <br /><%= content_tag(:i, '', class: "#{get_icon_class(blurb["social"])} fa-inline") %><%= link_to(blurb["link_name"], blurb["link"], target: 'blank') %>
-      </div>
-    </div>
+    <%= render partial: 'contributor_blurb', locals: { blurb: blurb } %>
   <% end %>
 </div>
 

diff --git a/client/app/components/Modal/Modal.scss b/client/app/components/Modal/Modal.scss
@@ -22,15 +22,18 @@
   &Box {
     @include setFontSize($size-20);
     @include fadeIn(0.5s);
-    padding: $size-20;
+    padding: $size-36;
+    position: relative;
     font-weight: $font-weight-400;
     color: $black;
     box-sizing: border-box;
     box-shadow: $size-0 $size-2 $size-10 $black-10;
     border-radius: $size-4;
     background: $white;
-    width: 50vw;
-    height: 60vh;
+    width: 90vw;
+    max-width: 910px;
+    height: 65vh;
+    max-height: 440px;
     z-index: $z-index-front;
     @media screen and (max-width: $small) {
       width: 100vw;
@@ -39,7 +42,6 @@
     }
     &Header {
       @include setMargin($size-0, $size-0, $size-20, $size-0);
-      height: $size-20;
       display: flex;
       flex-direction: row;
       justify-content: space-between;
@@ -51,14 +53,16 @@
       }
       &Close {
         cursor: pointer;
-        margin-left: auto;
+        position: absolute;
+        top: $size-26;
+        right: $size-26;
       }
     }
     &Body {
       @include dashboardSectionLink();
       overflow-x: hidden;
       overflow-y: auto;
-      height: calc(100% - 40px);
+      height: 100%;
       text-align: left;
       line-height: 1.4 !important;
     }

diff --git a/client/app/components/Modal/__tests__/Modal.spec.jsx b/client/app/components/Modal/__tests__/Modal.spec.jsx
@@ -1,5 +1,5 @@
 // @flow
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import React from 'react';
 import { Modal } from '../index';
 
@@ -196,5 +196,23 @@ describe('Modal', () => {
         expect(wrapper.find('.modal').exists()).toEqual(true);
       });
     });
+
+    describe('uses an Avatar component for an element and HTML values for the body', () => {
+      it('renders correctly', () => {
+        const component = (
+          <Modal
+            element={{ component: 'Avatar', props: { src: 'https://via.placeholder.com/75x75' } }}
+            body={bodyHTML}
+            title={title}
+          />
+        );
+
+        const wrapper = mount(component);
+        expect(wrapper.find('.avatar').exists()).toEqual(true);
+        wrapper.find('.avatar').simulate('click');
+        expect(wrapper.find('.modalBackdrop').exists()).toEqual(true);
+        expect(wrapper.find('.modal').exists()).toEqual(true);
+      });
+    });
   });
 });