@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+30
-12
+11
-2
src/applications/auth/view/PhabricatorAuthAccountView.php
+11
-2
src/applications/auth/view/PhabricatorAuthAccountView.php
···
95
95
$image_uri = $image_file->getURIForTransform($xform);
96
96
list($x, $y) = $xform->getTransformedDimensions($image_file);
97
97
98
+
$profile_image = phutil_tag(
99
+
'div',
100
+
array(
101
+
'class' => 'auth-account-view-profile-image',
102
+
'style' => 'background-image: url('.$image_uri.');',
103
+
));
104
+
98
105
return phutil_tag(
99
106
'div',
100
107
array(
101
108
'class' => 'auth-account-view',
102
-
'style' => 'background-image: url('.$image_uri.');',
103
109
),
104
-
$content);
110
+
array(
111
+
$profile_image,
112
+
$content,
113
+
));
105
114
}
106
115
107
116
}
+14
-5
webroot/rsrc/css/application/auth/auth.css
+14
-5
webroot/rsrc/css/application/auth/auth.css
···
26
26
.auth-account-view {
27
27
background-color: #fff;
28
28
border: 1px solid {$lightblueborder};
29
+
border-radius: 2px;
30
+
min-height: 50px;
31
+
position: relative;
32
+
padding: 4px 4px 4px 64px;
33
+
}
34
+
35
+
.auth-account-view-profile-image {
36
+
width: 50px;
37
+
height: 50px;
38
+
top: 4px;
39
+
left: 4px;
40
+
29
41
background-repeat: no-repeat;
30
-
background-position: 4px 4px;
31
-
background-size: 50px 50px;
32
-
padding: 4px 4px 4px 62px;
33
-
min-height: 50px;
34
-
border-radius: 2px;
42
+
background-size: 100%;
43
+
position: absolute;
35
44
}
36
45
37
46
.auth-account-view-name {
+1
-1
webroot/rsrc/css/application/conpherence/message-pane.css
+1
-1
webroot/rsrc/css/application/conpherence/message-pane.css
+1
-1
webroot/rsrc/css/application/conpherence/notification.css
+1
-1
webroot/rsrc/css/application/conpherence/notification.css
+1
-1
webroot/rsrc/css/phui/phui-header-view.css
+1
-1
webroot/rsrc/css/phui/phui-header-view.css
+1
-1
webroot/rsrc/css/phui/phui-object-item-list-view.css
+1
-1
webroot/rsrc/css/phui/phui-object-item-list-view.css