Commit e11319d4 by amalk

initial commit|01--07-2019

parents
# Specifies intentionally untracked files to ignore when using Git
# http://git-scm.com/docs/gitignore
*~
*.sw[mnpcod]
*.log
*.tmp
*.tmp.*
log.txt
*.sublime-project
*.sublime-workspace
.vscode/
npm-debug.log*
.idea/
.ionic/
.sourcemaps/
.sass-cache/
.tmp/
.versions/
coverage/
www/
node_modules/
tmp/
temp/
platforms/
plugins/
plugins/android.json
plugins/ios.json
$RECYCLE.BIN/
.DS_Store
Thumbs.db
UserInterfaceState.xcuserstate
{
"$schema": "./node_modules/@angular-devkit/core/src/workspace/workspace-schema.json",
"version": 1,
"defaultProject": "app",
"newProjectRoot": "projects",
"projects": {
"app": {
"root": "",
"sourceRoot": "src",
"projectType": "application",
"prefix": "app",
"schematics": {},
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"outputPath": "www",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.app.json",
"assets": [
{
"glob": "**/*",
"input": "src/assets",
"output": "assets"
},
{
"glob": "**/*.svg",
"input": "node_modules/ionicons/dist/ionicons/svg",
"output": "./svg"
}
],
"styles": [
{
"input": "src/theme/variables.scss"
},
{
"input": "src/global.scss"
},
{
"input": "src/app/app.scss"
}
],
"scripts": [],
"es5BrowserSupport": true
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"aot": true,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
}
]
},
"ci": {
"progress": false
}
}
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
},
"ci": {
"progress": false
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "app:build"
}
},
"test": {
"builder": "@angular-devkit/build-angular:karma",
"options": {
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "src/tsconfig.spec.json",
"karmaConfig": "src/karma.conf.js",
"styles": [],
"scripts": [],
"assets": [
{
"glob": "favicon.ico",
"input": "src/",
"output": "/"
},
{
"glob": "**/*",
"input": "src/assets",
"output": "/assets"
}
]
},
"configurations": {
"ci": {
"progress": false,
"watch": false
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": ["src/tsconfig.app.json", "src/tsconfig.spec.json"],
"exclude": ["**/node_modules/**"]
}
},
"ionic-cordova-build": {
"builder": "@ionic/angular-toolkit:cordova-build",
"options": {
"browserTarget": "app:build"
},
"configurations": {
"production": {
"browserTarget": "app:build:production"
}
}
},
"ionic-cordova-serve": {
"builder": "@ionic/angular-toolkit:cordova-serve",
"options": {
"cordovaBuildTarget": "app:ionic-cordova-build",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"cordovaBuildTarget": "app:ionic-cordova-build:production",
"devServerTarget": "app:serve:production"
}
}
}
}
},
"app-e2e": {
"root": "e2e/",
"projectType": "application",
"architect": {
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "app:serve"
},
"configurations": {
"production": {
"devServerTarget": "app:serve:production"
},
"ci": {
"devServerTarget": "app:serve:ci"
}
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": "e2e/tsconfig.e2e.json",
"exclude": ["**/node_modules/**"]
}
}
}
}
},
"cli": {
"defaultCollection": "@ionic/angular-toolkit"
},
"schematics": {
"@ionic/angular-toolkit:component": {
"styleext": "scss"
},
"@ionic/angular-toolkit:page": {
"styleext": "scss"
}
}
}
<?xml version='1.0' encoding='utf-8'?>
<widget id="io.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>MyApp</name>
<description>An awesome Ionic/Cordova app.</description>
<author email="[email protected]" href="http://ionicframework.com/">Ionic Framework Team</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="19" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="3000" />
<platform name="android">
<edit-config file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application" xmlns:android="http://schemas.android.com/apk/res/android">
<application android:networkSecurityConfig="@xml/network_security_config" />
</edit-config>
<resource-file src="resources/android/xml/network_security_config.xml" target="app/src/main/res/xml/network_security_config.xml" />
<allow-intent href="market:*" />
<icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />
<icon density="mdpi" src="resources/android/icon/drawable-mdpi-icon.png" />
<icon density="hdpi" src="resources/android/icon/drawable-hdpi-icon.png" />
<icon density="xhdpi" src="resources/android/icon/drawable-xhdpi-icon.png" />
<icon density="xxhdpi" src="resources/android/icon/drawable-xxhdpi-icon.png" />
<icon density="xxxhdpi" src="resources/android/icon/drawable-xxxhdpi-icon.png" />
<splash density="land-ldpi" src="resources/android/splash/drawable-land-ldpi-screen.png" />
<splash density="land-mdpi" src="resources/android/splash/drawable-land-mdpi-screen.png" />
<splash density="land-hdpi" src="resources/android/splash/drawable-land-hdpi-screen.png" />
<splash density="land-xhdpi" src="resources/android/splash/drawable-land-xhdpi-screen.png" />
<splash density="land-xxhdpi" src="resources/android/splash/drawable-land-xxhdpi-screen.png" />
<splash density="land-xxxhdpi" src="resources/android/splash/drawable-land-xxxhdpi-screen.png" />
<splash density="port-ldpi" src="resources/android/splash/drawable-port-ldpi-screen.png" />
<splash density="port-mdpi" src="resources/android/splash/drawable-port-mdpi-screen.png" />
<splash density="port-hdpi" src="resources/android/splash/drawable-port-hdpi-screen.png" />
<splash density="port-xhdpi" src="resources/android/splash/drawable-port-xhdpi-screen.png" />
<splash density="port-xxhdpi" src="resources/android/splash/drawable-port-xxhdpi-screen.png" />
<splash density="port-xxxhdpi" src="resources/android/splash/drawable-port-xxxhdpi-screen.png" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<icon height="57" src="resources/ios/icon/icon.png" width="57" />
<icon height="114" src="resources/ios/icon/[email protected]" width="114" />
<icon height="40" src="resources/ios/icon/icon-40.png" width="40" />
<icon height="80" src="resources/ios/icon/[email protected]" width="80" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="50" src="resources/ios/icon/icon-50.png" width="50" />
<icon height="100" src="resources/ios/icon/[email protected]" width="100" />
<icon height="60" src="resources/ios/icon/icon-60.png" width="60" />
<icon height="120" src="resources/ios/icon/[email protected]" width="120" />
<icon height="180" src="resources/ios/icon/[email protected]" width="180" />
<icon height="72" src="resources/ios/icon/icon-72.png" width="72" />
<icon height="144" src="resources/ios/icon/[email protected]" width="144" />
<icon height="76" src="resources/ios/icon/icon-76.png" width="76" />
<icon height="152" src="resources/ios/icon/[email protected]" width="152" />
<icon height="167" src="resources/ios/icon/[email protected]" width="167" />
<icon height="29" src="resources/ios/icon/icon-small.png" width="29" />
<icon height="58" src="resources/ios/icon/[email protected]" width="58" />
<icon height="87" src="resources/ios/icon/[email protected]" width="87" />
<icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
<splash height="1136" src="resources/ios/splash/Default-568h@2x~iphone.png" width="640" />
<splash height="1334" src="resources/ios/splash/Default-667h.png" width="750" />
<splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
<splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
<splash height="1536" src="resources/ios/splash/Default-Landscape@2x~ipad.png" width="2048" />
<splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
<splash height="768" src="resources/ios/splash/Default-Landscape~ipad.png" width="1024" />
<splash height="2048" src="resources/ios/splash/Default-Portrait@2x~ipad.png" width="1536" />
<splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
<splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
<splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
<splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
<splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
</platform>
<plugin name="cordova-plugin-whitelist" spec="1.3.3" />
<plugin name="cordova-plugin-statusbar" spec="2.4.2" />
<plugin name="cordova-plugin-device" spec="2.0.2" />
<plugin name="cordova-plugin-splashscreen" spec="5.0.2" />
<plugin name="cordova-plugin-ionic-webview" spec="^4.0.0" />
<plugin name="cordova-plugin-ionic-keyboard" spec="^2.0.5" />
<plugin name="cordova-plugin-geolocation" spec="4.0.1">
<variable name="GEOLOCATION_USAGE_DESCRIPTION" value="To locate you" />
</plugin>
<plugin name="cordova-plugin-googlemaps" spec="2.6.2">
<variable name="API_KEY_FOR_ANDROID" value="AIzaSyA25LMQmwAEoJO-rpSDjXXPSCKsN7zpcEk" />
</plugin>
<engine name="browser" spec="5.0.4" />
<engine name="android" spec="7.1.4" />
</widget>
// Protractor configuration file, see link for more information
// https://github.com/angular/protractor/blob/master/lib/config.ts
const { SpecReporter } = require('jasmine-spec-reporter');
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/**/*.e2e-spec.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
onPrepare() {
require('ts-node').register({
project: require('path').join(__dirname, './tsconfig.e2e.json')
});
jasmine.getEnv().addReporter(new SpecReporter({ spec: { displayStacktrace: true } }));
}
};
import { AppPage } from './app.po';
describe('new App', () => {
let page: AppPage;
beforeEach(() => {
page = new AppPage();
});
describe('default screen', () => {
beforeEach(() => {
page.navigateTo('/home');
});
it('should have a title saying Home', () => {
page.getPageOneTitleText().then(title => {
expect(title).toEqual('Home');
});
});
});
});
import { browser, by, element } from 'protractor';
export class AppPage {
navigateTo(destination) {
return browser.get(destination);
}
getTitle() {
return browser.getTitle();
}
getPageOneTitleText() {
return element(by.tagName('app-home')).element(by.deepCss('ion-title')).getText();
}
}
{
"extends": "../tsconfig.json",
"compilerOptions": {
"outDir": "../out-tsc/app",
"module": "commonjs",
"target": "es5",
"types": [
"jasmine",
"jasminewd2",
"node"
]
}
}
{
"name": "technobeatuser",
"integrations": {
"cordova": {}
},
"type": "angular",
"id": "8df61e6a"
}
This source diff could not be displayed because it is too large. You can view the blob instead.
{
"name": "technobeatuser",
"version": "0.0.1",
"author": "Ionic Framework",
"homepage": "https://ionicframework.com/",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"@angular/animations": "^8.0.0",
"@angular/common": "^7.2.2",
"@angular/core": "^7.2.2",
"@angular/forms": "^7.2.2",
"@angular/http": "^7.2.2",
"@angular/platform-browser": "^7.2.2",
"@angular/platform-browser-dynamic": "^7.2.2",
"@angular/router": "^7.2.2",
"@ionic-native/core": "^5.0.0",
"@ionic-native/geolocation": "^5.0.0",
"@ionic-native/google-maps": "^5.0.0-beta.27",
"@ionic-native/splash-screen": "^5.0.0",
"@ionic-native/status-bar": "^5.0.0",
"@ionic/angular": "^4.1.0",
"@ionic/pro": "2.0.4",
"cordova-android": "7.1.4",
"cordova-browser": "5.0.4",
"cordova-plugin-device": "^2.0.2",
"cordova-plugin-geolocation": "4.0.1",
"cordova-plugin-googlemaps": "2.6.2",
"cordova-plugin-ionic-keyboard": "^2.1.3",
"cordova-plugin-ionic-webview": "^4.1.0",
"cordova-plugin-splashscreen": "^5.0.2",
"cordova-plugin-statusbar": "^2.4.2",
"cordova-plugin-whitelist": "^1.3.3",
"core-js": "^2.5.4",
"ionic4-rating": "^1.0.9",
"ng-starrating": "^1.0.6",
"rxjs": "~6.5.1",
"tslib": "^1.9.0",
"zone.js": "~0.8.29"
},
"devDependencies": {
"@angular-devkit/architect": "~0.13.8",
"@angular-devkit/build-angular": "~0.13.8",
"@angular-devkit/core": "~7.3.8",
"@angular-devkit/schematics": "~7.3.8",
"@angular/cli": "~7.3.8",
"@angular/compiler": "~7.2.2",
"@angular/compiler-cli": "~7.2.2",
"@angular/language-service": "~7.2.2",
"@ionic/angular-toolkit": "~1.5.1",
"@types/node": "~12.0.0",
"@types/jasmine": "~2.8.8",
"@types/jasminewd2": "~2.0.3",
"codelyzer": "~4.5.0",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~8.1.0",
"tslint": "~5.17.0",
"typescript": "~3.1.6"
},
"description": "An Ionic project",
"cordova": {
"plugins": {
"cordova-plugin-googlemaps": {
"API_KEY_FOR_ANDROID": "AIzaSyA25LMQmwAEoJO-rpSDjXXPSCKsN7zpcEk"
},
"cordova-plugin-geolocation": {
"GEOLOCATION_USAGE_DESCRIPTION": "To locate you"
},
"cordova-plugin-whitelist": {},
"cordova-plugin-statusbar": {},
"cordova-plugin-device": {},
"cordova-plugin-splashscreen": {},
"cordova-plugin-ionic-webview": {},
"cordova-plugin-ionic-keyboard": {}
},
"platforms": [
"browser",
"android"
]
}
}
\ No newline at end of file
These are Cordova resources. You can replace icon.png and splash.png and run
`ionic cordova resources` to generate custom icons and splash screens for your
app. See `ionic cordova resources --help` for details.
Cordova reference documentation:
- Icons: https://cordova.apache.org/docs/en/latest/config_ref/images.html
- Splash Screens: https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-splashscreen/
<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
<domain-config cleartextTrafficPermitted="true">
<domain>localhost</domain>
</domain-config>
</network-security-config>
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { AccountsPage } from './accounts.page';
const routes: Routes = [
{
path: '',
component: AccountsPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [AccountsPage]
})
export class AccountsPageModule {}
<ion-header class="app_header">
<ion-menu-toggle>
<button class="nav_btn floatLeft">
<ion-icon name="menu"></ion-icon>
</button>
</ion-menu-toggle>
<div class="nav_title floatLeft">
<h4>Accounts</h4>
</div>
<button class="nav_btn floatRight">
<ion-icon name="logo-buffer"></ion-icon>
</button>
<div class="clear"></div>
</ion-header>
<ion-content>
<div class="accounts_wrapper">
<h3>MY ACCOUNT</h3>
<hr>
<div class="row">
<ion-label position="stacked">User name</ion-label>
<ion-input value="Johnk"></ion-input>
</div>
<div class="row">
<ion-label position="stacked">Full name</ion-label>
<ion-input value="John Kory"></ion-input>
</div>
<div class="row">
<ion-label position="stacked">Address</ion-label>
<ion-input value="Wilsons Estate East Gate California"></ion-input>
</div>
<div class="row">
<ion-label position="stacked">Phone</ion-label>
<ion-input value="+8965 24589"></ion-input>
</div>
<div class="row">
<ion-label position="stacked">Mail</ion-label>
<ion-input value="[email protected]"></ion-input>
</div>
<div class="row">
<ion-button class="signup_btn" expand="block">Edit</ion-button>
</div>
</div>
</ion-content>
.accounts_wrapper{
padding: 20px;
h3{
text-align: center;
color: #004989;
margin: 0px;
font-size: 20px;
font-weight: 600;
}
hr{
border:1px solid #004989;
height:0px;
border-radius: 20px;
width: 130px;
margin-top: 5px;
padding-top: 0px;
margin-bottom: 20px;
}
.row{
margin-bottom: 20px;
ion-label{
color: #004989;
font-size: 12px;
font-weight: 500;
}
ion-input{
border-bottom: 1px solid #a8a8a8;
color: #a8a8a8;
font-weight: 300;
font-size: 18px;
.native-input{
padding: 0px !important;
}
}
}
}
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AccountsPage } from './accounts.page';
describe('AccountsPage', () => {
let component: AccountsPage;
let fixture: ComponentFixture<AccountsPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ AccountsPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(AccountsPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-accounts',
templateUrl: './accounts.page.html',
styleUrls: ['./accounts.page.scss'],
})
export class AccountsPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{
path: '',
redirectTo: 'landing',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './home/home.module#HomePageModule'
},
{
path: 'list',
loadChildren: './list/list.module#ListPageModule'
},
{ path: 'contact',
loadChildren: './contact/contact.module#ContactPageModule'
},
{ path: 'signin',
loadChildren: './signin/signin.module#SigninPageModule'
},
{ path: 'signup',
loadChildren: './signup/signup.module#SignupPageModule'
},
{
path: 'landing',
loadChildren: './landing/landing.module#LandingPageModule'
},
{
path: 'forgot',
loadChildren: './forgot/forgot.module#ForgotPageModule'
},
{ path: 'accounts', loadChildren: './accounts/accounts.module#AccountsPageModule' },
{ path: 'support', loadChildren: './support/support.module#SupportPageModule' },
{ path: 'listdetail', loadChildren: './listdetail/listdetail.module#ListdetailPageModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
<ion-app>
<ion-split-pane>
<ion-menu>
<ion-content>
<div class="sidemenu_wrapper">
<div class="sidemenu_head">
<img src="../assets/imgs/tech-logo-user.png">
</div>
<ul>
<li (click)="goToPage('home')"><ion-icon name="pin"></ion-icon>Set Place</li>
<li (click)="goToPage('list')"><ion-icon name="heart"></ion-icon>Favourite</li>
<li (click)="goToPage('accounts')"><ion-icon name="eye"></ion-icon>Recently Visited</li>
<li (click)="goToPage('accounts')"><ion-icon name="clipboard"></ion-icon>My Reviews</li>
<li (click)= "isToggle()"><ion-icon name="settings"></ion-icon>Services</li>
<ul *ngIf = "toggleOpen">
<li (click)="goToPage('support')"><ion-icon name="headset"></ion-icon>Support</li>
<li><ion-icon name="information-circle"></ion-icon>Info</li>
</ul>
<li (click)="goToPage('accounts')"><ion-icon name="person"></ion-icon>My Account</li>
<li (click)="goToPage('landing')"><ion-icon name="log-out"></ion-icon>Log Out</li>
</ul>
</div>
</ion-content>
</ion-menu>
<ion-router-outlet main></ion-router-outlet>
</ion-split-pane>
</ion-app>
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { TestBed, async } from '@angular/core/testing';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
let statusBarSpy, splashScreenSpy, platformReadySpy, platformSpy;
beforeEach(async(() => {
statusBarSpy = jasmine.createSpyObj('StatusBar', ['styleDefault']);
splashScreenSpy = jasmine.createSpyObj('SplashScreen', ['hide']);
platformReadySpy = Promise.resolve();
platformSpy = jasmine.createSpyObj('Platform', { ready: platformReadySpy });
TestBed.configureTestingModule({
declarations: [AppComponent],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
providers: [
{ provide: StatusBar, useValue: statusBarSpy },
{ provide: SplashScreen, useValue: splashScreenSpy },
{ provide: Platform, useValue: platformSpy },
],
imports: [ RouterTestingModule.withRoutes([])],
}).compileComponents();
}));
it('should create the app', async () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it('should initialize the app', async () => {
TestBed.createComponent(AppComponent);
expect(platformSpy.ready).toHaveBeenCalled();
await platformReadySpy;
expect(statusBarSpy.styleDefault).toHaveBeenCalled();
expect(splashScreenSpy.hide).toHaveBeenCalled();
});
it('should have menu labels', async () => {
const fixture = await TestBed.createComponent(AppComponent);
await fixture.detectChanges();
const app = fixture.nativeElement;
const menuItems = app.querySelectorAll('ion-label');
expect(menuItems.length).toEqual(2);
expect(menuItems[0].textContent).toContain('Home');
expect(menuItems[1].textContent).toContain('List');
});
it('should have urls', async () => {
const fixture = await TestBed.createComponent(AppComponent);
await fixture.detectChanges();
const app = fixture.nativeElement;
const menuItems = app.querySelectorAll('ion-item');
expect(menuItems.length).toEqual(2);
expect(menuItems[0].getAttribute('ng-reflect-router-link')).toEqual('/home');
expect(menuItems[1].getAttribute('ng-reflect-router-link')).toEqual('/list');
});
});
import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';
import { Platform } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-root',
templateUrl: 'app.component.html'
})
export class AppComponent {
toggleOpen = false;
public appPages = [
{
title: 'Home',
url: '/home',
icon: 'home'
},
{
title: 'List',
url: '/list',
icon: 'list'
},
{
title: 'Contact',
url: '/contact',
icon: 'contact'
}
];
constructor(
private platform: Platform,
private splashScreen: SplashScreen,
private statusBar: StatusBar,
public menuCtrl: MenuController,
private router: Router,private route: ActivatedRoute
) {
this.initializeApp();
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
this.menuCtrl.toggle();
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
isToggle(){
this.toggleOpen = !this.toggleOpen;
}
initializeApp() {
this.platform.ready().then(() => {
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouteReuseStrategy } from '@angular/router';
import { IonicModule, IonicRouteStrategy } from '@ionic/angular';
import { SplashScreen } from '@ionic-native/splash-screen/ngx';
import { StatusBar } from '@ionic-native/status-bar/ngx';
import { AppComponent } from './app.component';
import { AppRoutingModule } from './app-routing.module';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import {Geolocation} from '@ionic-native/geolocation/ngx';
import { GoogleMaps } from '@ionic-native/google-maps';
@NgModule({
declarations: [AppComponent],
entryComponents: [],
imports: [
BrowserModule,
IonicModule.forRoot(),
AppRoutingModule,
BrowserAnimationsModule
],
providers: [
StatusBar,
SplashScreen,
Geolocation,
GoogleMaps,
{ provide: RouteReuseStrategy, useClass: IonicRouteStrategy }
],
bootstrap: [AppComponent]
})
export class AppModule {}
/*
Site Name: TECHNOBEAT
URI: http:
Description: This is the theme scss for TECHNOBEAT
Version: 2.0
Author:
Author URI:
Tags:
---------------------------
THEME STYLES
---------------------------
TABLE OF CONTENTS
---------------------------
01. FONTS-N-SIZES
02. FONTS-COLOR
03. THEMES-N-BACKGROUNDS
04. SPACING-N-POSITIONS
05. ALIGMENTS
06. ALERTS-N-MESSAGES
*/
/*-------------------------------
01. FONTS-N-SIZES
--------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i');
@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
* {
font-family: 'Roboto', sans-serif;
-webkit-font-smoothing: antialiased;
}
*::-webkit-scrollbar {
display: none;
}
.no-scroll .scroll-content {
overflow: hidden;
}
a {
text-decoration: none !important;
}
button{
outline: none;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none !important;
margin: 0;
}
html,
body {
font-family: 'Lato', sans-serif !important;
margin:0px;
}
button{
cursor: pointer;
}
/*-------------------------------
02. FONTS-SETTINGS
--------------------------------*/
.text_color_white {
color: #fff !important;
}
.font_size_xs {
font-size: 12px !important;
}
.font_size_sm {
font-size: 14px !important;
}
.font_size_md {
font-size: 16px !important;
}
.font_size_lg {
font-size: 18px !important;
}
.font_size_xl {
font-size: 20px !important;
}
.font_size_vl {
font-size: 35px !important;
}
.font_weight300 {
font-weight: 300 !important;
}
.font_weight400 {
font-weight: 400 !important;
}
.font_weight500 {
font-weight: 500 !important;
}
.font_weight600 {
font-weight: 600 !important;
}
/*-------------------------------
03. THEMES-N-BACKGROUNDS
--------------------------------*/
.theme_background {
background-size: cover !important;
background-position: center !important;
}
.theme_transparent {
background: transparent !important;
}
.theme_white {
background-color: #f7f8fd !important;
}
.theme_off_white {
background-color: #f4f4f4 !important;
}
.theme_dark_transparent {
background-color: rgba(0, 0, 0, 0.6) !important;
}
.theme_white_transparent {
background-color: rgba(243, 243, 243, 0.6) !important;
}
/*-------------------------------
04. SPACING-N-POSITIONS
--------------------------------*/
.width25 {
width: 25% !important;
}
.width50 {
width: 50% !important;
}
.width75 {
width: 75% !important;
}
.widthFull {
width: 100% !important;
}
.widthAuto {
width: auto !important;
}
.height25 {
height: 25% !important;
}
.height50 {
height: 50% !important;
}
.height75 {
width: 75% !important;
}
.heightFull {
height: 100% !important;
}
.heightAuto {
height: auto !important;
}
.p0 {
padding: 0px !important;
}
.pl0 {
padding-left: 0px !important;
}
.pr0 {
padding-right: 0px !important;
}
.pt0 {
padding-top: 0px !important;
}
.pb0 {
padding-bottom: 0px !important;
}
.p10 {
padding: 10px !important;
}
.pt10 {
padding-top: 10px !important;
}
.m0 {
margin: 0px !important;
}
.ml0 {
margin-left: 0px !important;
}
.mr0 {
margin-right: 0px !important;
}
.mt0 {
margin-top: 0px !important;
}
.mb0 {
margin-bottom: 0px !important;
}
.mAuto {
margin: 0 auto !important;
}
.clear {
clear: both !important;
}
.absolute {
position: absolute !important;
}
.relative {
position: relative !important;
}
.fixed {
position: fixed !important;
}
.borderNone {
border: none !important;
}
/*-------------------------------
05. ALIGMENTS
--------------------------------*/
.floatLeft {
float: left !important;
}
.floatRight {
float: right !important;
}
.textLeft {
text-align: left !important;
}
.textRight {
text-align: right !important;
}
.textCenter {
text-align: center !important;
}
.app_header{
background:#004989;
}
.sidemenu_wrapper{
width: 100%;
height:100vh;
.sidemenu_head{
text-align: center;
padding:20px;
border-bottom: 1px solid #f0f2f0;
img{
width:145px;
}
}
ul{
margin:0px;
padding:0px;
li{
border-bottom: 1px solid #f0f2f0;
list-style: none;
color: #004989;
padding: 15px;
background-image: url("../assets/imgs/tech-side-arw.png");
background-position: right 20px top 13px;
background-repeat: no-repeat;
background-size: 10px;
ion-icon{
font-size: 20px;
margin-right:10px;
position: relative;
top: 3px;
}
}
ul{
padding-left:20px;
li{
background-image: none;
}
}
}
}
.nav_btn{
width:50px;
height:50px;
background-color: transparent;
color: #fff;
font-size: 25px;
}
.nav_title{
width:calc(100% - 100px);
color: #fff;
text-align: center;
padding: 5px;
img{
width: 135px;
}
h4{
margin: 0px;
font-weight: 400;
padding: 7px;
}
}
.item-native{
padding-left: 0px !important;
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { ContactPage } from './contact.page';
const routes: Routes = [
{
path: '',
component: ContactPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ContactPage]
})
export class ContactPageModule {}
<ion-header>
<ion-menu-toggle>
<ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
<ion-title>
Contact
</ion-title>
</ion-header>
<ion-content>
</ion-content>
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ContactPage } from './contact.page';
describe('ContactPage', () => {
let component: ContactPage;
let fixture: ComponentFixture<ContactPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ContactPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ContactPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-contact',
templateUrl: './contact.page.html',
styleUrls: ['./contact.page.scss'],
})
export class ContactPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { ForgotPage } from './forgot.page';
const routes: Routes = [
{
path: '',
component: ForgotPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [ForgotPage]
})
export class ForgotPageModule {}
<ion-content>
<div class="login_wrapper">
<div class="login_wrapper_inner">
<div class="login_logo_wrapper">
<img src="../../assets/imgs/tech-logo-user.png">
</div>
<h3>FORGOT PASSWORD</h3>
<hr>
<ion-row>
<ion-col>
<ion-input placeholder="Email ID" class="username"></ion-input>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button class="signup_btn" expand="block" (click)="goToPage('signin')">SEND LINK</ion-button>
</ion-col>
</ion-row>
</div>
</div>
</ion-content>
\ No newline at end of file
.login_wrapper{
width:100%;
.login_wrapper_inner{
.login_logo_wrapper{
padding-top: 15%;
text-align: center;
padding-bottom: 10%;
img{
width:70%;
}
}
width:80%;
margin:0 auto;
padding-top: 10%;
h3{
text-align: center;
color: #004989;
margin: 0px;
font-size: 20px;
font-weight: 600;
}
p{
text-align:center;
color:#797b79;
}
.button{
font-size: 12px;
font-weight:500;
height: 40px;
}
hr{
border:1px solid #004989;
height:0px;
border-radius: 20px;
width: 70px;
margin-top: 5px;
padding-top: 0px;
margin-bottom: 20px;
}
ion-input{
border:1px solid #004989;
border-radius:5px;
padding-left: 10px !important;
color: #babbba;
}
.username{
background: url("../../assets/imgs/tech-customer.png");
background-position: right 10px top 10px;
background-size: 17px;
background-repeat: no-repeat;
}
.password{
background: url("../../assets/imgs/tech-pass.png");
background-position: right 10px top 10px;
background-size: 17px;
background-repeat: no-repeat;
}
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { ForgotPage } from './forgot.page';
describe('ForgotPage', () => {
let component: ForgotPage;
let fixture: ComponentFixture<ForgotPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ForgotPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(ForgotPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-forgot',
templateUrl: './forgot.page.html',
styleUrls: ['./forgot.page.scss'],
})
export class ForgotPage implements OnInit {
constructor() { }
ngOnInit() {
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { HomePage } from './home.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: HomePage
}
])
],
declarations: [HomePage]
})
export class HomePageModule {}
<ion-header class="app_header">
<ion-menu-toggle>
<button class="nav_btn floatLeft">
<ion-icon name="menu"></ion-icon>
</button>
</ion-menu-toggle>
<div class="nav_title floatLeft">
<img src="../../assets/imgs/tech-logo.png">
</div>
<button class="nav_btn floatRight">
<ion-icon name="list"></ion-icon>
</button>
<button class="nav_btn floatRight">
<ion-icon name="logo-buffer"></ion-icon>
</button>
<div class="clear"></div>
</ion-header>
<ion-content class="">
<div class="home_wrapper">
<div id="map" style="height:100%;"></div>
<div *ngIf="visible" [@slideInOut] class="filterContainer">
<div (click)="filterToggle()">
<button class="float_btn1 float_leftbtn1" ></button>
<div class="filter_div1">
APPLY
</div>
</div>
<div class="filterContainer_inner">
<ul>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
<li>
<img src="../../assets/imgs/carpentry.png">
<p>Carpentry</p>
</li>
</ul>
</div>
</div>
</div>
<div (click)="filterToggle()">
<button class="float_btn float_leftbtn">
</button>
<div class="filter_div">
FILTER
</div>
</div>
<button class="float_btn float_rightbtn" (click)="searchToggle()"></button>
<div class="home_search_box" *ngIf="searchbarvisible" [@slideSearch]>
<input class="" type="text" placeholder="Search">
<div class="close_search" (click)="searchToggle()">
&times;
</div>
</div>
</ion-content>
.nav_title{
width:calc(100% - 150px) !important;
}
.map{
height: 100%;
}
.home_wrapper{
background: #fff;
height:calc(100vh - 50px);
}
.float_btn{
width:50px;
height:50px;
background-color: #004989;
border-radius: 50%;
position: fixed;
bottom:20px;
z-index:2;
&:focus{
outline: none;
}
}
.float_leftbtn{
left:10px;
background-image:url("../../assets/imgs/map-filter-icon.png");
background-position: center;
background-repeat: no-repeat;
background-size:27px;
}
.filter_div{
color: #004989;
position: fixed;
background-color: #fff;
font-size: 14px;
padding: 5px;
z-index: 1;
bottom: 32px;
left:15px;
padding-left: 50px;
padding-right: 15px;
border-radius: 20px;
font-weight: 500;
}
.filterContainer{
position: absolute;
bottom: 0px;
left:0px;
right:0px;
z-index: 99;
.filterContainer_inner{
background: #e7e8e7;
ul{
margin: 0px;
padding:0px;
li{
list-style: none;
display: inline-block;
width: calc(100% - 67%);
text-align: center;
padding-top: 30px;
padding-bottom: 30px;
border: 1px solid #fff;
img{
max-width: 100%;
height:40px;
}
p{
margin: 0px;
font-size: 12px;
padding-top: 6px;
color: #004989;
font-weight: 500;
}
}
}
}
.float_btn1{
width:50px;
height:50px;
background-color: #004989;
border-radius: 50%;
z-index:2;
position: relative;
left:10px;
&:focus{
outline: none;
}
}
.float_leftbtn1{
background-image:url("../../assets/imgs/map-filter-icon.png");
background-position: center;
background-repeat: no-repeat;
background-size:27px;
}
.filter_div1{
color: #004989;
background-color: #fff;
font-size: 14px;
padding: 5px;
z-index: 1;
bottom: 20px;
left: -30px;
position: relative;
display: inline-block;
padding-left: 50px;
padding-right: 15px;
border-radius: 20px;
font-weight: 500;
}
}
.float_rightbtn{
right:10px;
background-image:url("../../assets/imgs/map-search-icon.png");
background-position: center;
background-repeat: no-repeat;
background-size:25px;
}
.home_search_box{
background: #fff;
position: fixed;
width: calc(100% - 20px);
bottom: 20px;
height: 50px;
border-radius: 30px;
margin: 0 auto;
right: 10px;
z-index: 4;
input{
width: 100%;
height: 100%;
border-radius: 30px;
border:none;
padding-left: 25px;
font-size: 18px;
padding-right: 60px;
&:focus{
outline: none;
}
}
.close_search{
width:50px;
height:50px;
background-color: #004989;
border-radius: 50%;
position: absolute;
right: 0px;
top: 0px;
text-align: center;
color: #fff;
font-size: 32px;
line-height: 48px;
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { HomePage } from './home.page';
describe('HomePage', () => {
let component: HomePage;
let fixture: ComponentFixture<HomePage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ HomePage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(HomePage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import {Component, ElementRef, NgZone, ViewChild} from '@angular/core';
import {Geolocation} from '@ionic-native/geolocation/ngx';
import {
GoogleMaps,
GoogleMap,
GoogleMapsEvent,
LatLng,
MarkerOptions,
Marker
} from "@ionic-native/google-maps";
declare var google: any;
import { trigger, transition, animate, style } from '@angular/animations'
import { Platform } from '@ionic/angular';
@Component({
selector: 'app-home',
templateUrl: 'home.page.html',
styleUrls: ['home.page.scss'],
animations: [
trigger('slideInOut', [
transition(':enter', [
style({transform: 'translateY(100%)'}),
animate('200ms ease-in', style({transform: 'translateY(0%)'}))
]),
transition(':leave', [
animate('200ms ease-out', style({transform: 'translateY(100%)'}))
])
]),
trigger('slideSearch', [
transition(':enter', [
style({transform: 'translateX(100%)'}),
animate('200ms ease-in', style({transform: 'translateX(0%)'}))
]),
transition(':leave', [
animate('200ms ease-out', style({transform: 'translateX(100%)'}))
])
])
]
})
export class HomePage {
visible = false;
searchbarvisible = false;
@ViewChild('Map') mapElement: ElementRef;
map: any;
mapOptions: any;
location = {lat: null, lng: null};
markerOptions: any = {position: null, map: null, title: null};
marker: any;
apiKey: any = 'AIzaSyA25LMQmwAEoJO-rpSDjXXPSCKsN7zpcEk'; /*Your API Key*/
constructor(public zone: NgZone, public geolocation: Geolocation,public platform: Platform) {
/*load google map script dynamically */
const script = document.createElement('script');
script.id = 'googleMap';
if (this.apiKey) {
script.src = 'https://maps.googleapis.com/maps/api/js?key=' + this.apiKey;
} else {
script.src = 'https://maps.googleapis.com/maps/api/js?key=';
}
document.head.appendChild(script);
/*Get Current location*/
this.geolocation.getCurrentPosition().then((position) => {
this.location.lat = position.coords.latitude;
this.location.lng = position.coords.longitude;
});
/*Map options*/
this.mapOptions = {
center: this.location,
zoom: 21,
mapTypeControl: false
};
setTimeout(() => {
this.map = new google.maps.Map(this.mapElement.nativeElement, this.mapOptions);
/*Marker Options*/
this.markerOptions.position = this.location;
this.markerOptions.map = this.map;
this.markerOptions.title = 'My Location';
this.marker = new google.maps.Marker(this.markerOptions);
}, 3000);
}
ngAfterViewInit() {
this.platform.ready().then( () => {
this.loadMap();
});
}
loadMap() {
let map = GoogleMaps.create( 'map' );
map.one( GoogleMapsEvent.MAP_READY ).then( ( data: any ) => {
let coordinates: LatLng = new LatLng( 36.7783, 119.4179 );
let position = {
target: coordinates,
zoom: 14
};
map.animateCamera( position );
let markerOptions: MarkerOptions = {
position: coordinates,
icon: "assets/images/marker.png",
title: 'Hello California'
};
const marker = map.addMarker( markerOptions )
.then( ( marker: Marker ) => {
marker.showInfoWindow();
});
})
}
filterToggle(){
this.visible = !this.visible;
}
searchToggle(){
this.searchbarvisible = !this.searchbarvisible;
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';
import { IonicModule } from '@ionic/angular';
import { LandingPage } from './landing.page';
const routes: Routes = [
{
path: '',
component: LandingPage
}
];
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild(routes)
],
declarations: [LandingPage]
})
export class LandingPageModule {}
<ion-content>
<div class="landing_wrapper">
<div class="landing_logo_wrapper">
<img src="../../assets/imgs/tech-logo-user.png">
</div>
<div class="landing_content">
<ion-grid>
<ion-row>
<ion-col>
<ion-button expand="block" fill="outline" (click)="goToPage('signup')">NEW USER ? SIGN UP NOW!</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-button class="signup_btn" expand="block" (click)="goToPage('signin')">SIGNIN</ion-button>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<p (click)="goToPage('forgot')">Forgot Password ?</p>
</ion-col>
</ion-row>
<br>
<ion-row>
<ion-col class="textCenter">
<hr>
<h4>OR SIGN IN WITH</h4>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="textCenter">
<button class="facebook_btn social_btn"><ion-icon name="logo-facebook"></ion-icon><p>Login with Facebook</p></button>
</ion-col>
</ion-row>
<ion-row>
<ion-col class="textCenter">
<button class="google_btn social_btn"> <ion-icon name="logo-google"></ion-icon><p>Login with Google</p></button>
</ion-col>
</ion-row>
</ion-grid>
</div>
</div>
</ion-content>
.landing_wrapper{
width:100%;
padding:10px;
.landing_logo_wrapper{
padding-top: 15%;
text-align: center;
padding-bottom: 10%;
img{
width:70%;
}
}
.landing_content{
.button{
font-size: 12px;
font-weight:500;
height: 40px;
}
p{
text-align:center;
color:#797b79;
}
hr{
border:1px solid #004989;
height:0px;
border-radius: 20px;
}
h4{
color: #004989;
display: inline-block;
position: relative;
bottom: 30px;
background: #fff;
margin: 0px;
padding:10px;
font-size: 16px;
padding-left:15px;
padding-right: 15px;
}
.social_btn{
height:40px;
border-radius: 5px;
color: #fff;
font-weight: 300;
width:70%;
ion-icon{
font-size: 18px;
margin-right: 4px;
display: inline-block;
position: relative;
top: 4px;
}
p{
margin: 0px;
padding:0px;
display: inline-block;
color: #fff;
line-height: 30px;
}
}
.facebook_btn{
background-color: #355999;
}
.google_btn{
background-color: #e15633;
}
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { LandingPage } from './landing.page';
describe('LandingPage', () => {
let component: LandingPage;
let fixture: ComponentFixture<LandingPage>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ LandingPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(LandingPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-landing',
templateUrl: './landing.page.html',
styleUrls: ['./landing.page.scss'],
})
export class LandingPage implements OnInit {
constructor(private router: Router,private route: ActivatedRoute) { }
ngOnInit() {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
}
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { RouterModule } from '@angular/router';
import { ListPage } from './list.page';
@NgModule({
imports: [
CommonModule,
FormsModule,
IonicModule,
RouterModule.forChild([
{
path: '',
component: ListPage
}
])
],
declarations: [ListPage]
})
export class ListPageModule {}
.list_wrapper{
padding:5px;
ul{
padding:5px;
margin:0px;
li{
list-style: none;
background: #f6f6f6;
width:100%;
padding:10px;
margin-bottom: 5px;
.image{
width:80px;
height:80px;
background: #a8a8a8;
float: left;
img{
width:100%;
height:100%;
object-fit: cover;
object-position: center;
}
}
.details{
float: left;
width: calc(100% - 130px);
padding-left:10px;
h4{
margin:0px;
padding:0px;
font-size:15px;
color: #004989;
padding-bottom:1px;
}
h5{
padding:0px;
margin:0px;
color: #000;
font-size: 12px;
padding-top: 2px;
}
p{
padding:0px;
margin:0px;
color: #a8a8a8;
font-size: 12px;
padding-top: 4px;
span{
margin-left: 5px;
margin-right: 5px;
}
}
.star_ratting{
padding-bottom: 1px;
span{
float: right;
color: #000000;
}
.rating {
border: none;
float: left;
padding:0px;
}
.rating > input { display: none; }
.rating > label:before {
margin: 2px;
font-size: 14px;
font-family: FontAwesome;
display: inline-block;
content: "\f005";
}
.rating > .half:before {
content: "\f089";
position: absolute;
}
.rating > label {
color: #ddd;
float: right;
margin:0px;
}
/***** CSS Magic to Highlight Stars on Hover *****/
.rating > input:checked ~ label, /* show gold star when clicked */
.rating:not(:checked) > label:hover, /* hover current star */
.rating:not(:checked) > label:hover ~ label { color: #FFD700; } /* hover previous stars in list */
.rating > input:checked + label:hover, /* hover current star when changing rating */
.rating > input:checked ~ label:hover,
.rating > label:hover ~ input:checked ~ label, /* lighten current selection */
.rating > input:checked ~ label:hover ~ label { color: #FFED85; }
}
}
.connect{
width:50px;
float:right;
ion-icon{
color: #004989;
font-size: 24px;
padding: 5px;
}
}
}
}
}
\ No newline at end of file
import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { ComponentFixture, TestBed, async } from '@angular/core/testing';
import { ListPage } from './list.page';
describe('ListPage', () => {
let component: ListPage;
let fixture: ComponentFixture<ListPage>;
let listPage: HTMLElement;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [ ListPage ],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
.compileComponents();
}));
beforeEach(async () => {
fixture = await TestBed.createComponent(ListPage);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
it('should have a list of 10 elements', () => {
listPage = fixture.nativeElement;
const items = listPage.querySelectorAll('ion-item');
expect(items.length).toEqual(10);
});
});
import { Component, OnInit } from '@angular/core';
import { Router,ActivatedRoute } from '@angular/router';
@Component({
selector: 'app-list',
templateUrl: 'list.page.html',
styleUrls: ['list.page.scss']
})
export class ListPage implements OnInit {
private selectedItem: any;
public items: Array<{ title: string; note: string; icon: string }> = [];
constructor(private router: Router,private route: ActivatedRoute) {
}
goToPage(path,data=null){
this.router.navigateByUrl(path,{queryParams:data});
document.body.scrollTop = document.documentElement.scrollTop = 0;
}
ngOnInit() {
}
// add back when alpha.4 is out
// navigate(item) {
// this.router.navigate(['/list', JSON.stringify(item)]);
// }
}
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
This diff is collapsed. Click to expand it.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment