mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-24 14:30:56 +01:00
Pholio CSS touchups for inline comments.
Summary: Tightened up spaces, made inline area more 'inset', tweaked colors to match timeline view. Test Plan: Tested mocks with and without inline comments. Reviewers: epriestley Reviewed By: epriestley CC: aran, Korvin Differential Revision: https://secure.phabricator.com/D5188
This commit is contained in:
parent
752055a45c
commit
0dde637059
4 changed files with 41 additions and 31 deletions
|
@ -3218,7 +3218,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'pholio-css' =>
|
||||
array(
|
||||
'uri' => '/res/94883ddc/rsrc/css/application/pholio/pholio.css',
|
||||
'uri' => '/res/08c8c85a/rsrc/css/application/pholio/pholio.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
@ -3227,7 +3227,7 @@ celerity_register_resource_map(array(
|
|||
),
|
||||
'pholio-inline-comments-css' =>
|
||||
array(
|
||||
'uri' => '/res/2b32b3b6/rsrc/css/application/pholio/pholio-inline-comments.css',
|
||||
'uri' => '/res/647d658d/rsrc/css/application/pholio/pholio-inline-comments.css',
|
||||
'type' => 'css',
|
||||
'requires' =>
|
||||
array(
|
||||
|
|
|
@ -66,14 +66,7 @@ final class PholioMockImagesView extends AphrontView {
|
|||
),
|
||||
'');
|
||||
|
||||
$mockview[] = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'pholio-mock-image-container',
|
||||
'id' => 'pholio-mock-image-container'
|
||||
),
|
||||
array($mock_wrapper, $inline_comments_holder));
|
||||
|
||||
$carousel_holder = '';
|
||||
if (count($mock->getImages()) > 0) {
|
||||
$thumbnails = array();
|
||||
foreach ($mock->getImages() as $image) {
|
||||
|
@ -105,7 +98,7 @@ final class PholioMockImagesView extends AphrontView {
|
|||
$tag);
|
||||
}
|
||||
|
||||
$mockview[] = phutil_tag(
|
||||
$carousel_holder = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'id' => 'pholio-mock-carousel',
|
||||
|
@ -114,6 +107,14 @@ final class PholioMockImagesView extends AphrontView {
|
|||
$thumbnails);
|
||||
}
|
||||
|
||||
$mockview[] = phutil_tag(
|
||||
'div',
|
||||
array(
|
||||
'class' => 'pholio-mock-image-container',
|
||||
'id' => 'pholio-mock-image-container'
|
||||
),
|
||||
array($mock_wrapper, $carousel_holder, $inline_comments_holder));
|
||||
|
||||
return $this->renderSingleView($mockview);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,15 +2,11 @@
|
|||
* @provides pholio-inline-comments-css
|
||||
*/
|
||||
.pholio-inline-comment-dialog-title {
|
||||
font-weight: bold;
|
||||
color: #333333;
|
||||
border-bottom: 1px solid #ccccaa;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
padding-bottom: 2px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.pholio-inline-comment-dialog-buttons {
|
||||
padding: 2px 0px;
|
||||
margin-bottom: 6px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.pholio-inline-comment-dialog-buttons button {
|
||||
|
@ -19,18 +15,25 @@
|
|||
}
|
||||
|
||||
.pholio-inline-comment-dialog {
|
||||
padding: 8px 18px 8px 12px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.pholio-inline-comment-dialog-textarea {
|
||||
width: 99%;
|
||||
height: 12em;
|
||||
width: 254px;
|
||||
height: 6em;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.pholio-new-inline-comment {
|
||||
position: absolute;
|
||||
border: 1px solid #aa8;
|
||||
background: #f9f9f1;
|
||||
border: 1px solid #000;
|
||||
background: rgb(60, 60, 60);
|
||||
z-index: 100;
|
||||
padding: 8px 18px 8px 12px;
|
||||
padding: 8px 10px 8px 12px;
|
||||
width: 260px;
|
||||
box-shadow: 0 2px 10px 1px #999;
|
||||
}
|
||||
|
||||
.pholio-inline-comment-dialog-buttons a {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
background-color: #202020;
|
||||
text-align: center;
|
||||
border-top: 1px solid #101010;
|
||||
margin-right: 320px;
|
||||
}
|
||||
|
||||
.pholio-mock-carousel-thumb-item {
|
||||
|
@ -71,34 +72,39 @@
|
|||
}
|
||||
|
||||
.pholio-mock-inline-comments {
|
||||
width: 320px;
|
||||
width: 300px;
|
||||
border-left: 1px solid #101010;
|
||||
border-top: 1px solid #333;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
padding: 10px;
|
||||
background: #eeedf0;
|
||||
overflow-x: auto;
|
||||
text-align: left;
|
||||
box-shadow: inset 4px 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
|
||||
.pholio-inline-comment {
|
||||
border: 1px solid #aa8;
|
||||
background: #f9f9f1;
|
||||
margin: 2px;
|
||||
border: 1px solid #f7f7f7;
|
||||
border-bottom: 1px solid #d6d6d6;
|
||||
background: #fff;
|
||||
margin: 0 0 5px 0;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
.pholio-inline-comment-header {
|
||||
border-bottom: 1px solid #cca;
|
||||
color: #333;
|
||||
border-bottom: 1px solid #d7d7d7;
|
||||
font-weight: bold;
|
||||
padding-bottom: 6px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.pholio-mock-inline-comment-highlight {
|
||||
background-color: #F0B160;
|
||||
background-color: #e0e3ec;
|
||||
border-color: #cacdd5;
|
||||
}
|
||||
|
||||
.pholio-inline-head-links a {
|
||||
|
|
Loading…
Reference in a new issue