UI design by suren
This commit is contained in:
sriram-at-840620226347
parent
6de45ac218
commit
071adc8401
@ -40,6 +40,9 @@ import { ProjectDetailComponent } from './components/project-detail/project-deta
|
||||
import {SlideshowModule} from 'ng-simple-slideshow';
|
||||
import { FooterComponent } from './components/footer/footer.component'
|
||||
import { ContributeComponent } from './components/contribute/contribute.component';
|
||||
import { ProjectsComponent } from './components/projects/projects.component';
|
||||
import { PaymentComponent } from './components/payment/payment.component';
|
||||
import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component';
|
||||
// import { AddEventModule } from './add-event.module';
|
||||
|
||||
export function HttpLoaderFactory(http: HttpClient) {
|
||||
@ -61,7 +64,10 @@ const DEFAULT_PERFECT_SCROLLBAR_CONFIG: PerfectScrollbarConfigInterface = {
|
||||
AuthLayoutComponent,
|
||||
// ProjectDetailComponent,
|
||||
FooterComponent,
|
||||
ContributeComponent
|
||||
ContributeComponent,
|
||||
ProjectsComponent,
|
||||
PaymentComponent,
|
||||
PaymentConfirmationComponent
|
||||
// ProjectListComponent
|
||||
],
|
||||
imports: [
|
||||
|
||||
@ -4,6 +4,9 @@ import { AdminLayoutComponent } from './layouts/admin/admin-layout.component';
|
||||
import { AuthLayoutComponent } from './layouts/auth/auth-layout.component';
|
||||
import { ProjectDetailComponent } from './components/project-detail/project-detail.component';
|
||||
import { ContributeComponent } from './components/contribute/contribute.component';
|
||||
import { ProjectsComponent } from './components/projects/projects.component';
|
||||
import { PaymentComponent } from './components/payment/payment.component';
|
||||
import { PaymentConfirmationComponent } from './components/payment-confirmation/payment-confirmation.component';
|
||||
|
||||
export const AppRoutes: Routes = [{
|
||||
path: '',
|
||||
@ -18,9 +21,23 @@ export const AppRoutes: Routes = [{
|
||||
},
|
||||
{path : 'contribute',
|
||||
// loadChildren :()=>import('./dashboard/dashboard.module').then(m=>m.)
|
||||
component:ContributeComponent}
|
||||
component:ContributeComponent
|
||||
},
|
||||
{
|
||||
path : 'projects',
|
||||
component:ProjectsComponent
|
||||
},
|
||||
{
|
||||
path : 'payment',
|
||||
component:PaymentComponent
|
||||
},
|
||||
{
|
||||
path : 'paymentconfirmation',
|
||||
component:PaymentConfirmationComponent
|
||||
}
|
||||
]
|
||||
}, {
|
||||
},
|
||||
{
|
||||
path: '',
|
||||
component: AuthLayoutComponent,
|
||||
children: [{
|
||||
|
||||
@ -0,0 +1,44 @@
|
||||
<mat-card>
|
||||
<mat-card-title><h5 class="mt-0">Review and Pay</h5></mat-card-title>
|
||||
<hr><br/>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row wrap">
|
||||
<div class="pt-2" fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<h1>Thank You</h1><br>
|
||||
<!-- <p>We have received confirmation of your payment as detailed below</p> -->
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap">
|
||||
<div class="pt-2" fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<!-- <h1>Thank You</h1><br> -->
|
||||
<p>We have received confirmation of your payment as detailed below</p>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center">
|
||||
<div fxLayoutAlign="end center" fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="40.33" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33" class="m-gap p-gap">
|
||||
<label class="post-profile-head">Contribution Amount</label>
|
||||
</div>
|
||||
<div class="pl-2"s fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33" class="m-gap p-gap">
|
||||
<mat-form-field appearance="outline" style="width: 40%;text-align: center;">
|
||||
<input matInput type="number" placeholder="Amount" value="72000">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap" fxLayoutAlign="center">
|
||||
<div fxLayoutAlign="end center" fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="40.33" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33">
|
||||
<label class="post-profile-head">Contribution Towards :</label>
|
||||
</div>
|
||||
<div class="pl-2" fxFlex.sm="40.33" fxFlex.xs="100" fxFlex.sm="40.33" fxFlex.md="40.33" fxFlex.lg="40.33" fxFlex.xl="40.33">
|
||||
<p>Building fund for Govt Girls Hr Sec School,<br> Nellikuppam, Cuddalore</p>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap">
|
||||
<div class="pt-2" fxLayoutAlign="center" fxFlex.sm="100" fxFlex.xs="100" fxFlex.sm="20" fxFlex.md="100" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<button type="button" class="UserActions-editButton edit-button EdgeButton EdgeButton--tertiary" data-scribe-element="profile_edit_button">
|
||||
<span class="button-text">Print Receipt</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PaymentConfirmationComponent } from './payment-confirmation.component';
|
||||
|
||||
describe('PaymentConfirmationComponent', () => {
|
||||
let component: PaymentConfirmationComponent;
|
||||
let fixture: ComponentFixture<PaymentConfirmationComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PaymentConfirmationComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PaymentConfirmationComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,15 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment-confirmation',
|
||||
templateUrl: './payment-confirmation.component.html',
|
||||
styleUrls: ['./payment-confirmation.component.scss']
|
||||
})
|
||||
export class PaymentConfirmationComponent implements OnInit {
|
||||
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
96
ng8-seed/src/app/components/payment/payment.component.html
Normal file
96
ng8-seed/src/app/components/payment/payment.component.html
Normal file
@ -0,0 +1,96 @@
|
||||
<mat-card>
|
||||
<mat-card-title><h5 class="mt-0">Review and Pay</h5></mat-card-title>
|
||||
<hr><br/>
|
||||
<mat-card-content>
|
||||
<div fxLayout="row wrap">
|
||||
<div fxLayoutAlign="end center" fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
|
||||
<label class="post-profile-head">Contribution Amount</label>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33" class="m-gap p-gap">
|
||||
<mat-form-field appearance="outline" style="width: 50%;text-align: center;">
|
||||
<input matInput type="number" placeholder="Amount">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<div fxLayout="row wrap">
|
||||
<div fxLayoutAlign="end center" fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
|
||||
<label class="post-profile-head">Contribution Towards :</label>
|
||||
</div>
|
||||
<div class="pl-2" fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="33.33" fxFlex.lg="33.33" fxFlex.xl="33.33">
|
||||
<p>Building fund for Govt Girls Hr Sec School, Nellikuppam, Cuddalore</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<mat-card>
|
||||
<mat-card-title><h5 class="mt-0">Choose a Payment Option</h5></mat-card-title>
|
||||
<hr><br/>
|
||||
<mat-tab-group class="mt-2 p-2">
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Cheque</ng-template>
|
||||
<mat-card-content>
|
||||
<form #form="ngForm">
|
||||
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Bank Transfer</ng-template>
|
||||
<mat-card-content>
|
||||
<form #form="ngForm">
|
||||
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Credit/Debit Cards</ng-template>
|
||||
<mat-card-content>
|
||||
<form #form="ngForm">
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Card Holder Name" type="text" name="name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="CVV" type="text" name="name" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Card Number" type="text" name="cname" required>
|
||||
</mat-form-field>
|
||||
<mat-form-field style="width: 100%">
|
||||
<input matInput placeholder="Expiration Date: 01/16" type="text" name="ctry" required>
|
||||
</mat-form-field>
|
||||
<button class="mat-green" mat-raised-button>Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>Wallets</ng-template>
|
||||
<mat-card-content>
|
||||
<form #form="ngForm">
|
||||
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<mat-tab>
|
||||
<ng-template mat-tab-label>UPI</ng-template>
|
||||
<mat-card-content>
|
||||
<form #form="ngForm">
|
||||
|
||||
</form>
|
||||
</mat-card-content>
|
||||
</mat-tab>
|
||||
<!-- <mat-tab>
|
||||
<ng-template mat-tab-label>Paypal</ng-template>
|
||||
<h6><strong>Paypal</strong></h6>
|
||||
<mat-card-content>
|
||||
<p>Pay via PayPal; you can pay with your credit card if you don’t have a PayPal account.</p>
|
||||
<button class="mat-green" mat-raised-button>Proceed To Paypal</button>
|
||||
</mat-card-content>
|
||||
</mat-tab> -->
|
||||
</mat-tab-group>
|
||||
<div class="pt-1" style="text-align: right;">
|
||||
<button mat-raised-button color="primary" class="mr-1 mb-1">Complete Payment</button>
|
||||
</div>
|
||||
</mat-card>
|
||||
175
ng8-seed/src/app/components/payment/payment.component.scss
Normal file
175
ng8-seed/src/app/components/payment/payment.component.scss
Normal file
@ -0,0 +1,175 @@
|
||||
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
|
||||
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
|
||||
.p-list-main {
|
||||
background: white;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
overflow: hidden !important;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
box-shadow: $base-card-box-shadow;
|
||||
transform: scale(0.95);
|
||||
transition: box-shadow 0.5s, transform 0.5s;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.p-list {
|
||||
position: relative;
|
||||
.top {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
|
||||
-webkit-background-size: 100%;
|
||||
-moz-background-size: 100%;
|
||||
-o-background-size: 100%;
|
||||
background-size: 100%;
|
||||
}
|
||||
.bottom {
|
||||
width: 200%;
|
||||
height: 20%;
|
||||
transition: transform 0.5s;
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background: #f4f4f4;
|
||||
position: relative;
|
||||
float: left;
|
||||
.details {
|
||||
padding: 20px;
|
||||
float: left;
|
||||
width: calc(70% - 40px);
|
||||
}
|
||||
.buy {
|
||||
float: right;
|
||||
width: calc(30% - 2px);
|
||||
height: 100%;
|
||||
transition: background 0.5s;
|
||||
i {
|
||||
font-size: 30px;
|
||||
padding: 30px;
|
||||
color: #254053;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
&:hover i {
|
||||
transform: translateY(5px);
|
||||
color: #00394B;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 50%;
|
||||
background: #A6CDDE;
|
||||
color: white;
|
||||
float: right;
|
||||
height: 200%;
|
||||
overflow: hidden;
|
||||
.details {
|
||||
padding: 20px;
|
||||
float: right;
|
||||
width: calc(70% - 40px);
|
||||
}
|
||||
.done {
|
||||
width: calc(30% - 2px);
|
||||
float: left;
|
||||
transition: transform 0.5s;
|
||||
border-right: solid thin rgba(255, 255, 255, 0.3);
|
||||
height: 50%;
|
||||
i {
|
||||
font-size: 30px;
|
||||
padding: 30px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.remove {
|
||||
width: calc(30% - 1px);
|
||||
clear: both;
|
||||
border-right: solid thin rgba(255, 255, 255, 0.3);
|
||||
height: 50%;
|
||||
background: #BC3B59;
|
||||
transition: transform 0.5s, background 0.5s;
|
||||
&:hover {
|
||||
background: #9B2847;
|
||||
}
|
||||
&:hover i {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
i {
|
||||
transition: transform 0.5s;
|
||||
font-size: 30px;
|
||||
padding: 30px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.remove,
|
||||
.done {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.inside {
|
||||
z-index: 9;
|
||||
background: $product-bg-color-hover;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: absolute;
|
||||
top: -70px;
|
||||
right: -70px;
|
||||
border-radius: 0px 0px 200px 200px;
|
||||
transition: all 0.5s, border-radius 2s, top 1s;
|
||||
overflow: hidden;
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 85px;
|
||||
top: 85px;
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
.icon {
|
||||
opacity: 0;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
.contents {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.contents {
|
||||
padding: 5%;
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transform: translateY(-200%);
|
||||
transition: opacity 0.2s, transform 0.8s;
|
||||
table {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
h1,
|
||||
p,
|
||||
table {
|
||||
color: white;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { PaymentComponent } from './payment.component';
|
||||
|
||||
describe('PaymentComponent', () => {
|
||||
let component: PaymentComponent;
|
||||
let fixture: ComponentFixture<PaymentComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ PaymentComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(PaymentComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
47
ng8-seed/src/app/components/payment/payment.component.ts
Normal file
47
ng8-seed/src/app/components/payment/payment.component.ts
Normal file
@ -0,0 +1,47 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-payment',
|
||||
templateUrl: './payment.component.html',
|
||||
styleUrls: ['./payment.component.scss']
|
||||
})
|
||||
export class PaymentComponent implements OnInit {
|
||||
|
||||
isRequired = false;
|
||||
isDisabled = false;
|
||||
currentDrink: string;
|
||||
|
||||
drinks = [{
|
||||
value: 'coke-0',
|
||||
viewValue: 'Coke'
|
||||
}, {
|
||||
value: 'sprite-1',
|
||||
viewValue: 'Sprite'
|
||||
}, {
|
||||
value: 'water-2',
|
||||
viewValue: 'Water'
|
||||
}, {
|
||||
value: 'pepper-3',
|
||||
viewValue: 'Dr. Pepper'
|
||||
}, {
|
||||
value: 'coffee-4',
|
||||
viewValue: 'Coffee'
|
||||
}, {
|
||||
value: 'tea-5',
|
||||
viewValue: 'Tea'
|
||||
}, {
|
||||
value: 'juice-6',
|
||||
viewValue: 'Orange juice'
|
||||
}, {
|
||||
value: 'wine-7',
|
||||
viewValue: 'Wine'
|
||||
}, {
|
||||
value: 'milk-8',
|
||||
viewValue: 'Milk'
|
||||
}];
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
|
||||
}
|
||||
448
ng8-seed/src/app/components/projects/projects.component.html
Normal file
448
ng8-seed/src/app/components/projects/projects.component.html
Normal file
@ -0,0 +1,448 @@
|
||||
<!--starts-->
|
||||
<div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0">
|
||||
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="1000" fxFlex.xl="40"> -->
|
||||
<mat-card class="p-2" fxFlex="75%" fxFlex.xs="100" fxFlex.sm="100">
|
||||
<mat-card-title><h5 class="mt-0">Projects</h5></mat-card-title>
|
||||
<hr>
|
||||
<form method="post">
|
||||
<div fxLayout="row" fxLayoutAlign="start center" class="mb-2 pt-1">
|
||||
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select placeholder="Select District" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
|
||||
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
|
||||
{{ drink.viewValue }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="primary" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select placeholder="Select Block" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
|
||||
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
|
||||
{{ drink.viewValue }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="accent" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select placeholder="Select Schools" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
|
||||
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
|
||||
{{ drink.viewValue }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs" style="width: 100%;">
|
||||
<mat-select placeholder="Select Category" [(ngModel)]="currentDrink" [required]="isRequired" [disabled]="isDisabled" #drinkControl="ngModel">
|
||||
<mat-option *ngFor="let drink of drinks" [value]="drink.value" [disabled]="drink.disabled">
|
||||
{{ drink.viewValue }}
|
||||
</mat-option>
|
||||
</mat-select>
|
||||
</mat-form-field>
|
||||
</div>
|
||||
|
||||
<div fxLayout="row wrap">
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/Back.jpg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p>Thiruvannamalai</p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Purpose</th>
|
||||
<th>Need</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Building Fund</td>
|
||||
<td>Urgent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Estimation</th>
|
||||
<th>Collected</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.50L</th>
|
||||
<th>50,000</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/donate.jpg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p>Vellore</p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">pageview</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Purpose</th>
|
||||
<th>Need</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Building Fund</td>
|
||||
<td>Urgent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Estimation</th>
|
||||
<th>Collected</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.50L</th>
|
||||
<th>50,000</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/img1.jpeg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p>Salem</p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Purpose</th>
|
||||
<th>Need</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Building Fund</td>
|
||||
<td>Urgent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Estimation</th>
|
||||
<th>Collected</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.50L</th>
|
||||
<th>50,000</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/img2.jpeg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p>Pallavaram,Chennai</p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Purpose</th>
|
||||
<th>Need</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Building Fund</td>
|
||||
<td>Urgent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Estimation</th>
|
||||
<th>Collected</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.50L</th>
|
||||
<th>50,000</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/img3.jpg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p>Ramanathapuram</p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Purpose</th>
|
||||
<th>Need</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Building Fund</td>
|
||||
<td>Urgent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Estimation</th>
|
||||
<th>Collected</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.50L</th>
|
||||
<th>50,000</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/Back.jpg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p>Nagapattinam</p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Purpose</th>
|
||||
<th>Need</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Building Fund</td>
|
||||
<td>Urgent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Estimation</th>
|
||||
<th>Collected</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.50L</th>
|
||||
<th>50,000</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/img1.jpeg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p></p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Purpose</th>
|
||||
<th>Need</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Building Fund</td>
|
||||
<td>Urgent</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Estimation</th>
|
||||
<th>Collected</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>1.50L</th>
|
||||
<th>50,000</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap">
|
||||
<div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/donate.jpg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p></p>
|
||||
</div>
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
</div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Width</th>
|
||||
<th>Height</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3000mm</td>
|
||||
<td>4000mm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Custuert</th>
|
||||
<th>cutaeyw</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>45</th>
|
||||
<th>29901</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div fxFlex.sm="33.33" fxFlex.xs="100" fxFlex.sm="50" fxFlex.md="23.33" fxFlex.lg="23.33" fxFlex.xl="23.33" class="m-gap p-gap"> -->
|
||||
<!-- <div class="p-list-main mb-2">
|
||||
<div class="p-list">
|
||||
<div class="top"><img src="assets/images/csr-img/img2.jpeg" alt=""></div>
|
||||
<div class="bottom">
|
||||
<div class="left">
|
||||
<div class="details">
|
||||
<h5>Govt Higher Secondary school</h5>
|
||||
<p></p>
|
||||
</div> -->
|
||||
<!-- <div class="buy"><i class="material-icons">add_shopping_cart</i></div> -->
|
||||
<!-- </div>
|
||||
</div>
|
||||
<div class="inside">
|
||||
<div class="icon"><i class="material-icons">info_outline</i></div>
|
||||
<div class="contents">
|
||||
<table>
|
||||
<tr>
|
||||
<th>Width</th>
|
||||
<th>Height</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>3000mm</td>
|
||||
<td>4000mm</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>Custuert</th>
|
||||
<th>cutaeyw</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th>45</th>
|
||||
<th>29901</th>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</form>
|
||||
<!-- <div class="clearfix order-total">
|
||||
<div class="calculated-shipping">
|
||||
<h4>Cart Totals</h4>
|
||||
<table class="table-responsive" cellspacing="0">
|
||||
<tr class="cart-subtotal">
|
||||
<th>Subtotal</th>
|
||||
<td><span class="amount"><span class="currency-symbol">$</span>167.00</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="order-total">
|
||||
<th>Total</th>
|
||||
<td><strong><span class="amount"><span class="currency-symbol">$</span>167.00</span></strong> </td>
|
||||
</tr>
|
||||
</table>
|
||||
<div class="order-checkout">
|
||||
<button mat-raised-button color="primary" class="mr-1">Checkout</button>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
|
||||
</mat-card>
|
||||
|
||||
<!-- <div fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="20" fxFlex.xl="40"> -->
|
||||
<mat-card class="support_mat" fxFlex="25%" fxFlex.xs="100" fxFlex.sm="100px">
|
||||
<mat-card-header>
|
||||
<mat-card-title>
|
||||
<h5>Make a contribute now</h5>
|
||||
</mat-card-title>
|
||||
</mat-card-header>
|
||||
<mat-card-content>
|
||||
<div fxLayout="column" fxLayoutAlign="start stretch">
|
||||
|
||||
<div fxLayout fxLayout="row" fxLayout.xs="column" fxLayoutGap.xs="0">
|
||||
<div class="pl-3" fxFlex="100%" fxFlex.xs="100" fxFlex.sm="100" fxFlex.md="40" fxFlex.lg="100" fxFlex.xl="100">
|
||||
<mat-form-field appearance="outline" style="width: 70%;text-align: center;">
|
||||
<input matInput type="number" placeholder="Amount">
|
||||
</mat-form-field>
|
||||
</div>
|
||||
</div>
|
||||
<mat-radio-button name="group1" class="pb-1">State Fund</mat-radio-button>
|
||||
<mat-radio-button name="group1" class="pb-1">District Fund</mat-radio-button>
|
||||
<mat-radio-button name="group1" class="pb-1">School Common Fund</mat-radio-button>
|
||||
<mat-radio-button name="group1" class="pb-1">Specfic Purpose</mat-radio-button>
|
||||
<mat-form-field dividerColor="warn" class="ml-xs mr-xs pb-1" style="width: 100%;">
|
||||
<textarea matInput placeholder="Remarks" value="Some Text ..."></textarea>
|
||||
</mat-form-field>
|
||||
<button class="mat-green" mat-raised-button>Proceed for Payment</button>
|
||||
</div>
|
||||
</mat-card-content>
|
||||
</mat-card>
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<h5>Ⓒ TN Schools, All rights reserved</h5>
|
||||
</footer>
|
||||
175
ng8-seed/src/app/components/projects/projects.component.scss
Normal file
175
ng8-seed/src/app/components/projects/projects.component.scss
Normal file
@ -0,0 +1,175 @@
|
||||
$base-card-box-shadow:1.5px 2.6px 24px 0 rgba(0, 35, 136, 0.08) !important;
|
||||
$product-bg-color-hover: rgba(103, 58, 183, 0.7);
|
||||
.p-list-main {
|
||||
background: white;
|
||||
margin: auto;
|
||||
position: relative;
|
||||
overflow: hidden !important;
|
||||
border-radius: 10px 10px 10px 10px;
|
||||
box-shadow: $base-card-box-shadow;
|
||||
transform: scale(0.95);
|
||||
transition: box-shadow 0.5s, transform 0.5s;
|
||||
&:hover {
|
||||
transform: scale(1);
|
||||
box-shadow: 5px 20px 30px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.p-list {
|
||||
position: relative;
|
||||
.top {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
// background: url(https://s-media-cache-ak0.pinimg.com/736x/49/80/6f/49806f3f1c7483093855ebca1b8ae2c4.jpg) no-repeat center center;
|
||||
-webkit-background-size: 100%;
|
||||
-moz-background-size: 100%;
|
||||
-o-background-size: 100%;
|
||||
background-size: 100%;
|
||||
}
|
||||
.bottom {
|
||||
width: 200%;
|
||||
height: 20%;
|
||||
transition: transform 0.5s;
|
||||
h1 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.left {
|
||||
height: 100%;
|
||||
width: 50%;
|
||||
background: #f4f4f4;
|
||||
position: relative;
|
||||
float: left;
|
||||
.details {
|
||||
padding: 20px;
|
||||
float: left;
|
||||
width: calc(70% - 40px);
|
||||
}
|
||||
.buy {
|
||||
float: right;
|
||||
width: calc(30% - 2px);
|
||||
height: 100%;
|
||||
transition: background 0.5s;
|
||||
i {
|
||||
font-size: 30px;
|
||||
padding: 30px;
|
||||
color: #254053;
|
||||
transition: transform 0.5s;
|
||||
}
|
||||
&:hover i {
|
||||
transform: translateY(5px);
|
||||
color: #00394B;
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 50%;
|
||||
background: #A6CDDE;
|
||||
color: white;
|
||||
float: right;
|
||||
height: 200%;
|
||||
overflow: hidden;
|
||||
.details {
|
||||
padding: 20px;
|
||||
float: right;
|
||||
width: calc(70% - 40px);
|
||||
}
|
||||
.done {
|
||||
width: calc(30% - 2px);
|
||||
float: left;
|
||||
transition: transform 0.5s;
|
||||
border-right: solid thin rgba(255, 255, 255, 0.3);
|
||||
height: 50%;
|
||||
i {
|
||||
font-size: 30px;
|
||||
padding: 30px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
.remove {
|
||||
width: calc(30% - 1px);
|
||||
clear: both;
|
||||
border-right: solid thin rgba(255, 255, 255, 0.3);
|
||||
height: 50%;
|
||||
background: #BC3B59;
|
||||
transition: transform 0.5s, background 0.5s;
|
||||
&:hover {
|
||||
background: #9B2847;
|
||||
}
|
||||
&:hover i {
|
||||
transform: translateY(5px);
|
||||
}
|
||||
i {
|
||||
transition: transform 0.5s;
|
||||
font-size: 30px;
|
||||
padding: 30px;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
.remove,
|
||||
.done {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.inside {
|
||||
z-index: 9;
|
||||
background: $product-bg-color-hover;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
position: absolute;
|
||||
top: -70px;
|
||||
right: -70px;
|
||||
border-radius: 0px 0px 200px 200px;
|
||||
transition: all 0.5s, border-radius 2s, top 1s;
|
||||
overflow: hidden;
|
||||
.icon {
|
||||
position: absolute;
|
||||
right: 85px;
|
||||
top: 85px;
|
||||
color: white;
|
||||
opacity: 1;
|
||||
}
|
||||
&:hover {
|
||||
width: 100%;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border-radius: 0;
|
||||
height: 100%;
|
||||
.icon {
|
||||
opacity: 0;
|
||||
right: 15px;
|
||||
top: 15px;
|
||||
}
|
||||
.contents {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
.contents {
|
||||
padding: 5%;
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
transform: translateY(-200%);
|
||||
transition: opacity 0.2s, transform 0.8s;
|
||||
table {
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
}
|
||||
h1,
|
||||
p,
|
||||
table {
|
||||
color: white;
|
||||
}
|
||||
p {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,25 @@
|
||||
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { ProjectsComponent } from './projects.component';
|
||||
|
||||
describe('ProjectsComponent', () => {
|
||||
let component: ProjectsComponent;
|
||||
let fixture: ComponentFixture<ProjectsComponent>;
|
||||
|
||||
beforeEach(async(() => {
|
||||
TestBed.configureTestingModule({
|
||||
declarations: [ ProjectsComponent ]
|
||||
})
|
||||
.compileComponents();
|
||||
}));
|
||||
|
||||
beforeEach(() => {
|
||||
fixture = TestBed.createComponent(ProjectsComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
45
ng8-seed/src/app/components/projects/projects.component.ts
Normal file
45
ng8-seed/src/app/components/projects/projects.component.ts
Normal file
@ -0,0 +1,45 @@
|
||||
import { Component, OnInit } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-projects',
|
||||
templateUrl: './projects.component.html',
|
||||
styleUrls: ['./projects.component.scss']
|
||||
})
|
||||
export class ProjectsComponent implements OnInit {
|
||||
isRequired = false;
|
||||
isDisabled = false;
|
||||
currentDrink: string;
|
||||
|
||||
drinks = [{
|
||||
value: 'coke-0',
|
||||
viewValue: 'Coke'
|
||||
}, {
|
||||
value: 'sprite-1',
|
||||
viewValue: 'Sprite'
|
||||
}, {
|
||||
value: 'water-2',
|
||||
viewValue: 'Water'
|
||||
}, {
|
||||
value: 'pepper-3',
|
||||
viewValue: 'Dr. Pepper'
|
||||
}, {
|
||||
value: 'coffee-4',
|
||||
viewValue: 'Coffee'
|
||||
}, {
|
||||
value: 'tea-5',
|
||||
viewValue: 'Tea'
|
||||
}, {
|
||||
value: 'juice-6',
|
||||
viewValue: 'Orange juice'
|
||||
}, {
|
||||
value: 'wine-7',
|
||||
viewValue: 'Wine'
|
||||
}, {
|
||||
value: 'milk-8',
|
||||
viewValue: 'Milk'
|
||||
}];
|
||||
constructor() { }
|
||||
|
||||
ngOnInit() {
|
||||
}
|
||||
}
|
||||
@ -29,17 +29,29 @@ const HORIZONTALMENUITEMS = [
|
||||
icon: 'home'
|
||||
},
|
||||
{
|
||||
state: 'home',
|
||||
name: 'Projects',
|
||||
type: 'link',
|
||||
icon: 'bookmark'
|
||||
},
|
||||
{
|
||||
state: 'contribute',
|
||||
name: 'Contribute',
|
||||
type: 'link',
|
||||
icon: 'error_outline'
|
||||
state: 'apps',
|
||||
name: 'Components',
|
||||
type: 'sub',
|
||||
icon: 'apps',
|
||||
children: [
|
||||
{state: 'contribute', name: 'Contribute',},
|
||||
{state: 'projects', name: 'Projects',},
|
||||
{state: 'payment', name: 'Payment'},
|
||||
{state: 'paymentconfirmation', name: 'PaymentConfirmation'}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// state: 'projects',
|
||||
// name: 'Projects',
|
||||
// type: 'link',
|
||||
// icon: 'bookmark'
|
||||
// },
|
||||
// {
|
||||
// state: 'contribute',
|
||||
// name: 'Contribute',
|
||||
// type: 'link',
|
||||
// icon: 'error_outline'
|
||||
// },
|
||||
{
|
||||
state: 'authentication',
|
||||
name: 'Login',
|
||||
|
||||
@ -50,7 +50,7 @@ const MENUITEMS : Menu[] = [
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
state: 'home',
|
||||
state: 'projects',
|
||||
name: 'Projects',
|
||||
type: 'link',
|
||||
icon: 'bookmark'
|
||||
@ -61,6 +61,12 @@ const MENUITEMS : Menu[] = [
|
||||
type: 'link',
|
||||
icon: 'error_outline'
|
||||
},
|
||||
{
|
||||
state: 'payment',
|
||||
name: 'Payment',
|
||||
type: 'link',
|
||||
icon: 'error_outline'
|
||||
},
|
||||
{
|
||||
state: 'authentication',
|
||||
name: 'Login',
|
||||
|
||||
Loading…
Reference in New Issue
Block a user