Completely remove Pholio right gutter · recaptime.dev/phorge@0cc0782

+21 -21

resources/celerity/map.php

··· 80 80 'rsrc/css/application/people/people-profile.css' => 'ba7b2762', 81 81 'rsrc/css/application/phame/phame.css' => '19ecc703', 82 82 'rsrc/css/application/pholio/pholio-edit.css' => 'b9e59b6d', 83 - 'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394', 84 - 'rsrc/css/application/pholio/pholio.css' => 'cabb65b3', 83 + 'rsrc/css/application/pholio/pholio-inline-comments.css' => '3d14984a', 84 + 'rsrc/css/application/pholio/pholio.css' => '4d4fe3d2', 85 85 'rsrc/css/application/phortune/phortune-credit-card-form.css' => 'b25b4beb', 86 86 'rsrc/css/application/phrequent/phrequent.css' => 'ffc185ad', 87 87 'rsrc/css/application/phriction/phriction-document-css.css' => '7d7f0071', ··· 389 389 'rsrc/js/application/passphrase/phame-credential-control.js' => '1e1c8a59', 390 390 'rsrc/js/application/phame/phame-post-preview.js' => '61d927ec', 391 391 'rsrc/js/application/pholio/behavior-pholio-mock-edit.js' => '1e1e8bb0', 392 - 'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '0c8a037a', 392 + 'rsrc/js/application/pholio/behavior-pholio-mock-view.js' => '0938137d', 393 393 'rsrc/js/application/phortune/behavior-balanced-payment-form.js' => '3b3e1664', 394 394 'rsrc/js/application/phortune/behavior-stripe-payment-form.js' => '1693a296', 395 395 'rsrc/js/application/phortune/behavior-test-payment-form.js' => 'b3e5ee60', ··· 613 613 'javelin-behavior-phabricator-watch-anchor' => '06e05112', 614 614 'javelin-behavior-phame-post-preview' => '61d927ec', 615 615 'javelin-behavior-pholio-mock-edit' => '1e1e8bb0', 616 - 'javelin-behavior-pholio-mock-view' => '0c8a037a', 616 + 'javelin-behavior-pholio-mock-view' => '0938137d', 617 617 'javelin-behavior-phui-object-box-tabs' => 'a3e2244e', 618 618 'javelin-behavior-phui-timeline-dropdown-menu' => '4d94d9c3', 619 619 'javelin-behavior-policy-control' => 'f3fef818', ··· 739 739 'phabricator-uiexample-reactor-sendproperties' => '551add57', 740 740 'phabricator-zindex-css' => 'efb673ac', 741 741 'phame-css' => '19ecc703', 742 - 'pholio-css' => 'cabb65b3', 742 + 'pholio-css' => '4d4fe3d2', 743 743 'pholio-edit-css' => 'b9e59b6d', 744 - 'pholio-inline-comments-css' => '28a2e394', 744 + 'pholio-inline-comments-css' => '3d14984a', 745 745 'phortune-credit-card-form' => '2290aeef', 746 746 'phortune-credit-card-form-css' => 'b25b4beb', 747 747 'phrequent-css' => 'ffc185ad', ··· 862 862 array( 863 863 0 => 'javelin-install', 864 864 ), 865 + '0938137d' => 866 + array( 867 + 0 => 'javelin-behavior', 868 + 1 => 'javelin-util', 869 + 2 => 'javelin-stratcom', 870 + 3 => 'javelin-dom', 871 + 4 => 'javelin-vector', 872 + 5 => 'javelin-magical-init', 873 + 6 => 'javelin-request', 874 + 7 => 'javelin-history', 875 + 8 => 'javelin-workflow', 876 + 9 => 'javelin-mask', 877 + 10 => 'javelin-behavior-device', 878 + 11 => 'phabricator-keyboard-shortcut', 879 + ), 865 880 '09b15cf1' => 866 881 array( 867 882 0 => 'javelin-stratcom', ··· 895 910 2 => 'javelin-stratcom', 896 911 3 => 'javelin-util', 897 912 4 => 'phabricator-notification-css', 898 - ), 899 - '0c8a037a' => 900 - array( 901 - 0 => 'javelin-behavior', 902 - 1 => 'javelin-util', 903 - 2 => 'javelin-stratcom', 904 - 3 => 'javelin-dom', 905 - 4 => 'javelin-vector', 906 - 5 => 'javelin-magical-init', 907 - 6 => 'javelin-request', 908 - 7 => 'javelin-history', 909 - 8 => 'javelin-workflow', 910 - 9 => 'javelin-mask', 911 - 10 => 'javelin-behavior-device', 912 - 11 => 'phabricator-keyboard-shortcut', 913 913 ), 914 914 '0e34ca02' => 915 915 array(

+17 -6

src/applications/pholio/view/PholioMockImagesView.php

··· 120 120 ), 121 121 ''); 122 122 123 + $image_header = javelin_tag( 124 + 'div', 125 + array( 126 + 'id' => 'mock-image-header', 127 + 'class' => 'pholio-mock-image-header', 128 + ), 129 + ''); 130 + 123 131 $mock_wrapper = javelin_tag( 124 132 'div', 125 133 array( ··· 127 135 'sigil' => 'mock-panel touchable', 128 136 'class' => 'pholio-mock-image-panel', 129 137 ), 130 - $mock_wrapper); 138 + array( 139 + $image_header, 140 + $mock_wrapper, 141 + )); 131 142 132 143 $inline_comments_holder = javelin_tag( 133 144 'div', ··· 182 193 183 194 $mockview[] = phutil_tag( 184 195 'div', 185 - array( 186 - 'class' => 'pholio-mock-image-container', 187 - 'id' => 'pholio-mock-image-container' 188 - ), 189 - array($mock_wrapper, $carousel_holder, $inline_comments_holder)); 196 + array( 197 + 'class' => 'pholio-mock-image-container', 198 + 'id' => 'pholio-mock-image-container' 199 + ), 200 + array($mock_wrapper, $inline_comments_holder, $carousel_holder)); 190 201 191 202 return $mockview; 192 203 }

-9

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

··· 21 21 margin-bottom: 4px; 22 22 } 23 23 24 - .device-desktop .pholio-mock-inline-comments { 25 - border-left: 1px solid #101010; 26 - position: absolute; 27 - width: 300px; 28 - top: 0; 29 - bottom: 0; 30 - right: 0; 31 - } 32 - 33 24 .pholio-inline-comment-dialog-title { 34 25 font-weight: bold; 35 26 color: #fff;

+11 -14

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

··· 7 7 text-align: center; 8 8 vertical-align: middle; 9 9 position: relative; 10 - background: url('/rsrc/image/checker_light.png'); 10 + background: url('/rsrc/image/texture/pholio-background.gif'); 11 11 } 12 12 13 13 .pholio-mock-carousel { 14 14 background-color: #282828; 15 15 text-align: center; 16 - border-top: 1px solid #101010; 17 - } 18 - 19 - .device-desktop .pholio-mock-carousel { 20 - margin-right: 300px; 21 16 } 22 17 23 18 .pholio-mock-carousel-thumb-item { ··· 69 64 } 70 65 71 66 .pholio-mock-image-panel { 72 - padding: 12px; 67 + padding: 0; 73 68 border-top: 1px solid #333; 74 69 } 75 70 76 - .device-desktop .pholio-mock-image-panel { 77 - border-right: 1px solid #333; 78 - margin-right: 299px; 79 - } 80 - 81 71 .pholio-mock-image-viewport { 82 72 position: relative; 83 73 margin: auto; ··· 99 89 } 100 90 101 91 .pholio-visible-size { 102 - color: #ffffff; 92 + color: #fff; 103 93 } 104 94 105 95 .pholio-image-description { ··· 168 158 cursor: pointer; 169 159 } 170 160 171 - 172 161 .device-desktop .mock-has-cursor .pholio-mock-reticle { 173 162 display: block; 174 163 } 164 + 165 + .pholio-mock-image-header { 166 + position: absolute; 167 + top: 4px; 168 + right: 8px; 169 + font-size: 14px; 170 + color: {$lightgreytext}; 171 + }

+39 -35

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

··· 155 155 // If the image is too wide or tall for the viewport, scale it down so it 156 156 // fits. 157 157 var w = JX.Vector.getDim(panel); 158 - w.x -= 24; 159 - w.y -= 24; 158 + w.x -= 48; 159 + w.y -= 48; 160 + 160 161 var scale = 1; 161 162 if (w.x < tag.naturalWidth) { 162 163 scale = Math.min(scale, w.x / tag.naturalWidth); ··· 387 388 redraw_selection(); 388 389 } 389 390 391 + function render_image_header(image) { 392 + // Render image dimensions and visible size. If we have this infomation 393 + // from the server we can display some of it immediately; otherwise, we need 394 + // to wait for the image to load so we can read dimension information from 395 + // it. 396 + 397 + var image_x = image.width; 398 + var image_y = image.height; 399 + var display_x = null; 400 + if (image.tag) { 401 + image_x = image.tag.naturalWidth; 402 + image_y = image.tag.naturalHeight; 403 + display_x = image.tag.width; 404 + } 405 + 406 + var visible = []; 407 + if (image_x) { 408 + if (display_x) { 409 + var area = Math.round(100 * (display_x / image_x)); 410 + visible.push( 411 + JX.$N( 412 + 'span', 413 + {className: 'pholio-visible-size'}, 414 + [area, '%'])); 415 + visible.push(' '); 416 + } 417 + visible.push(['(', image_x, ' \u00d7 ', image_y, ')']); 418 + } 419 + 420 + return visible; 421 + } 422 + 390 423 function redraw_inlines(id) { 391 424 if (!active_image) { 392 425 return; ··· 399 432 stage.clearStage(); 400 433 var comment_holder = JX.$('mock-inline-comments'); 401 434 JX.DOM.setContent(comment_holder, render_image_info(active_image)); 435 + 436 + var image_header = JX.$('mock-image-header'); 437 + JX.DOM.setContent(image_header, render_image_header(active_image)); 402 438 403 439 var inlines = inline_comments[active_image.id]; 404 440 if (!inlines || !inlines.length) { ··· 552 588 var embed = JX.$N( 553 589 'div', 554 590 {className: 'pholio-image-embedding'}, 555 - JX.$H('Embed this image:<br />{M' + config.mockID + 591 + JX.$H('Embed this image: {M' + config.mockID + 556 592 ', image=' + image.id + '}')); 557 593 info.push(embed); 558 - } 559 - 560 - // Render image dimensions and visible size. If we have this infomation 561 - // from the server we can display some of it immediately; otherwise, we need 562 - // to wait for the image to load so we can read dimension information from 563 - // it. 564 - 565 - var image_x = image.width; 566 - var image_y = image.height; 567 - var display_x = null; 568 - if (image.tag) { 569 - image_x = image.tag.naturalWidth; 570 - image_y = image.tag.naturalHeight; 571 - display_x = image.tag.width; 572 - } 573 - 574 - var visible = []; 575 - if (image_x) { 576 - visible.push([image_x, '\u00d7', image_y, 'px']); 577 - if (display_x) { 578 - var area = Math.round(100 * (display_x / image_x)); 579 - visible.push(' '); 580 - visible.push( 581 - JX.$N( 582 - 'span', 583 - {className: 'pholio-visible-size'}, 584 - ['(', area, '%', ')'])); 585 - } 586 - } 587 - 588 - if (visible.length) { 589 - info.push(visible); 590 594 } 591 595 592 596 var full_link = JX.$N(

Configure Feed

Configure Feed