diff --git a/resources/celerity/map.php b/resources/celerity/map.php --- a/resources/celerity/map.php +++ b/resources/celerity/map.php @@ -82,7 +82,7 @@ 'rsrc/css/application/paste/paste.css' => '1898e534', 'rsrc/css/application/people/people-profile.css' => '2473d929', 'rsrc/css/application/phame/phame.css' => '737792d6', - 'rsrc/css/application/pholio/pholio-edit.css' => '3ad9d1ee', + 'rsrc/css/application/pholio/pholio-edit.css' => 'b15fec4a', 'rsrc/css/application/pholio/pholio-inline-comments.css' => '8e545e49', 'rsrc/css/application/pholio/pholio.css' => 'ca89d380', 'rsrc/css/application/phortune/phortune-credit-card-form.css' => '8391eb02', @@ -804,7 +804,7 @@ 'phabricator-zindex-css' => '5b6fcf3f', 'phame-css' => '737792d6', 'pholio-css' => 'ca89d380', - 'pholio-edit-css' => '3ad9d1ee', + 'pholio-edit-css' => 'b15fec4a', 'pholio-inline-comments-css' => '8e545e49', 'phortune-credit-card-form' => '2290aeef', 'phortune-credit-card-form-css' => '8391eb02', diff --git a/src/applications/pholio/view/PholioUploadedImageView.php b/src/applications/pholio/view/PholioUploadedImageView.php --- a/src/applications/pholio/view/PholioUploadedImageView.php +++ b/src/applications/pholio/view/PholioUploadedImageView.php @@ -42,12 +42,19 @@ PhabricatorFileThumbnailTransform::TRANSFORM_PINBOARD); $thumbnail_uri = $file->getURIForTransform($xform); + $thumb_img = phutil_tag( + 'img', + array( + 'class' => 'pholio-thumb-img', + 'src' => $thumbnail_uri, + )); + $thumb_frame = phutil_tag( 'div', array( 'class' => 'pholio-thumb-frame', - 'style' => 'background-image: url('.$thumbnail_uri.');', - )); + ), + $thumb_img); $handle = javelin_tag( 'div', diff --git a/webroot/rsrc/css/application/pholio/pholio-edit.css b/webroot/rsrc/css/application/pholio/pholio-edit.css --- a/webroot/rsrc/css/application/pholio/pholio-edit.css +++ b/webroot/rsrc/css/application/pholio/pholio-edit.css @@ -17,8 +17,8 @@ .pholio-thumb-box { margin: 2px 0; float: left; - background: #f7f7f7; - border: 1px solid #D5D9DF; + background: {$lightgreybackground}; + border: 1px solid {$lightgreyborder}; border-radius: 3px; width: 296px; overflow: hidden; @@ -38,16 +38,16 @@ margin: 0 auto; } -.pholio-thumb-frame { - background-color: #ffffff; - background-position: center center; - background-repeat: no-repeat; - background-size: 280px 210px; - width: 280px; - height: 210px; +.pholio-thumb-img { + max-width: 280px; + max-height: 210px; padding: 8px; } +.pholio-thumb-frame { + background: url('/rsrc/image/checker_lighter.png'); +} + .device .pholio-thumb-frame { width: 100%; }