Clean up FontAwesome / Timeline CSS

Summary: Normalize FA CSS, expand timeline icons to 14px, fix mobile browsers, give attribution in uiexamples

Test Plan: tested iOS simulator, chrome, ie

Reviewers: epriestley

Reviewed By: epriestley

Subscribers: epriestley, Korvin

Differential Revision: https://secure.phabricator.com/D8845

resources/celerity/map.php

@@ -7,7 +7,7 @@
 return array(
   'names' =>
   array(
-    'core.pkg.css' => 'c88bd7c6',
+    'core.pkg.css' => 'c5e5592f',
     'core.pkg.js' => '417722ff',
     'darkconsole.pkg.js' => 'ca8671ce',
     'differential.pkg.css' => '12c11318',
@@ -103,7 +103,7 @@ return array(
     'rsrc/css/application/slowvote/slowvote.css' => '266df6a1',
     'rsrc/css/application/subscriptions/subscribers-list.css' => '5bb30c78',
     'rsrc/css/application/tokens/tokens.css' => '5f7bca25',
-    'rsrc/css/application/uiexample/example.css' => '81adeffe',
+    'rsrc/css/application/uiexample/example.css' => '528b19de',
     'rsrc/css/core/core.css' => 'da26ddb2',
     'rsrc/css/core/remarkup.css' => '0923dbd6',
     'rsrc/css/core/syntax.css' => '3c18c1cb',
@@ -112,7 +112,7 @@ return array(
     'rsrc/css/font/font-awesome.css' => '62bc244d',
     'rsrc/css/font/font-glyphicons-halflings.css' => 'c4c1c6b6',
     'rsrc/css/font/font-source-sans-pro.css' => '91d53463',
-    'rsrc/css/font/phui-font-icon-base.css' => 'cc5465ba',
+    'rsrc/css/font/phui-font-icon-base.css' => 'cd92ff25',
     'rsrc/css/layout/phabricator-action-header-view.css' => 'c14dfc57',
     'rsrc/css/layout/phabricator-action-list-view.css' => '81383e25',
     'rsrc/css/layout/phabricator-crumbs-view.css' => '2d9db584',
@@ -132,7 +132,7 @@ return array(
     'rsrc/css/phui/phui-form-view.css' => '867463b4',
     'rsrc/css/phui/phui-form.css' => 'b78ec020',
     'rsrc/css/phui/phui-header-view.css' => '5b79f0ef',
-    'rsrc/css/phui/phui-icon.css' => '322274f9',
+    'rsrc/css/phui/phui-icon.css' => '215fa314',
     'rsrc/css/phui/phui-info-panel.css' => '27ea50a1',
     'rsrc/css/phui/phui-list.css' => 'ef8035b6',
     'rsrc/css/phui/phui-object-box.css' => 'ce92d8ec',
@@ -144,7 +144,7 @@ return array(
     'rsrc/css/phui/phui-status.css' => '2f562399',
     'rsrc/css/phui/phui-tag-view.css' => '295d81c4',
     'rsrc/css/phui/phui-text.css' => '23e9b4b7',
-    'rsrc/css/phui/phui-timeline-view.css' => '7a502670',
+    'rsrc/css/phui/phui-timeline-view.css' => '92602937',
     'rsrc/css/phui/phui-workboard-view.css' => '84f2c272',
     'rsrc/css/phui/phui-workpanel-view.css' => '97b69459',
     'rsrc/css/sprite-actions.css' => '969ad0e5',
@@ -719,7 +719,7 @@ return array(
     'phabricator-textareautils' => 'b3ec3cfc',
     'phabricator-tooltip' => '3915d490',
     'phabricator-transaction-view-css' => 'ce491938',
-    'phabricator-ui-example-css' => '81adeffe',
+    'phabricator-ui-example-css' => '528b19de',
     'phabricator-uiexample-javelin-view' => 'd4a14807',
     'phabricator-uiexample-reactor-button' => '44524435',
     'phabricator-uiexample-reactor-checkbox' => '7ba325ee',
@@ -747,12 +747,12 @@ return array(
     'phui-calendar-month-css' => 'a92e47d2',
     'phui-document-view-css' => '3b078dc0',
     'phui-feed-story-css' => '3a59c2cf',
-    'phui-font-icon-base-css' => 'cc5465ba',
+    'phui-font-icon-base-css' => 'cd92ff25',
     'phui-fontkit-css' => 'de84aa4a',
     'phui-form-css' => 'b78ec020',
     'phui-form-view-css' => '867463b4',
     'phui-header-view-css' => '5b79f0ef',
-    'phui-icon-view-css' => '322274f9',
+    'phui-icon-view-css' => '215fa314',
     'phui-info-panel-css' => '27ea50a1',
     'phui-list-view-css' => 'ef8035b6',
     'phui-object-box-css' => 'ce92d8ec',
@@ -764,7 +764,7 @@ return array(
     'phui-status-list-view-css' => '2f562399',
     'phui-tag-view-css' => '295d81c4',
     'phui-text-css' => '23e9b4b7',
-    'phui-timeline-view-css' => '7a502670',
+    'phui-timeline-view-css' => '92602937',
     'phui-workboard-view-css' => '84f2c272',
     'phui-workpanel-view-css' => '97b69459',
     'policy-css' => '957ea14c',

src/applications/uiexample/examples/PHUIIconExample.php

@@ -427,6 +427,7 @@ final class PHUIIconExample extends PhabricatorUIExample {
         ->setText(pht('fa-tag %s', $color));
     }
     $ficons = array();
+    sort($fas);
     foreach ($fas as $fa) {
       $ficons[] = id(new PHUIIconView())
         ->addClass('phui-example-icon-name')
@@ -568,8 +569,16 @@ final class PHUIIconExample extends PhabricatorUIExample {
       ->appendChild($loginview)
       ->addMargin(PHUI::MARGIN_MEDIUM);
 
+    $fa_link = phutil_tag(
+      'a',
+      array(
+        'href' => 'http://fontawesome.io'
+      ),
+      'http://fontawesome.io');
+    $fa_text = pht('Font Awesome by Dave Gandy - %s', $fa_link);
+
     $fontawesome = id(new PHUIObjectBoxView())
-      ->setHeaderText(pht('Font Awesome'))
+      ->setHeaderText($fa_text)
       ->appendChild($layout_fa);
 
     $transforms = id(new PHUIObjectBoxView())

webroot/rsrc/css/application/uiexample/example.css

@@ -40,7 +40,7 @@
 
 .phui-example-icon-name {
   display: inline-block;
-  width: 160px;
+  width: 180px;
   padding-bottom: 8px;
   white-space: nowrap;
 }

webroot/rsrc/css/font/phui-font-icon-base.css

@@ -2,30 +2,12 @@
  * @provides phui-font-icon-base-css
  */
 
-.phui-font-gh,
 .phui-font-fa {
   display: inline-block;
-  position: relative;
   color: {$darkgreytext};
-  text-decoration: none;
-  *display: inline;
-  *zoom: 1;
-  vertical-align: middle;
-}
-.phui-font-gh:before,
-.phui-font-fa:before {
-  position: absolute;
-  left: 0;
-  top: 0;
-  display: inline-block;
-  margin: 0 5px 0 0;
   font-style: normal;
   font-weight: normal;
-  color: {$darkgreytext};
-  *display: inline;
-  *zoom: 1;
-  vertical-align: middle;
-  text-transform: none;
+  line-height: 1;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }

webroot/rsrc/css/phui/phui-icon.css

@@ -53,6 +53,6 @@
   background-size: 35px;
 }
 
-.phui-icon-has-text {
-  padding-left: 20px;
+.phui-icon-has-text:before {
+  margin-right: 8px;
 }

webroot/rsrc/css/phui/phui-timeline-view.css

@@ -194,9 +194,7 @@
 }
 
 .phui-icon-view.phui-timeline-icon:before {
-  position: relative;
-  top: 4px;
-  margin: 0;
+  font-size: 14px;
 }
 
 .phui-timeline-minor-event .phui-timeline-icon-fill {
@@ -205,6 +203,14 @@
   border-radius: 3px;
 }
 
+.phui-timeline-icon-fill .phui-timeline-icon {
+  margin-top: 5px;
+}
+
+.phui-timeline-minor-event .phui-timeline-icon {
+  margin-top: 6px;
+}
+
 .phui-timeline-extra,
 .phui-timeline-extra .phabricator-content-source-view {
   font-size: 11px;