Fix scroll for "user activity" card

This commit is contained in:
eugene-sinitsyn 2020-03-11 13:27:00 +03:00 committed by Maksim Karatkevich
parent 8f19fa96a3
commit 9037bcf7bd
3 changed files with 84 additions and 19 deletions

View file

@ -16,4 +16,9 @@
@include nb-ltr(padding-right, 4rem);
@include nb-rtl(padding-left, 4rem);
}
nb-card-body {
padding-left: 0;
padding-right: 0;
}
}

View file

@ -7,27 +7,29 @@
</nb-select>
</nb-card-header>
<nb-list class="user-activity-list">
<nb-list-item *ngFor="let item of userActivity">
<nb-card-body>
<nb-list class="user-activity-list">
<nb-list-item *ngFor="let item of userActivity">
<div class="visited-date">
{{ item.date }}
</div>
<div class="visited-pages-count">
<div class="caption">Pages Visit</div>
<div class="value">{{ item.pagesVisitCount }}</div>
</div>
<div class="visited-percentages">
<div class="caption">New visits, %</div>
<div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
<nb-icon [icon]="item.deltaUp ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
{{ item.newVisits }}%
<div class="visited-date">
{{ item.date }}
</div>
</div>
</nb-list-item>
</nb-list>
<div class="visited-pages-count">
<div class="caption">Pages Visit</div>
<div class="value">{{ item.pagesVisitCount }}</div>
</div>
<div class="visited-percentages">
<div class="caption">New visits, %</div>
<div class="delta value" [class.up]="item.deltaUp" [class.down]="!item.deltaUp">
<nb-icon [icon]="item.deltaUp ? 'arrow-up' : 'arrow-down'" pack="eva"></nb-icon>
{{ item.newVisits }}%
</div>
</div>
</nb-list-item>
</nb-list>
</nb-card-body>
</nb-card>

View file

@ -0,0 +1,58 @@
@import '../../../@theme/styles/themes';
@include nb-install-component() {
nb-card-header {
display: flex;
align-items: center;
justify-content: space-between;
border: none;
padding-top: nb-theme(card-header-with-select-padding-top);
padding-bottom: nb-theme(card-header-with-select-padding-bottom);
}
nb-card-body {
padding-left: 0;
padding-right: 0;
}
nb-list {
overflow-x: hidden;
}
nb-list-item {
display: flex;
align-items: flex-end;
justify-content: space-between;
margin: 0 -0.25rem;
}
.visited-date,
.visited-pages-count,
.visited-percentages {
flex: 1 0 auto;
margin: 0 0.25rem;
}
.value {
margin-top: 0.25rem;
color: nb-theme(color-success-default);
}
.delta {
display: flex;
align-items: center;
position: relative;
&.down {
color: nb-theme(color-danger-default);
}
&.up {
color: nb-theme(color-success-default);
}
nb-icon ::ng-deep svg {
vertical-align: top;
}
}
}