From 7e721966e962d2927879da33f0d183048743ac10 Mon Sep 17 00:00:00 2001 From: Andy Heathershaw Date: Wed, 8 Aug 2018 09:31:56 +0100 Subject: [PATCH] #19: The activity grids are now responsive. Improved the responsiveness of the user's image/nickname. --- resources/assets/css/gallery.css | 6 ++ .../base/gallery/user_profile.blade.php | 14 ++-- .../user_profile_activity_grid.blade.php | 68 ++++++++++++++----- 3 files changed, 66 insertions(+), 22 deletions(-) diff --git a/resources/assets/css/gallery.css b/resources/assets/css/gallery.css index e25d6b9..b045bb9 100644 --- a/resources/assets/css/gallery.css +++ b/resources/assets/css/gallery.css @@ -39,6 +39,12 @@ border-bottom: 1px solid #dee2e6; } +.activity-grid .border-spacer-element { + border-right-width: 0; + padding: 0 !important; + width: 1px; +} + .album-slideshow-container #image-preview { height: 600px; max-width: 100%; diff --git a/resources/views/themes/base/gallery/user_profile.blade.php b/resources/views/themes/base/gallery/user_profile.blade.php index 6ef4882..fc4dbb6 100644 --- a/resources/views/themes/base/gallery/user_profile.blade.php +++ b/resources/views/themes/base/gallery/user_profile.blade.php @@ -9,11 +9,11 @@ @section('content')
-
+
-
+

{{ $user->name }}

@if (!empty($user->profile_alias))

{{ $user->profile_alias }}

@@ -31,7 +31,7 @@
@foreach ($albums as $album) -
+
@@ -52,8 +52,7 @@
@endif -

@lang('gallery.user_profile.activity')

-

@lang('gallery.user_profile.activity_taken_p1', ['user_name' => $user->name])

+

@lang('gallery.user_profile.activity')

{{-- Nav tabs --}} @@ -64,11 +63,14 @@ {{-- Tab panes --}}
- {{-- General --}} + {{-- Photos taken --}}
+

@lang('gallery.user_profile.activity_taken_p1', ['user_name' => $user->name])

@include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_taken])
+ {{-- Photos uploaded --}}
+

@lang('gallery.user_profile.activity_uploaded_p1', ['user_name' => $user->name])

@include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_uploaded])
diff --git a/resources/views/themes/base/partials/user_profile_activity_grid.blade.php b/resources/views/themes/base/partials/user_profile_activity_grid.blade.php index 1a77242..85222af 100644 --- a/resources/views/themes/base/partials/user_profile_activity_grid.blade.php +++ b/resources/views/themes/base/partials/user_profile_activity_grid.blade.php @@ -1,12 +1,37 @@ +@php +/* +This code is used to determine the responsive classes added to the table cell. +The last 3 months are always visible. +The last 6 months are visible on md devices +The last 12 months are visible on lg+ devices +*/ +$classes[0] = 'd-none d-lg-table-cell'; +$classes[1] = 'd-none d-lg-table-cell'; +$classes[2] = 'd-none d-lg-table-cell'; +$classes[3] = 'd-none d-lg-table-cell'; +$classes[4] = 'd-none d-lg-table-cell'; +$classes[5] = 'd-none d-lg-table-cell'; +$classes[6] = 'd-none d-lg-table-cell'; +$classes[7] = 'd-none d-md-table-cell'; +$classes[8] = 'd-none d-md-table-cell'; +$classes[9] = 'd-none d-md-table-cell'; +$classes[10] = ''; +$classes[11] = ''; +$classes[12] = ''; +@endphp + @php $i = 0; @endphp @foreach ($activity as $year => $months) @foreach ($months as $month => $dates) - + @php $i++ @endphp @@ -18,6 +43,13 @@ {{-- 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++) + + @php + $i = 0; + @endphp @foreach ($activity as $year => $months) @foreach ($months as $month => $dates) @php @@ -31,14 +63,14 @@ @if (ceil($month_days[$year][$month] / 7) >= 1) @if ($day1 <= $month_days[$year][$month]) @if (isset($dates[$day1]) && $dates[$day1] > 0) - @else - @endif @else - @endif @endif @@ -46,14 +78,14 @@ @if (ceil($month_days[$year][$month] / 7) >= 2) @if ($day2 <= $month_days[$year][$month]) @if (isset($dates[$day2]) && $dates[$day2] > 0) - @else - @endif @else - @endif @endif @@ -61,14 +93,14 @@ @if (ceil($month_days[$year][$month] / 7) >= 3) @if ($day3 <= $month_days[$year][$month]) @if (isset($dates[$day3]) && $dates[$day3] > 0) - @else - @endif @else - @endif @endif @@ -76,14 +108,14 @@ @if (ceil($month_days[$year][$month] / 7) >= 4) @if ($day4 <= $month_days[$year][$month]) @if (isset($dates[$day4]) && $dates[$day4] > 0) - @else - @endif @else - @endif @endif @@ -91,17 +123,21 @@ @if (ceil($month_days[$year][$month] / 7) >= 5) @if ($day5 <= $month_days[$year][$month]) @if (isset($dates[$day5]) && $dates[$day5] > 0) - @else - @endif @else - @endif @endif + + @php + $i++ + @endphp @endforeach @endforeach
+ {{-- This element is here purely to give the table a th:first-child so it can apply the left border, + even if the first child is hidden due to responsiveness --}} + {{ $month }}@if ($i == 0 || $i == 12 || $month == 'Jan')
{{ $year }}@endif		{{ $month }}@if ($i == 0 || $i == 12 || $month == 'Jan')
{{ $year }}@endif
+ {{-- This element is here purely to give the table a th:first-child so it can apply the left border, + even if the first child is hidden due to responsiveness --}} + + + + + + + + + + + + + + + +