revi-archive/phorge-phorge
1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-18 21:02:41 +01:00
Code Issues Releases Wiki Activity

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

Browse source 
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
This commit is contained in:
lkassianik 2015-05-12 17:56:52 -07:00
parent 7bfbc46a63
commit 20b7308dfb
3 changed files with 124 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
resources/celerity/map.php
View file

@ -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',

82
src/view/phui/calendar/PHUICalendarMonthView.php
View file

@ -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();
$date = $cell['date'];
$uri = $uri.$date->format('Y').'/'.
$date->format('m').'/'.
$date->format('d').'/';
$cell_day_secret_link = phutil_tag(
'a',
array(
'class' => 'phui-calendar-month-secret-link',
'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_day,
$today_slot,
));
$cell_div);
}
$table[] = phutil_tag('tr', array(), $cells);
}

52
webroot/rsrc/css/phui/calendar/phui-calendar-month.css
View file

@ -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 {
min-height: 125px;
.device table.phui-calendar-view .phui-calendar-event-list {
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 {