Skip to content

Commit 5ef90e5

Browse files
silviyabotevasilviyaboteva
committed
chore: styling updates in react-admin-dashboard app
1 parent b411764 commit 5ef90e5

File tree

11 files changed

+15767
-15763
lines changed

11 files changed

+15767
-15763
lines changed

‎examples/react-admin-dashboard/package-lock.json‎

Lines changed: 15717 additions & 15718 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/react-admin-dashboard/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
"@progress/kendo-react-form": "^10.0.0",
1919
"@progress/kendo-react-gauges": "^10.0.0",
2020
"@progress/kendo-react-grid": "^10.0.0",
21+
"@progress/kendo-react-indicators": "^10.0.0",
2122
"@progress/kendo-react-inputs": "^10.0.0",
2223
"@progress/kendo-react-intl": "^10.0.0",
2324
"@progress/kendo-react-layout": "^10.0.0",

‎examples/react-admin-dashboard/src/components/dashboard/Alert.jsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { Notification } from '@progress/kendo-react-notification';
1212
import { Button } from '@progress/kendo-react-buttons';
1313
import { SvgIcon } from '@progress/kendo-react-common';
1414
import { bellIcon } from '@progress/kendo-svg-icons';
15+
import { Badge, BadgeContainer } from '@progress/kendo-react-indicators';
1516

1617
let contacts = [
1718
{
@@ -128,7 +129,10 @@ let contacts = [
128129
onClick={onClick}
129130
ref={anchor}
130131
>
131-
<SvgIcon icon={bellIcon} />
132+
<BadgeContainer>
133+
<SvgIcon icon={bellIcon} />
134+
<Badge themeColor="primary" />
135+
</BadgeContainer>
132136
</button>
133137
<Popup anchor={anchor.current} show={show} popupClass={'popup-content'}>
134138
<ListView

‎examples/react-admin-dashboard/src/components/dashboard/DashboardGrid.jsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import { GridPDFExport } from '@progress/kendo-react-pdf';
33
import { ExcelExport } from '@progress/kendo-react-excel-export';
4-
import { Input } from '@progress/kendo-react-inputs';
4+
import { Input, TextBox } from '@progress/kendo-react-inputs';
55
import { Rating } from '@progress/kendo-react-inputs';
66
import {
77
Grid,
@@ -150,9 +150,6 @@ const RatingCell = (props) => {
150150
<Rating
151151
value={value === null ? '' : props.dataItem[field].toString()}
152152
readonly={true}
153-
style={{
154-
height: '100px',
155-
}}
156153
/>
157154
</td>
158155
);
@@ -218,7 +215,8 @@ const firstTeamOnClick = React.useCallback(
218215
);
219216

220217
return <div className="grid-container">
221-
<div className="card-buttons card-buttons-parent">
218+
<div className="card-buttons">
219+
<p>MK Team</p>
222220
<ButtonGroup>
223221
<Button togglable={true} selected={isFirstTeam} onClick={firstTeamOnClick}>
224222
My Team
@@ -242,7 +240,13 @@ const firstTeamOnClick = React.useCallback(
242240
total={dataResult.total}
243241
{...dataState}
244242
onDataStateChange={dataStateChange}
245-
pageable={true}
243+
autoProcessData={true}
244+
defaultSkip={0}
245+
defaultTake={10}
246+
pageable={{
247+
buttonCount: 4,
248+
pageSizes: [5, 10, 15, 'All']
249+
}}
246250
dataItemKey={DATA_ITEM_KEY}
247251
selectedField={SELECTED_FIELD}
248252
selectable={{
@@ -257,14 +261,11 @@ const firstTeamOnClick = React.useCallback(
257261
<GridToolbar className="toolbar">
258262
<div>
259263
<span>
260-
<Input
264+
<TextBox
261265
value={filterValue}
262266
onChange={onFilterChange}
263267
style={{
264-
border: '2px solid #ccc',
265-
boxShadow: 'inset 0px 0px 0.5px 0px rgba(0,0,0,0.0.1)',
266268
width: '200px',
267-
height: '24px',
268269
}}
269270
defaultValue='Search in all columns'
270271
/>

‎examples/react-admin-dashboard/src/components/settings/FinancialForm.jsx‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,8 @@ export const FinancialForm = () => {
4545
<FormElement
4646
style={{
4747
width: '100%',
48-
height: '348px',
4948
background: '#fafafa',
50-
padding: '0px 16px 0px 16px',
49+
padding: '16px 0',
5150
border: '1px solid rgba(0, 0, 0, 0.08)',
5251
}}
5352
>

‎examples/react-admin-dashboard/src/components/settings/SwitchOptions.jsx‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,8 @@ export const SwitchOptions = () => {
1818
<FormElement
1919
style={{
2020
width: '100%',
21-
height: '348px',
2221
background: '#fafafa',
23-
padding: '0px 16px 0px 16px',
22+
padding: '16px 0',
2423
border: '1px solid rgba(0, 0, 0, 0.08)',
2524
}}
2625
>
@@ -69,9 +68,8 @@ export const SwitchOptions = () => {
6968
<FormElement
7069
style={{
7170
width: '100%',
72-
height: '248px',
7371
background: '#fafafa',
74-
padding: '0px 16px 0px 16px',
72+
padding: '16px 0',
7573
border: '1px solid rgba(0, 0, 0, 0.08)',
7674
}}
7775
>

‎examples/react-admin-dashboard/src/components/settings/UserForms.jsx‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -48,9 +48,8 @@ export const UserForm = () => {
4848
<FormElement
4949
style={{
5050
width: '100%',
51-
height: '148px',
5251
background: '#fafafa',
53-
padding: '0px 16px 0px 16px',
52+
padding: '16px 0',
5453
border: '1px solid rgba(0, 0, 0, 0.08)',
5554
}}
5655
>
@@ -106,9 +105,8 @@ export const UserForm = () => {
106105
<FormElement
107106
style={{
108107
width: '100%',
109-
height: '148px',
110108
background: '#fafafa',
111-
padding: '0px 16px 0px 16px',
109+
padding: '16px 0',
112110
border: '1px solid rgba(0, 0, 0, 0.08)',
113111
}}
114112
>
@@ -172,9 +170,8 @@ export const UserForm = () => {
172170
<FormElement
173171
style={{
174172
width: '100%',
175-
height: '400px',
176173
background: '#fafafa',
177-
padding: '0px 16px 0px 16px',
174+
padding: '16px 0',
178175
border: '1px solid rgba(0, 0, 0, 0.08)',
179176
}}
180177
>

‎examples/react-admin-dashboard/src/index.scss‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -273,10 +273,10 @@ div.k-form-field:nth-child(3) {
273273
.right-widget {
274274
float: right;
275275
display: flex;
276+
gap: 4px;
276277
}
277278

278279
.alert-container {
279-
margin-right: 50px;
280280
a {
281281
color: #424242 !important;
282282
}
@@ -569,7 +569,7 @@ text-align: center;
569569

570570

571571
.listbox-card-container {
572-
margin-top: 100px;
572+
margin-top: 20px;
573573
.k-listview-content {
574574
display: flex;
575575
width: 100%;
@@ -589,7 +589,7 @@ text-align: center;
589589

590590
.input-container {
591591
text-align: center;
592-
margin-top: 50px;
592+
margin-top: 20px;
593593
input {
594594
width: 500px;
595595
}
@@ -621,7 +621,8 @@ text-align: center;
621621
.switch-parent, .f-buttons {
622622
display: flex;
623623
justify-content: space-between;
624-
margin-top: 70px;
624+
padding-top: 10px;
625+
padding-inline: 16px;
625626
}
626627

627628
.date-container {
@@ -718,4 +719,12 @@ text-align: center;
718719

719720
.switch {
720721
margin-left: 20px;
722+
}
723+
724+
.k-tilelayout .k-card {
725+
border-width: 0px;
726+
}
727+
728+
.dasboard-class .k-tilelayout-item-header {
729+
display: none;
721730
}

‎examples/react-admin-dashboard/src/pages/Dashboard.jsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,6 @@ export const Dashboard = () => {
126126
body: <DashboardChart/>,
127127
},
128128
{
129-
header: 'MK Team',
130129
body: <DashboardGrid/>,
131130
},
132131
];
@@ -142,12 +141,13 @@ export const Dashboard = () => {
142141

143142
<TileLayout
144143
columns={2}
145-
rowHeight={255}
144+
rowHeight={'auto'}
146145
positions={data}
147146
gap={{
148147
rows: 10,
149148
columns: 10,
150-
}}
149+
}}
150+
className='dasboard-class'
151151
items={secondSectionTiles}
152152
onReposition={handleReposition}
153153
/>

‎examples/react-admin-dashboard/src/pages/PerformanceAndSales.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -11,37 +11,37 @@ export const PerformanceAndSales = () => {
1111
const [data, setData] = React.useState([
1212
{
1313
col: 1,
14-
colSpan: 4,
14+
colSpan: 6,
1515
rowSpan: 2,
1616
},
1717
{
1818
col: 1,
19-
colSpan: 3,
19+
colSpan: 4,
2020
rowSpan: 2,
2121
},
2222
{
2323
col: 1,
24-
colSpan: 2,
24+
colSpan: 3,
2525
rowSpan: 1,
2626
},
2727
{
28-
col: 4,
28+
col: 5,
2929
colSpan: 2,
3030
rowSpan: 2,
3131
},
3232
{
33-
col: 3,
34-
colSpan: 2,
33+
col: 4,
34+
colSpan: 3,
3535
rowSpan: 1,
3636
},
3737
{
38-
col: 2,
39-
colSpan: 3,
38+
col: 3,
39+
colSpan: 4,
4040
rowSpan: 2,
4141
},
4242
{
4343
col: 1,
44-
colSpan: 1,
44+
colSpan: 2,
4545
rowSpan: 2,
4646
},
4747
]);
@@ -94,8 +94,8 @@ export const PerformanceAndSales = () => {
9494
};
9595
return (
9696
<TileLayout
97-
columns={4}
98-
rowHeight={255}
97+
columns={6}
98+
rowHeight={'auto'}
9999
positions={data}
100100
gap={{
101101
rows: 10,

0 commit comments

Comments
 (0)