From a83a4a75f0c9ef0938934eb6b5091dae650ea45f Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 4 Nov 2021 20:50:28 +0530 Subject: [PATCH 1/3] E Services Page UI --- src/app/app-routing.module.ts | 6 +- src/app/app.module.ts | 4 +- src/app/e-services/e-services.component.html | 58 +++++++++ src/app/e-services/e-services.component.scss | 115 ++++++++++++++++++ .../e-services/e-services.component.spec.ts | 25 ++++ src/app/e-services/e-services.component.ts | 15 +++ .../register-business.component.html | 2 +- .../register-business.component.scss | 23 ---- src/app/tabs/tabs.component.html | 19 +-- src/app/tabs/tabs.component.scss | 42 +------ src/assets/icons/services.svg | 1 + src/styles.scss | 24 ++++ 12 files changed, 253 insertions(+), 81 deletions(-) create mode 100644 src/app/e-services/e-services.component.html create mode 100644 src/app/e-services/e-services.component.scss create mode 100644 src/app/e-services/e-services.component.spec.ts create mode 100644 src/app/e-services/e-services.component.ts create mode 100644 src/assets/icons/services.svg diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts index 2dfe427..ce29872 100644 --- a/src/app/app-routing.module.ts +++ b/src/app/app-routing.module.ts @@ -1,5 +1,6 @@ import { NgModule } from '@angular/core'; import { RouterModule, Routes } from '@angular/router'; +import { EServicesComponent } from './e-services/e-services.component'; import { LoginComponent } from './login/login.component'; import { RegisterBusinessComponent } from './register-business/register-business.component'; import { TabsComponent } from './tabs/tabs.component'; @@ -9,7 +10,10 @@ const routes: Routes = [ { component: LoginComponent, path: 'login' }, { component: TabsComponent, path: 'tabs', children : [ { - path: '', pathMatch: 'full', redirectTo: 'register-business' + path: '', pathMatch: 'full', redirectTo: 'e-services' + }, { + path: 'e-services', + component: EServicesComponent, }, { path: 'register-business', component: RegisterBusinessComponent, diff --git a/src/app/app.module.ts b/src/app/app.module.ts index f007d2b..c53c207 100644 --- a/src/app/app.module.ts +++ b/src/app/app.module.ts @@ -7,13 +7,15 @@ import { LoginComponent } from './login/login.component'; import { TabsComponent } from './tabs/tabs.component'; import { RegisterBusinessComponent } from './register-business/register-business.component'; import { FormsModule } from '@angular/forms'; +import { EServicesComponent } from './e-services/e-services.component'; @NgModule({ declarations: [ AppComponent, LoginComponent, TabsComponent, - RegisterBusinessComponent + RegisterBusinessComponent, + EServicesComponent ], imports: [ BrowserModule, diff --git a/src/app/e-services/e-services.component.html b/src/app/e-services/e-services.component.html new file mode 100644 index 0000000..c345322 --- /dev/null +++ b/src/app/e-services/e-services.component.html @@ -0,0 +1,58 @@ +
+

+ E-Services +

+
+ +
+

Sole Proprietership & Partnership

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ad deleniti, adipisci doloribus maxime cum voluptatibus ea, ratione at odit ab modi nihil ipsam? Odit cum ullam harum. Voluptatem, fugiat vel.

+
+ + +
+
+
S/N
+
E-Services
+
Fees (₹)
+
Actions
+
+ + +
\ No newline at end of file diff --git a/src/app/e-services/e-services.component.scss b/src/app/e-services/e-services.component.scss new file mode 100644 index 0000000..6c7c182 --- /dev/null +++ b/src/app/e-services/e-services.component.scss @@ -0,0 +1,115 @@ +.page-heading { + text-align: center; + line-height: 1.5; + margin: 3rem auto; + + h1 { + font-size: 3rem; + color: var(--dark-grey); + filter: brightness(80%); + font-weight: 300; + letter-spacing: 0.5px; + margin-bottom: 1.5rem; + } + + p { + font-size: 1.4rem; + color: var(--dark-grey); + width: 50%; + margin: 0 auto; + } +} + +.table { + margin: 4rem auto; + width: calc(100% - 4rem); + border-radius: 1rem; + overflow: auto; + border: 2px solid var(--border-grey); + min-height: 10rem; + + header { + background: linear-gradient(90deg, var(--secondary) 0%, var(--primary)); + color: white; + font-size: 1.6rem; + display: flex; + align-items: center; + justify-content: flex-start; + text-align: center; + height: 5.5rem; + font-weight: 300; + letter-spacing: 0.5px; + } + + .cell { + &:nth-child(1) { + width: 10%; + } + &:nth-child(2) { + text-align: left; + width: calc(90% - 30rem); + } + &:nth-child(3) { + width: 10rem; + } + &:nth-child(4) { + width: 20rem; + } + } + + ul { + list-style: none; + } + + li { + display: flex; + align-items: flex-start; + justify-content: flex-start; + text-align: center; + padding: 2rem 0; + + &:nth-child(even) { + background-color: var(--border-grey); + } + + .cell { + font-size: 1.4rem; + color: var(--dark-grey); + line-height: 1.7; + + &:nth-child(1) { + margin-top: 1rem; + font-weight: 500; + } + + &:nth-child(3) { + font-size: 1.6rem; + margin-top: 1rem; + letter-spacing: 0.5px; + } + + &:nth-child(4) { + align-self: center; + } + + h5 { + font-weight: 500; + filter: brightness(80%); + font-size: 1.6rem; + } + + button { + background-color: var(--highlight); + font-size: 1.5rem; + letter-spacing: 0.5px; + color: white; + border-radius: 4rem; + height: 4rem; + width: 90%; + display: block; + margin: 0 auto; + border: 0px; + } + } + } +} \ No newline at end of file diff --git a/src/app/e-services/e-services.component.spec.ts b/src/app/e-services/e-services.component.spec.ts new file mode 100644 index 0000000..b05cf97 --- /dev/null +++ b/src/app/e-services/e-services.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { EServicesComponent } from './e-services.component'; + +describe('EServicesComponent', () => { + let component: EServicesComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ EServicesComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(EServicesComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src/app/e-services/e-services.component.ts b/src/app/e-services/e-services.component.ts new file mode 100644 index 0000000..093d6d8 --- /dev/null +++ b/src/app/e-services/e-services.component.ts @@ -0,0 +1,15 @@ +import { Component, OnInit } from '@angular/core'; + +@Component({ + selector: 'app-e-services', + templateUrl: './e-services.component.html', + styleUrls: ['./e-services.component.scss'] +}) +export class EServicesComponent implements OnInit { + + constructor() { } + + ngOnInit(): void { + } + +} diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 9158042..509b2e4 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -1,4 +1,4 @@ -
+

Business Name Application

diff --git a/src/app/register-business/register-business.component.scss b/src/app/register-business/register-business.component.scss index c9f671c..31ae967 100644 --- a/src/app/register-business/register-business.component.scss +++ b/src/app/register-business/register-business.component.scss @@ -1,26 +1,3 @@ -header { - display: flex; - align-items: center; - justify-content: flex-start; - padding: 0 2rem; - - &::after { - content: ''; - display: block; - flex-grow: 1; - height: 2px; - background-color: var(--border-grey); - opacity: 0.7; - margin-left: 2rem; - } - - h2 { - font-size: 2.4rem; - color: var(--primary); - font-weight: 400; - } -} - .search-input-container { width: 60%; margin: 0 auto; diff --git a/src/app/tabs/tabs.component.html b/src/app/tabs/tabs.component.html index 3828d77..85a1af7 100644 --- a/src/app/tabs/tabs.component.html +++ b/src/app/tabs/tabs.component.html @@ -2,6 +2,10 @@ + +
@@ -16,21 +20,6 @@ -
- - - - -
-
\ No newline at end of file diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index e43534a..bee6d48 100644 --- a/src/app/tabs/tabs.component.scss +++ b/src/app/tabs/tabs.component.scss @@ -85,47 +85,9 @@ $header-height: 10rem; } } -$tabs-width: 7rem; -$tabs-offset: 20px; - -.tabs { - position: fixed; - height: calc(100% - #{$header-height} - 20px); - top: $header-height; - left: $tabs-offset; - background-color: var(--primary); - border-radius: $tabs-width; - width: $tabs-width; - overflow: hidden; - display: flex; - align-items: center; - flex-direction: column; - - button { - display: block; - width: 100%; - background-color: transparent; - border: 0px; - margin: 2.5rem 0; - - &:last-child { - margin-top: auto; - } - - img { - width: 1.8rem; - } - - &.active { - img { - opacity: 0.6; - } - } - } -} - .page { height: calc(100vh - #{$header-height}); + margin: 0 auto; overflow: auto; - margin-left: calc(#{$tabs-width} + #{$tabs-offset}); + width: calc(100% - 4rem); } \ No newline at end of file diff --git a/src/assets/icons/services.svg b/src/assets/icons/services.svg new file mode 100644 index 0000000..f462d29 --- /dev/null +++ b/src/assets/icons/services.svg @@ -0,0 +1 @@ +ionicons-v5-o \ No newline at end of file diff --git a/src/styles.scss b/src/styles.scss index 5824c20..743617e 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -23,4 +23,28 @@ button, a { --border-grey: #e8e8e8; --error: #d07a7a; --success: #88b749; +} + + +.tab-header { + display: flex; + align-items: center; + justify-content: flex-start; + padding: 0 2rem; + + &::after { + content: ''; + display: block; + flex-grow: 1; + height: 2px; + background-color: var(--border-grey); + opacity: 0.7; + margin-left: 2rem; + } + + h2 { + font-size: 2.4rem; + color: var(--primary); + font-weight: 400; + } } \ No newline at end of file From 94129e3bf71a15e1262e4ed76ba7ac0ff0c33ec8 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 4 Nov 2021 20:52:24 +0530 Subject: [PATCH 2/3] Nav bar styles changes --- src/app/tabs/tabs.component.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/src/app/tabs/tabs.component.scss b/src/app/tabs/tabs.component.scss index bee6d48..b7e1a95 100644 --- a/src/app/tabs/tabs.component.scss +++ b/src/app/tabs/tabs.component.scss @@ -17,6 +17,23 @@ $header-height: 10rem; } } + nav { + margin: 0 2rem; + display: flex; + align-items: center; + justify-content: flex-start; + + a { + font-size: 1.6rem; + letter-spacing: 0.5px; + color: var(--dark-grey); + + &:hover { + text-decoration: underline; + } + } + } + .search-input { position: relative; margin-left: auto; From 1e1133706e6116f6076f88b5983804301b731415 Mon Sep 17 00:00:00 2001 From: kj1352 Date: Thu, 4 Nov 2021 20:53:25 +0530 Subject: [PATCH 3/3] Removed unwanted connection in register --- src/app/register-business/register-business.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/register-business/register-business.component.html b/src/app/register-business/register-business.component.html index 509b2e4..f8d510d 100644 --- a/src/app/register-business/register-business.component.html +++ b/src/app/register-business/register-business.component.html @@ -102,7 +102,7 @@

-