mirror of
https://we.phorge.it/source/phorge.git
synced 2024-12-18 19:40:55 +01:00
Rework Workboard Cards, split up CSS
Summary: Moves CSS into 3 files, Boards, Panels, Cards. Cleans up Workcards to present more info, hide edit until card hover.
Test Plan:
Lots of photoshop. Verify links to edit still work.
{F1081276}
Reviewers: epriestley
Reviewed By: epriestley
Subscribers: Korvin
Differential Revision: https://secure.phabricator.com/D15137
This commit is contained in:
Chad Little
parent
bf43d4cf2a
commit
4d498466c3
5 changed files with 245 additions and 212 deletions
|
|
@ -153,8 +153,9 @@ return array(
|
|||
'rsrc/css/phui/phui-text.css' => 'cf019f54',
|
||||
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
|
||||
'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
|
||||
'rsrc/css/phui/phui-workboard-view.css' => '04b34072',
|
||||
'rsrc/css/phui/phui-workpanel-view.css' => '31a835ba',
|
||||
'rsrc/css/phui/workboards/phui-workboard.css' => 'b07a5524',
|
||||
'rsrc/css/phui/workboards/phui-workcard.css' => '8ac68d18',
|
||||
'rsrc/css/phui/workboards/phui-workpanel.css' => 'e9339dc3',
|
||||
'rsrc/css/sprite-login.css' => '60e8560e',
|
||||
'rsrc/css/sprite-menu.css' => '9dd65b92',
|
||||
'rsrc/css/sprite-tokens.css' => '4f399012',
|
||||
|
|
@ -830,8 +831,9 @@ return array(
|
|||
'phui-theme-css' => 'ab7b848c',
|
||||
'phui-timeline-view-css' => '2efceff8',
|
||||
'phui-two-column-view-css' => 'c75bfc5b',
|
||||
'phui-workboard-view-css' => '04b34072',
|
||||
'phui-workpanel-view-css' => '31a835ba',
|
||||
'phui-workboard-view-css' => 'b07a5524',
|
||||
'phui-workcard-view-css' => '8ac68d18',
|
||||
'phui-workpanel-view-css' => 'e9339dc3',
|
||||
'phuix-action-list-view' => 'b5c256b8',
|
||||
'phuix-action-view' => '8cf6d262',
|
||||
'phuix-autocomplete' => '9196fb06',
|
||||
|
|
@ -1982,6 +1984,9 @@ return array(
|
|||
'e6e25838' => array(
|
||||
'javelin-install',
|
||||
),
|
||||
'e9339dc3' => array(
|
||||
'phui-workcard-view-css',
|
||||
),
|
||||
'e9581f08' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-stratcom',
|
||||
|
|
|
|||
|
|
@ -1,207 +0,0 @@
|
|||
/**
|
||||
* @provides phui-workpanel-view-css
|
||||
*/
|
||||
|
||||
.phui-workpanel-view .phui-header-shell {
|
||||
padding: 8px;
|
||||
width: 284px;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-header-shell .phui-header-header {
|
||||
font-size: {$biggerfontsize};
|
||||
line-height: 18px;
|
||||
color: {$darkbluetext};
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-header-shell .phui-header-subheader {
|
||||
padding: 0 4px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
.device-phone .phui-workboard-view {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.device .phui-workpanel-view .phui-header-shell {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phui-workboard-view {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-frame {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item .phui-object-item-objname {
|
||||
-webkit-touch-callout: text;
|
||||
-webkit-user-select: text;
|
||||
-khtml-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-link {
|
||||
white-space: normal;
|
||||
display: inline;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-objname {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-workpanel-header-action {
|
||||
float: right;
|
||||
width: 24px;
|
||||
border-left: 1px solid #b3b5b6;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-workpanel-body {
|
||||
padding: 8px 8px 4px 8px;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-workpanel-footer-action a {
|
||||
color: {$darkbluetext};
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workpanel-view .phui-workpanel-footer-action:hover {
|
||||
background-color: rgba(100,100,100,.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-list-item-icon {
|
||||
height: 14px;
|
||||
width: 14px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-list-item-name {
|
||||
padding-left: 5px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.device-desktop .aphront-multi-column-fixed .phui-workpanel-view {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.device-phone .aphront-multi-column-fixed .phui-workpanel-view,
|
||||
.device-phone .phui-workpanel-view .phui-header-shell {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phui-workpanel-body .phui-object-item-list-view {
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.device .aphront-multi-column-outer
|
||||
div.aphront-multi-column-column-outer .phui-workpanel-body {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.project-panel-hidden {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.project-panel-empty .phui-object-item-list-view {
|
||||
background: {$sh-indigobackground};
|
||||
border-radius: 3px;
|
||||
margin-bottom: 4px;
|
||||
border: 1px dashed {$sh-indigoborder};
|
||||
}
|
||||
|
||||
.project-panel-empty .phui-object-item-list-view .drag-ghost {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.project-panel-empty .phui-object-item-list-view.drag-target-list {
|
||||
background: rgba(255,255,255,.7);
|
||||
}
|
||||
|
||||
.phui-workpanel-view.project-panel-over-limit .phui-header-header {
|
||||
color: {$red};
|
||||
}
|
||||
|
||||
.phui-workpanel-view.project-panel-over-limit .phui-header-shell {
|
||||
border-color: {$red};
|
||||
}
|
||||
|
||||
/* - Workpanel Cards -----------------------------------------------------------
|
||||
|
||||
Slight display changes for how cards work in tight spaces
|
||||
|
||||
*/
|
||||
|
||||
.phui-workpanel-view .phui-object-item-grippable .phui-object-item-frame {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-object-item-grip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-object-item-attribute a {
|
||||
color: {$bluetext};
|
||||
}
|
||||
|
||||
|
||||
/* - Draggable Colors --------------------------------------------------------*/
|
||||
|
||||
.phui-workboard-view .phui-object-item.drag-dragging {
|
||||
box-shadow: {$dropshadow};
|
||||
background-color: {$sh-greybackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-red {
|
||||
background-color: {$sh-redbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-orange {
|
||||
background-color: {$sh-orangebackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-yellow {
|
||||
background-color: {$sh-yellowbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-green {
|
||||
background-color: {$sh-greenbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-blue {
|
||||
background-color: {$sh-bluebackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-indigo {
|
||||
background-color: {$sh-indigobackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-violet {
|
||||
background-color: {$sh-violetbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-pink {
|
||||
background-color: {$sh-pinkbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-sky {
|
||||
background-color: {$sh-bluebackground};
|
||||
}
|
||||
|
|
@ -6,6 +6,10 @@
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.device-phone .phui-workboard-view {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workboard-view-shadow {
|
||||
overflow-x: auto;
|
||||
position: absolute;
|
||||
|
|
@ -18,7 +22,7 @@
|
|||
}
|
||||
|
||||
.device-desktop .page-has-warning .phui-workboard-view-shadow {
|
||||
top: 132px;
|
||||
top: 113px;
|
||||
}
|
||||
|
||||
.device-desktop.with-durable-column .phui-workboard-view-shadow {
|
||||
127
webroot/rsrc/css/phui/workboards/phui-workcard.css
Normal file
127
webroot/rsrc/css/phui/workboards/phui-workcard.css
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
/**
|
||||
* @provides phui-workcard-view-css
|
||||
*/
|
||||
|
||||
.phui-workboard-view .phui-object-item {
|
||||
background-color: #fff;
|
||||
border-top-left-radius: 3px;
|
||||
border-bottom-left-radius: 3px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-name {
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-content {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-frame {
|
||||
border-top-right-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item .phui-object-item-objname {
|
||||
-webkit-touch-callout: text;
|
||||
-webkit-user-select: text;
|
||||
-khtml-user-select: text;
|
||||
-moz-user-select: text;
|
||||
-ms-user-select: text;
|
||||
user-select: text;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-link {
|
||||
white-space: normal;
|
||||
font-weight: normal;
|
||||
color: #000;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workboard-view .phui-object-item-with-1-actions
|
||||
.phui-object-item-content-box {
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.phui-workboard-view .phui-object-item-objname {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-object-item-grippable .phui-object-item-frame {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-object-item-grip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workpanel-view .phui-list-item-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-object-item .phui-list-item-href {
|
||||
height: 26px;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workpanel-view .phui-object-item:hover
|
||||
.phui-list-item-href {
|
||||
background: #fff;
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workpanel-view .phui-object-item
|
||||
.phui-list-item-href:hover {
|
||||
background: {$sh-bluebackground};
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-object-item:hover .phui-list-item-icon {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* - Draggable Colors --------------------------------------------------------*/
|
||||
|
||||
.phui-workboard-view .phui-object-item.drag-dragging {
|
||||
box-shadow: {$dropshadow};
|
||||
background-color: {$sh-greybackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-red {
|
||||
background-color: {$sh-redbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-orange {
|
||||
background-color: {$sh-orangebackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-yellow {
|
||||
background-color: {$sh-yellowbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-green {
|
||||
background-color: {$sh-greenbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-blue {
|
||||
background-color: {$sh-bluebackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-indigo {
|
||||
background-color: {$sh-indigobackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-violet {
|
||||
background-color: {$sh-violetbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-pink {
|
||||
background-color: {$sh-pinkbackground};
|
||||
}
|
||||
|
||||
.phui-workboard-view .drag-dragging.phui-object-item-bar-color-sky {
|
||||
background-color: {$sh-bluebackground};
|
||||
}
|
||||
104
webroot/rsrc/css/phui/workboards/phui-workpanel.css
Normal file
104
webroot/rsrc/css/phui/workboards/phui-workpanel.css
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
/**
|
||||
* @provides phui-workpanel-view-css
|
||||
* @requires phui-workcard-view-css
|
||||
*/
|
||||
|
||||
.phui-workpanel-view .phui-header-shell {
|
||||
padding: 8px;
|
||||
width: 284px;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-header-shell .phui-header-header {
|
||||
font-size: {$biggerfontsize};
|
||||
line-height: 18px;
|
||||
color: {$darkbluetext};
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-header-shell .phui-header-subheader {
|
||||
padding: 0 4px;
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
color: {$lightgreytext};
|
||||
}
|
||||
|
||||
.device .phui-workpanel-view .phui-header-shell {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phui-workboard-view {
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-workpanel-header-action {
|
||||
float: right;
|
||||
width: 24px;
|
||||
border-left: 1px solid #b3b5b6;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-workpanel-body {
|
||||
padding: 8px 8px 4px 8px;
|
||||
}
|
||||
|
||||
.device-phone .phui-workpanel-view .phui-workpanel-body {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.phui-workpanel-view .phui-workpanel-footer-action a {
|
||||
color: {$darkbluetext};
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.device-desktop .phui-workpanel-view .phui-workpanel-footer-action:hover {
|
||||
background-color: rgba(100,100,100,.1);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.device-desktop .aphront-multi-column-fixed .phui-workpanel-view {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.device-phone .aphront-multi-column-fixed .phui-workpanel-view,
|
||||
.device-phone .phui-workpanel-view .phui-header-shell {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.phui-workpanel-body .phui-object-item-list-view {
|
||||
min-height: 54px;
|
||||
}
|
||||
|
||||
.device .aphront-multi-column-outer
|
||||
div.aphront-multi-column-column-outer .phui-workpanel-body {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.project-panel-hidden {
|
||||
opacity: 0.75;
|
||||
}
|
||||
|
||||
.project-panel-empty .phui-object-item-list-view {
|
||||
background: {$sh-indigobackground};
|
||||
border-radius: 3px;
|
||||
margin-bottom: 4px;
|
||||
border: 1px dashed {$sh-indigoborder};
|
||||
}
|
||||
|
||||
.project-panel-empty .phui-object-item-list-view .drag-ghost {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.project-panel-empty .phui-object-item-list-view.drag-target-list {
|
||||
background: rgba(255,255,255,.7);
|
||||
}
|
||||
|
||||
.phui-workpanel-view.project-panel-over-limit .phui-header-header {
|
||||
color: {$red};
|
||||
}
|
||||
|
||||
.phui-workpanel-view.project-panel-over-limit .phui-header-shell {
|
||||
border-color: {$red};
|
||||
}
|
||||
Loading…
Reference in a new issue