Revised revision list to responsive layout

This commit is contained in:
Dan Brown
2022-10-31 21:26:31 +00:00
parent de807f8538
commit d4e71e431b
7 changed files with 85 additions and 50 deletions

View File

@ -1,38 +1,43 @@
<tr>
<td>{{ $revision->revision_number == 0 ? '' : $revision->revision_number }}</td>
<td>
<div class="item-list-row flex-container-row items-center wrap">
<div class="flex fit-content min-width-xxxxs px-m py-xs">
<span class="hide-over-l">{{ trans('entities.pages_revisions_number') }}</span>
{{ $revision->revision_number == 0 ? '' : $revision->revision_number }}
</div>
<div class="flex-2 px-m py-xs min-width-s">
{{ $revision->name }}
<br>
<small class="text-muted">({{ $revision->is_markdown ? 'Markdown' : 'WYSIWYG' }})</small>
</td>
<td style="line-height: 0;" width="30">
@if($revision->createdBy)
<img class="avatar" src="{{ $revision->createdBy->getAvatar(30) }}" alt="{{ $revision->createdBy->name }}">
@endif
</td>
<td width="260">
@if($revision->createdBy) {{ $revision->createdBy->name }} @else {{ trans('common.deleted_user') }} @endif
<br>
<div class="text-muted">
<small>{{ $revision->created_at->formatLocalized('%e %B %Y %H:%M:%S') }}</small>
<small>({{ $revision->created_at->diffForHumans() }})</small>
<small class="text-muted">(<strong class="hide-over-l">{{ trans('entities.pages_revisions_editor') }}: </strong>{{ $revision->is_markdown ? 'Markdown' : 'WYSIWYG' }})</small>
</div>
<div class="flex-3 px-m py-xs min-width-l">
<div class="flex-container-row items-center gap-s">
@if($revision->createdBy)
<img class="avatar flex-none" height="30" width="30" src="{{ $revision->createdBy->getAvatar(30) }}" alt="{{ $revision->createdBy->name }}">
@endif
<div>
@if($revision->createdBy) {{ $revision->createdBy->name }} @else {{ trans('common.deleted_user') }} @endif
<br>
<div class="text-muted">
<small>{{ $revision->created_at->formatLocalized('%e %B %Y %H:%M:%S') }}</small>
<small>({{ $revision->created_at->diffForHumans() }})</small>
</div>
</div>
</div>
</td>
<td>
</div>
<div class="flex-2 px-m py-xs min-width-m text-small">
{{ $revision->summary }}
</td>
<td class="actions text-small text-right">
</div>
<div class="flex-2 px-m py-xs actions text-small text-l-right min-width-l">
<a href="{{ $revision->getUrl('changes') }}" target="_blank" rel="noopener">{{ trans('entities.pages_revisions_changes') }}</a>
<span class="text-muted">&nbsp;|&nbsp;</span>
<span class="text-muted opacity-70">&nbsp;|&nbsp;</span>
@if ($index === 0)
@if ($current)
<a target="_blank" rel="noopener" href="{{ $revision->page->getUrl() }}"><i>{{ trans('entities.pages_revisions_current') }}</i></a>
@else
<a href="{{ $revision->getUrl() }}" target="_blank" rel="noopener">{{ trans('entities.pages_revisions_preview') }}</a>
@if(userCan('page-update', $revision->page))
<span class="text-muted">&nbsp;|&nbsp;</span>
<span class="text-muted opacity-70">&nbsp;|&nbsp;</span>
<div component="dropdown" class="dropdown-container">
<a refs="dropdown@toggle" href="#" aria-haspopup="true" aria-expanded="false">{{ trans('entities.pages_revisions_restore') }}</a>
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
@ -52,7 +57,7 @@
@endif
@if(userCan('page-delete', $revision->page))
<span class="text-muted">&nbsp;|&nbsp;</span>
<span class="text-muted opacity-70">&nbsp;|&nbsp;</span>
<div component="dropdown" class="dropdown-container">
<a refs="dropdown@toggle" href="#" aria-haspopup="true" aria-expanded="false">{{ trans('common.delete') }}</a>
<ul refs="dropdown@menu" class="dropdown-menu" role="menu">
@ -71,5 +76,5 @@
</div>
@endif
@endif
</td>
</tr>
</div>
</div>

View File

@ -17,26 +17,36 @@
<main class="card content-wrap">
<h1 class="list-heading">{{ trans('entities.pages_revisions') }}</h1>
<p class="text-muted">{{ trans('entities.pages_revisions_desc') }}</p>
<div class="flex-container-row my-m items-center justify-space-between wrap gap-x-m gap-y-s">
{{ $revisions->links() }}
<div>
@include('common.sort', $listOptions->getSortControlData())
</div>
</div>
@if(count($revisions) > 0)
<table class="table">
<tr>
<th width="56">{{ trans('entities.pages_revisions_number') }}</th>
<th>
{{ trans('entities.pages_name') }} / {{ trans('entities.pages_revisions_editor') }}
</th>
<th colspan="2">{{ trans('entities.pages_revisions_created_by') }} / {{ trans('entities.pages_revisions_date') }}</th>
<th>{{ trans('entities.pages_revisions_changelog') }}</th>
<th class="text-right">{{ trans('common.actions') }}</th>
</tr>
<div class="item-list">
<div class="item-list-row flex-container-row items-center strong hide-under-l">
<div class="flex fit-content min-width-xxxxs px-m py-xs">{{ trans('entities.pages_revisions_number') }}</div>
<div class="flex-2 px-m py-xs">{{ trans('entities.pages_name') }} / {{ trans('entities.pages_revisions_editor') }}</div>
<div class="flex-3 px-m py-xs">{{ trans('entities.pages_revisions_created_by') }} / {{ trans('entities.pages_revisions_date') }}</div>
<div class="flex-2 px-m py-xs">{{ trans('entities.pages_revisions_changelog') }}</div>
<div class="flex-2 px-m py-xs text-right">{{ trans('common.actions') }}</div>
</div>
@foreach($revisions as $index => $revision)
@include('pages.parts.revision-table-row', ['revision' => $revision])
@include('pages.parts.revisions-index-row', ['revision' => $revision, 'current' => $page->revision_count === $revision->revision_number])
@endforeach
</table>
</div>
@else
<p>{{ trans('entities.pages_revisions_none') }}</p>
@endif
<div class="my-m">
{{ $revisions->links() }}
</div>
</main>
</div>