Refactored ProfilePicture to use React component (#876)

* Refactored ProfilePicture to use React component 1. Updated ProfilePicture class to use Avatar React component. 2. Enhanced Avatar component to use react-lazyload 3. Updated tests that assert on the ProfilePicture 4. Fixed some tests for language toggling involving page transitions * Fixing CodeClimate complaints * Fixing typo * Reorganizing MomentsApp bundle * Fixing lint errors and paths * Updating tests to asseto on Hash * Updating flow handling of assets * Fixing lint ignore * Adding ignore path for CodeClimate
ifmeorg · Apr 5, 2018 · d8c4a98 · d8c4a98
1 parent 4d7b28f
commit d8c4a98
Show file tree

Hide file tree

Showing 76 changed files with 1,068 additions and 806 deletions.
diff --git a/.codeclimate.yml b/.codeclimate.yml
@@ -21,6 +21,7 @@ engines:
     - public/javascripts/
     - vendor/assets/javascripts
     - client/karma.conf.js
+    - client/flow/
   fixme:
     enabled: false
   rubocop:

diff --git a/Rakefile b/Rakefile
@@ -4,7 +4,7 @@
 # for example lib/tasks/capistrano.rake, and they will automatically be
 # available to Rake.
 
-require File.expand_path('../config/application', __FILE__)
+require File.expand_path('config/application', __dir__)
 Rails.application.load_tasks
 require 'fileutils'
 require 'yaml'

diff --git a/app/assets/stylesheets/application.scss b/app/assets/stylesheets/application.scss
@@ -544,47 +544,40 @@ a.highlight:hover {
 
 /* Images */
 
-img {
-  max-width: 100%;
+.avatar {
+  margin: 0;
+
+  .portrait {
+    border-color: $container-color;
+    border-width: 2px;
+    background-color: $background-color;
+  }
 }
 
-.mini_profile_picture {
+.mini_profile_picture .portrait {
   width: 100px;
   height: 100px;
-  border-radius: 50%;
-  border: 2px solid $container-color;
-  object-fit: cover;
 
   @media screen and (max-width: $small) {
     width: 50px;
     height: 50px;
   }
 }
 
-.contributor_picture,
-.profile_picture {
+.contributor_picture .portrait,
+.profile_picture .portrait {
   width: 55px;
   height: 55px;
-  border-radius: 50%;
-  border: 2px solid $container-color;
-  margin: 0 auto;
-  object-fit: cover;
 
   @media screen and (min-width: $small + 1) {
     width: 150px;
     height: 150px;
   }
 }
 
-.home_picture {
+.home_picture .portrait {
   width: 50px;
   height: 50px;
-  border-radius: 50%;
-  border: 2px solid $container-color;
-  margin: 0 auto;
-  display: block;
-  overflow: hidden;
-  object-fit: cover;
 
   @media screen and (min-width: $medium + 1) {
     width: 100px;
@@ -593,22 +586,30 @@ img {
 }
 
 .small_profile_picture_div {
-  width: 100px;
-  height: 100px;
+  width: 1px;
 
-  @media screen and (max-width: $small) {
-    width: 50px;
-    height: 50px;
+  .portrait {
+    width: 100px;
+    height: 100px;
+
+    @media screen and (max-width: $small) {
+      width: 50px;
+      height: 50px;
+    }
   }
 }
 
 .profile_picture_div {
-  width: 150px;
-  height: 150px;
+  width: 1px;
 
-  @media screen and (max-width: $small) {
-    width: 55px;
-    height: 55px;
+  .portrait {
+    width: 150px;
+    height: 150px;
+
+    @media screen and (max-width: $small) {
+      width: 55px;
+      height: 55px;
+    }
   }
 }