#19: The activity grids are now responsive. Improved the responsiveness of the user's image/nickname.
This commit is contained in:
parent
95a1298233
commit
7e721966e9
|
|
@ -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%;
|
||||
|
|
|
|||
|
|
@ -9,11 +9,11 @@
|
|||
@section('content')
|
||||
<div class="container">
|
||||
<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 }}" />
|
||||
</div>
|
||||
|
||||
<div class="col-md-10">
|
||||
<div class="col-sm-8 col-md-9 col-xl-10">
|
||||
<h1>{{ $user->name }}</h1>
|
||||
@if (!empty($user->profile_alias))
|
||||
<h2 class="text-muted">{{ $user->profile_alias }}</h2>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
|
||||
<div class="row">
|
||||
@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">
|
||||
<img class="card-img-top" src="{{ $album->thumbnailUrl('preview') }}" style="max-height: 120px;"/>
|
||||
<div class="card-body">
|
||||
|
|
@ -52,8 +52,7 @@
|
|||
</div>
|
||||
@endif
|
||||
|
||||
<h3 class="mt-5 text-muted">@lang('gallery.user_profile.activity')</h3>
|
||||
<p>@lang('gallery.user_profile.activity_taken_p1', ['user_name' => $user->name])</p>
|
||||
<h3 class="mt-5 mb-4 text-muted">@lang('gallery.user_profile.activity')</h3>
|
||||
|
||||
<div>
|
||||
{{-- Nav tabs --}}
|
||||
|
|
@ -64,11 +63,14 @@
|
|||
|
||||
{{-- Tab panes --}}
|
||||
<div class="tab-content">
|
||||
{{-- General --}}
|
||||
{{-- Photos taken --}}
|
||||
<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])
|
||||
</div>
|
||||
{{-- Photos uploaded --}}
|
||||
<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])
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
<thead>
|
||||
<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
|
||||
$i = 0;
|
||||
@endphp
|
||||
@foreach ($activity as $year => $months)
|
||||
@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
|
||||
$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++)
|
||||
<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 ($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)
|
||||
<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>
|
||||
@else
|
||||
<td class="no-activity">
|
||||
<td class="no-activity {{ $classes[$i] }}">
|
||||
</td>
|
||||
@endif
|
||||
@else
|
||||
<td class="invalid-date">
|
||||
<td class="invalid-date {{ $classes[$i] }}">
|
||||
</td>
|
||||
@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)
|
||||
<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>
|
||||
@else
|
||||
<td class="no-activity">
|
||||
<td class="no-activity {{ $classes[$i] }}">
|
||||
</td>
|
||||
@endif
|
||||
@else
|
||||
<td class="invalid-date">
|
||||
<td class="invalid-date {{ $classes[$i] }}">
|
||||
</td>
|
||||
@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)
|
||||
<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>
|
||||
@else
|
||||
<td class="no-activity">
|
||||
<td class="no-activity {{ $classes[$i] }}">
|
||||
</td>
|
||||
@endif
|
||||
@else
|
||||
<td class="invalid-date">
|
||||
<td class="invalid-date {{ $classes[$i] }}">
|
||||
</td>
|
||||
@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)
|
||||
<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>
|
||||
@else
|
||||
<td class="no-activity">
|
||||
<td class="no-activity {{ $classes[$i] }}">
|
||||
</td>
|
||||
@endif
|
||||
@else
|
||||
<td class="invalid-date">
|
||||
<td class="invalid-date {{ $classes[$i] }}">
|
||||
</td>
|
||||
@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)
|
||||
<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>
|
||||
@else
|
||||
<td class="no-activity">
|
||||
<td class="no-activity {{ $classes[$i] }}">
|
||||
</td>
|
||||
@endif
|
||||
@else
|
||||
<td class="invalid-date">
|
||||
<td class="invalid-date {{ $classes[$i] }}">
|
||||
</td>
|
||||
@endif
|
||||
@endif
|
||||
|
||||
@php
|
||||
$i++
|
||||
@endphp
|
||||
@endforeach
|
||||
@endforeach
|
||||
</tr>
|
||||
|
|
|
|||
Loading…
Reference in New Issue