Telerik
/
blazing-coffee
зеркало из https://github.com/telerik/blazing-coffee.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Improived index page UX with cards

This commit is contained in:
Ed Charbeneau 2020-05-27 16:39:07 -04:00
Родитель 85e80ea739
Коммит 1533d47f33
3 изменённых файлов: 85 добавлений и 25 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

43
BlazingCoffee/Client/Pages/Index.razor
Просмотреть файл

@ -2,9 +2,40 @@
@inject BlazingCoffee.Services.PublicClient Http
<CardContainer Title="Home">
<ul>
<li><a href="/sales">Sales</a></li>
<li><a href="/manage-employees">Human Capital</a></li>
<li><a href="/manage-products">Manage Products</a></li>
</ul>
</CardContainer>
<div class="card-menu">
<Card Title="Sales">
<CardContent>
<p>Report on Sales over time.</p>
</CardContent>
<ActionTemplate>
<span class="k-card-action"><a href="/sales" class="k-button k-flat k-primary">Sales</a></span>
</ActionTemplate>
<FooterTemplate>
<span title="Login required."><TelerikIcon Icon="@IconName.Lock" /></span>
</FooterTemplate>
</Card>
<Card Title="Human Capital">
<CardContent>
<p>Manage employees and teams.</p>
</CardContent>
<ActionTemplate>
<span class="k-card-action"><a href="/manage-employees" class="k-button k-flat k-primary">Human Capital</a></span>
</ActionTemplate>
<FooterTemplate>
<span title="Login required."><TelerikIcon Icon="@IconName.Lock" /></span>
</FooterTemplate>
</Card>
<Card Title="Manage Products">
<CardContent>
<p>Manage products and nutrition information.</p>
</CardContent>
<ActionTemplate>
<span class="k-card-action"><a href="/manage-products" class="k-button k-flat k-primary">Manage Products</a></span>
</ActionTemplate>
<FooterTemplate>
<span title="Login required."><TelerikIcon Icon="@IconName.Lock" /></span>
</FooterTemplate>
</Card>
<TelerikTooltip TargetSelector=".k-card-footer>span[title]" Position=@TooltipPosition.Top ShowOn="@TooltipShowEvent.Hover"/>
</div>
</CardContainer>

55
BlazingCoffee/Client/Shared/Card.razor
Просмотреть файл

@ -1,19 +1,36 @@
<!-- Possible layout for 2.0 -->
<kendo-card class="k-widget k-card k-card-vertical" dir="ltr" style="width: 260px;">
<kendo-card-header class="k-hbox k-card-header">
<kendo-avatar height="40px" width="40px" class="k-avatar k-avatar-circle k-avatar-image" style="width: 40px; height: 40px;"><!----><!----><!----><div class="ng-star-inserted" style="width: 40px; height: 40px; background-image: url(&quot;https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/bg_flag.jpg&quot;);"></div><!----><!----></kendo-avatar><div><h1 kendocardtitle="" class="k-card-title">bg_traditions</h1><p kendocardsubtitle="" class="k-card-subtitle">Bulgaria, Europe</p></div>
</kendo-card-header>
<kendo-scrollview kendocardmedia="" class="ng-tns-c1-0 k-widget k-scrollview-wrap k-card-media ng-star-inserted" tabindex="1" aria-live="assertive" dir="ltr" style="width: 100%; height: 185px; touch-action: pan-y pinch-zoom;">
<ul class="k-scrollview ng-trigger ng-trigger-animateTo" kendodraggable="">
<li class="ng-tns-c1-0 ng-star-inserted" aria-hidden="true" style="height: 185px; transform: translateX(-100%); width: 100%;"><!----><img draggable="false" src="" alt="" class="ng-star-inserted" style="min-width: 100%;"></li>
<li class="ng-tns-c1-0 ng-star-inserted" aria-hidden="false" style="height: 185px; transform: translateX(0%); width: 100%;"><!----><img draggable="false" src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/kukeri.jpg" alt="" class="ng-star-inserted" style="min-width: 100%;"></li>
<li class="ng-tns-c1-0 ng-star-inserted" aria-hidden="true" style="height: 185px; transform: translateX(100%); width: 100%;"><!----><img draggable="false" src="https://www.telerik.com/kendo-angular-ui-develop/components/layout/card/assets/martenitsa.jpg" alt="" class="ng-star-inserted" style="min-width: 100%;"></li>
</ul>
<div class="k-scrollview-elements ng-tns-c1-0 ng-star-inserted" style="height: 185px;">
<a aria-label="next" class="k-scrollview-next ng-tns-c1-0 ng-star-inserted"><span class="k-icon k-i-arrowhead-e"></span></a><!----><kendo-scrollview-pager class="ng-tns-c1-0 ng-star-inserted"><ul class="k-scrollview-pageable"><!----><li class="k-button ng-star-inserted k-primary"></li><li class="k-button ng-star-inserted"></li><li class="k-button ng-star-inserted"></li></ul></kendo-scrollview-pager>
</div>
</kendo-scrollview>
<kendo-card-actions class="k-card-actions k-card-actions-start k-card-actions-horizontal">
<comment-actions class="ng-star-inserted"><div><button class="k-button k-flat"><span class="k-icon k-i-heart-outline"></span></button><button class="k-button k-flat"><span class="k-icon k-i-comment"></span></button><button class="k-button k-flat"><span class="k-icon k-i-share"></span></button></div><span class="post-likes-count">674 likes</span></comment-actions>
</kendo-card-actions>
</kendo-card>
<!--
Note: This is an experimental component from future Telerik UI for Blazor features.
This component is not yet supported, use at your own risk.
-->
<div class="k-card" style=@RenderedStyle>
<div class="k-card-header">
<h5 class="k-card-title">@Title</h5>
<h6 class="k-card-subtitle">@Subtitle</h6>
</div>
<img class="k-card-image" src="https://via.placeholder.com/150">
<div class="k-card-body">
@CardContent
</div>
<div class="k-card-actions k-card-actions-stretched">
@ActionTemplate
@*<span class="k-card-action"><span class="k-button k-flat k-primary">Map</span></span>
<span class="k-card-action"><span class="k-button k-flat k-primary">Weather</span></span>*@
</div>
<div class="k-card-footer">
@FooterTemplate
@*<a class="k-button k-flat k-button-icon"><span class="k-icon k-i-facebook"></span></a>
<a class="k-button k-flat k-button-icon"><span class="k-icon k-i-pinterest"></span></a>
<a class="k-button k-flat k-button-icon"><span class="k-icon k-i-twitter"></span></a>*@
</div>
</div>
@code {
string RenderedStyle => string.IsNullOrWhiteSpace(Width) ? null : $"width:{ Width }";
[Parameter] public string Width { get; set; }
[Parameter] public string Title { get; set; }
[Parameter] public string Subtitle { get; set; }
[Parameter] public RenderFragment CardContent { get; set; }
[Parameter] public RenderFragment ActionTemplate { get; set; }
[Parameter] public RenderFragment FooterTemplate { get; set; }
}

12
BlazingCoffee/Client/Theme/main.scss
Просмотреть файл

@ -8,6 +8,18 @@
@import "./card-container";
@import "./common";
// TODO: Refactor to partial
.card-menu {
display: flex;
flex-wrap: wrap;
justify-content: right;
}
.card-menu > .k-card {
width: 280px;
margin-right: 2em;
}
a.k-link.k-state-selected {
border-radius: 5px;
}