From b06b3d79b71c25bf5b8a4b883fee1058e5e51e87 Mon Sep 17 00:00:00 2001
From: epriestley <git@epriestley.com>
Date: Wed, 13 May 2015 08:14:47 -0700
Subject: [PATCH] Make CSS agnostic to underlying profile image size

Summary: Ref T7707. My analysis there was a bit confused and this isn't really all that important, but seems cleaner and desirable to be agnostic to the underlying image size.

Test Plan: Tested Safari, Firefox and Chrome with a variety of profile image sizes.

Reviewers: chad, btrahan

Reviewed By: btrahan

Subscribers: epriestley

Maniphest Tasks: T7707

Differential Revision: https://secure.phabricator.com/D12825
---
 .../auth/view/PhabricatorAuthAccountView.php  | 13 +++++++++++--
 webroot/rsrc/css/application/auth/auth.css    | 19 ++++++++++++++-----
 .../application/conpherence/message-pane.css  |  2 +-
 .../application/conpherence/notification.css  |  2 +-
 webroot/rsrc/css/phui/phui-header-view.css    |  2 +-
 .../css/phui/phui-object-item-list-view.css   |  2 +-
 webroot/rsrc/css/phui/phui-timeline-view.css  |  2 +-
 7 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/applications/auth/view/PhabricatorAuthAccountView.php b/src/applications/auth/view/PhabricatorAuthAccountView.php
index 13574a9b6a..8eb73144aa 100644
--- a/src/applications/auth/view/PhabricatorAuthAccountView.php
+++ b/src/applications/auth/view/PhabricatorAuthAccountView.php
@@ -95,13 +95,22 @@ final class PhabricatorAuthAccountView extends AphrontView {
     $image_uri = $image_file->getURIForTransform($xform);
     list($x, $y) = $xform->getTransformedDimensions($image_file);
 
+    $profile_image = phutil_tag(
+      'div',
+      array(
+        'class' => 'auth-account-view-profile-image',
+        'style' => 'background-image: url('.$image_uri.');',
+      ));
+
     return phutil_tag(
       'div',
       array(
         'class' => 'auth-account-view',
-        'style' => 'background-image: url('.$image_uri.');',
       ),
-      $content);
+      array(
+        $profile_image,
+        $content,
+      ));
   }
 
 }
diff --git a/webroot/rsrc/css/application/auth/auth.css b/webroot/rsrc/css/application/auth/auth.css
index 8211eb1484..07eaccd46c 100644
--- a/webroot/rsrc/css/application/auth/auth.css
+++ b/webroot/rsrc/css/application/auth/auth.css
@@ -26,12 +26,21 @@
 .auth-account-view {
   background-color: #fff;
   border: 1px solid {$lightblueborder};
-  background-repeat: no-repeat;
-  background-position: 4px 4px;
-  background-size: 50px 50px;
-  padding: 4px 4px 4px 62px;
-  min-height: 50px;
   border-radius: 2px;
+  min-height: 50px;
+  position: relative;
+  padding: 4px 4px 4px 64px;
+}
+
+.auth-account-view-profile-image {
+  width: 50px;
+  height: 50px;
+  top: 4px;
+  left: 4px;
+
+  background-repeat: no-repeat;
+  background-size: 100%;
+  position: absolute;
 }
 
 .auth-account-view-name {
diff --git a/webroot/rsrc/css/application/conpherence/message-pane.css b/webroot/rsrc/css/application/conpherence/message-pane.css
index e702b34083..c4b7228ac7 100644
--- a/webroot/rsrc/css/application/conpherence/message-pane.css
+++ b/webroot/rsrc/css/application/conpherence/message-pane.css
@@ -162,7 +162,7 @@
 .conpherence-message-pane .conpherence-transaction-view {
   padding: 2px 0px;
   margin: 4px 12px;
-  background-size: 35px;
+  background-size: 100%;
   min-height: auto;
 }
 
diff --git a/webroot/rsrc/css/application/conpherence/notification.css b/webroot/rsrc/css/application/conpherence/notification.css
index 75403f991d..e5bd40274a 100644
--- a/webroot/rsrc/css/application/conpherence/notification.css
+++ b/webroot/rsrc/css/application/conpherence/notification.css
@@ -26,7 +26,7 @@
   position: absolute;
   width: 30px;
   height: 30px;
-  background-size: 30px;
+  background-size: 100%;
 }
 
 .phabricator-notification .conpherence-menu-item-view
diff --git a/webroot/rsrc/css/phui/phui-header-view.css b/webroot/rsrc/css/phui/phui-header-view.css
index 5b48f722c6..6790ed09e8 100644
--- a/webroot/rsrc/css/phui/phui-header-view.css
+++ b/webroot/rsrc/css/phui/phui-header-view.css
@@ -90,7 +90,7 @@ body.device-phone .phui-header-view {
 .phui-header-image {
   display: inline-block;
   background-repeat: no-repeat;
-  background-size: 50px;
+  background-size: 100%;
   border: 2px solid white;
   width: 50px;
   height: 50px;
diff --git a/webroot/rsrc/css/phui/phui-object-item-list-view.css b/webroot/rsrc/css/phui/phui-object-item-list-view.css
index e07d25f9d3..40aa67ee8a 100644
--- a/webroot/rsrc/css/phui/phui-object-item-list-view.css
+++ b/webroot/rsrc/css/phui/phui-object-item-list-view.css
@@ -599,7 +599,7 @@ ul.phui-object-item-icons {
 .phui-object-item-image {
   width: 40px;
   height: 40px;
-  background-size: 40px;
+  background-size: 100%;
   margin: 6px;
   position: absolute;
   background-color: {$lightbluebackground};
diff --git a/webroot/rsrc/css/phui/phui-timeline-view.css b/webroot/rsrc/css/phui/phui-timeline-view.css
index 6e956037aa..d35a5458ee 100644
--- a/webroot/rsrc/css/phui/phui-timeline-view.css
+++ b/webroot/rsrc/css/phui/phui-timeline-view.css
@@ -92,7 +92,7 @@
 
 .phui-timeline-image {
   background-repeat: no-repeat;
-  background-size: 50px;
+  background-size: 100%;
   position: absolute;
   border-radius: 3px;
 }