Clean up CSS for Pholio upload thing

Summary: Ref T3572. Pure JS/CSS changes, just cleaning up some of the mess I made and slightly improving the behavior on mobile (you won't be able to edit images on mobile, but you could fix descriptions and titles, at least).

Test Plan: {F50887}

Reviewers: btrahan, chad

Reviewed By: btrahan

CC: aran

Maniphest Tasks: T3572

Differential Revision: https://secure.phabricator.com/D6500

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(

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(
-      '<div class="thumb-box">
-        <div class="title">
-          <div class="text">%s</div>
-          <div class="remove">%s</div>
+      '<div class="pholio-thumb-box">
+        <div class="pholio-thumb-title">
+          %s
+          <div class="pholio-thumb-name">%s</div>
         </div>
-        <div class="thumb">%s</div>
+        %s
       </div>
-      <div class="image-data">
-        <div class="title">%s</div>
-        <div class="description">%s</div>
+      <div class="pholio-image-details">
+        %s
+        %s
       </div>',
-      $file->getName(),
       $remove,
+      $file->getName(),
       $thumb_frame,
       $title,
       $description);

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;