From fd8416b7e7dcb4b0b690e83b91e645ad4276362a Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Mon, 28 Dec 2020 17:14:53 +1100 Subject: [PATCH] dashboard with content layout --- package-lock.json | 27 ++++ package.json | 6 +- src/app/app.module.ts | 7 +- src/app/canvas/canvas.component.html | 24 +++ src/app/dashboard/dashboard.component.html | 85 ++++++++++- src/app/dashboard/dashboard.component.scss | 144 ++++++++++++++++++ src/app/dashboard/dashboard.component.ts | 7 +- .../dashboard/dist/dashboard.component.css | 125 +++++++++++++++ src/app/dashboard/dist/dashboard.component.js | 2 + 9 files changed, 416 insertions(+), 11 deletions(-) diff --git a/package-lock.json b/package-lock.json index 0b5e44e..fdc0345 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1925,6 +1925,23 @@ } } }, + "@progress/kendo-angular-charts": { + "version": "4.2.1", + "resolved": "https://registry.npmjs.org/@progress/kendo-angular-charts/-/kendo-angular-charts-4.2.1.tgz", + "integrity": "sha512-PhmRg8WjvVdWQs6l8e59Z3djP+MfnEODYgReuZlYo0qO687XR21NRubgLQ+Q8t03HBorNRqxOz/JD66U4c29tQ==", + "requires": { + "@progress/kendo-charts": "^1.15.0", + "@progress/kendo-schematics": "^1.1.0", + "tslib": "^1.9.0" + }, + "dependencies": { + "tslib": { + "version": "1.14.1", + "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", + "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" + } + } + }, "@progress/kendo-angular-common": { "version": "1.2.3", "resolved": "https://registry.npmjs.org/@progress/kendo-angular-common/-/kendo-angular-common-1.2.3.tgz", @@ -2248,6 +2265,11 @@ } } }, + "@progress/kendo-charts": { + "version": "1.16.0", + "resolved": "https://registry.npmjs.org/@progress/kendo-charts/-/kendo-charts-1.16.0.tgz", + "integrity": "sha512-43BNYFCvLTzA/q0OQaRYb21Kb3LJL8iBHg7MQJKKWIoPH0M3sU54/H5lqBZ4RDXZ+my2ekNCvobvax2takyjqw==" + }, "@progress/kendo-common": { "version": "0.2.1", "resolved": "https://registry.npmjs.org/@progress/kendo-common/-/kendo-common-0.2.1.tgz", @@ -6067,6 +6089,11 @@ "integrity": "sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==", "dev": true }, + "hammerjs": { + "version": "2.0.8", + "resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz", + "integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE=" + }, "handle-thing": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.1.tgz", diff --git a/package.json b/package.json index a253bb7..0ebb09b 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/free-solid-svg-icons": "^5.13.0", "@progress/kendo-angular-buttons": "^5.0.0", + "@progress/kendo-angular-charts": "^4.2.1", "@progress/kendo-angular-common": "^1.0.0", "@progress/kendo-angular-dateinputs": "^4.0.0", "@progress/kendo-angular-dialog": "^4.2.2", @@ -44,13 +45,14 @@ "@progress/kendo-angular-popup": "^3.0.0", "@progress/kendo-angular-progressbar": "^0.2.3", "@progress/kendo-data-query": "^1.0.0", - "@progress/kendo-drawing": "^1.5.12", + "@progress/kendo-drawing": "^1.1.2", "@progress/kendo-svg-icons": "^0.0.3", "@progress/kendo-theme-default": "latest", "bootstrap": "^3.4.1", "rxjs": "~6.6.0", "tslib": "^2.0.0", - "zone.js": "~0.10.2" + "zone.js": "~0.10.2", + "hammerjs": "^2.0.0" }, "devDependencies": { "@angular-devkit/build-angular": "~0.1002.0", diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 0a722a9..4db7d78 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -29,6 +29,10 @@ import { LabelModule } from '@progress/kendo-angular-label'; import { AuthService } from './service/auth.service'; import { AuthGuard } from './service/auth-guard.service'; import { NotificationModule } from '@progress/kendo-angular-notification'; +import { ChartsModule } from '@progress/kendo-angular-charts'; +import 'hammerjs'; + + @@ -61,7 +65,8 @@ import { NotificationModule } from '@progress/kendo-angular-notification'; LayoutModule, IndicatorsModule, LabelModule, - NotificationModule + NotificationModule, + ChartsModule ], providers: [MenuService, AuthGuard, AuthService], bootstrap: [AppComponent] diff --git a/src/app/canvas/canvas.component.html b/src/app/canvas/canvas.component.html index 6e51c4b..2dfc980 100644 --- a/src/app/canvas/canvas.component.html +++ b/src/app/canvas/canvas.component.html @@ -24,6 +24,30 @@
+ + + + + + + + + + + + + + + + + + + + + +
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index 6083622..7094b7b 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,6 +1,83 @@ +
+
-
-
-something +
+   Daily summary
-
\ No newline at end of file +
+
+ + + + + + + + + + + + + + + + + +
+
+ + + + + + + + + + + + + + + + + +
+
+
+
+
+
+

Recent Transactions

+
+
+ + + + + + + + + + + + + + + + + +
+
+ +
+
+
+
+

Pending Payments

+ +
+
\ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 4872b12..e33ad0e 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -13,3 +13,147 @@ min-height: calc(100vh - 48px); background-color:chartreuse; } + +div.divider { + font-family: "Share Tech Mono", monospace; + color: #fff; + font-size: 2vh; + text-shadow: 1px 1px 1px rgba(0, 0, 0, .45); + + display: flex; + justify-content: center; + align-items: center; + + &::before, + &::after { + content: ''; + display: block; + height: 0.09em; + min-width: 30vw; + } + + &::before { + background: linear-gradient(to right, rgba(240,240,240,0), #fff); + margin-right: 4vh; + } + + &::after { + background: linear-gradient(to left, rgba(240,240,240,0), #fff); + margin-left: 4vh; + } + } + +/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */ + +.h-divider { + margin: auto; + /* margin-top: 80px; */ + width: 80%; + position: relative; + } + + .h-divider .shadow { + overflow: hidden; + height: 20px; + } + + .h-divider .shadow:after { + content: ''; + display: block; + margin: -25px auto 0; + width: 100%; + height: 25px; + border-radius: 125px/12px; + box-shadow: 0 0 8px black; + } + + .h-divider .text { + width: 100px; + height: 45px; + padding: 10px; + position: absolute; + bottom: 100%; + margin-bottom: -33px; + left: 50%; + margin-left: -60px; + border-radius: 100%; + box-shadow: 0 2px 4px #999; + background: white; + } + + .h-divider .text i { + position: absolute; + top: 4px; + bottom: 4px; + left: 4px; + right: 4px; + border-radius: 100%; + border: 1px dashed #aaa; + text-align: center; + line-height: 50px; + font-style: normal; + color: #999; + } + + .h-divider .text2 { + width: 70px; + height: 70px; + position: absolute; + bottom: 100%; + margin-bottom: -35px; + left: 50%; + margin-left: -25px; + border-radius: 100%; + box-shadow: 0 2px 4px #999; + background: white; + } + + .h-divider img { + position: absolute; + margin: 4px; + max-width: 60px; + border-radius: 100%; + border: 1px dashed #aaa; + } + + /* end of horizontal dividor */ + + $link-color: #f52e62; + $text-color: #3f517e; + $hr-color: rgba(0,0,0,0.35); + $hr-text-color: #453986; + + $letter-spacing: .32em; + + $background-color: #fff; + hr { + display: block; + margin: 10px 0 -15px; + width: 100%; + height: 1px; + border: 0; + background-color: $hr-color; + + + h2 { + display: inline-block; + position: relative; + left: 50%; + margin: 0; + padding: 5px 10px; + border: 1px solid $hr-text-color; + //box-shadow: inset 0 0 0 1px $hr-text-color; + transform: translateX(-50%); + color: $hr-text-color; + font-size: 12px; + font-weight: 500; + letter-spacing: $letter-spacing; + text-align: center; + text-transform: uppercase; + background-color: $background-color; + + // Cancel out offset created by letterspacing + &::first-letter { + margin-left: $letter-spacing; + } + } + } \ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 550d2c9..0d1c091 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -1,4 +1,5 @@ import { Component, OnInit } from '@angular/core'; +import { sampleProducts } from '../models/sample_product'; @@ -10,13 +11,11 @@ import { Component, OnInit } from '@angular/core'; }) export class DashboardComponent implements OnInit { - + public gridData: any[] = sampleProducts; + constructor() { } ngOnInit(): void { } - - - } diff --git a/src/app/dashboard/dist/dashboard.component.css b/src/app/dashboard/dist/dashboard.component.css index 23dd61f..0ba0a77 100644 --- a/src/app/dashboard/dist/dashboard.component.css +++ b/src/app/dashboard/dist/dashboard.component.css @@ -13,4 +13,129 @@ width: 99%; min-height: calc(100vh - 48px); background-color: chartreuse; +} + +div.divider { + font-family: "Share Tech Mono", monospace; + color: #fff; + font-size: 2vh; + text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.45); + display: flex; + justify-content: center; + align-items: center; +} +div.divider::before, div.divider::after { + content: ""; + display: block; + height: 0.09em; + min-width: 30vw; +} +div.divider::before { + background: linear-gradient(to right, rgba(240, 240, 240, 0), #fff); + margin-right: 4vh; +} +div.divider::after { + background: linear-gradient(to left, rgba(240, 240, 240, 0), #fff); + margin-left: 4vh; +} + +/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */ +.h-divider { + margin: auto; + /* margin-top: 80px; */ + width: 80%; + position: relative; +} + +.h-divider .shadow { + overflow: hidden; + height: 20px; +} + +.h-divider .shadow:after { + content: ""; + display: block; + margin: -25px auto 0; + width: 100%; + height: 25px; + border-radius: 125px/12px; + box-shadow: 0 0 8px black; +} + +.h-divider .text { + width: 100px; + height: 45px; + padding: 10px; + position: absolute; + bottom: 100%; + margin-bottom: -33px; + left: 50%; + margin-left: -60px; + border-radius: 100%; + box-shadow: 0 2px 4px #999; + background: white; +} + +.h-divider .text i { + position: absolute; + top: 4px; + bottom: 4px; + left: 4px; + right: 4px; + border-radius: 100%; + border: 1px dashed #aaa; + text-align: center; + line-height: 50px; + font-style: normal; + color: #999; +} + +.h-divider .text2 { + width: 70px; + height: 70px; + position: absolute; + bottom: 100%; + margin-bottom: -35px; + left: 50%; + margin-left: -25px; + border-radius: 100%; + box-shadow: 0 2px 4px #999; + background: white; +} + +.h-divider img { + position: absolute; + margin: 4px; + max-width: 60px; + border-radius: 100%; + border: 1px dashed #aaa; +} + +/* end of horizontal dividor */ +hr { + display: block; + margin: 10px 0 -15px; + width: 100%; + height: 1px; + border: 0; + background-color: rgba(0, 0, 0, 0.35); +} +hr + h2 { + display: inline-block; + position: relative; + left: 50%; + margin: 0; + padding: 5px 10px; + border: 1px solid #453986; + transform: translateX(-50%); + color: #453986; + font-size: 12px; + font-weight: 500; + letter-spacing: 0.32em; + text-align: center; + text-transform: uppercase; + background-color: #fff; +} +hr + h2::first-letter { + margin-left: 0.32em; } \ No newline at end of file diff --git a/src/app/dashboard/dist/dashboard.component.js b/src/app/dashboard/dist/dashboard.component.js index 6e99460..2c3d137 100644 --- a/src/app/dashboard/dist/dashboard.component.js +++ b/src/app/dashboard/dist/dashboard.component.js @@ -8,8 +8,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, exports.__esModule = true; exports.DashboardComponent = void 0; var core_1 = require("@angular/core"); +var sample_product_1 = require("../models/sample_product"); var DashboardComponent = /** @class */ (function () { function DashboardComponent() { + this.gridData = sample_product_1.sampleProducts; } DashboardComponent.prototype.ngOnInit = function () { };