Month view should adjust to display badges with event count instead of event list on mobile and tablets.

Summary: Ref T4392, Month view should adjust to display badges with event count instead of event list on mobile and tablets.

Test Plan: Open month view, adjust browser as mobile size, event lists should turn into badges with event counts and calendar days should be links to day views of those days.

Reviewers: epriestley, #blessed_reviewers, chad

Reviewed By: epriestley, #blessed_reviewers

Subscribers: Korvin, epriestley

Maniphest Tasks: T4392

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

resources/celerity/map.php

@@ -122,7 +122,7 @@ return array(
     'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
     'rsrc/css/phui/calendar/phui-calendar-day.css' => '38891735',
     'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
-    'rsrc/css/phui/calendar/phui-calendar-month.css' => '4c39f6d9',
+    'rsrc/css/phui/calendar/phui-calendar-month.css' => '75e6a2ee',
     'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
     'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
     'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
@@ -779,7 +779,7 @@ return array(
     'phui-calendar-css' => '8675968e',
     'phui-calendar-day-css' => '38891735',
     'phui-calendar-list-css' => 'c1d0ca59',
-    'phui-calendar-month-css' => '4c39f6d9',
+    'phui-calendar-month-css' => '75e6a2ee',
     'phui-crumbs-view-css' => '594d719e',
     'phui-document-view-css' => '94d5dcd8',
     'phui-feed-story-css' => 'c9f3a0b5',

src/view/phui/calendar/PHUICalendarMonthView.php

@@ -75,6 +75,8 @@ final class PHUICalendarMonthView extends AphrontView {
     $empty_cell = array(
         'list' => null,
         'date' => null,
+        'uri' => null,
+        'count' => 0,
         'class' => null,
       );
 
@@ -137,9 +139,16 @@ final class PHUICalendarMonthView extends AphrontView {
         $list->addEvent($item);
       }
 
+      $uri = $this->getBrowseURI();
+      $uri = $uri.$day->format('Y').'/'.
+        $day->format('m').'/'.
+        $day->format('d').'/';
+
       $markup[] = array(
         'list' => $list,
         'date' => $day,
+        'uri' => $uri,
+        'count' => count($all_day_events) + count($list_events),
         'class' => $class,
         );
     }
@@ -149,33 +158,78 @@ final class PHUICalendarMonthView extends AphrontView {
 
     foreach ($rows as $row) {
       $cells = array();
+      $event_count_badge = null;
+
       while (count($row) < 7) {
         $row[] = $empty_cell;
       }
       foreach ($row as $cell) {
         $cell_list = $cell['list'];
         $class = $cell['class'];
+        $uri = $cell['uri'];
+        $count = $cell['count'];
+
+        $event_count = null;
+        if ($count > 0) {
+          $event_count = phutil_tag(
+            'div',
+            array(
+              'class' => 'phui-calendar-month-count-badge',
+            ),
+            $count);
+        }
+
+        $event_count_badge = phutil_tag(
+          'div',
+          array(
+            'class' => 'phui-calendar-month-event-count',
+          ),
+          $event_count);
+
+        $cell_day_secret_link = phutil_tag(
+          'a',
+          array(
+            'class' => 'phui-calendar-month-secret-link',
+            'href' => $uri,
+          ),
+          null);
+
+        $cell_div = phutil_tag(
+          'div',
+          array(
+            'class' => 'phui-calendar-month-cell-div',
+          ),
+          array(
+            $cell_day_secret_link,
+            $event_count_badge,
+            $cell_list,
+          ));
+
         $cells[] = phutil_tag(
           'td',
           array(
             'class' => 'phui-calendar-month-event-list '.$class,
           ),
-          $cell_list);
+          $cell_div);
       }
       $table[] = phutil_tag('tr', array(), $cells);
 
       $cells = array();
       foreach ($row as $cell) {
         $class = $cell['class'];
+        $cell_day_secret_link = null;
 
         if ($cell['date']) {
           $cell_day = $cell['date'];
+          $uri = $cell['uri'];
 
-          $uri = $this->getBrowseURI();
+          $cell_day_secret_link = phutil_tag(
-          $date = $cell['date'];
+            'a',
-          $uri = $uri.$date->format('Y').'/'.
+            array(
-            $date->format('m').'/'.
+              'class' => 'phui-calendar-month-secret-link',
-            $date->format('d').'/';
+              'href' => $uri,
+            ),
+            null);
 
           $cell_day = phutil_tag(
             'a',
@@ -202,15 +256,23 @@ final class PHUICalendarMonthView extends AphrontView {
           ),
           null);
 
+        $cell_div = phutil_tag(
+          'div',
+          array(
+            'class' => 'phui-calendar-month-cell-div',
+          ),
+          array(
+            $cell_day_secret_link,
+            $cell_day,
+            $today_slot,
+          ));
+
         $cells[] = phutil_tag(
           'td',
           array(
             'class' => 'phui-calendar-date-number-container '.$class,
           ),
-          array(
+          $cell_div);
-            $cell_day,
-            $today_slot,
-          ));
       }
       $table[] = phutil_tag('tr', array(), $cells);
     }

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

@@ -22,12 +22,55 @@ table.phui-calendar-view td {
   width: 14.2857%; /* This is one seventh, approximately. */
 }
 
+.phui-calendar-month-cell-div {
+  position: relative;
+}
+
+.phui-calendar-month-event-list .phui-calendar-month-cell-div {
+  min-height: 125px;
+}
+
+.device .phui-calendar-month-event-list .phui-calendar-month-cell-div {
+  min-height: 60px;
+}
+
+a.phui-calendar-month-secret-link {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  outline: 0;
+}
+
 table.phui-calendar-view tr td:first-child {
   border-left-width: 0px;
 }
 
-table.phui-calendar-view .phui-calendar-event-list {
+.device table.phui-calendar-view .phui-calendar-event-list {
-  min-height: 125px;
+  display: none;
+}
+
+.phui-calendar-month-event-count {
+  display: none;
+}
+
+.device .phui-calendar-month-event-count {
+  display: block;
+  text-align: center;
+  padding-top: 12px;
+}
+
+.phui-calendar-month-event-count .phui-calendar-month-count-badge {
+  border: 1px solid {$lightgreyborder};
+  color: {$lightgreytext};
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  text-align: center;
+  vertical-align: middle;
+  padding: 5px 3px 0px 3px;
+  margin: 0 auto;
 }
 
 table.phui-calendar-view a.phui-calendar-date-number {
@@ -79,6 +122,8 @@ table.phui-calendar-view td.phui-calendar-date-number-container {
   margin: 0;
   padding: 4px 8px;
   background-color: {$lightpink};
+  display: block;
+  float: none;
 }
 
 li.phui-calendar-list-item.all-day:first-child {
@@ -87,6 +132,9 @@ li.phui-calendar-list-item.all-day:first-child {
 
 .phui-calendar-view .phui-calendar-list li {
   margin: 0 8px;
+  display: inline-block;
+  float: left;
+  clear: both;
 }
 
 .phui-calendar-view .phui-calendar-list li:first-child {