aheathershaw/blue-twilight
1
0
Fork 0
Code Issues 32 Pull Requests Releases 15 Wiki Activity

#19: The activity grids are now responsive. Improved the responsiveness of the user's image/nickname.

Browse Source
This commit is contained in:
Andy Heathershaw 2018-08-08 09:31:56 +01:00
parent 95a1298233
commit 7e721966e9
3 changed files with 66 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/assets/css/gallery.css
View File

@ -39,6 +39,12 @@
border-bottom: 1px solid #dee2e6; border-bottom: 1px solid #dee2e6;
} }
.activity-grid .border-spacer-element {
border-right-width: 0;
padding: 0 !important;
width: 1px;
}
.album-slideshow-container #image-preview { .album-slideshow-container #image-preview {
height: 600px; height: 600px;
max-width: 100%; max-width: 100%;

14
resources/views/themes/base/gallery/user_profile.blade.php
View File

@ -9,11 +9,11 @@
@section('content') @section('content')
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div id="user-avatar" class="col-md-2"> <div id="user-avatar" class="col-sm-4 col-md-3 col-xl-2 mb-3">
<img class="rounded" src="{{ Theme::gravatarUrl($user->email, 160) }}" title="{{ $user->name }}" /> <img class="rounded" src="{{ Theme::gravatarUrl($user->email, 160) }}" title="{{ $user->name }}" />
</div> </div>
<div class="col-md-10"> <div class="col-sm-8 col-md-9 col-xl-10">
<h1>{{ $user->name }}</h1> <h1>{{ $user->name }}</h1>
@if (!empty($user->profile_alias)) @if (!empty($user->profile_alias))
<h2 class="text-muted">{{ $user->profile_alias }}</h2> <h2 class="text-muted">{{ $user->profile_alias }}</h2>
@ -31,7 +31,7 @@
<div class="row"> <div class="row">
@foreach ($albums as $album) @foreach ($albums as $album)
<div class="col-sm-4 col-md-3 text-left" style="max-width: 250px;"> <div class="col-6 col-sm-4 col-md-3 text-left" style="max-width: 250px;">
<div class="card mb-3"> <div class="card mb-3">
<img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}" style="max-height: 120px;"/> <img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}" style="max-height: 120px;"/>
<div class="card-body"> <div class="card-body">
@ -52,8 +52,7 @@
</div> </div>
@endif @endif
<h3 class="mt-5 text-muted">@lang('gallery.user_profile.activity')</h3> <h3 class="mt-5 mb-4 text-muted">@lang('gallery.user_profile.activity')</h3>
<p>@lang('gallery.user_profile.activity_taken_p1', ['user_name' => $user->name])</p>
<div> <div>
{{-- Nav tabs --}} {{-- Nav tabs --}}
@ -64,11 +63,14 @@
{{-- Tab panes --}} {{-- Tab panes --}}
<div class="tab-content"> <div class="tab-content">
{{-- General --}} {{-- Photos taken --}}
<div role="tabpanel" class="tab-pane active" id="activity-taken-tab"> <div role="tabpanel" class="tab-pane active" id="activity-taken-tab">
<p>@lang('gallery.user_profile.activity_taken_p1', ['user_name' => $user->name])</p>
@include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_taken]) @include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_taken])
</div> </div>
{{-- Photos uploaded --}}
<div role="tabpanel" class="tab-pane" id="activity-uploaded-tab"> <div role="tabpanel" class="tab-pane" id="activity-uploaded-tab">
<p>@lang('gallery.user_profile.activity_uploaded_p1', ['user_name' => $user->name])</p>
@include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_uploaded]) @include (Theme::viewName('partials.user_profile_activity_grid'), ['activity' => $activity_uploaded])
</div> </div>
</div> </div>

68
resources/views/themes/base/partials/user_profile_activity_grid.blade.php
View File

@ -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
<table class="table activity-grid"> <table class="table activity-grid">
<thead> <thead>
<tr> <tr>
<th class="border-spacer-element">
{{-- 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 --}}
</th>
@php @php
$i = 0; $i = 0;
@endphp @endphp
@foreach ($activity as $year => $months) @foreach ($activity as $year => $months)
@foreach ($months as $month => $dates) @foreach ($months as $month => $dates)
<th colspan="{{ ceil($month_days[$year][$month] / 7) }}" style="vertical-align: top;">{{ $month }}@if ($i == 0 || $i == 12 || $month == 'Jan')<br/>{{ $year }}@endif</th> <th class="{{ $classes[$i] }}" colspan="{{ ceil($month_days[$year][$month] / 7) }}" style="vertical-align: top;">{{ $month }}@if ($i == 0 || $i == 12 || $month == 'Jan')<br/>{{ $year }}@endif</th>
@php @php
$i++ $i++
@endphp @endphp
@ -18,6 +43,13 @@
{{-- Output a table containing columns for days 1-7, 8-14, 15-21, 22-28, 29-31 (if applicable) --}} {{-- 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++) @for ($row = 0; $row < 7; $row++)
<tr> <tr>
<td class="border-spacer-element">
{{-- 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 --}}
</td>
@php
$i = 0;
@endphp
@foreach ($activity as $year => $months) @foreach ($activity as $year => $months)
@foreach ($months as $month => $dates) @foreach ($months as $month => $dates)
@php @php
@ -31,14 +63,14 @@
@if (ceil($month_days[$year][$month] / 7) >= 1) @if (ceil($month_days[$year][$month] / 7) >= 1)
@if ($day1 <= $month_days[$year][$month]) @if ($day1 <= $month_days[$year][$month])
@if (isset($dates[$day1]) && $dates[$day1] > 0) @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 class="has-activity {{ $classes[$i] }}" 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> </td>
@else @else
<td class="no-activity"> <td class="no-activity {{ $classes[$i] }}">
</td> </td>
@endif @endif
@else @else
<td class="invalid-date"> <td class="invalid-date {{ $classes[$i] }}">
</td> </td>
@endif @endif
@endif @endif
@ -46,14 +78,14 @@
@if (ceil($month_days[$year][$month] / 7) >= 2) @if (ceil($month_days[$year][$month] / 7) >= 2)
@if ($day2 <= $month_days[$year][$month]) @if ($day2 <= $month_days[$year][$month])
@if (isset($dates[$day2]) && $dates[$day2] > 0) @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 class="has-activity {{ $classes[$i] }}" 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> </td>
@else @else
<td class="no-activity"> <td class="no-activity {{ $classes[$i] }}">
</td> </td>
@endif @endif
@else @else
<td class="invalid-date"> <td class="invalid-date {{ $classes[$i] }}">
</td> </td>
@endif @endif
@endif @endif
@ -61,14 +93,14 @@
@if (ceil($month_days[$year][$month] / 7) >= 3) @if (ceil($month_days[$year][$month] / 7) >= 3)
@if ($day3 <= $month_days[$year][$month]) @if ($day3 <= $month_days[$year][$month])
@if (isset($dates[$day3]) && $dates[$day3] > 0) @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 class="has-activity {{ $classes[$i] }}" 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> </td>
@else @else
<td class="no-activity"> <td class="no-activity {{ $classes[$i] }}">
</td> </td>
@endif @endif
@else @else
<td class="invalid-date"> <td class="invalid-date {{ $classes[$i] }}">
</td> </td>
@endif @endif
@endif @endif
@ -76,14 +108,14 @@
@if (ceil($month_days[$year][$month] / 7) >= 4) @if (ceil($month_days[$year][$month] / 7) >= 4)
@if ($day4 <= $month_days[$year][$month]) @if ($day4 <= $month_days[$year][$month])
@if (isset($dates[$day4]) && $dates[$day4] > 0) @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 class="has-activity {{ $classes[$i] }}" 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> </td>
@else @else
<td class="no-activity"> <td class="no-activity {{ $classes[$i] }}">
</td> </td>
@endif @endif
@else @else
<td class="invalid-date"> <td class="invalid-date {{ $classes[$i] }}">
</td> </td>
@endif @endif
@endif @endif
@ -91,17 +123,21 @@
@if (ceil($month_days[$year][$month] / 7) >= 5) @if (ceil($month_days[$year][$month] / 7) >= 5)
@if ($day5 <= $month_days[$year][$month]) @if ($day5 <= $month_days[$year][$month])
@if (isset($dates[$day5]) && $dates[$day5] > 0) @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 class="has-activity {{ $classes[$i] }}" 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> </td>
@else @else
<td class="no-activity"> <td class="no-activity {{ $classes[$i] }}">
</td> </td>
@endif @endif
@else @else
<td class="invalid-date"> <td class="invalid-date {{ $classes[$i] }}">
</td> </td>
@endif @endif
@endif @endif
@php
$i++
@endphp
@endforeach @endforeach
@endforeach @endforeach
</tr> </tr>