mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-10 00:42:41 +01:00
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
This commit is contained in:
Chad Little
parent
6eb1e4ed29
commit
45b827c66e
4 changed files with 45 additions and 54 deletions
|
|
@ -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.css' => '005be8e1',
|
||||
'rsrc/css/application/pholio/pholio-inline-comments.css' => '28a2e394',
|
||||
'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',
|
||||
|
|
|
|||
|
|
@ -3,27 +3,28 @@
|
|||
*/
|
||||
|
||||
.pholio-inline-comment {
|
||||
border: 1px solid #555555;
|
||||
background: #353535;
|
||||
margin: 0 10px 5px 10px;
|
||||
padding: 8px 10px;
|
||||
|
||||
font-family: Verdana;
|
||||
font-size: 11px;
|
||||
margin: 0 0 4px 0;
|
||||
padding: 8px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// to fit within it.
|
||||
var new_y = (JX.Vector.getViewport().y * 0.90) - 150;
|
||||
// we take the full viewport and subtract 12px top and bottom.
|
||||
var new_y = (JX.Vector.getViewport().y - 24) ;
|
||||
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.y -= 40;
|
||||
w.x -= 24;
|
||||
w.y -= 24;
|
||||
var scale = 1;
|
||||
if (w.x < tag.naturalWidth) {
|
||||
scale = Math.min(scale, w.x / tag.naturalWidth);
|
||||
|
|
|
|||
Loading…
Reference in a new issue