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
',
- $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;