Skip to content

Commit e5d579c

Browse files
yanmariomenevyanmariomenev
committed
chore: added ui fixes for the dashboard
1 parent 9739731 commit e5d579c

File tree

10 files changed

+300
-233
lines changed

10 files changed

+300
-233
lines changed

‎examples-standalone/kendoangular-landing-page/src/app/app.component.css

Lines changed: 83 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,110 +1,118 @@
1-
.app-container {
2-
display: flex;
3-
flex-direction: column;
4-
height: 100vh;
5-
width: 100%;
1+
#app,
2+
.k-animation-container {
3+
font-family: 'Roboto', sans-serif;
64
}
75

8-
.app-header {
9-
background-color: #f6f6f6;
10-
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
6+
.k-radio {
7+
border: 1px solid var(--kendo-color-border, rgba(0, 0, 0, 0.08)) !important;
118
}
129

13-
.header-content {
14-
max-width: 1200px;
15-
margin: 0 auto;
16-
padding: 0 1rem;
10+
.k-grid-table-thead {
11+
background-color: #fff;
1712
}
1813

19-
.logo h1 {
20-
margin: 0;
21-
font-size: 1.5rem;
22-
color: #333;
14+
.k-table-td.price-column {
15+
text-align: end;
2316
}
2417

25-
.app-content {
26-
flex: 1;
27-
padding: 2rem 0;
28-
max-width: 1200px;
29-
margin: 0 auto;
30-
width: 100%;
18+
.price-column-header {
19+
justify-content: end;
3120
}
3221

33-
.nav-menu {
34-
display: flex;
35-
background-color: #f0f0f0;
36-
padding: 10px;
37-
margin-bottom: 20px;
22+
.k-slider .k-slider-track {
23+
background-color: #EBEBEB;
3824
}
3925

40-
.nav-menu a {
41-
margin-right: 20px;
42-
text-decoration: none;
43-
color: #333;
44-
padding: 5px 10px;
26+
.k-grid-pager {
27+
border-color: var(--kendo-color-border, rgba(0, 0, 0, 0.08));
28+
border-width: 0px 1px 1px 1px;
29+
font-size: 14px;
30+
background-color: #fff;
4531
}
4632

47-
.nav-menu a.active {
48-
background-color: #007bff;
49-
color: white;
50-
border-radius: 4px;
33+
.k-pager-numbers-wrap button {
34+
border-radius: 4px;
5135
}
5236

53-
.app-footer {
54-
background-color: #f6f6f6;
55-
padding: 1rem 0;
37+
.k-sort-icon {
38+
color: #5777EA;
5639
}
5740

58-
.footer-content {
59-
max-width: 1200px;
60-
margin: 0 auto;
61-
padding: 0 1rem;
62-
text-align: center;
41+
.k-list-item:hover,
42+
.k-list-optionlabel:hover,
43+
.k-list-item.k-hover,
44+
.k-hover.k-list-optionlabel,
45+
.k-columnmenu-item:hover {
46+
background-color: color-mix(in srgb, #5777EA 11%, transparent);
6347
}
6448

65-
.footer-content p {
66-
margin: 0;
67-
color: #666;
49+
.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row):hover,
50+
.k-grid .k-table-tbody>.k-table-row:not(.k-detail-row).k-hover {
51+
background-color: color-mix(in srgb, #5777EA 16%, transparent);
6852
}
6953

70-
kendo-appbar {
71-
background-color: transparent;
54+
.k-columnmenu-item.k-selected,
55+
.k-list-item.k-selected,
56+
.k-list-item.k-selected:hover,
57+
.k-list-optionlabel.k-selected,
58+
.k-list-optionlabel.k-selected:hover {
59+
background-color: #5777EA;
60+
color: #FFF;
7261
}
7362

74-
ul[kendoAppBarNavContainer] {
75-
display: flex;
76-
list-style: none;
77-
padding: 0;
78-
margin: 0;
63+
.k-grid .k-table-row.k-table-alt-row {
64+
background-color: color-mix(in srgb, #5777EA 10%, transparent);
7965
}
8066

81-
li[kendoAppBarNavItem] {
82-
margin-right: 1rem;
67+
.k-button-flat-primary {
68+
color: #5777EA;
8369
}
8470

85-
a[kendoAppBarNavLink] {
86-
text-decoration: none;
87-
color: #333;
88-
font-weight: 500;
89-
padding: 0.5rem;
90-
display: inline-block;
91-
position: relative;
71+
.k-button-solid-primary,
72+
.k-button-solid-primary:hover {
73+
border-color: #5777EA;
74+
background-color: #5777EA;
9275
}
9376

94-
a[kendoAppBarNavLink]:hover {
95-
color: #ff6358;
77+
.k-svg-icon.k-icon-lg {
78+
width: 22.5px;
79+
height: 12px;
9680
}
9781

98-
a[kendoAppBarNavLink].k-selected {
99-
color: #ff6358;
82+
.k-switch-on .k-switch-track {
83+
background-color: #5777EA !important;
84+
color: #FFF;
10085
}
10186

102-
a[kendoAppBarNavLink].k-selected:after {
103-
content: '';
104-
position: absolute;
105-
bottom: 0;
106-
left: 0;
107-
width: 100%;
108-
height: 2px;
109-
background-color: #ff6358;
87+
.k-rating-item,
88+
.k-rating-item.k-selected {
89+
color: #90B6FF;
90+
}
91+
92+
.k-slider .k-slider-selection {
93+
background-color: #90B6FF;
94+
}
95+
96+
.k-slider .k-draghandle {
97+
border-color: #5777EA;
98+
color: var(--kendo-color-on-primary, white);
99+
background-color: #5777EA;
100+
border-radius: 50%;
101+
}
102+
103+
.form-header {
104+
font-family: var(--kendo-font-family, inherit);
105+
font-size: var(--kendo-font-size, inherit);
106+
line-height: 19.88px;
107+
font-weight: 400;
108+
}
109+
110+
.k-form-buttons>.k-button-solid-primary {
111+
background-color: #5777EA
112+
}
113+
114+
.k-radio:checked,
115+
.k-radio.k-checked {
116+
border-color: #5777EA;
117+
background-color: #5777EA;
110118
}

‎examples-standalone/kendoangular-landing-page/src/app/app.component.html

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,18 @@
1-
<div class="app-container">
2-
<nav class="nav-menu">
3-
<a routerLink="/" routerLinkActive="active" [routerLinkActiveOptions]="{exact: true}">Dashboard</a>
4-
<a routerLink="/transactions" routerLinkActive="active">Transactions</a>
5-
<a routerLink="/bottom-left" routerLinkActive="active">Bottom Left</a>
6-
<a routerLink="/bottom-right" routerLinkActive="active">Bottom Right</a>
7-
</nav>
8-
<router-outlet></router-outlet>
9-
</div>
10-
<!-- <div class="dashboard-container">
11-
<div class="top-section">
1+
<div
2+
id="app"
3+
style="display: flex; flex-direction: column; width: 630px; height: 680px; margin-left: 8px; gap: 30px;"
4+
>
5+
<div>
126
<app-transactions-dashboard></app-transactions-dashboard>
137
</div>
14-
<div class="bottom-section">
15-
<div class="bottom-left">
8+
<div
9+
style="display: flex; flex-direction: row; justify-content: space-evenly; gap: 30px;"
10+
>
11+
<div style="max-height: 310px; flex: 1;">
1612
<app-bottom-left></app-bottom-left>
1713
</div>
18-
<div class="bottom-right">
14+
<div style="max-height: 310px; flex: 1;">
1915
<app-bottom-right></app-bottom-right>
2016
</div>
2117
</div>
22-
</div> -->
18+
</div>

‎examples-standalone/kendoangular-landing-page/src/app/app.component.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1-
import { Component } from '@angular/core';
1+
import { Component, ViewEncapsulation } from '@angular/core';
22
import { RouterOutlet, RouterLink, RouterLinkActive } from '@angular/router';
33
import { BottomLeftComponent } from './components/bottom-left/bottom-left.component';
44
import { TransactionsDashboardComponent } from './components/transactions-dashboard/transactions-dashboard.component';
55
import { BottomRightComponent } from './components/bottom-right/bottom-right.component';
66

77
@Component({
88
selector: 'app-root',
9+
encapsulation: ViewEncapsulation.None,
910
standalone: true,
1011
imports: [RouterOutlet, RouterLink, RouterLinkActive, BottomLeftComponent,BottomRightComponent, TransactionsDashboardComponent],
1112
templateUrl: './app.component.html',

‎examples-standalone/kendoangular-landing-page/src/app/components/bottom-left/bottom-left.component.html

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
[max]="10"
2121
[smallStep]="1"
2222
[(value)]="sliderValue"
23+
tickPlacement="none"
2324
></kendo-slider>
2425
</div>
2526
</div>
@@ -41,11 +42,11 @@
4142
<kendo-chart-value-axis-item [labels]="{ padding: 0, margin: 0, font: '8px Arial, sans-serif' }"></kendo-chart-value-axis-item>
4243
</kendo-chart-value-axis>
4344
<kendo-chart-series>
44-
<kendo-chart-series-item type="column" name="Coffees" [gap]="2" [spacing]="0.25" [data]="chartFirstSeries" color="#C0EAF5">
45+
<kendo-chart-series-item type="column" name="Coffees" [gap]="2" [spacing]="0.25" [data]="chartFirstSeries" color="#f42e19">
4546
</kendo-chart-series-item>
46-
<kendo-chart-series-item type="column" name="Commits" [data]="chartSecondSeries" color="#90B6FF">
47+
<kendo-chart-series-item type="column" name="Commits" [data]="chartSecondSeries" color="#ff7e6b">
4748
</kendo-chart-series-item>
48-
<kendo-chart-series-item type="column" name="Push-ups" [data]="chartThirdSeries" color="#5777EA">
49+
<kendo-chart-series-item type="column" name="Push-ups" [data]="chartThirdSeries" color="#b71e0f">
4950
</kendo-chart-series-item>
5051
</kendo-chart-series>
5152
</kendo-chart>

‎examples-standalone/kendoangular-landing-page/src/app/components/bottom-right/bottom-right.component.css

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
.k-form-field-wrap {
2+
margin-bottom: 1rem;
3+
}
4+
5+
.k-form-buttons {
6+
margin-top: 1.5rem;
7+
display: flex;
8+
justify-content: flex-end;
9+
gap: 0.5rem;
10+
}
11+
12+
kendo-formfield {
13+
margin-bottom: 1rem;
14+
display: block;
15+
}
16+
17+
.k-radio-list-horizontal {
18+
display: flex;
19+
gap: 1rem;
20+
}

‎examples-standalone/kendoangular-landing-page/src/app/components/transactions-dashboard/transactions-dashboard.component.css

Lines changed: 14 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,20 @@
1+
12
.positive-amount {
23
color: #4bb34b;
4+
justify-content: flex-end;
5+
display: flex;
36
}
47

58
.negative-amount {
69
color: #ff5252;
10+
justify-content: flex-end;
11+
display: flex;
12+
}
13+
.action-buttons {
14+
display: flex;
15+
justify-content: flex-end;
16+
align-items: center;
717
}
8-
918
.status-badge {
1019
display: inline-flex;
1120
padding: 4px 8px;
@@ -29,19 +38,19 @@
2938
color: #ffae01;
3039
}
3140

32-
::ng-deep .k-grid-header {
41+
.k-grid-header {
3342
background-color: #f8f9fa;
3443
}
3544

36-
::ng-deep .k-grid tbody tr:hover {
45+
.k-grid tbody tr:hover {
3746
background-color: #f5f7fa;
3847
}
3948

40-
::ng-deep .k-grid tr.k-selected {
49+
.k-grid tr.k-selected {
4150
background-color: rgba(87, 119, 234, 0.05);
4251
}
4352

44-
::ng-deep .k-pager-numbers .k-link.k-selected {
53+
.k-pager-numbers .k-link.k-selected {
4554
color: #fff;
4655
background-color: #5777ea;
4756
}

0 commit comments

Comments
 (0)