@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
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
+123
-13
+2
-2
resources/celerity/map.php
+2
-2
resources/celerity/map.php
···
122
122
'rsrc/css/layout/phabricator-source-code-view.css' => '2ceee894',
123
123
'rsrc/css/phui/calendar/phui-calendar-day.css' => '38891735',
124
124
'rsrc/css/phui/calendar/phui-calendar-list.css' => 'c1d0ca59',
125
-
'rsrc/css/phui/calendar/phui-calendar-month.css' => '4c39f6d9',
125
+
'rsrc/css/phui/calendar/phui-calendar-month.css' => '75e6a2ee',
126
126
'rsrc/css/phui/calendar/phui-calendar.css' => '8675968e',
127
127
'rsrc/css/phui/phui-action-header-view.css' => '89c497e7',
128
128
'rsrc/css/phui/phui-action-list.css' => '4f4d09f2',
···
779
779
'phui-calendar-css' => '8675968e',
780
780
'phui-calendar-day-css' => '38891735',
781
781
'phui-calendar-list-css' => 'c1d0ca59',
782
-
'phui-calendar-month-css' => '4c39f6d9',
782
+
'phui-calendar-month-css' => '75e6a2ee',
783
783
'phui-crumbs-view-css' => '594d719e',
784
784
'phui-document-view-css' => '94d5dcd8',
785
785
'phui-feed-story-css' => 'c9f3a0b5',
+71
-9
src/view/phui/calendar/PHUICalendarMonthView.php
+71
-9
src/view/phui/calendar/PHUICalendarMonthView.php
···
75
75
$empty_cell = array(
76
76
'list' => null,
77
77
'date' => null,
78
+
'uri' => null,
79
+
'count' => 0,
78
80
'class' => null,
79
81
);
80
82
···
137
139
$list->addEvent($item);
138
140
}
139
141
142
+
$uri = $this->getBrowseURI();
143
+
$uri = $uri.$day->format('Y').'/'.
144
+
$day->format('m').'/'.
145
+
$day->format('d').'/';
146
+
140
147
$markup[] = array(
141
148
'list' => $list,
142
149
'date' => $day,
150
+
'uri' => $uri,
151
+
'count' => count($all_day_events) + count($list_events),
143
152
'class' => $class,
144
153
);
145
154
}
···
149
158
150
159
foreach ($rows as $row) {
151
160
$cells = array();
161
+
$event_count_badge = null;
162
+
152
163
while (count($row) < 7) {
153
164
$row[] = $empty_cell;
154
165
}
155
166
foreach ($row as $cell) {
156
167
$cell_list = $cell['list'];
157
168
$class = $cell['class'];
169
+
$uri = $cell['uri'];
170
+
$count = $cell['count'];
171
+
172
+
$event_count = null;
173
+
if ($count > 0) {
174
+
$event_count = phutil_tag(
175
+
'div',
176
+
array(
177
+
'class' => 'phui-calendar-month-count-badge',
178
+
),
179
+
$count);
180
+
}
181
+
182
+
$event_count_badge = phutil_tag(
183
+
'div',
184
+
array(
185
+
'class' => 'phui-calendar-month-event-count',
186
+
),
187
+
$event_count);
188
+
189
+
$cell_day_secret_link = phutil_tag(
190
+
'a',
191
+
array(
192
+
'class' => 'phui-calendar-month-secret-link',
193
+
'href' => $uri,
194
+
),
195
+
null);
196
+
197
+
$cell_div = phutil_tag(
198
+
'div',
199
+
array(
200
+
'class' => 'phui-calendar-month-cell-div',
201
+
),
202
+
array(
203
+
$cell_day_secret_link,
204
+
$event_count_badge,
205
+
$cell_list,
206
+
));
207
+
158
208
$cells[] = phutil_tag(
159
209
'td',
160
210
array(
161
211
'class' => 'phui-calendar-month-event-list '.$class,
162
212
),
163
-
$cell_list);
213
+
$cell_div);
164
214
}
165
215
$table[] = phutil_tag('tr', array(), $cells);
166
216
167
217
$cells = array();
168
218
foreach ($row as $cell) {
169
219
$class = $cell['class'];
220
+
$cell_day_secret_link = null;
170
221
171
222
if ($cell['date']) {
172
223
$cell_day = $cell['date'];
224
+
$uri = $cell['uri'];
173
225
174
-
$uri = $this->getBrowseURI();
175
-
$date = $cell['date'];
176
-
$uri = $uri.$date->format('Y').'/'.
177
-
$date->format('m').'/'.
178
-
$date->format('d').'/';
226
+
$cell_day_secret_link = phutil_tag(
227
+
'a',
228
+
array(
229
+
'class' => 'phui-calendar-month-secret-link',
230
+
'href' => $uri,
231
+
),
232
+
null);
179
233
180
234
$cell_day = phutil_tag(
181
235
'a',
···
202
256
),
203
257
null);
204
258
205
-
$cells[] = phutil_tag(
206
-
'td',
259
+
$cell_div = phutil_tag(
260
+
'div',
207
261
array(
208
-
'class' => 'phui-calendar-date-number-container '.$class,
262
+
'class' => 'phui-calendar-month-cell-div',
209
263
),
210
264
array(
265
+
$cell_day_secret_link,
211
266
$cell_day,
212
267
$today_slot,
213
268
));
269
+
270
+
$cells[] = phutil_tag(
271
+
'td',
272
+
array(
273
+
'class' => 'phui-calendar-date-number-container '.$class,
274
+
),
275
+
$cell_div);
214
276
}
215
277
$table[] = phutil_tag('tr', array(), $cells);
216
278
}
+50
-2
webroot/rsrc/css/phui/calendar/phui-calendar-month.css
+50
-2
webroot/rsrc/css/phui/calendar/phui-calendar-month.css
···
22
22
width: 14.2857%; /* This is one seventh, approximately. */
23
23
}
24
24
25
+
.phui-calendar-month-cell-div {
26
+
position: relative;
27
+
}
28
+
29
+
.phui-calendar-month-event-list .phui-calendar-month-cell-div {
30
+
min-height: 125px;
31
+
}
32
+
33
+
.device .phui-calendar-month-event-list .phui-calendar-month-cell-div {
34
+
min-height: 60px;
35
+
}
36
+
37
+
a.phui-calendar-month-secret-link {
38
+
position: absolute;
39
+
left: 0;
40
+
right: 0;
41
+
top: 0;
42
+
bottom: 0;
43
+
outline: 0;
44
+
}
45
+
25
46
table.phui-calendar-view tr td:first-child {
26
47
border-left-width: 0px;
27
48
}
28
49
29
-
table.phui-calendar-view .phui-calendar-event-list {
30
-
min-height: 125px;
50
+
.device table.phui-calendar-view .phui-calendar-event-list {
51
+
display: none;
52
+
}
53
+
54
+
.phui-calendar-month-event-count {
55
+
display: none;
56
+
}
57
+
58
+
.device .phui-calendar-month-event-count {
59
+
display: block;
60
+
text-align: center;
61
+
padding-top: 12px;
62
+
}
63
+
64
+
.phui-calendar-month-event-count .phui-calendar-month-count-badge {
65
+
border: 1px solid {$lightgreyborder};
66
+
color: {$lightgreytext};
67
+
width: 20px;
68
+
height: 20px;
69
+
border-radius: 50%;
70
+
text-align: center;
71
+
vertical-align: middle;
72
+
padding: 5px 3px 0px 3px;
73
+
margin: 0 auto;
31
74
}
32
75
33
76
table.phui-calendar-view a.phui-calendar-date-number {
···
79
122
margin: 0;
80
123
padding: 4px 8px;
81
124
background-color: {$lightpink};
125
+
display: block;
126
+
float: none;
82
127
}
83
128
84
129
li.phui-calendar-list-item.all-day:first-child {
···
87
132
88
133
.phui-calendar-view .phui-calendar-list li {
89
134
margin: 0 8px;
135
+
display: inline-block;
136
+
float: left;
137
+
clear: both;
90
138
}
91
139
92
140
.phui-calendar-view .phui-calendar-list li:first-child {