Touch up Pholio

Summary: Uses common CSS spacing, tweaks some colors, increases viewport size to very limits.

Test Plan:
Test large and small images, various breakpoints. Able to more easily review mocks.

{F166500}

{F166501}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

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

resources/celerity/map.php

@@ -80,8 +80,8 @@ return array(
     'rsrc/css/application/people/people-profile.css' => 'ba7b2762',
     'rsrc/css/application/phame/phame.css' => '19ecc703',
     'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d',
-    'rsrc/css/application/pholio/pholio-inline-comments.css' => '52be33f0',
+    'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394',
-    'rsrc/css/application/pholio/pholio.css' => '005be8e1',
+    'rsrc/css/application/pholio/pholio.css' => 'fbe373cb',
     'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb',
     'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad',
     'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071',
@@ -389,7 +389,7 @@ return array(
     'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59',
     'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec',
     'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0',
-    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '28497740',
+    'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '8be2cc3d',
     'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664',
     'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296',
     'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60',
@@ -613,7 +613,7 @@ return array(
     'javelin-behavior-phabricator-watch-anchor' => '06e05112',
     'javelin-behavior-phame-post-preview' => '61d927ec',
     'javelin-behavior-pholio-mock-edit' => '1e1e8bb0',
-    'javelin-behavior-pholio-mock-view' => '28497740',
+    'javelin-behavior-pholio-mock-view' => '8be2cc3d',
     'javelin-behavior-phui-object-box-tabs' => 'a3e2244e',
     'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3',
     'javelin-behavior-policy-control' => 'f3fef818',
@@ -739,9 +739,9 @@ return array(
     'phabricator-uiexample-reactor-sendproperties' => '551add57',
     'phabricator-zindex-css' => 'efb673ac',
     'phame-css' => '19ecc703',
-    'pholio-css' => '005be8e1',
+    'pholio-css' => 'fbe373cb',
     'pholio-edit-css' => 'b9e59b6d',
-    'pholio-inline-comments-css' => '52be33f0',
+    'pholio-inline-comments-css' => '28a2e394',
     'phortune-credit-card-form' => '2290aeef',
     'phortune-credit-card-form-css' => 'b25b4beb',
     'phrequent-css' => 'ffc185ad',
@@ -1454,6 +1454,21 @@ return array(
       2 => 'javelin-stratcom',
       3 => 'javelin-uri',
     ),
+    '8be2cc3d' =>
+    array(
+      0 => 'javelin-behavior',
+      1 => 'javelin-util',
+      2 => 'javelin-stratcom',
+      3 => 'javelin-dom',
+      4 => 'javelin-vector',
+      5 => 'javelin-magical-init',
+      6 => 'javelin-request',
+      7 => 'javelin-history',
+      8 => 'javelin-workflow',
+      9 => 'javelin-mask',
+      10 => 'javelin-behavior-device',
+      11 => 'phabricator-keyboard-shortcut',
+    ),
     '8ef9ab58' =>
     array(
       0 => 'javelin-behavior',
@@ -2076,21 +2091,6 @@ return array(
       4 => 'multirow-row-manager',
       5 => 'javelin-json',
     ),
-    28497740 =>
-    array(
-      0 => 'javelin-behavior',
-      1 => 'javelin-util',
-      2 => 'javelin-stratcom',
-      3 => 'javelin-dom',
-      4 => 'javelin-vector',
-      5 => 'javelin-magical-init',
-      6 => 'javelin-request',
-      7 => 'javelin-history',
-      8 => 'javelin-workflow',
-      9 => 'javelin-mask',
-      10 => 'javelin-behavior-device',
-      11 => 'phabricator-keyboard-shortcut',
-    ),
     42126667 =>
     array(
       0 => 'javelin-behavior',

webroot/rsrc/css/application/pholio/pholio-inline-comments.css

@@ -3,27 +3,28 @@
  */
 
 .pholio-inline-comment {
-  border: 1px solid #555555;
+  margin: 0 0 4px 0;
-  background: #353535;
+  padding: 8px;
-  margin: 0 10px 5px 10px;
+  font-size: 12px;
-  padding: 8px 10px;
-
-  font-family: Verdana;
-  font-size: 11px;
 }
 
 .pholio-mock-inline-comments {
   color: #cccccc;
-  border-top: 1px solid #333;
   background: #282828;
   overflow-x: auto;
   text-align: left;
 }
 
+.pholio-inline-comment-header {
+  color: #fff;
+  font-weight: bold;
+  margin-bottom: 4px;
+}
+
 .device-desktop .pholio-mock-inline-comments {
   border-left: 1px solid #101010;
   position: absolute;
-  width: 320px;
+  width: 300px;
   top: 0;
   bottom: 0;
   right: 0;
@@ -43,7 +44,7 @@
 }
 
 .pholio-inline-comment-dialog {
-  padding: 10px;
+  padding: 4px;
 }
 
 .pholio-inline-comment-dialog-textarea {
@@ -79,7 +80,7 @@
 
 .pholio-mock-inline-comments a {
   font-weight: normal;
-  color: #2178db;
+  color: {$sky};
 }
 
 .device-desktop .pholio-mock-inline-comment-highlight.pholio-mock-select-fill {

webroot/rsrc/css/application/pholio/pholio.css

@@ -2,12 +2,12 @@
  * @provides pholio-css
  */
 .pholio-mock-image-container {
-  margin-top: 16px;
+  margin-top: 8px;
   background-color: #282828;
   text-align: center;
   vertical-align: middle;
   position: relative;
-  background: url('/rsrc/image/texture/pholio-background.gif');
+  background: url('/rsrc/image/checker_light.png');
 }
 
 .pholio-mock-carousel {
@@ -17,7 +17,7 @@
 }
 
 .device-desktop .pholio-mock-carousel {
-  margin-right: 320px;
+  margin-right: 300px;
 }
 
 .pholio-mock-carousel-thumb-item {
@@ -70,10 +70,9 @@
 
 .pholio-mock-select-fill {
   position: absolute;
-  background: #ffffff;
-  opacity: 0.25;
   box-sizing: border-box;
-  border: 1px solid #000000;
+  border: 2px solid {$indigo};
+  border-radius: 2px;
 }
 
 .pholio-mock-select-border {
@@ -83,13 +82,13 @@
 }
 
 .pholio-mock-image-panel {
-  padding: 20px;
+  padding: 12px;
   border-top: 1px solid #333;
 }
 
 .device-desktop .pholio-mock-image-panel {
   border-right: 1px solid #333;
-  margin-right: 319px;
+  margin-right: 299px;
 }
 
 .pholio-mock-image-viewport {
@@ -98,14 +97,6 @@
   display: inline-block;
 }
 
-.pholio-inline-comment-header {
-  color: #fff;
-  border-bottom: 1px solid #555;
-  font-weight: bold;
-  padding-bottom: 6px;
-  margin-bottom: 4px;
-}
-
 .pholio-image-loading img {
   opacity: 0.50;
 }
@@ -116,7 +107,7 @@
 }
 
 .pholio-image-info-item {
-  padding: 0 10px;
+  padding: 0 8px;
   margin: 8px 0;
 }
 

webroot/rsrc/js/application/pholio/behavior-pholio-mock-view.js

@@ -169,9 +169,8 @@ JX.behavior('pholio-mock-view', function(config) {
   function redraw_image() {
 
     // Force the stage to scale as a function of the viewport size. Broadly,
-    // we make the stage 95% of the height of the viewport, then scale images
+    // we take the full viewport and subtract 12px top and bottom.
-    // to fit within it.
+    var new_y = (JX.Vector.getViewport().y - 24) ;
-    var new_y = (JX.Vector.getViewport().y * 0.90) - 150;
     new_y = Math.max(320, new_y);
     panel.style.height = new_y + 'px';
 
@@ -184,8 +183,8 @@ JX.behavior('pholio-mock-view', function(config) {
     // If the image is too wide or tall for the viewport, scale it down so it
     // fits.
     var w = JX.Vector.getDim(panel);
-    w.x -= 40;
+    w.x -= 24;
-    w.y -= 40;
+    w.y -= 24;
     var scale = 1;
     if (w.x < tag.naturalWidth) {
       scale = Math.min(scale, w.x / tag.naturalWidth);