From 220d5c8374cc365a02454d9e6e1bb739f6311b66 Mon Sep 17 00:00:00 2001 From: Patrick Sun Date: Mon, 28 Dec 2020 18:20:03 +1100 Subject: [PATCH] separate divider into components. --- src/app/app.module.ts | 6 +- .../bkp-divider-shadow-bottom.component.html | 3 + .../bkp-divider-shadow-bottom.component.scss | 74 ++++++++ ...kp-divider-shadow-bottom.component.spec.ts | 25 +++ .../bkp-divider-shadow-bottom.component.ts | 15 ++ .../bkp-divider/bkp-divider.component.html | 4 + .../bkp-divider/bkp-divider.component.scss | 72 +++++++ .../bkp-divider/bkp-divider.component.spec.ts | 25 +++ src/app/bkp-divider/bkp-divider.component.ts | 15 ++ src/app/dashboard/dashboard.component.html | 30 ++- src/app/dashboard/dashboard.component.scss | 178 ++---------------- src/app/dashboard/dashboard.component.ts | 1 - .../dashboard/dist/dashboard.component.css | 126 ------------- 13 files changed, 266 insertions(+), 308 deletions(-) create mode 100644 src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.html create mode 100644 src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.scss create mode 100644 src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.spec.ts create mode 100644 src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.ts create mode 100644 src/app/bkp-divider/bkp-divider.component.html create mode 100644 src/app/bkp-divider/bkp-divider.component.scss create mode 100644 src/app/bkp-divider/bkp-divider.component.spec.ts create mode 100644 src/app/bkp-divider/bkp-divider.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 4db7d78..e00de05 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -31,6 +31,8 @@ import { AuthGuard } from './service/auth-guard.service'; import { NotificationModule } from '@progress/kendo-angular-notification'; import { ChartsModule } from '@progress/kendo-angular-charts'; import 'hammerjs'; +import { BkpDividerComponent } from './bkp-divider/bkp-divider.component'; +import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component'; @@ -44,7 +46,9 @@ import 'hammerjs'; DashboardComponent, AuthComponent, CanvasComponent, - LoanEditComponent + LoanEditComponent, + BkpDividerComponent, + BkpDividerShadowBottomComponent ], imports: [ BrowserModule, diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.html b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.html new file mode 100644 index 0000000..e8d03eb --- /dev/null +++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.html @@ -0,0 +1,3 @@ +
+
+
\ No newline at end of file diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.scss b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.scss new file mode 100644 index 0000000..33a2c56 --- /dev/null +++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.scss @@ -0,0 +1,74 @@ +/* horizontal divider https://codepen.io/MiKr13/pen/yjaNYp */ + +.h-divider { + margin: auto; + /* margin-top: 80px; */ + width: 100%; + 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 */ \ No newline at end of file diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.spec.ts b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.spec.ts new file mode 100644 index 0000000..7944c9e --- /dev/null +++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BkpDividerShadowBottomComponent } from './bkp-divider-shadow-bottom.component'; + +describe('BkpDividerShadowBottomComponent', () => { + let component: BkpDividerShadowBottomComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BkpDividerShadowBottomComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BkpDividerShadowBottomComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.ts b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.ts new file mode 100644 index 0000000..63f0905 --- /dev/null +++ b/src/app/bkp-divider-shadow-bottom/bkp-divider-shadow-bottom.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'bkp-divider-shadow-bottom', + templateUrl: './bkp-divider-shadow-bottom.component.html', + styleUrls: ['./bkp-divider-shadow-bottom.component.scss'] +}) +export class BkpDividerShadowBottomComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/bkp-divider/bkp-divider.component.html b/src/app/bkp-divider/bkp-divider.component.html new file mode 100644 index 0000000..9c881b8 --- /dev/null +++ b/src/app/bkp-divider/bkp-divider.component.html @@ -0,0 +1,4 @@ +
+

+ +

diff --git a/src/app/bkp-divider/bkp-divider.component.scss b/src/app/bkp-divider/bkp-divider.component.scss new file mode 100644 index 0000000..31a5e55 --- /dev/null +++ b/src/app/bkp-divider/bkp-divider.component.scss @@ -0,0 +1,72 @@ +$link-color: #f52e62; +$text-color: #3f517e; +$hr-color: rgba(0,0,0,0.35); +$hr-text-color: #453986; + +$letter-spacing: .32em; + +$background-color: #fff; + +div.divider { + font-family: "Share Tech Mono", monospace; + color: $text-color; + 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; + } + } + + + + + 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/bkp-divider/bkp-divider.component.spec.ts b/src/app/bkp-divider/bkp-divider.component.spec.ts new file mode 100644 index 0000000..c446cd1 --- /dev/null +++ b/src/app/bkp-divider/bkp-divider.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { BkpDividerComponent } from './bkp-divider.component'; + +describe('BkpDividerComponent', () => { + let component: BkpDividerComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ BkpDividerComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(BkpDividerComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/bkp-divider/bkp-divider.component.ts b/src/app/bkp-divider/bkp-divider.component.ts new file mode 100644 index 0000000..42db378 --- /dev/null +++ b/src/app/bkp-divider/bkp-divider.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'bkp-divider', + templateUrl: './bkp-divider.component.html', + styleUrls: ['./bkp-divider.component.scss'] +}) +export class BkpDividerComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html index dcf6276..c84159d 100644 --- a/src/app/dashboard/dashboard.component.html +++ b/src/app/dashboard/dashboard.component.html @@ -1,9 +1,9 @@
- -
+ +   Daily summary -
+
@@ -46,11 +46,10 @@
-
-
-
-
-

  Recent Transactions

+ +   Recent + Transactions +
@@ -72,12 +71,9 @@
- -
-
-
-
-

  Pending Payments

+ + +   Pending Payments
@@ -100,9 +96,7 @@
- -
-
-
+ +
\ No newline at end of file diff --git a/src/app/dashboard/dashboard.component.scss b/src/app/dashboard/dashboard.component.scss index 2f77536..9d406af 100644 --- a/src/app/dashboard/dashboard.component.scss +++ b/src/app/dashboard/dashboard.component.scss @@ -1,162 +1,16 @@ -/* Timeline */ -.container.outer{ - width:100%; - background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed; - -webkit-background-size: cover; - -moz-background-size: cover; - -o-background-size: cover; - background-size: cover; - opacity:0.98; -} -.container.inner { - width: 99%; - min-height: calc(100vh - 48px); - /* background-color:chartreuse; */ -} - - -$link-color: #f52e62; -$text-color: #3f517e; -$hr-color: rgba(0,0,0,0.35); -$hr-text-color: #453986; - -$letter-spacing: .32em; - -$background-color: #fff; - -div.divider { - font-family: "Share Tech Mono", monospace; - color: $text-color; - 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 */ - - - 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 +.container.outer{ + width:100%; + background: url('../../assets/img/body_bg.jpg') no-repeat center center fixed; + -webkit-background-size: cover; + -moz-background-size: cover; + -o-background-size: cover; + background-size: cover; + opacity:0.98; +} +.container.inner { + width: 99%; + min-height: calc(100vh - 48px); + /* background-color:chartreuse; */ +} + + diff --git a/src/app/dashboard/dashboard.component.ts b/src/app/dashboard/dashboard.component.ts index 0d1c091..d9310de 100644 --- a/src/app/dashboard/dashboard.component.ts +++ b/src/app/dashboard/dashboard.component.ts @@ -3,7 +3,6 @@ import { sampleProducts } from '../models/sample_product'; - @Component({ selector: 'app-dashboard', templateUrl: './dashboard.component.html', diff --git a/src/app/dashboard/dist/dashboard.component.css b/src/app/dashboard/dist/dashboard.component.css index 8907954..1d2d0e4 100644 --- a/src/app/dashboard/dist/dashboard.component.css +++ b/src/app/dashboard/dist/dashboard.component.css @@ -1,4 +1,3 @@ -/* Timeline */ .container.outer { width: 100%; background: url("../../assets/img/body_bg.jpg") no-repeat center center fixed; @@ -13,129 +12,4 @@ width: 99%; min-height: calc(100vh - 48px); /* background-color:chartreuse; */ -} - -div.divider { - font-family: "Share Tech Mono", monospace; - color: #3f517e; - 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