1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-22 05:20:56 +01:00

Tidy up Workboard CSS a little

Summary:
 - Custom scrollbars, colors
 - New div with some better padding (floor for the column)
 - More consistent spacing around the board itself.
 - Slightly darker columns
 - Smaller horizonal scrollbar

Test Plan:
Chrome Mac / Desktop.

{F1100342}

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: Korvin

Differential Revision: https://secure.phabricator.com/D15217
This commit is contained in:
Chad Little 2016-02-08 13:42:40 -08:00
parent 07f1a03262
commit 9c95b387bd
5 changed files with 46 additions and 21 deletions
resources/celerity
src/view/phui
webroot/rsrc/css/phui/workboards

View file

@ -154,9 +154,9 @@ return array(
'rsrc/css/phui/phui-tag-view.css' => '9d5d4400', 'rsrc/css/phui/phui-tag-view.css' => '9d5d4400',
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8', 'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b', 'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
'rsrc/css/phui/workboards/phui-workboard.css' => '2b5367d2', 'rsrc/css/phui/workboards/phui-workboard.css' => '0047084f',
'rsrc/css/phui/workboards/phui-workcard.css' => 'a869098a', 'rsrc/css/phui/workboards/phui-workcard.css' => '3646fb96',
'rsrc/css/phui/workboards/phui-workpanel.css' => 'e1bd8d04', 'rsrc/css/phui/workboards/phui-workpanel.css' => 'a78c0661',
'rsrc/css/sprite-login.css' => '60e8560e', 'rsrc/css/sprite-login.css' => '60e8560e',
'rsrc/css/sprite-menu.css' => '9dd65b92', 'rsrc/css/sprite-menu.css' => '9dd65b92',
'rsrc/css/sprite-tokens.css' => '4f399012', 'rsrc/css/sprite-tokens.css' => '4f399012',
@ -831,9 +831,9 @@ return array(
'phui-theme-css' => 'ab7b848c', 'phui-theme-css' => 'ab7b848c',
'phui-timeline-view-css' => '2efceff8', 'phui-timeline-view-css' => '2efceff8',
'phui-two-column-view-css' => 'c75bfc5b', 'phui-two-column-view-css' => 'c75bfc5b',
'phui-workboard-view-css' => '2b5367d2', 'phui-workboard-view-css' => '0047084f',
'phui-workcard-view-css' => 'a869098a', 'phui-workcard-view-css' => '3646fb96',
'phui-workpanel-view-css' => 'e1bd8d04', 'phui-workpanel-view-css' => 'a78c0661',
'phuix-action-list-view' => 'b5c256b8', 'phuix-action-list-view' => 'b5c256b8',
'phuix-action-view' => '8cf6d262', 'phuix-action-view' => '8cf6d262',
'phuix-autocomplete' => '9196fb06', 'phuix-autocomplete' => '9196fb06',
@ -1631,6 +1631,9 @@ return array(
'javelin-uri', 'javelin-uri',
'phabricator-notification', 'phabricator-notification',
), ),
'a78c0661' => array(
'phui-workcard-view-css',
),
'a80d0378' => array( 'a80d0378' => array(
'javelin-behavior', 'javelin-behavior',
'javelin-stratcom', 'javelin-stratcom',
@ -1919,9 +1922,6 @@ return array(
'javelin-dom', 'javelin-dom',
'phabricator-prefab', 'phabricator-prefab',
), ),
'e1bd8d04' => array(
'phui-workcard-view-css',
),
'e1d25dfb' => array( 'e1d25dfb' => array(
'javelin-behavior', 'javelin-behavior',
'javelin-stratcom', 'javelin-stratcom',

View file

@ -103,10 +103,12 @@ final class PHUIWorkpanelView extends AphrontTagView {
$body = phutil_tag( $body = phutil_tag(
'div', 'div',
array( array(
'class' => 'phui-workpanel-body', 'class' => 'phui-workpanel-body-content',
), ),
$this->cards); $this->cards);
$body = phutil_tag_div('phui-workpanel-body', $body);
$view = id(new PHUIBoxView()) $view = id(new PHUIBoxView())
->setColor(PHUIBoxView::GREY) ->setColor(PHUIBoxView::GREY)
->addClass('phui-workpanel-view-inner') ->addClass('phui-workpanel-view-inner')

View file

@ -35,8 +35,8 @@
} }
.phui-workboard-view-shadow::-webkit-scrollbar { .phui-workboard-view-shadow::-webkit-scrollbar {
height: 12px; height: 8px;
width: 12px; width: 8px;
background: rgba(200,200,200,.6); background: rgba(200,200,200,.6);
} }
@ -72,12 +72,6 @@
margin: 16px; margin: 16px;
} }
.device-desktop .phui-workpanel-body {
max-height: calc(100vh - 170px);
overflow-y: scroll;
overflow-x: hidden;
}
.device-desktop .phui-workboard-view .aphront-multi-column-view { .device-desktop .phui-workboard-view .aphront-multi-column-view {
pointer-events: none; pointer-events: none;
} }

View file

@ -110,6 +110,10 @@
background-color: {$sh-greenbackground}; background-color: {$sh-greenbackground};
} }
.phui-object-item-list-view .phui-workcard:last-child {
margin-bottom: 0;
}
/* - Draggable Colors --------------------------------------------------------*/ /* - Draggable Colors --------------------------------------------------------*/

View file

@ -35,8 +35,12 @@
user-select: none; user-select: none;
} }
.phui-workpanel-view .phui-box-grey {
background-color: rgba(71,87,120,0.1);
}
.phui-workpanel-view.phui-workboard-column-milestone .phui-box-grey { .phui-workpanel-view.phui-workboard-column-milestone .phui-box-grey {
background-color: rgba(234, 230, 247, 0.75); background-color: rgba(234, 230, 247, 0.85);
} }
.phui-workpanel-view .phui-header-col2 .phui-icon-view { .phui-workpanel-view .phui-header-col2 .phui-icon-view {
@ -46,11 +50,14 @@
.phui-workpanel-view .phui-workpanel-header-action { .phui-workpanel-view .phui-workpanel-header-action {
float: right; float: right;
width: 24px; width: 24px;
border-left: 1px solid #b3b5b6;
} }
.phui-workpanel-view .phui-workpanel-body { .phui-workpanel-view .phui-workpanel-body {
padding: 8px 8px 4px 8px; padding: 8px 4px 8px 0;
}
.phui-workpanel-view .phui-workpanel-body-content {
padding: 0 4px 0 8px;
} }
.device .phui-workpanel-view .phui-workpanel-body { .device .phui-workpanel-view .phui-workpanel-body {
@ -89,6 +96,24 @@
opacity: 0.75; opacity: 0.75;
} }
.device-desktop .phui-workpanel-body-content {
max-height: calc(100vh - 162px);
overflow-y: auto;
overflow-x: hidden;
}
.device-desktop .phui-workpanel-body-content::-webkit-scrollbar {
height: 8px;
width: 8px;
background: rgba(71,87,120,0.2);
border-radius: 4px;
}
.device-desktop .phui-workpanel-body-content::-webkit-scrollbar-thumb {
background: rgba(71,87,120,0.4);
border-radius: 4px;
}
.project-panel-empty .phui-object-item-list-view { .project-panel-empty .phui-object-item-list-view {
background: {$sh-indigobackground}; background: {$sh-indigobackground};
border-radius: 3px; border-radius: 3px;