#19: The user profile grid is now much more Github-like

app/Http/Controllers/Gallery/UserController.php

@@ -33,11 +33,14 @@ class UserController extends Controller
         $cameras = $this->getCamerasUsedInAlbums($albumIDs);
         $activity = $this->getActivityDatesInAlbums($albumIDs);
 
+        $daysInMonth = $this->getDaysInMonths();
+
         return Theme::render('gallery.user_profile', [
             'activity_taken' => $this->constructActivityGrid($activity['taken']),
             'activity_uploaded' => $this->constructActivityGrid($activity['uploaded']),
             'albums' => $albums,
             'cameras' => $cameras,
+            'month_days' => $daysInMonth,
             'user' => $user
         ]);
     }
@@ -170,4 +173,29 @@ class UserController extends Controller
             ->orderBy('camera_software')
             ->get();
     }
+
+    private function getDaysInMonths()
+    {
+        $results = [];
+
+        $lastYearFrom = new \DateTime();
+        $lastYearFrom->sub(new \DateInterval('P1Y'));
+        $lastYearFrom->sub(new \DateInterval(sprintf('P%dD', $lastYearFrom->format('d') - 1)));
+
+        $today = new \DateTime();
+        $current = clone $lastYearFrom;
+
+        while ($current < $today)
+        {
+            $year = intval($current->format('Y'));
+            $month = intval($current->format('m'));
+
+            $daysInMonth = cal_days_in_month(CAL_GREGORIAN, $month, $year);
+            $results[$year][$current->format('M')] = $daysInMonth;
+
+            $current->add(new \DateInterval('P1M'));
+        }
+
+        return $results;
+    }
 }

resources/assets/css/gallery.css

@@ -2,13 +2,41 @@
     font-size: smaller;
 }
 
-.activity-grid th,td {
+.activity-grid th,
+.activity-grid td {
     padding: 5px !important;
     text-align: center;
 }
 
 .activity-grid td {
     color: #fff;
+    height: 20px;
+}
+
+.activity-grid .has-activity {
+    background-color: #1e90ff;
+}
+
+.activity-grid .invalid-date {
+    background-color: #e5e5e5;
+}
+
+.activity-grid .no-activity {
+    background-color: #fff;
+}
+
+.activity-grid th:first-child,
+.activity-grid td:first-child {
+    border-left: 1px solid #dee2e6;
+}
+
+.activity-grid th,
+.activity-grid td {
+    border-right: 1px solid #dee2e6;
+}
+
+.activity-grid tr:last-child td {
+    border-bottom: 1px solid #dee2e6;
 }
 
 .album-slideshow-container #image-preview {

resources/views/themes/base/partials/user_profile_activity_grid.blade.php

@@ -1,26 +1,106 @@
 <table class="table activity-grid">
     <thead>
         <tr>
-            <th></th>
+            @php
+            $i = 0;
+            @endphp
             @foreach ($activity as $year => $months)
                 @foreach ($months as $month => $dates)
-                    <th style="vertical-align: top;">{{ $month }}@if ($month == 'Jan')<br/>{{ $year }}@endif</th>
+                    <th colspan="{{ ceil($month_days[$year][$month] / 7) }}" style="vertical-align: top;">{{ $month }}@if ($i == 0 || $i == 12 || $month == 'Jan')<br/>{{ $year }}@endif</th>
+                    @php
+                    $i++
+                    @endphp
                 @endforeach
             @endforeach
         </tr>
     </thead>
     <tbody>
-        @for ($i = 1; $i <= 31; $i++)
+        {{-- Output a table containing columns for days 1-7, 8-14, 15-21, 22-28, 29-31 (if applicable) --}}
+        @for ($row = 0; $row < 7; $row++)
             <tr>
-                <th>{{ $i }}</th>
                 @foreach ($activity as $year => $months)
                     @foreach ($months as $month => $dates)
-                        @if (isset($dates[$i]) && $dates[$i] > 0)
+                        @php
-                            <td class="bg-primary" data-toggle="tooltip" data-placement="top" title="{{ trans_choice('gallery.user_profile.activity_summary', $dates[$i], ['count' => $dates[$i], 'date' => sprintf('%d %s %d', $i, $month, $year)]) }}">{{ $dates[$i] }}</td>
+                        $day1 = $row + 1;
-                        @elseif (isset($dates[$i]) && $dates[$i] == 0)
+                        $day2 = $row + 8;
-                            <td>&nbsp;</td>
+                        $day3 = $row + 15;
-                        @else
+                        $day4 = $row + 22;
-                            <td class="bg-light">&nbsp;</td>
+                        $day5 = $row + 29;
+                        @endphp
+
+                        @if (ceil($month_days[$year][$month] / 7) >= 1)
+                            @if ($day1 <= $month_days[$year][$month])
+                                @if (isset($dates[$day1]) && $dates[$day1] > 0)
+                                    <td class="has-activity" data-toggle="tooltip" data-placement="top" title="{{ trans_choice('gallery.user_profile.activity_summary', $dates[$day1], ['count' => $dates[$day1], 'date' => sprintf('%d %s %d', $day1, $month, $year)]) }}">
+                                    </td>
+                                @else
+                                    <td class="no-activity">
+                                    </td>
+                                @endif
+                            @else
+                                <td class="invalid-date">
+                                </td>
+                            @endif
+                        @endif
+
+                        @if (ceil($month_days[$year][$month] / 7) >= 2)
+                            @if ($day2 <= $month_days[$year][$month])
+                                @if (isset($dates[$day2]) && $dates[$day2] > 0)
+                                    <td class="has-activity" data-toggle="tooltip" data-placement="top" title="{{ trans_choice('gallery.user_profile.activity_summary', $dates[$day2], ['count' => $dates[$day2], 'date' => sprintf('%d %s %d', $day2, $month, $year)]) }}">
+                                    </td>
+                                @else
+                                    <td class="no-activity">
+                                    </td>
+                                @endif
+                            @else
+                                <td class="invalid-date">
+                                </td>
+                            @endif
+                        @endif
+
+                        @if (ceil($month_days[$year][$month] / 7) >= 3)
+                            @if ($day3 <= $month_days[$year][$month])
+                                @if (isset($dates[$day3]) && $dates[$day3] > 0)
+                                    <td class="has-activity" data-toggle="tooltip" data-placement="top" title="{{ trans_choice('gallery.user_profile.activity_summary', $dates[$day3], ['count' => $dates[$day3], 'date' => sprintf('%d %s %d', $day3, $month, $year)]) }}">
+                                    </td>
+                                @else
+                                    <td class="no-activity">
+                                    </td>
+                                @endif
+                            @else
+                                <td class="invalid-date">
+                                </td>
+                            @endif
+                        @endif
+
+                        @if (ceil($month_days[$year][$month] / 7) >= 4)
+                            @if ($day4 <= $month_days[$year][$month])
+                                @if (isset($dates[$day4]) && $dates[$day4] > 0)
+                                    <td class="has-activity" data-toggle="tooltip" data-placement="top" title="{{ trans_choice('gallery.user_profile.activity_summary', $dates[$day4], ['count' => $dates[$day4], 'date' => sprintf('%d %s %d', $day4, $month, $year)]) }}">
+                                    </td>
+                                @else
+                                    <td class="no-activity">
+                                    </td>
+                                @endif
+                            @else
+                                <td class="invalid-date">
+                                </td>
+                            @endif
+                        @endif
+
+                        @if (ceil($month_days[$year][$month] / 7) >= 5)
+                            @if ($day5 <= $month_days[$year][$month])
+                                @if (isset($dates[$day5]) && $dates[$day5] > 0)
+                                    <td class="has-activity" data-toggle="tooltip" data-placement="top" title="{{ trans_choice('gallery.user_profile.activity_summary', $dates[$day5], ['count' => $dates[$day5], 'date' => sprintf('%d %s %d', $day5, $month, $year)]) }}">
+                                    </td>
+                                @else
+                                    <td class="no-activity">
+                                    </td>
+                                @endif
+                            @else
+                                <td class="invalid-date">
+                                </td>
+                            @endif
                         @endif
                     @endforeach
                 @endforeach