Skip to content

Commit

Permalink
Redesign for events view.
Browse files Browse the repository at this point in the history
  • Loading branch information
@s0oft
s0oft committed Mar 27, 2020
1 parent 06bd67d commit 4af3513
Show file tree
Hide file tree
Showing 3 changed files with 117 additions and 81 deletions.
143 changes: 80 additions & 63 deletions src/Bonsai/Areas/Admin/Views/Dashboard/Events.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,21 @@
{
return entity == ChangesetEntityType.Media
? type switch {
ChangesetType.Created => "Загружен",
ChangesetType.Removed => "Удален",
ChangesetType.Updated => "Обновлен",
ChangesetType.Restored => "Восстановлен"
ChangesetType.Created => "загрузил",
ChangesetType.Removed => "удалил",
ChangesetType.Updated => "обновил",
ChangesetType.Restored => "восстановил"
}
: type switch {
ChangesetType.Created => "Создана",
ChangesetType.Removed => "Удалена",
ChangesetType.Updated => "Обновлена",
ChangesetType.Restored => "Восстановлена"
ChangesetType.Created => "создал",
ChangesetType.Removed => "удалил",
ChangesetType.Updated => "обновил",
ChangesetType.Restored => "восстановил"
};
}

string GetEntityName(ChangesetEntityType entity) => entity switch {
ChangesetEntityType.Page => "cтраница",
ChangesetEntityType.Page => "cтраницу",
ChangesetEntityType.Media => "медиа-файл",
ChangesetEntityType.Relation => "связь"
};
Expand All @@ -39,70 +39,87 @@
};
}


@foreach (var evt in Model)
{
<div class="media dashboard-event">
<div class="dashboard-event-image-wrapper">
<img src="@ViewHelper.GetGravatarUrl(evt.User.Email)" class="dashboard-event-image" title="@evt.User.FullName" />
<div class="dashboard-event-icon">
<span class="fa fa-@(GetChangeClass(evt.ChangeType))"></span>

<div class="row dashboard-event">
<div class="col-auto p-0">
<div class="dashboard-event-image-wrapper">
<img src="@ViewHelper.GetGravatarUrl(evt.User.Email)" class="dashboard-event-image" title="@evt.User.FullName" />
<div class="dashboard-event-icon">
<span class="fa fa-@(GetChangeClass(evt.ChangeType))"></span>
</div>
</div>
</div>
<div class="media-body">
<h5 class="dashboard-event-header" title="@evt.Date.LocalDateTime.ToInvariantString()">@evt.Date.Humanize().Capitalize()</h5>
@if (evt.ChangeType == ChangesetType.Created && evt.EntityType == ChangesetEntityType.Media)
{
<span>
@(evt.MediaThumbnails.Count == 1 ? "Загружен" : "Загружено") @evt.MediaThumbnails.Count.DisplayNumeric("медиа-файл", "медиа-файла", "медиа-файлов")
</span>
}
else
{
<span>
@GetChangeDescription(evt.ChangeType, evt.EntityType)
@GetEntityName(evt.EntityType)
</span>
if (evt.MainLink != null)
<div class="col p-0">
<div class="row dashboard-event-header">
<div class="col dashboard-event-title">
<h6>
@evt.User.FullName
@if (evt.ChangeType == ChangesetType.Created && evt.EntityType == ChangesetEntityType.Media)
{
<span>
загрузил @evt.MediaThumbnails.Count.DisplayNumeric("медиа-файл", "медиа-файла", "медиа-файлов")
</span>
}
else
{
<span>
@GetChangeDescription(evt.ChangeType, evt.EntityType)
@GetEntityName(evt.EntityType)
</span>
}
</h6>
</div>
<div class="col-auto dashboard-event-date">
@evt.Date.Humanize().Capitalize()
</div>
</div>
<div class="dashboard-event-content">
@if (evt.MediaThumbnails?.Count > 0)
{
@if (!string.IsNullOrEmpty(evt.MainLink.Url))
<ul class="list-inline dashboard-event-media">
@foreach (var elem in evt.MediaThumbnails)
{
<li class="list-inline-item">
<div class="media-thumb-wrapper">
@if (evt.ChangeType == ChangesetType.Removed)
{
<div class="media-thumb-square" style="background-image: url('@Url.Content(elem.ThumbnailUrl)')"></div>
}
else
{
<a href="@Url.Action("ViewMedia", "Media", new {area = "Front", key = elem.Key})" class="media-thumb-link" data-media="@elem.Key">
<div class="media-thumb-square" style="background-image: url('@Url.Content(elem.ThumbnailUrl)')"></div>
</a>
}
</div>
</li>
}
</ul>
}
else
{
if (evt.MainLink != null)
{
<a href="@evt.MainLink.Url">@evt.MainLink.Title</a>
@if (!string.IsNullOrEmpty(evt.MainLink.Url))
{
<a href="@evt.MainLink.Url">@evt.MainLink.Title</a>
}
else
{
<span>@evt.MainLink.Title</span>
}
}
else
@if (evt.EntityType == ChangesetEntityType.Relation && evt.ExtraLinks != null)
{
<span>@evt.MainLink.Title</span>
<span>
между страницами: <a href="@evt.ExtraLinks[0].Url">@evt.ExtraLinks[0].Title</a> и <a href="@evt.ExtraLinks[1].Url">@evt.ExtraLinks[1].Title</a>
</span>
}
}
@if (evt.EntityType == ChangesetEntityType.Relation && evt.ExtraLinks != null)
{
<span>
между страницами: <a href="@evt.ExtraLinks[0].Url">@evt.ExtraLinks[0].Title</a> и <a href="@evt.ExtraLinks[1].Url">@evt.ExtraLinks[1].Title</a>
</span>
}
}

@if (evt.MediaThumbnails?.Count > 0)
{
<ul class="list-inline dashboard-event-media">
@foreach (var elem in evt.MediaThumbnails)
{
<li class="list-inline-item">
<div class="media-thumb-wrapper">
@if (evt.ChangeType == ChangesetType.Removed)
{
<div class="media-thumb-square" style="background-image: url('@Url.Content(elem.ThumbnailUrl)')"></div>
}
else
{
<a href="@Url.Action("ViewMedia", "Media", new {area = "Front", key = elem.Key})" class="media-thumb-link" data-media="@elem.Key">
<div class="media-thumb-square" style="background-image: url('@Url.Content(elem.ThumbnailUrl)')"></div>
</a>
}
</div>
</li>
}
</ul>
}
</div>
</div>
</div>
}
6 changes: 4 additions & 2 deletions src/Bonsai/Areas/Admin/Views/Dashboard/Index.cshtml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,10 @@
<div class="dashboard-events">
@if (Model.Events?.Count > 0)
{
<div class="load-on-scroll" data-load-url="@Url.Action("Events", "Dashboard", new { area = "Admin" })" data-load-elem-class=".dashboard-event">
@await Html.PartialAsync("Events", Model.Events)
<div class="card">
<div class="load-on-scroll" data-load-url="@Url.Action("Events", "Dashboard", new { area = "Admin" })" data-load-elem-class=".dashboard-event">
@await Html.PartialAsync("Events", Model.Events)
</div>
</div>
}
else
Expand Down
49 changes: 33 additions & 16 deletions src/Bonsai/Areas/Common/Styles/Components/admin/dashboard.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,50 +20,67 @@
}

.dashboard-events {

.dashboard-event {
margin-bottom: 1rem;
margin: 0;
padding-top: 1rem;

.dashboard-event-image-wrapper {
margin: 0 1rem;
position: relative;

.dashboard-event-image {
width: 64px;
height: 64px;
margin-right: 0.75rem;
width: 3rem;
height: 3rem;
border-radius: 0.4rem;
}

.dashboard-event-icon {
background: #fff;
border-radius: 1rem;
padding: 4px;
position: absolute;
right: 9px;
bottom: -4px;
box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.2);
right: 0;
bottom: 0;
width: 25px;
text-align: center;
font-size: 0.8rem;
border-radius: 0.4rem 0 0 0;
}
}

.dashboard-event-header {
padding-top: 0;
margin-top: -2px;
margin-bottom: 0.25rem;
margin: 0;

.dashboard-event-title {
padding: 0;
}

.dashboard-event-date {
font-size: 0.9rem;
}
}

.dashboard-event-content {
padding: 0 1rem 1rem 0;
}

&:not(:last-child) .dashboard-event-content {
border-bottom: 1px solid rgba($black, .125);
}

.dashboard-event-media {
margin-top: 0.5rem;
margin-bottom: 0;
line-height: 0;
font-size: 0;

margin: 0 -0.5rem;

.list-inline-item {
margin-right: 0.25rem;
margin: 0.5rem;
}

.media-thumb-wrapper {
width: unset;
padding: 5px;
margin: 0;

.media-thumb-square {
width: 64px;
Expand Down

0 comments on commit 4af3513

Please sign in to comment.