+
-
-
-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 () {
};