diff --git a/src/__celerity_resource_map__.php b/src/__celerity_resource_map__.php index 562ac01d7a..eb59f5d275 100644 --- a/src/__celerity_resource_map__.php +++ b/src/__celerity_resource_map__.php @@ -3744,7 +3744,7 @@ celerity_register_resource_map(array( ), 'pholio-edit-css' => array( - 'uri' => '/res/01a56a3b/rsrc/css/application/pholio/pholio-edit.css', + 'uri' => '/res/1d07a294/rsrc/css/application/pholio/pholio-edit.css', 'type' => 'css', 'requires' => array( diff --git a/src/applications/pholio/view/PholioUploadedImageView.php b/src/applications/pholio/view/PholioUploadedImageView.php index 2c2b77ea0b..2702c1ede0 100644 --- a/src/applications/pholio/view/PholioUploadedImageView.php +++ b/src/applications/pholio/view/PholioUploadedImageView.php @@ -26,14 +26,6 @@ final class PholioUploadedImageView extends AphrontView { $phid = $file->getPHID(); $replaces_phid = $this->replacesPHID; - $thumb = phutil_tag( - 'img', - array( - 'src' => $file->getThumb280x210URI(), - 'width' => 280, - 'height' => 210, - )); - $remove = $this->renderRemoveElement(); $title = id(new AphrontFormTextControl()) @@ -48,28 +40,27 @@ final class PholioUploadedImageView extends AphrontView { ->setSigil('image-description') ->setLabel(pht('Description')); - $thumb_frame = javelin_tag( + $thumb_frame = phutil_tag( 'div', array( 'class' => 'pholio-thumb-frame', - 'sigil' => 'pholio-thumb-frame', - ), - $thumb); + 'style' => 'background-image: url('.$file->getThumb280x210URI().');', + )); $content = hsprintf( - '
-
-
%s
-
%s
+ '
+
+ %s +
%s
-
%s
+ %s
-
-
%s
-
%s
+
+ %s + %s
', - $file->getName(), $remove, + $file->getName(), $thumb_frame, $title, $description); diff --git a/webroot/rsrc/css/application/pholio/pholio-edit.css b/webroot/rsrc/css/application/pholio/pholio-edit.css index 28cab33343..d35d3ea927 100644 --- a/webroot/rsrc/css/application/pholio/pholio-edit.css +++ b/webroot/rsrc/css/application/pholio/pholio-edit.css @@ -3,89 +3,89 @@ */ .pholio-uploaded-image { - padding: 4px; + overflow: hidden; + + /* When we activate the image control to show that we're going to replace + it on drag-and-drop, this gives us a border which looks good without + crowding anything or leaving elements misaligned. */ border: 1px solid transparent; - margin: 0 0 12px 0; + margin: -4px -4px 12px; + padding: 4px; +} + +.pholio-thumb-box { + margin: 2px 0; + float: left; + background: #f7f7f7; + border: 1px solid #D5D9DF; + border-radius: 3px; + width: 296px; overflow: hidden; } -.pholio-uploaded-image .thumb-box { - border: 1px solid #D5D9DF; - border-radius: 3px; - min-width: 280px; - width: 48%; - float: left; - text-align: center; -} - -.pholio-uploaded-image .image-data { - width: 48%; - float: right; -} - -.pholio-uploaded-image .thumb-box .title { - width: 100%; - float: left; - background: #EDF0F4; - border-top-left-radius: 3px; - border-top-right-radius: 3px; - border-bottom: 1px solid #D5D9DF; -} - -.pholio-thumb-frame { - background: #ffffff; - padding: 12px 0px 0px 0px; - width: 100%; -} - -.pholio-uploaded-image .thumb-box .pholio-thumb-frame img { +.device .pholio-thumb-box { + float: none; margin: 0 auto; } -.pholio-uploaded-image .thumb-box .title .text { - width: 220px; - float: left; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - padding: 6px 0px 0px 8px; +.pholio-thumb-frame { + background-color: #ffffff; + background-position: center center; + background-repeat: no-repeat; + background-size: 280px 210px; + width: 280px; + height: 210px; + padding: 8px; } -.pholio-uploaded-image .thumb-box .title .remove { +.pholio-thumb-title { + padding: 4px 8px; + font-weight: bold; + color: #444444; + overflow: hidden; + border-bottom: 1px solid #d7d7d7; +} + +.pholio-thumb-name { + line-height: 24px; + margin-right: 48px; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +.pholio-thumb-title .button { float: right; } -.pholio-uploaded-image .thumb-box .title .remove .button { - background: #EDF0F4; - border: none; +.pholio-image-details { + margin-left: 312px; } -.pholio-uploaded-image .thumb-box .title .remove .button:hover { - box-shadow: inset 0 0 2px rgba(0,0,0,.2); -} - -.pholio-uploaded-image .image-data .aphront-form-control { - padding: 0px 0px 4px 4px; -} -.pholio-uploaded-image .image-data .aphront-form-label { - text-align: left; - margin: 0px 0px 5px 0px; -} -.pholio-uploaded-image .image-data .aphront-form-input { - margin: 0; - width: 100%; -} - -.aphront-form-input .aphront-form-drag-and-drop-file-list { - float: left; - width: 100%; -} -.aphront-form-input .aphront-form-drag-and-drop-file-list -.drag-and-drop-file-target { - padding: 20px; +.device .pholio-image-details { + margin-left: 0; clear: both; } +.pholio-uploaded-image .pholio-image-details .aphront-form-control { + padding: 0; + margin: 0 0 8px 0; + overflow: hidden; +} + +.pholio-uploaded-image .pholio-image-details .aphront-form-label, +.pholio-uploaded-image .pholio-image-details .aphront-form-input { + display: block; + width: auto; + text-align: left; + padding: 0; + margin: 0; +} + +.pholio-uploaded-image .pholio-image-details .aphront-form-label { + margin: 0 0 4px 0; +} + .pholio-edit-drop { border-width: 1px; border-style: dashed;