From 4d498466c303d4e1083c532600e790e012ab9099 Mon Sep 17 00:00:00 2001
From: Chad Little <chad@chadsdomain.com>
Date: Fri, 29 Jan 2016 09:53:07 -0800
Subject: [PATCH] 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
---
 resources/celerity/map.php                    |  13 +-
 webroot/rsrc/css/phui/phui-workpanel-view.css | 207 ------------------
 .../phui-workboard.css}                       |   6 +-
 .../css/phui/workboards/phui-workcard.css     | 127 +++++++++++
 .../css/phui/workboards/phui-workpanel.css    | 104 +++++++++
 5 files changed, 245 insertions(+), 212 deletions(-)
 delete mode 100644 webroot/rsrc/css/phui/phui-workpanel-view.css
 rename webroot/rsrc/css/phui/{phui-workboard-view.css => workboards/phui-workboard.css} (94%)
 create mode 100644 webroot/rsrc/css/phui/workboards/phui-workcard.css
 create mode 100644 webroot/rsrc/css/phui/workboards/phui-workpanel.css

diff --git a/resources/celerity/map.php b/resources/celerity/map.php
index b1649e3d04..bb04894a69 100644
--- a/resources/celerity/map.php
+++ b/resources/celerity/map.php
@@ -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',
diff --git a/webroot/rsrc/css/phui/phui-workpanel-view.css b/webroot/rsrc/css/phui/phui-workpanel-view.css
deleted file mode 100644
index 4700b86b55..0000000000
--- a/webroot/rsrc/css/phui/phui-workpanel-view.css
+++ /dev/null
@@ -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};
-}
diff --git a/webroot/rsrc/css/phui/phui-workboard-view.css b/webroot/rsrc/css/phui/workboards/phui-workboard.css
similarity index 94%
rename from webroot/rsrc/css/phui/phui-workboard-view.css
rename to webroot/rsrc/css/phui/workboards/phui-workboard.css
index e7aa55426a..54b4907861 100644
--- a/webroot/rsrc/css/phui/phui-workboard-view.css
+++ b/webroot/rsrc/css/phui/workboards/phui-workboard.css
@@ -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 {
diff --git a/webroot/rsrc/css/phui/workboards/phui-workcard.css b/webroot/rsrc/css/phui/workboards/phui-workcard.css
new file mode 100644
index 0000000000..e7d81d30d3
--- /dev/null
+++ b/webroot/rsrc/css/phui/workboards/phui-workcard.css
@@ -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};
+}
diff --git a/webroot/rsrc/css/phui/workboards/phui-workpanel.css b/webroot/rsrc/css/phui/workboards/phui-workpanel.css
new file mode 100644
index 0000000000..978a3c4863
--- /dev/null
+++ b/webroot/rsrc/css/phui/workboards/phui-workpanel.css
@@ -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};
+}