Calendar list event items should be entirely clickable

Summary: Ref T8248, Calendar list event items should be entirely clickable

Test Plan: Open month view, verify that adjusting screen correctly adjust widths of event links, and that entire event row links are clickable.

Reviewers: chad, epriestley, #blessed_reviewers

Reviewed By: epriestley, #blessed_reviewers

Subscribers: Korvin, epriestley

Maniphest Tasks: T8248

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

resources/celerity/map.php

@@ -121,9 +121,9 @@ return array(
     'rsrc/css/layout/phabricator-side-menu-view.css' => 'c1db9e9c',
     'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => 'c0cf782a',
-    'rsrc/css/phui/calendar/phui-calendar-list.css' => '3e713fc7',
+    'rsrc/css/phui/calendar/phui-calendar-list.css' => '857a0d83',
-    'rsrc/css/phui/calendar/phui-calendar-month.css' => '017a953b',
+    'rsrc/css/phui/calendar/phui-calendar-month.css' => '32e3bee4',
-    'rsrc/css/phui/calendar/phui-calendar.css' => '8345be98',
+    'rsrc/css/phui/calendar/phui-calendar.css' => 'ccabe893',
     'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
     'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
     'rsrc/css/phui/phui-action-panel.css' => '3ee9afd5',
@@ -760,10 +760,10 @@ return array(
     'phui-action-panel-css' => '3ee9afd5',
     'phui-box-css' => '7b3a2eed',
     'phui-button-css' => 'de610129',
-    'phui-calendar-css' => '8345be98',
+    'phui-calendar-css' => 'ccabe893',
     'phui-calendar-day-css' => 'c0cf782a',
-    'phui-calendar-list-css' => '3e713fc7',
+    'phui-calendar-list-css' => '857a0d83',
-    'phui-calendar-month-css' => '017a953b',
+    'phui-calendar-month-css' => '32e3bee4',
     'phui-crumbs-view-css' => '594d719e',
     'phui-document-view-css' => '94d5dcd8',
     'phui-feed-story-css' => 'c9f3a0b5',

src/view/phui/calendar/PHUICalendarListView.php

@@ -72,16 +72,23 @@ final class PHUICalendarListView extends AphrontTagView {
         $class = $class.' all-day';
       }
 
-      $singletons[] = phutil_tag(
+      $content = phutil_tag(
-        'li',
+        'a',
         array(
-          'class' => $class,
+          'href' => '/E'.$event->getEventID(),
-          ),
+        ),
         array(
           $dot,
           $time,
           $title,
         ));
+
+      $singletons[] = phutil_tag(
+        'li',
+        array(
+          'class' => $class,
+        ),
+        $content);
     }
 
     if (empty($singletons)) {
@@ -147,11 +154,10 @@ final class PHUICalendarListView extends AphrontTagView {
     $class = 'phui-calendar-item';
 
     $anchor = javelin_tag(
-      'a',
+      'span',
       array(
         'sigil' => 'has-tooltip',
         'class' => $class,
-        'href' => '/E'.$event->getEventID(),
         'meta'  => array(
           'tip'  => $tip,
           'size' => 200,

webroot/rsrc/css/phui/calendar/phui-calendar-list.css

@@ -43,11 +43,15 @@
 }
 
 .phui-calendar-list-title {
-  width: 200px;
+ width: 200px;
-  display: inline-block;
+ display: inline-block;
-  overflow: hidden;
+ overflow: hidden;
-  text-overflow: ellipsis;
+ text-overflow: ellipsis;
-  white-space: nowrap;
+ white-space: nowrap;
+}
+
+.phui-calendar-viewer-invited .phui-calendar-list-title {
+  font-weight: bold;
 }
 
 .phui-calendar-list-item .phui-calendar-list-time {

webroot/rsrc/css/phui/calendar/phui-calendar-month.css

@@ -151,6 +151,7 @@ table.phui-calendar-view td.phui-calendar-date-number-container {
 
 .phui-calendar-view .phui-calendar-list {
   padding: 1px;
+  width: auto;
 }
 
 .phui-calendar-list-item.all-day span {
@@ -160,8 +161,6 @@ table.phui-calendar-view td.phui-calendar-date-number-container {
 
 .phui-calendar-view .phui-calendar-list li.phui-calendar-list-item.all-day {
   height: 20px;
-  margin: 0;
-  padding: 4px 4px 0px 4px;
   background-color: {$darkgreybackground};
   display: block;
   float: none;
@@ -173,21 +172,24 @@ li.phui-calendar-viewer-invited.all-day {
   background-color: {$lightgreen};
 }
 
-li.phui-calendar-list-item.all-day:first-child {
-  margin-top: 0;
-}
-
 .phui-calendar-view .phui-calendar-list li {
-  margin: 0 8px;
+  padding: 0px 4px;
 }
 
-.phui-calendar-view .phui-calendar-list li:first-child {
+.phui-calendar-view .phui-calendar-list li a {
-  margin-top: 8px;
+  display: block;
+  overflow: hidden;
+  position: relative;
+}
+
+.phui-calendar-view li.phui-calendar-list-item {
+  white-space: nowrap;
+  width: auto;
 }
 
 .phui-calendar-view .phui-calendar-list-dot {
   position: relative;
-  display: inline-block;
+  display: block;
   float: left;
   width: 3px;
   height: 3px;
@@ -198,37 +200,18 @@ li.phui-calendar-list-item.all-day:first-child {
   display: none;
 }
 
-.phui-calendar-view li.phui-calendar-list-item {
-  padding: 0;
-}
-
 .phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-title {
-  position: relative;
+  width: auto;
-  /*float: right;*/
+  position: absolute;
-  display: inline-block;
+  right: 0;
-  width: 120px;
+  left: 60px;
-  padding: 0;
-  line-height: 18px;
-  vertical-align: center;
-}
-
-li.phui-calendar-list-item .phui-calendar-list-title a {
-  padding: 0;
-  vertical-align: top;
-  line-height: 16px;
-  overflow: hidden;
   text-overflow: ellipsis;
+  overflow: hidden;
   white-space: nowrap;
 }
 
-li.phui-calendar-list-item.all-day .phui-calendar-list-title a{
+li.all-day {
-  color: {$greytext};
+  line-height: 18px;
-  margin: 0;
-  padding: 0;
-}
-
-li.phui-calendar-viewer-invited.all-day .phui-calendar-list-title a{
-  color: {$green};
 }
 
 .phui-calendar-view li.phui-calendar-list-item .phui-calendar-list-time {
@@ -241,7 +224,3 @@ li.phui-calendar-viewer-invited.all-day .phui-calendar-list-title a{
   color: {$lightgreytext};
   text-align: left;
 }
-
-li.phui-calendar-list-item.all-day .phui-calendar-list-time{
-  margin: 0 0 0 4px;
-}

webroot/rsrc/css/phui/calendar/phui-calendar.css

@@ -8,7 +8,6 @@
 
 .phui-calendar-viewer-invited a {
   color: {$green};
-  font-weight: bold;
 }
 
 .phui-calendar-red a {