├── .gitignore ├── LICENSE ├── README.md ├── config.xml ├── ionic.config.json ├── package-lock.json ├── package.json ├── resources ├── android │ ├── icon │ │ ├── drawable-hdpi-icon.png │ │ ├── drawable-ldpi-icon.png │ │ ├── drawable-mdpi-icon.png │ │ ├── drawable-xhdpi-icon.png │ │ ├── drawable-xxhdpi-icon.png │ │ └── drawable-xxxhdpi-icon.png │ └── splash │ │ ├── drawable-land-hdpi-screen.png │ │ ├── drawable-land-ldpi-screen.png │ │ ├── drawable-land-mdpi-screen.png │ │ ├── drawable-land-xhdpi-screen.png │ │ ├── drawable-land-xxhdpi-screen.png │ │ ├── drawable-land-xxxhdpi-screen.png │ │ ├── drawable-port-hdpi-screen.png │ │ ├── drawable-port-ldpi-screen.png │ │ ├── drawable-port-mdpi-screen.png │ │ ├── drawable-port-xhdpi-screen.png │ │ ├── drawable-port-xxhdpi-screen.png │ │ └── drawable-port-xxxhdpi-screen.png ├── icon.png └── splash.png ├── src ├── app │ ├── app.component.ts │ ├── app.html │ ├── app.module.ts │ ├── app.scss │ └── main.ts ├── assets │ ├── fonts │ │ ├── icomoon.eot │ │ ├── icomoon.svg │ │ ├── icomoon.ttf │ │ └── icomoon.woff │ ├── icon │ │ └── favicon.ico │ └── svg │ │ ├── cake.svg │ │ ├── ice-cream.svg │ │ ├── orange-juice.svg │ │ └── toast.svg ├── components │ ├── rating │ │ ├── index.ts │ │ ├── rating.html │ │ ├── rating.module.ts │ │ ├── rating.scss │ │ └── rating.ts │ └── shrinking-header │ │ ├── shrinking-header.html │ │ ├── shrinking-header.module.ts │ │ ├── shrinking-header.scss │ │ └── shrinking-header.ts ├── data │ ├── chefs.data.ts │ └── welcome.data.ts ├── declarations.d.ts ├── index.html ├── manifest.json ├── pages │ ├── chef │ │ ├── chef.html │ │ ├── chef.module.ts │ │ ├── chef.scss │ │ └── chef.ts │ ├── favorites │ │ ├── favorites.html │ │ ├── favorites.module.ts │ │ ├── favorites.scss │ │ └── favorites.ts │ ├── home │ │ ├── home.html │ │ ├── home.module.ts │ │ ├── home.scss │ │ └── home.ts │ ├── login │ │ ├── login.html │ │ ├── login.module.ts │ │ ├── login.scss │ │ └── login.ts │ ├── menu │ │ ├── menu.html │ │ ├── menu.module.ts │ │ ├── menu.scss │ │ ├── menu.ts │ │ └── transition.ts │ ├── recipe │ │ ├── recipe.html │ │ ├── recipe.module.ts │ │ ├── recipe.scss │ │ └── recipe.ts │ ├── search │ │ ├── search.html │ │ ├── search.module.ts │ │ ├── search.scss │ │ └── search.ts │ ├── sign-up │ │ ├── sign-up.html │ │ ├── sign-up.module.ts │ │ ├── sign-up.scss │ │ └── sign-up.ts │ └── welcome │ │ ├── cake.anim.ts │ │ ├── ice-cream.anim.ts │ │ ├── juice.anim.ts │ │ ├── toast.anim.ts │ │ ├── welcome.html │ │ ├── welcome.module.ts │ │ ├── welcome.scss │ │ └── welcome.ts ├── service-worker.js ├── shared.ts └── theme │ ├── icons.scss │ └── variables.scss ├── tsconfig.json └── tslint.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Specifies intentionally untracked files to ignore when using Git 2 | # http://git-scm.com/docs/gitignore 3 | 4 | *~ 5 | *.sw[mnpcod] 6 | *.log 7 | *.tmp 8 | *.tmp.* 9 | log.txt 10 | *.sublime-project 11 | *.sublime-workspace 12 | .vscode/ 13 | npm-debug.log* 14 | 15 | .idea/ 16 | .sass-cache/ 17 | .tmp/ 18 | .versions/ 19 | coverage/ 20 | dist/ 21 | node_modules/ 22 | tmp/ 23 | temp/ 24 | hooks/ 25 | platforms/ 26 | plugins/ 27 | plugins/android.json 28 | plugins/ios.json 29 | www/ 30 | $RECYCLE.BIN/ 31 | 32 | .DS_Store 33 | Thumbs.db 34 | UserInterfaceState.xcuserstate 35 | /.history 36 | /src/assets/images 37 | /.sourcemaps 38 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Masonz 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ionic3-recipe 2 | a ionic(3.x) sample with recipe theme. The `ios plateform` is not tested. 3 | 4 | ⚠️this demo use animations by angular 4.2.x, but Ionic is not ready for Angular 4.2 yet, so run `build --prod` will failed.⚠️ 5 | 6 | ### Inspiration 7 | this demo oringal design comes form [dribbble](https://dribbble.com/) and author is [Thomas Budiman](https://dribbble.com/thebuddyman), thanks for them. 8 | 9 | ### Running 10 | 11 | > npm install && ionic serve 12 | 13 | ### Screenshot 14 | ![screenshot](https://user-images.githubusercontent.com/10757519/29765968-c4c92f9a-8c0f-11e7-87d6-327b66886ba3.gif) 15 | 16 | ### Environment 17 | ``` 18 | cli packages: 19 | 20 | @ionic/cli-utils : 1.9.2 21 | ionic (Ionic CLI) : 3.9.2 22 | 23 | global packages: 24 | 25 | Cordova CLI : 7.0.1 26 | 27 | local packages: 28 | 29 | @ionic/app-scripts : 2.1.4 30 | Cordova Platforms : android 6.2.3 31 | Ionic Framework : ionic-angular 3.6.0 32 | 33 | System: 34 | 35 | Android SDK Tools : 25.1.6 36 | Node : v6.11.2 37 | npm : 5.3.0 38 | OS : Windows 10 39 | ``` 40 | -------------------------------------------------------------------------------- /config.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | Kitchen 4 | An awesome Ionic/Cordova app. 5 | Ionic Framework Team 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-app", 3 | "app_id": "", 4 | "type": "ionic-angular", 5 | "integrations": { 6 | "cordova": {} 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ionic-recipe", 3 | "version": "0.0.0", 4 | "author": "Masonz", 5 | "homepage": "https://github.com/masonz/ionic3-recipe", 6 | "private": true, 7 | "scripts": { 8 | "clean": "ionic-app-scripts clean", 9 | "build": "ionic-app-scripts build", 10 | "lint": "ionic-app-scripts lint", 11 | "ionic:build": "ionic-app-scripts build", 12 | "ionic:serve": "ionic-app-scripts serve" 13 | }, 14 | "dependencies": { 15 | "@angular/animations": "4.3.1", 16 | "@angular/common": "4.3.1", 17 | "@angular/compiler": "4.3.1", 18 | "@angular/compiler-cli": "4.3.1", 19 | "@angular/core": "4.3.1", 20 | "@angular/forms": "4.3.1", 21 | "@angular/http": "4.3.1", 22 | "@angular/platform-browser": "4.3.1", 23 | "@angular/platform-browser-dynamic": "4.3.1", 24 | "@ionic-native/core": "3.12.1", 25 | "@ionic-native/splash-screen": "3.12.1", 26 | "@ionic-native/status-bar": "3.12.1", 27 | "@ionic/cloud-angular": "^0.12.0", 28 | "@ionic/storage": "2.0.1", 29 | "@types/snapsvg": "^0.4.29", 30 | "cordova-android": "^6.2.3", 31 | "cordova-plugin-console": "^1.0.5", 32 | "cordova-plugin-device": "^1.1.4", 33 | "cordova-plugin-splashscreen": "^4.0.3", 34 | "cordova-plugin-statusbar": "^2.2.2", 35 | "cordova-plugin-whitelist": "^1.3.1", 36 | "imports-loader": "^0.7.1", 37 | "ionic-angular": "3.6.0", 38 | "ionic-plugin-keyboard": "^2.2.1", 39 | "ionicons": "3.0.0", 40 | "rxjs": "5.4.0", 41 | "snapsvg": "^0.5.1", 42 | "sw-toolbox": "3.6.0", 43 | "zone.js": "0.8.12" 44 | }, 45 | "devDependencies": { 46 | "@ionic/app-scripts": "2.1.4", 47 | "tslint": "^5.6.0", 48 | "typescript": "2.3.4" 49 | }, 50 | "cordovaPlugins": [ 51 | "cordova-plugin-whitelist", 52 | "cordova-plugin-statusbar", 53 | "cordova-plugin-console", 54 | "cordova-plugin-device", 55 | "ionic-plugin-keyboard", 56 | "cordova-plugin-splashscreen" 57 | ], 58 | "cordovaPlatforms": [], 59 | "description": "ionic-app: An Ionic project", 60 | "cordova": { 61 | "plugins": { 62 | "cordova-plugin-console": {}, 63 | "cordova-plugin-device": {}, 64 | "cordova-plugin-splashscreen": {}, 65 | "cordova-plugin-statusbar": {}, 66 | "cordova-plugin-whitelist": {}, 67 | "ionic-plugin-keyboard": {} 68 | }, 69 | "platforms": [ 70 | "android" 71 | ] 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /resources/android/icon/drawable-hdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/icon/drawable-hdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-ldpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/icon/drawable-ldpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-mdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/icon/drawable-mdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/icon/drawable-xhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/icon/drawable-xxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/icon/drawable-xxxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-land-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-land-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-land-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-land-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-land-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-land-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-port-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-port-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-port-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-port-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-port-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/android/splash/drawable-port-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/icon.png -------------------------------------------------------------------------------- /resources/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/resources/splash.png -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { Nav, Platform, LoadingController, MenuController, Content } from 'ionic-angular'; 3 | import { Storage } from '@ionic/storage'; 4 | import { StatusBar } from '@ionic-native/status-bar'; 5 | import { SplashScreen } from '@ionic-native/splash-screen'; 6 | 7 | import { Subject } from "rxjs/Subject"; 8 | 9 | @Component({ 10 | templateUrl: 'app.html', 11 | }) 12 | export class MyApp { 13 | 14 | rootPage: any = 'MenuPage'; 15 | loader: any; 16 | 17 | @ViewChild('content') content: Nav; 18 | 19 | constructor( 20 | private platform: Platform, 21 | private statusBar: StatusBar, 22 | private splashScreen: SplashScreen, 23 | private loadingCtrl: LoadingController, 24 | private storage: Storage, 25 | private menuCtrl: MenuController 26 | ) { 27 | platform.ready().then(() => { 28 | // Okay, so the platform is ready and our plugins are available. 29 | // Here you can do any higher level native things you might need. 30 | this.presentLoading(); 31 | 32 | this.storage.get('welcomeShown').then((result) => { 33 | if (result) { 34 | this.rootPage = 'MenuPage'; 35 | statusBar.styleDefault(); 36 | splashScreen.hide(); 37 | } else { 38 | this.rootPage = 'WelcomePage'; 39 | this.storage.set('welcomeShown', true); 40 | } 41 | this.loader.dismiss(); 42 | }); 43 | }); 44 | } 45 | 46 | presentLoading() { 47 | this.storage.set('welcomeShown', false); 48 | this.loader = this.loadingCtrl.create({ 49 | content: "Loading..." 50 | }); 51 | this.loader.present(); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/app/app.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, ErrorHandler } from '@angular/core'; 2 | import { BrowserModule } from '@angular/platform-browser'; 3 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 4 | import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; 5 | import { StatusBar } from '@ionic-native/status-bar'; 6 | import { SplashScreen } from '@ionic-native/splash-screen'; 7 | import { IonicStorageModule } from '@ionic/storage'; 8 | 9 | import { MyApp } from './app.component'; 10 | import { MenuPageModule } from '../pages/menu/menu.module'; 11 | import { HomePageModule } from '../pages/home/home.module'; 12 | import { WelcomePageModule } from '../pages/welcome/welcome.module'; 13 | import { LoginPageModule } from '../pages/login/login.module'; 14 | import { SignUpPageModule } from '../pages/sign-up/sign-up.module'; 15 | import { SearchPageModule } from '../pages/search/search.module'; 16 | import { ChefPageModule } from '../pages/chef/chef.module'; 17 | import { RecipePageModule } from '../pages/recipe/recipe.module'; 18 | import { RatingComponentModule } from '../components/rating/rating.module'; 19 | 20 | @NgModule({ 21 | declarations: [ 22 | MyApp 23 | ], 24 | imports: [ 25 | BrowserModule, 26 | BrowserAnimationsModule, 27 | IonicModule.forRoot(MyApp), 28 | IonicStorageModule.forRoot(), 29 | RatingComponentModule, 30 | MenuPageModule, 31 | WelcomePageModule, 32 | LoginPageModule, 33 | SignUpPageModule, 34 | HomePageModule, 35 | ChefPageModule, 36 | SearchPageModule, 37 | RecipePageModule 38 | ], 39 | bootstrap: [IonicApp], 40 | entryComponents: [ 41 | MyApp 42 | ], 43 | providers: [ 44 | StatusBar, 45 | SplashScreen, 46 | { provide: ErrorHandler, useClass: IonicErrorHandler } 47 | ] 48 | }) 49 | export class AppModule { } 50 | -------------------------------------------------------------------------------- /src/app/app.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | @import "../theme/icons"; 3 | 4 | // App Global Sass 5 | // -------------------------------------------------- 6 | // Put style rules here that you want to apply globally. These 7 | // styles are for the entire app and not just one component. 8 | // Additionally, this file can be also used as an entry point 9 | // to import other Sass files to be included in the output CSS. 10 | // 11 | // Shared Sass variables, which can be used to adjust Ionic's 12 | // default Sass variables, belong in "theme/variables.scss". 13 | // 14 | // To declare rules for a specific mode, create a child rule 15 | // for the .md, .ios, or .wp mode classes. The mode class is 16 | // automatically applied to the element in the app. 17 | @import url('https://fonts.googleapis.com/css?family=Handlee|Patrick+Hand+SC'); 18 | 19 | [text-vertical-align] > * { 20 | vertical-align: middle; 21 | } 22 | 23 | [vertical-align] { 24 | vertical-align: middle; 25 | } 26 | 27 | [inline-block] { 28 | display: inline-block; 29 | } 30 | 31 | [bg-white] { 32 | background: white !important; 33 | } 34 | 35 | ion-content { 36 | background: white 37 | } 38 | 39 | .content-md { 40 | background-color: #f7f7f7; 41 | } 42 | 43 | ion-navbar.toolbar { 44 | // padding-top: 3.5vh; 45 | } -------------------------------------------------------------------------------- /src/app/main.ts: -------------------------------------------------------------------------------- 1 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 2 | 3 | import { AppModule } from './app.module'; 4 | 5 | platformBrowserDynamic().bootstrapModule(AppModule); 6 | -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/src/assets/fonts/icomoon.eot -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Generated by IcoMoon 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/src/assets/fonts/icomoon.ttf -------------------------------------------------------------------------------- /src/assets/fonts/icomoon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/src/assets/fonts/icomoon.woff -------------------------------------------------------------------------------- /src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/masonz/ionic3-recipe/6164f7dff4b1df2f80819ead8c32fe4a0e946357/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /src/assets/svg/cake.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 12 | 14 | 16 | 17 | 18 | 19 | 24 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /src/assets/svg/ice-cream.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 11 | 13 | 16 | 19 | 25 | 29 | 30 | -------------------------------------------------------------------------------- /src/assets/svg/orange-juice.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /src/assets/svg/toast.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 9 | 11 | 13 | 18 | 21 | 24 | 26 | 27 | 29 | 30 | -------------------------------------------------------------------------------- /src/components/rating/index.ts: -------------------------------------------------------------------------------- 1 | export { RatingComponentModule } from './rating.module'; 2 | export { RatingComponent } from './rating'; -------------------------------------------------------------------------------- /src/components/rating/rating.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/rating/rating.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core'; 2 | import { CommonModule } from '@angular/common'; 3 | import { IonicModule } from 'ionic-angular'; 4 | import { RatingComponent } from './rating'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | RatingComponent, 9 | ], 10 | imports: [ 11 | IonicModule, 12 | CommonModule 13 | ], 14 | exports: [ 15 | RatingComponent 16 | ], 17 | schemas: [ 18 | CUSTOM_ELEMENTS_SCHEMA 19 | ] 20 | }) 21 | export class RatingComponentModule { } 22 | -------------------------------------------------------------------------------- /src/components/rating/rating.scss: -------------------------------------------------------------------------------- 1 | rating { 2 | 3 | display: inline-block; 4 | 5 | .rating { 6 | margin: 0; 7 | padding: 0; 8 | } 9 | 10 | .rating__icon { 11 | display: inline; 12 | border: 0px; 13 | background: none; 14 | letter-spacing: 2px; 15 | vertical-align: middle; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/components/rating/rating.ts: -------------------------------------------------------------------------------- 1 | import { Component, forwardRef, Input } from '@angular/core'; 2 | import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 3 | 4 | /** 5 | * Generated class for the RatingComponent component. 6 | * 7 | * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html 8 | * for more info on Angular Components. 9 | * 10 | * --------- Usage -------------------------- 11 | * 12 | * 14 | * [max]="5" 15 | * color="primary" 16 | * emptyStarIconName="star-outline" 17 | * halfStarIconName="star-half" 18 | * starIconName="star" 19 | * [nullable]="false" 20 | * (ngModelChange)="onModelChange($event)"> 21 | * 22 | */ 23 | 24 | @Component({ 25 | selector: 'rating', 26 | templateUrl: 'rating.html', 27 | providers: [{ 28 | provide: NG_VALUE_ACCESSOR, 29 | useExisting: forwardRef(() => RatingComponent), 30 | multi: true 31 | }] 32 | }) 33 | export class RatingComponent implements ControlValueAccessor { 34 | 35 | private _max: number = 5; 36 | private _color: string = 'primary'; 37 | private _readOnly: boolean = false; 38 | private _emptyStarIconName: string = 'star-outline'; 39 | private _halfStarIconName: string = 'star-half'; 40 | private _starIconName: string = 'star'; 41 | private _nullable: boolean = false; 42 | 43 | innerValue: number; 44 | starIndexes: Array; 45 | onChangeCallback: (_: any) => void = () => { }; 46 | 47 | ngOnInit() { 48 | // ngFor needs an array 49 | this.starIndexes = Array(this.max).fill(1).map((x, i) => i); 50 | } 51 | 52 | @Input() 53 | get max(): number { 54 | return this._max; 55 | } 56 | set max(val: number) { 57 | this._max = val; 58 | } 59 | 60 | @Input() 61 | get color(): string { 62 | return this._color; 63 | } 64 | set color(val: string) { 65 | this._color = val; 66 | } 67 | 68 | @Input() 69 | get readOnly(): boolean { 70 | return this._readOnly; 71 | } 72 | set readOnly(val: boolean) { 73 | this._readOnly = val; 74 | } 75 | 76 | @Input() 77 | get emptyStarIconName(): string { 78 | return this._emptyStarIconName; 79 | } 80 | set emptyStarIconName(val: string) { 81 | this._emptyStarIconName = val; 82 | } 83 | 84 | @Input() 85 | get halfStarIconName(): string { 86 | return this._halfStarIconName; 87 | } 88 | set halfStarIconName(val: string) { 89 | this._halfStarIconName = val; 90 | } 91 | 92 | @Input() 93 | get starIconName(): string { 94 | return this._starIconName; 95 | } 96 | set starIconName(val: string) { 97 | this._starIconName = val; 98 | } 99 | 100 | @Input() 101 | get nullable(): boolean { 102 | return this._nullable; 103 | } 104 | set nullable(val: boolean) { 105 | this._nullable = val; 106 | } 107 | 108 | get value(): number { 109 | return this.innerValue; 110 | } 111 | 112 | set value(value: number) { 113 | if (value !== this.innerValue) { 114 | this.innerValue = value; 115 | this.onChangeCallback(value); 116 | } 117 | } 118 | 119 | getStarIconName(starIndex: number) { 120 | if (this.value === undefined) { 121 | return this.emptyStarIconName; 122 | } 123 | 124 | if (this.value > starIndex) { 125 | 126 | if (this.value < starIndex + 1) { 127 | return this.halfStarIconName; 128 | 129 | } else { 130 | return this.starIconName; 131 | } 132 | 133 | } else { 134 | return this.emptyStarIconName; 135 | } 136 | } 137 | 138 | rate(value: number) { 139 | if (this.readOnly || value < 0 || value > this.max) { 140 | return; 141 | } 142 | if (value === this.value && this.nullable) { 143 | value = null; 144 | } 145 | this.value = value; 146 | } 147 | 148 | writeValue(value: any): void { 149 | if (value !== this.innerValue) { 150 | this.innerValue = value; 151 | } 152 | } 153 | registerOnChange(fn: any): void { 154 | this.onChangeCallback = fn; 155 | } 156 | registerOnTouched(fn: any): void { 157 | // throw new Error("Method not implemented."); 158 | } 159 | setDisabledState?(isDisabled: boolean): void { 160 | // throw new Error("Method not implemented."); 161 | } 162 | 163 | } 164 | -------------------------------------------------------------------------------- /src/components/shrinking-header/shrinking-header.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/shrinking-header/shrinking-header.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { ShrinkingHeaderComponent } from './shrinking-header'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | ShrinkingHeaderComponent, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(ShrinkingHeaderComponent), 11 | ], 12 | exports: [ 13 | ShrinkingHeaderComponent 14 | ] 15 | }) 16 | export class ShrinkingHeaderComponentModule {} 17 | -------------------------------------------------------------------------------- /src/components/shrinking-header/shrinking-header.scss: -------------------------------------------------------------------------------- 1 | shrinking-header { 2 | display: block; 3 | text-align: center; 4 | position: relative; 5 | overflow: hidden; 6 | } 7 | -------------------------------------------------------------------------------- /src/components/shrinking-header/shrinking-header.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ElementRef, Renderer } from '@angular/core'; 2 | 3 | /** 4 | * Generated class for the ShrinkingHeaderComponent component. 5 | * 6 | * See https://angular.io/docs/ts/latest/api/core/index/ComponentMetadata-class.html 7 | * for more info on Angular Components. 8 | */ 9 | @Component({ 10 | selector: 'shrinking-header', 11 | templateUrl: 'shrinking-header.html' 12 | }) 13 | export class ShrinkingHeaderComponent { 14 | 15 | @Input('scrollArea') scrollArea: any; 16 | @Input('headerArea') headersArea: any; 17 | @Input('headerHeight') headerHeight: number; 18 | @Input('backgroundImg') backgroundImg: string = 'https://user-images.githubusercontent.com/10757519/29750009-3cd7f0e4-8b6a-11e7-8590-dad7a03c430e.jpg'; 19 | 20 | newHeaderHeight: any; 21 | toggleBtn: any; 22 | 23 | constructor( 24 | public element: ElementRef, 25 | public renderer: Renderer, 26 | ) { } 27 | 28 | ngAfterViewInit() { 29 | // init.. 30 | let page = document.getElementsByClassName('show-page')[0]; 31 | let screenHeight = page ? page.clientHeight : 250; 32 | this.headerHeight = this.headerHeight || screenHeight * 0.385; 33 | this.toggleBtn = this.headersArea.getElementsByClassName('bar-button-menutoggle')[0]; 34 | let background = this.backgroundImg ? `linear-gradient(rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5)), url(${this.backgroundImg})` : ''; 35 | this.renderer.setElementStyle(this.element.nativeElement, 'height', this.headerHeight + 'px'); 36 | this.renderer.setElementStyle(this.headersArea, 'backgroundImage', background); 37 | this.renderer.setElementStyle(this.headersArea, 'backgroundPosition', 'center'); 38 | this.renderer.setElementStyle(this.headersArea, 'backgroundSize', 'cover'); 39 | this.scrollArea.ionScroll.subscribe((ev) => { 40 | this.resizeHeader(ev); 41 | }); 42 | } 43 | 44 | resizeHeader(ev) { 45 | 46 | ev.domWrite(() => { 47 | 48 | this.newHeaderHeight = this.headerHeight - ev.scrollTop; 49 | 50 | if (this.newHeaderHeight < 0) { 51 | this.newHeaderHeight = 0; 52 | } else { 53 | this.renderer.setElementStyle(this.element.nativeElement, 'height', this.newHeaderHeight + 'px'); 54 | } 55 | 56 | }); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/data/chefs.data.ts: -------------------------------------------------------------------------------- 1 | export const Chefs = [ 2 | { 3 | cid: 1, 4 | name: 'JAMIE MALONE', 5 | desc: 'Chef at ShenZhen, CN', 6 | liked: 35, 7 | recipeCount: 85, 8 | thumb: 'https://user-images.githubusercontent.com/10757519/29749998-29cc3c12-8b6a-11e7-84ff-6c9262357f63.png', 9 | avatar: 'https://randomuser.me/api/portraits/men/1.jpg' 10 | }, 11 | { 12 | cid: 2, 13 | name: 'Loretta Harris', 14 | desc: 'Chef at Northaven, Rd', 15 | liked: 67, 16 | recipeCount: 19, 17 | thumb: 'https://user-images.githubusercontent.com/10757519/29750000-29ce6032-8b6a-11e7-8630-3dd886ec84d3.png', 18 | avatar: 'https://randomuser.me/api/portraits/women/1.jpg' 19 | }, 20 | { 21 | cid: 3, 22 | name: 'Chris Morris', 23 | desc: 'Chef at Preston, Rd', 24 | liked: 153, 25 | recipeCount: 70, 26 | thumb: 'https://user-images.githubusercontent.com/10757519/29750001-29ce7996-8b6a-11e7-877e-2e86a35ef642.png', 27 | avatar: 'https://randomuser.me/api/portraits/men/2.jpg' 28 | }, 29 | { 30 | cid: 4, 31 | name: 'Adrian Douglas', 32 | desc: 'Chef at Depaul, Dr', 33 | liked: 31, 34 | recipeCount: 23, 35 | thumb: 'https://user-images.githubusercontent.com/10757519/29750002-29cf553c-8b6a-11e7-9b03-d44d76bb46b6.png', 36 | avatar: 'https://randomuser.me/api/portraits/women/2.jpg' 37 | }, 38 | { 39 | cid: 5, 40 | name: 'Felix Watson', 41 | desc: 'Chef at Sea Change, MN', 42 | liked: 88, 43 | recipeCount: 43, 44 | thumb: 'https://user-images.githubusercontent.com/10757519/29750003-29cfe3d0-8b6a-11e7-935e-a43f71473d4b.png', 45 | avatar: 'https://randomuser.me/api/portraits/men/3.jpg' 46 | }, 47 | { 48 | cid: 6, 49 | name: 'Natalie Martin', 50 | desc: 'Chef at Rudder, Rd', 51 | liked: 102, 52 | recipeCount: 20, 53 | thumb: 'https://user-images.githubusercontent.com/10757519/29749999-29ce335a-8b6a-11e7-9eef-c4a7f5a1d89d.png', 54 | avatar: 'https://randomuser.me/api/portraits/women/3.jpg' 55 | } 56 | ]; -------------------------------------------------------------------------------- /src/data/welcome.data.ts: -------------------------------------------------------------------------------- 1 | export const WelcomeData = [ 2 | { 3 | class: 'slide-one', 4 | svgId: 'snapToast', 5 | svgUrl: 'assets/svg/toast.svg#toast', 6 | title: 'Easy Meal Ideas', 7 | desc: 'Explore recipes by food type, preparation method, cuisine, country and more. ' 8 | }, 9 | { 10 | class: 'slide-two', 11 | svgId: 'snapOrangeJuice', 12 | svgUrl: 'assets/svg/orange-juice.svg#orange-juice', 13 | title: 'Photo Tutorials', 14 | desc: 'Browse our best themed recipes, cooking tips, and how-to food videos & photos.' 15 | }, 16 | { 17 | class: 'slide-three', 18 | svgId: 'snapCake', 19 | svgUrl: 'assets/svg/cake.svg#cake', 20 | title: '10000+ Recipes', 21 | desc: 'Browse thousands of rated recipes from top chefs, each with nutritional info. ' 22 | }, 23 | { 24 | class: 'slide-four', 25 | svgId: 'snapIceCream', 26 | svgUrl: 'assets/svg/ice-cream.svg#ice-cream', 27 | title: 'Dessert Recipes', 28 | desc: 'Hot or cold, our dessert recipes can turn an average meal into a memorable event.' 29 | } 30 | ]; -------------------------------------------------------------------------------- /src/declarations.d.ts: -------------------------------------------------------------------------------- 1 | /* 2 | Declaration files are how the Typescript compiler knows about the type information(or shape) of an object. 3 | They're what make intellisense work and make Typescript know all about your code. 4 | 5 | A wildcard module is declared below to allow third party libraries to be used in an app even if they don't 6 | provide their own type declarations. 7 | 8 | To learn more about using third party libraries in an Ionic app, check out the docs here: 9 | http://ionicframework.com/docs/v2/resources/third-party-libs/ 10 | 11 | For more info on type definition files, check out the Typescript docs here: 12 | https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 13 | */ 14 | declare module '*'; -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Ionic", 3 | "short_name": "Ionic", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/imgs/logo.png", 8 | "sizes": "512x512", 9 | "type": "image/png" 10 | }], 11 | "background_color": "#4e8ef7", 12 | "theme_color": "#4e8ef7" 13 | } -------------------------------------------------------------------------------- /src/pages/chef/chef.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | {{ chef.name }} 17 |

{{ chef.desc }}

18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | avatar 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | Chef Info 37 | 38 | 39 | 42 Recipes 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 |
49 | 50 |
51 |

ABOUT

52 |

After attending culinary school. Malone got an internship at La Belle Vie under chef Tim McKee. She has continued to 53 | work With McKee at Barrio. Porter & Frye since 2009, at Sea Change 54 |

55 |

SPECIALTY

56 |

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard 57 | dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 58 | book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially 59 | unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 60 | more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

61 |
62 | 63 | 64 |
65 | 66 | 67 | 68 |

{{ recipe.name }}

69 | 70 | 71 |
72 | 73 |
74 | 75 | -------------------------------------------------------------------------------- /src/pages/chef/chef.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { ChefPage } from './chef'; 4 | import { ShrinkingHeaderComponentModule } from '../../components/shrinking-header/shrinking-header.module'; 5 | 6 | @NgModule({ 7 | declarations: [ 8 | ChefPage 9 | ], 10 | imports: [ 11 | IonicPageModule.forChild(ChefPage), 12 | ShrinkingHeaderComponentModule 13 | ], 14 | exports: [ 15 | ChefPage 16 | ] 17 | }) 18 | export class ChefPageModule { } 19 | -------------------------------------------------------------------------------- /src/pages/chef/chef.scss: -------------------------------------------------------------------------------- 1 | page-chef { 2 | 3 | .toolbar-title-md { 4 | color: white !important; 5 | } 6 | 7 | .header-md::after { 8 | content: none; 9 | } 10 | 11 | .toolbar-md { 12 | padding: 3.5vh 4px; 13 | } 14 | 15 | .toolbar-info { 16 | letter-spacing: 1px; 17 | } 18 | 19 | .scroll-content, 20 | .chef-segment { 21 | padding: 0 10.7vw; 22 | } 23 | 24 | .button-inner { 25 | color: white; 26 | } 27 | 28 | .segment-md .segment-button { 29 | padding: 3.6vh 0; 30 | height: auto; 31 | line-height: 1; 32 | font-size: 18px; 33 | letter-spacing: 1px; 34 | } 35 | 36 | .segment-button.segment-activated { 37 | font-weight: bold; 38 | } 39 | 40 | .chef__avatar { 41 | width: 30vw; 42 | height: 30vw; 43 | display: block; 44 | border-radius: 50%; 45 | margin: 2vh auto 0 auto; 46 | } 47 | 48 | .chef__follow { 49 | margin-top: 3.6vh; 50 | } 51 | 52 | // chef-info section style 53 | // ============================== 54 | 55 | .info__title { 56 | letter-spacing: 1px; 57 | font-weight: bold; 58 | } 59 | 60 | .info__paragraph { 61 | margin: 0; 62 | line-height: 2; 63 | font-size: 2rem; 64 | letter-spacing: 1px; 65 | font-weight: lighter; 66 | } 67 | 68 | // .chef__follow-count { 69 | // letter-spacing: 1px; 70 | // margin-bottom: 6.5vh; 71 | // } 72 | 73 | // chef-recipes section style 74 | // ============================== 75 | .recipe__name { 76 | font-weight: bold; 77 | letter-spacing: 1px; 78 | } 79 | } 80 | -------------------------------------------------------------------------------- /src/pages/chef/chef.ts: -------------------------------------------------------------------------------- 1 | import { Component, ChangeDetectorRef } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the ChefPage page. 6 | * 7 | * See http://ionicframework.com/docs/components/#navigation for more info 8 | * on Ionic pages and navigation. 9 | */ 10 | @IonicPage() 11 | @Component({ 12 | selector: 'page-chef', 13 | templateUrl: 'chef.html', 14 | }) 15 | export class ChefPage { 16 | 17 | section: string = 'info'; 18 | chef: any = { name: null }; 19 | showToolbar: boolean = false; 20 | recipes = [ 21 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' }, 22 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' }, 23 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' }, 24 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' }, 25 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' }, 26 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' }, 27 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' }, 28 | { name: 'Recipe I', thumb: 'assets/images/recipe.png' } 29 | ] 30 | 31 | constructor( 32 | public navCtrl: NavController, 33 | public navParams: NavParams, 34 | public ref: ChangeDetectorRef 35 | ) { } 36 | 37 | ionViewDidLoad() { 38 | this.chef = this.navParams.data; 39 | } 40 | 41 | goBack() { 42 | this.navCtrl.pop(); 43 | } 44 | 45 | segmentChanged(ev: any) { 46 | let { value } = ev; 47 | this.section = value; 48 | } 49 | 50 | viewReicpe() { 51 | this.navCtrl.push('RecipePage'); 52 | } 53 | 54 | } 55 | -------------------------------------------------------------------------------- /src/pages/favorites/favorites.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | Favorites 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /src/pages/favorites/favorites.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { FavoritesPage } from './favorites'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | FavoritesPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(FavoritesPage), 11 | ], 12 | exports: [ 13 | FavoritesPage 14 | ] 15 | }) 16 | export class FavoritesPageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/favorites/favorites.scss: -------------------------------------------------------------------------------- 1 | page-favorites { 2 | 3 | } 4 | -------------------------------------------------------------------------------- /src/pages/favorites/favorites.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the FavoritesPage page. 6 | * 7 | * See http://ionicframework.com/docs/components/#navigation for more info 8 | * on Ionic pages and navigation. 9 | */ 10 | @IonicPage() 11 | @Component({ 12 | selector: 'page-favorites', 13 | templateUrl: 'favorites.html', 14 | }) 15 | export class FavoritesPage { 16 | 17 | constructor(public navCtrl: NavController, public navParams: NavParams) { 18 | } 19 | 20 | ionViewDidLoad() { 21 | console.log('ionViewDidLoad FavoritesPage'); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/home/home.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | Home 9 | 10 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 |

{{ chef.name }}

21 |

{{ chef.desc }}

22 |
23 | {{ chef.recipeCount }} 24 | Recipe 25 |
26 |
27 | 28 | 29 |
30 |
31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | -------------------------------------------------------------------------------- /src/pages/home/home.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { HomePage } from './home'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | HomePage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(HomePage), 11 | ], 12 | exports: [ 13 | HomePage 14 | ] 15 | }) 16 | export class HomePageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/home/home.scss: -------------------------------------------------------------------------------- 1 | page-home { 2 | 3 | .main-content { 4 | padding: 0 20px; 5 | position: absolute; 6 | } 7 | 8 | .bar-buttons-md[end] { 9 | margin: 0 6px; 10 | min-width: 44px; 11 | text-align: center; 12 | } 13 | 14 | .recipe__thumb { 15 | height: 70vh; 16 | width: 100%; 17 | object-fit: fill; 18 | display: block; 19 | transition: transform .3s; 20 | } 21 | 22 | .recipe__btn-view { 23 | opacity: 0; 24 | position: absolute; 25 | top: 50%; 26 | left: 50%; 27 | transform: translate3d(-50%, 0, 0); 28 | transition: opacity .8s, transform .8s ease-in-out; 29 | } 30 | 31 | ion-slides { 32 | width: 100%; 33 | height: auto; 34 | display: block; 35 | position: absolute; 36 | bottom: 0; 37 | } 38 | 39 | ion-slide { 40 | width: 60vw !important; 41 | margin-left: 20vw; 42 | margin-right: -20vw; 43 | } 44 | 45 | ion-slide:first-child { 46 | margin-left: 0; 47 | } 48 | 49 | ion-slide:last-child { 50 | margin-right: 0; 51 | } 52 | 53 | .swiper-slide { 54 | filter: opacity(33%); 55 | } 56 | 57 | .swiper-slide-active { 58 | filter: opacity(100%); 59 | } 60 | 61 | .swiper-slide-active .recipe__btn-view { 62 | opacity: 1; 63 | transform: translate3d(-50%, -50%, 0); 64 | } 65 | 66 | .chef__name, 67 | .chef__desc { 68 | letter-spacing: 1px; 69 | margin: 0 0 1.75vh 0; 70 | } 71 | 72 | .chef__likes-label, 73 | .chef__recipe-label { 74 | display: block; 75 | } 76 | 77 | .chef__likes-count, 78 | .chef__recipe-count { 79 | font-size: 18px; 80 | font-weight: 600; 81 | line-height: 1.5; 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /src/pages/home/home.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild, ChangeDetectorRef } from '@angular/core'; 2 | import { IonicPage, NavController, Slides } from 'ionic-angular'; 3 | import { trigger, state, style, transition, animate, query, stagger, group } from '@angular/animations'; 4 | import { Chefs } from '../../data/chefs.data'; 5 | 6 | @IonicPage() 7 | @Component({ 8 | selector: 'page-home', 9 | templateUrl: 'home.html', 10 | animations: [ 11 | trigger('chefAnim', [ 12 | transition('* => fadeIn', [ 13 | query('.chef__name, .chef__desc', style({ opacity: 0 })), 14 | query('.chef__name, .chef__desc', 15 | stagger(100, animate(500, style({ opacity: 1, transform: 'translateY(0)' }))) 16 | ) 17 | ]), 18 | transition('* => fadeOut', [ 19 | query('.chef__name, .chef__desc', 20 | stagger(100, animate(500, style({ opacity: 0, transform: 'translateY(-40px)' }))) 21 | ) 22 | ]) 23 | ]), 24 | ] 25 | }) 26 | export class HomePage { 27 | 28 | @ViewChild(Slides) slides: Slides; 29 | 30 | showToolbar: boolean; 31 | curIndex: number = 0; 32 | chefs: any[] = Chefs; 33 | state: string = 'fadeOut'; 34 | 35 | constructor( 36 | public navCtrl: NavController, 37 | private ref: ChangeDetectorRef, 38 | ) { } 39 | 40 | ionViewDidLoad() { 41 | 42 | } 43 | 44 | public get chef() { 45 | return this.chefs[this.curIndex]; 46 | } 47 | 48 | goToViewChef(data) { 49 | this.navCtrl.push('ChefPage', data); 50 | } 51 | 52 | goToSearch() { 53 | this.navCtrl.push('SearchPage'); 54 | } 55 | 56 | slideDidChange() { 57 | if (this.slides.getActiveIndex() >= this.chefs.length) { 58 | this.curIndex = this.slides.getActiveIndex() - this.chefs.length; 59 | } else { 60 | this.curIndex = this.slides.getActiveIndex(); 61 | } 62 | if (this.slides.getActiveIndex() % this.chefs.length == 0) { 63 | this.curIndex = 0; 64 | } 65 | this.state = 'fadeIn'; 66 | this.numberAnim(); 67 | } 68 | 69 | slideWillChange() { 70 | this.state = 'fadeOut'; 71 | } 72 | 73 | numberAnim() { 74 | let count: number = 0; 75 | let likedTimer = null; 76 | let recipeTimer = null; 77 | let recipeDom = document.getElementsByClassName('chef__recipe-count')[0]; 78 | let likedDom = document.getElementsByClassName('chef__likes-count')[0]; 79 | recipeTimer = setInterval(() => { 80 | count++; 81 | recipeDom.innerHTML = count + '' 82 | if (count >= this.chef.recipeCount) return clearInterval(recipeTimer); 83 | }, 1000 / this.chef.recipeCount) 84 | likedTimer = setInterval(() => { 85 | count++; 86 | likedDom.innerHTML = count + '' 87 | if (count >= this.chef.liked) return clearInterval(likedTimer); 88 | }, 1000 / this.chef.liked) 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /src/pages/login/login.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 |

Recipe

11 |

Get inspired by thousand recipes from home chef to iron chef

12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 26 | 27 | -------------------------------------------------------------------------------- /src/pages/login/login.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { LoginPage } from './login'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | LoginPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(LoginPage), 11 | ], 12 | exports: [ 13 | LoginPage 14 | ] 15 | }) 16 | export class LoginPageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/login/login.scss: -------------------------------------------------------------------------------- 1 | page-login { 2 | ion-content { 3 | background: linear-gradient( 4 | rgba(0, 0, 0, 0.5), 5 | rgba(0, 0, 0, 0.5) 6 | ), url('https://user-images.githubusercontent.com/10757519/29750007-3ab45212-8b6a-11e7-8c18-6e9d4542c2fe.jpg'); 7 | } 8 | 9 | ion-footer { 10 | border-top: 0.5px solid lightgray; 11 | } 12 | 13 | .scroll-content { 14 | padding: 0 9.25vw; 15 | } 16 | 17 | .app-name { 18 | margin-top: 10vh; 19 | font-size: 32px; 20 | padding: 18px 0; 21 | } 22 | 23 | .app-desc { 24 | line-height: 1.8; 25 | letter-spacing: 2px; 26 | } 27 | 28 | .login-title { 29 | font-weight: 600; 30 | letter-spacing: 1px; 31 | padding: 3vh 0; 32 | } 33 | 34 | .login__input { 35 | background: white; 36 | border-radius: 20.5px; 37 | margin-bottom: 20px; 38 | 39 | .text-input { 40 | padding-left: 1.75em; 41 | } 42 | } 43 | 44 | .login-footer { 45 | letter-spacing: 1px; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/pages/login/login.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the LoginPage page. 6 | * 7 | * See http://ionicframework.com/docs/components/#navigation for more info 8 | * on Ionic pages and navigation. 9 | */ 10 | @IonicPage() 11 | @Component({ 12 | selector: 'page-login', 13 | templateUrl: 'login.html', 14 | }) 15 | export class LoginPage { 16 | 17 | constructor( 18 | public navCtrl: NavController, 19 | public navParams: NavParams 20 | ) { } 21 | 22 | ionViewDidLoad() { 23 | 24 | } 25 | 26 | goToSignUp() { 27 | this.navCtrl.setRoot('SignUpPage') 28 | } 29 | 30 | goToHome() { 31 | this.navCtrl.setRoot('MenuPage'); 32 | } 33 | 34 | } 35 | -------------------------------------------------------------------------------- /src/pages/menu/menu.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 16 | 17 | 18 | 19 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /src/pages/menu/menu.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { MenuPage } from './menu'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | MenuPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(MenuPage), 11 | ], 12 | exports: [ 13 | MenuPage 14 | ] 15 | }) 16 | export class MenuPageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/menu/menu.scss: -------------------------------------------------------------------------------- 1 | page-menu { 2 | 3 | .menu { 4 | background: linear-gradient( 5 | rgba(0, 0, 0, 0.6), 6 | rgba(0, 0, 0, 0.6) 7 | ), url('https://user-images.githubusercontent.com/10757519/29750007-3ab45212-8b6a-11e7-8c18-6e9d4542c2fe.jpg'); 8 | background-size: cover; 9 | 10 | .scroll-content { 11 | padding: 13vh 12vw 6vh 12vw; 12 | } 13 | } 14 | 15 | .menu__avatar { 16 | width: 55px; 17 | height: 55px; 18 | border-radius: 50%; 19 | margin: 4vh 0; 20 | } 21 | 22 | .menu__item { 23 | background: transparent; 24 | color: #9197a1; 25 | padding-left: 0; 26 | font-weight: 600; 27 | min-height: 0px; 28 | 29 | &.activated { 30 | background: none; 31 | color: white; 32 | } 33 | 34 | .label-md { 35 | margin: 12px 0; 36 | } 37 | } 38 | 39 | .menu__label { 40 | font-size: 14px; 41 | } 42 | 43 | .menu-under { 44 | position: absolute; 45 | bottom: 1em; 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /src/pages/menu/menu.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams, Nav, Menu } from 'ionic-angular'; 3 | 4 | import { Subject } from 'rxjs'; 5 | 6 | /** 7 | * Generated class for the MenuPage page. 8 | * 9 | * See http://ionicframework.com/docs/components/#navigation for more info 10 | * on Ionic pages and navigation. 11 | */ 12 | @IonicPage({ 13 | segment: 'menu' 14 | }) 15 | @Component({ 16 | selector: 'page-menu', 17 | templateUrl: 'menu.html', 18 | }) 19 | export class MenuPage { 20 | 21 | @ViewChild('content') content: Nav; 22 | @ViewChild('menu') menu: Menu; 23 | 24 | private activePage = new Subject(); 25 | private menuRoot = 'HomePage'; 26 | private topMenu = [ 27 | { title: 'home', component: 'HomePage', active: true, icon: 'home' }, 28 | { title: 'seasonal', component: 'HomePage', active: false, icon: 'mz-spoon-knife' }, 29 | { title: 'quick and easy', component: 'HomePage', active: false, icon: 'mz-cart' }, 30 | { title: 'healthy meals', component: 'HomePage', active: false, icon: 'heart' } 31 | ]; 32 | 33 | private underMenu = [ 34 | { title: 'favorite', component: 'WelcomePage', active: false }, 35 | { title: 'account setting', component: 'HomePage', active: false }, 36 | { title: 'sign out', component: 'LoginPage', active: false } 37 | ] 38 | 39 | constructor(public navCtrl: NavController, public navParams: NavParams) { 40 | } 41 | 42 | ionViewDidLoad() { 43 | console.log('ionViewDidLoad MenuPage'); 44 | } 45 | 46 | openPage(page) { 47 | this.content.setRoot(page.component); 48 | this.activePage.next(page); 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /src/pages/menu/transition.ts: -------------------------------------------------------------------------------- 1 | import { MenuType, Menu, Platform, Animation } from 'ionic-angular'; 2 | 3 | /* 4 | * AMAZING idea by Paul Vetter: 5 | * https://github.com/EbilPanda 6 | */ 7 | 8 | export class MenuShiftType extends MenuType { 9 | constructor(private menu: Menu, private plt: Platform) { 10 | super(plt); 11 | 12 | let contentOpenedX: string, menuClosedX: string, menuOpenedX: string; 13 | 14 | contentOpenedX = menu.width() * 0.45 + 'px'; 15 | menuOpenedX = '0px'; 16 | menuClosedX = -menu.width() + 'px'; 17 | 18 | let menuAni = new Animation(plt, menu.getMenuElement()); 19 | menuAni.fromTo('transform', 'translate3d(' + menuClosedX + ',0px,0px)', 'translate3d(0px,0px,0px)'); 20 | this.ani.add(menuAni); 21 | 22 | let contentApi = new Animation(plt, menu.getContentElement()); 23 | let scale = 0.6; 24 | contentApi.fromTo('transform', 'translate3d(0px,0px,0px) scale3d(1,1,1)', 'translate3d(' + contentOpenedX + ',0px,0px) scale3d(0.6,0.6,0.6)'); 25 | // contentApi.fromTo('scale3d', '(1,1,1)', '(0.6,0.6,0.6)'); 26 | // contentApi.beforeAddClass('opening'); 27 | // contentApi.afterRemoveClass('opening'); 28 | this.ani.add(contentApi); 29 | } 30 | } -------------------------------------------------------------------------------- /src/pages/recipe/recipe.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 14 | 15 | {{ recipe.name }} 16 | 17 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

{{ title }}

29 |
30 |

{{ i }}

31 |
32 | 33 | 34 | 35 | 36 |

37 | {{ stepTitle }} 38 |

39 | 40 | -------------------------------------------------------------------------------- /src/pages/recipe/recipe.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { RecipePage } from './recipe'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | RecipePage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(RecipePage), 11 | ], 12 | exports: [ 13 | RecipePage 14 | ] 15 | }) 16 | export class RecipePageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/recipe/recipe.scss: -------------------------------------------------------------------------------- 1 | page-recipe { 2 | 3 | .container { 4 | padding: 16px 12.5vw; 5 | } 6 | 7 | .ingredient__thumb { 8 | width: 39.5vh; 9 | object-fit: cover; 10 | } 11 | 12 | .ingredient__title, 13 | .ingredient__item { 14 | padding: 0 12.5vw; 15 | } 16 | 17 | .ingredient-title { 18 | font-weight: bold; 19 | } 20 | 21 | .ingredient__item { 22 | line-height: 2; 23 | letter-spacing: 1px; 24 | } 25 | 26 | .step__label { 27 | font-size: 1.5em; 28 | font-weight: bold; 29 | letter-spacing: 2px; 30 | margin: 0; 31 | } 32 | 33 | .step { 34 | min-height: 9.5vh; 35 | 36 | & > .toolbar-background { 37 | background-color: white; 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/pages/recipe/recipe.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | import { trigger, state, style, transition, animate, keyframes, query, stagger } from '@angular/animations'; 4 | /** 5 | * Generated class for the RecipePage page. 6 | * 7 | * See http://ionicframework.com/docs/components/#navigation for more info 8 | * on Ionic pages and navigation. 9 | */ 10 | @IonicPage() 11 | @Component({ 12 | selector: 'page-recipe', 13 | templateUrl: 'recipe.html', 14 | animations: [ 15 | trigger('listAnim', [ 16 | transition('* => *', [ 17 | query(':enter', style({ opacity: 0 }), { optional: true }), 18 | 19 | query(':enter', stagger(100, [ 20 | animate('1s ease-in', keyframes([ 21 | style({ opacity: 0, transform: 'translateX(-75%)', offset: 0 }), 22 | style({ opacity: .5, transform: 'translateX(35px)', offset: 0.3 }), 23 | style({ opacity: 1, transform: 'translateX(0)', offset: 1.0 }), 24 | ]))]), { optional: true }), 25 | query(':leave', stagger(100, [ 26 | animate('1s ease-in', keyframes([ 27 | style({ opacity: 1, transform: 'translateX(0)', offset: 0 }), 28 | style({ opacity: .5, transform: 'translateX(35px)', offset: 0.3 }), 29 | style({ opacity: 0, transform: 'translateX(-75%)', offset: 1.0 }), 30 | ]))]), { optional: true }), 31 | ]) 32 | ]), 33 | trigger('thumbAnim', [ 34 | transition('* => fadeIn', [ 35 | animate('500ms ease', style({ opacity: 1, transform: 'translateY(0)' })) 36 | ]), 37 | transition('* => fadeOut', [ 38 | animate('500ms ease', style({ opacity: 0, transform: 'translateY(-50px)' })) 39 | ]) 40 | ]), 41 | trigger('titleAnim', [ 42 | transition('* => fadeIn', [ 43 | animate('750ms ease', style({ opacity: 1, transform: 'translateY(0)' })) 44 | ]), 45 | transition('* => fadeOut', [ 46 | animate('750ms ease', style({ opacity: 0, transform: 'translateY(-50px)' })) 47 | ]) 48 | ]) 49 | ] 50 | }) 51 | export class RecipePage { 52 | 53 | recipe: any = { 54 | name: 'ROMANESCO RISOTTO', 55 | liked: false, 56 | thumb: 'assets/images/ingredients.png', 57 | ingredients: [ 58 | '300g Thinly sliced romanesco ', 59 | '30 ml Extra-virgin olive oil ', 60 | '16 Medium peeled shrimp ', 61 | '2 Garlic cloves, thinly sliced ', 62 | '150g Treviso leaves, torn ' 63 | ], 64 | steps: [ 65 | { 66 | step: 1, 67 | title: 'Make Sauce', 68 | desc: [ 69 | 'Make the vinaigrette.', 70 | 'In a bowl whisk together the shiro dashi and yuzu.', 71 | 'Slowly whisk in the olive oil.', 72 | 'Season to taste with blackpepper.' 73 | ] 74 | }, 75 | { 76 | step: 2, 77 | title: 'Cook Rice', 78 | desc: [ 79 | 'Heat the oil in a large skillet over medium-high heat.', 80 | 'Add the roman and cook.', 81 | 'Stirring frequently until caramelized, about 2 to minutes' 82 | ] 83 | }, 84 | { 85 | step: 3, 86 | title: 'Make Sauce', 87 | desc: [ 88 | 'Make the vinaigrette.', 89 | 'In a bowl whisk together the shiro dashi and yuzu.', 90 | 'Slowly whisk in the olive oil.', 91 | 'Season to taste with blackpepper.' 92 | ] 93 | }, 94 | { 95 | step: 4, 96 | title: 'Cook Rice', 97 | desc: [ 98 | 'Heat the oil in a large skillet over medium-high heat.', 99 | 'Add the roman and cook.', 100 | 'Stirring frequently until caramelized, about 2 to minutes' 101 | ] 102 | }, 103 | ] 104 | }; 105 | curStep: number = 0; 106 | description: any = []; 107 | title: string = 'ingredients'; 108 | showThumb: boolean = false; 109 | 110 | constructor(public navCtrl: NavController, public navParams: NavParams) { 111 | } 112 | 113 | ionViewDidLoad() { 114 | this.description = this.recipe.ingredients; 115 | this.thumbState = 'fadeIn'; 116 | this.titleState = 'fadeIn'; 117 | } 118 | 119 | public get heartIcon(): string { 120 | return this.recipe.liked ? 'heart' : 'heart-outline'; 121 | } 122 | 123 | public get heartIconColor(): string { 124 | return this.recipe.liked ? 'like' : 'light-grey'; 125 | } 126 | 127 | public get stepTitle(): string { 128 | let curStepTitle: string; 129 | let isFinash = this.curStep >= this.recipe.steps.length; 130 | if (isFinash) { 131 | curStepTitle = 'Finash Cook ~'; 132 | } else { 133 | curStepTitle = `Step${this.recipe.steps[this.curStep].step}: ${this.recipe.steps[this.curStep].title}`; 134 | } 135 | return curStepTitle; 136 | } 137 | 138 | onLike() { 139 | this.recipe.liked = !this.recipe.liked; 140 | } 141 | 142 | goBack() { 143 | this.navCtrl.pop(); 144 | } 145 | 146 | thumbState: string = 'fadeOut'; 147 | titleState: string = 'fadeOut'; 148 | 149 | animateMe() { 150 | if (this.curStep >= this.recipe.steps.length) return; 151 | this.curStep += 1; 152 | this.description = []; 153 | this.thumbState = 'fadeOut'; 154 | this.titleState = 'fadeOut'; 155 | setTimeout(() => { 156 | this.thumbState = 'fadeIn'; 157 | this.recipe.thumb = this.recipe.thumb != 'assets/images/recipe.png' ? 'assets/images/recipe.png' : 'assets/images/ingredients.png'; 158 | }, 500); 159 | setTimeout(() => { 160 | this.titleState = 'fadeIn'; 161 | this.title = 'Step' + this.curStep; 162 | }, 750); 163 | setTimeout(() => { 164 | let step = this.recipe.steps.find(x => x.step === this.curStep); 165 | this.description.push(...step.desc); 166 | }, 1000); 167 | } 168 | 169 | } 170 | -------------------------------------------------------------------------------- /src/pages/search/search.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |

24 search results

26 | 27 | 28 | 29 |
30 |

{{ r.name }}

31 |

by {{ r.chef }}

32 |
33 | 34 | 35 | -------------------------------------------------------------------------------- /src/pages/search/search.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { SearchPage } from './search'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | SearchPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(SearchPage), 11 | ], 12 | exports: [ 13 | SearchPage 14 | ] 15 | }) 16 | export class SearchPageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/search/search.scss: -------------------------------------------------------------------------------- 1 | page-search { 2 | 3 | .toolbar-title { 4 | position: relative; 5 | } 6 | 7 | .toolbar-ios ion-title { 8 | padding: 0 0 0 4em; 9 | } 10 | 11 | .search-header { 12 | padding: 1.5vw 10vw 0 10vw; 13 | background-color: #f7f7f7; 14 | } 15 | 16 | .search__input { 17 | width: 70vw; 18 | border-left: none; 19 | border-radius: 20px; 20 | background-color: white; 21 | padding-left: 20px; 22 | height: 8.5vw; 23 | 24 | & .text-input { 25 | letter-spacing: 1px; 26 | margin: 2vw; 27 | font-size: 0.8em; 28 | } 29 | } 30 | 31 | .search__button { 32 | position: absolute; 33 | right: 1em; 34 | top: 0; 35 | height: 8.5vw; 36 | margin: 0; 37 | letter-spacing: 1px; 38 | border-bottom-right-radius: 22.5px; 39 | border-top-right-radius: 22.5px; 40 | box-shadow: none; 41 | } 42 | 43 | // result style 44 | // ======================== 45 | .result__thumb { 46 | width: 20vw; 47 | margin-right: 6vw; 48 | } 49 | 50 | .result-info { 51 | letter-spacing: 2px; 52 | } 53 | 54 | .result__name, 55 | .result__chef { 56 | margin: 0; 57 | } 58 | 59 | .result__name { 60 | font-weight: bold; 61 | font-size: 1.1em; 62 | margin-bottom: 0.75em; 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /src/pages/search/search.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the SearchPage page. 6 | * 7 | * See http://ionicframework.com/docs/components/#navigation for more info 8 | * on Ionic pages and navigation. 9 | */ 10 | @IonicPage() 11 | @Component({ 12 | selector: 'page-search', 13 | templateUrl: 'search.html', 14 | }) 15 | export class SearchPage { 16 | 17 | keyword: string; 18 | results: any[] = []; 19 | 20 | constructor(public navCtrl: NavController, public navParams: NavParams) { 21 | } 22 | 23 | ionViewDidLoad() { 24 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 25 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 26 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 27 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 28 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 29 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 30 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 31 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 32 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 33 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 34 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 35 | this.results.push({ name: 'Miso Steak', chef: 'Jamie Malo', thumb: 'assets/images/recipe.png' }); 36 | } 37 | 38 | onInput(ev: any) { 39 | 40 | } 41 | 42 | onCancel(ev: any) { 43 | 44 | } 45 | 46 | goBack() { 47 | // this.navCtrl.popToRoot(); 48 | this.navCtrl.setRoot('MenuPage'); 49 | } 50 | 51 | } 52 | -------------------------------------------------------------------------------- /src/pages/sign-up/sign-up.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 |

Get inspired bu thousand recipes from home chef to iron chef

10 | 11 | 12 | 13 | 14 |
15 | 16 | Subsrcible newsletter 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 | 28 | 29 | -------------------------------------------------------------------------------- /src/pages/sign-up/sign-up.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { SignUpPage } from './sign-up'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | SignUpPage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(SignUpPage), 11 | ], 12 | exports: [ 13 | SignUpPage 14 | ] 15 | }) 16 | export class SignUpPageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/sign-up/sign-up.scss: -------------------------------------------------------------------------------- 1 | page-sign-up { 2 | ion-footer { 3 | border-top: 0.5px solid lightgray; 4 | } 5 | 6 | .scroll-content { 7 | padding: 0 9.25%; 8 | } 9 | 10 | .app-desc { 11 | width: 90%; 12 | margin: 10vh auto 0 auto; 13 | line-height: 1.8; 14 | letter-spacing: 1px; 15 | } 16 | 17 | .signup-title { 18 | font-weight: 600; 19 | padding: 3vh 0; 20 | } 21 | 22 | .signup__input { 23 | background: #f7f7f7; 24 | border-radius: 20px; 25 | margin-bottom: 20px; 26 | 27 | .text-input { 28 | padding-left: 1.75em; 29 | } 30 | } 31 | 32 | .sub-text { 33 | padding-left: 8px; 34 | } 35 | 36 | .signup-footer { 37 | letter-spacing: 1px; 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/pages/sign-up/sign-up.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams } from 'ionic-angular'; 3 | 4 | /** 5 | * Generated class for the SignUpPage page. 6 | * 7 | * See http://ionicframework.com/docs/components/#navigation for more info 8 | * on Ionic pages and navigation. 9 | */ 10 | @IonicPage() 11 | @Component({ 12 | selector: 'page-sign-up', 13 | templateUrl: 'sign-up.html', 14 | }) 15 | export class SignUpPage { 16 | 17 | subsrcible: boolean; 18 | 19 | constructor(public navCtrl: NavController, public navParams: NavParams) { 20 | } 21 | 22 | ionViewDidLoad() { 23 | console.log('ionViewDidLoad SignUpPage'); 24 | } 25 | 26 | goToLogin() { 27 | this.navCtrl.setRoot('LoginPage'); 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/welcome/cake.anim.ts: -------------------------------------------------------------------------------- 1 | import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'; 2 | 3 | declare var mina: any; 4 | 5 | export const cakeAnim = function (snap) { 6 | let cake = snap.select('#cake'); 7 | let cakePlate = cake.select('.cake__plate').attr({ opacity: 0, y: 100 }); 8 | let cakeCherry = cake.select('.cake__cherry').attr({ opacity: 1, transform: 's0 0' }); 9 | let cakeChocolate = cake.select('.cake__chocolate').attr({ opacity: 0, transform: 't0 -200' }); 10 | let cekeMiddle = cake.select('.ceke__middle').attr({ opacity: 0, width: 0 }); 11 | let cakeCream = cake.select('.cake__cream').attr({ opacity: 0, d: 'm376.087,136.468l-242.174,0c-16.412,0 -29.84,13.428 -29.84,29.84l0,50.784c2.974,0.514 6.026,0.797 9.147,0.797c20.527,0 7.336,-2.586 46.26,-2.592c38.924,-0.006 25.50667,1.12267 48.26,2.592c22.75333,1.46933 34.336,-1.586 61.26,-1.592c26.924,-0.006 43.17333,2.78933 54.26,1.592c11.08667,-1.19733 16.17333,8.60533 25.26,-2.592c47.924,-1.006 27.733,0.592 48.26,2.592c20.527,2 6.173,-0.283 9.147,-0.797l0,-50.784c0,-16.412 -13.428,-29.84 -29.84,-29.84z' }); 12 | 13 | let shadow = cake.select('.cake__shadow').attr({ transform: 's0 0, t0 0' }); 14 | let cakeCherryRight = cake.select('.cake__cherry--right').attr({ opacity: 0 }); 15 | let cakeChocolateRight = cake.select('.cake__chocolate--right').attr({ opacity: 0 }); 16 | let cekeMiddleRight = cake.select('.ceke__middle--right').attr({ opacity: 0 }); 17 | let cakeCreamRight = cake.select('.cake__cream--right').attr({ opacity: 0 }); 18 | let cakePlateRight = cake.select('.cake__plate--right').attr({ opacity: 0 }); 19 | 20 | setTimeout(() => { 21 | cakePlate.animate({ opacity: 1, y: 349.34 }, 300, mina.bounce); 22 | }, 300); 23 | 24 | setTimeout(() => { 25 | cakeChocolate.animate({ opacity: 1, transform: 't0 0' }, 300, mina.bounce); 26 | }, 600); 27 | 28 | setTimeout(() => { 29 | cekeMiddle.animate({ opacity: 1, width: 301.86 }, 300, mina.bounce); 30 | }, 900); 31 | 32 | setTimeout(() => { 33 | cakeCream.animate({ opacity: 1 }, 300, mina.bounce); 34 | }, 1200); 35 | 36 | setTimeout(() => { 37 | let path = `M377.087,136.468H134.913c-16.412,0-29.84,13.428-29.84,29.84v50.784 38 | c2.974,0.514,6.026,0.797,9.147,0.797c20.527,0,38.336-11.598,47.26-28.592c8.924,16.994,26.733,28.592,47.26,28.592 39 | s38.336-11.598,47.26-28.592c8.924,16.994,26.733,28.592,47.26,28.592s38.336-11.598,47.26-28.592 40 | c8.924,16.994,26.733,28.592,47.26,28.592c3.121,0,6.173-0.283,9.147-0.797v-50.784 41 | C406.927,149.896,393.499,136.468,377.087,136.468z`; 42 | cakeCream.animate({ d: path }, 400, mina.bounce); 43 | }, 1400); 44 | 45 | setTimeout(() => { 46 | cakeCherry.animate({ opacity: 1, transform: 's1 1' }, 300, mina.bounce); 47 | }, 1600); 48 | 49 | // load shadow 50 | setTimeout(() => { 51 | shadow.animate({ transform: 's1 1, t0 0' }, 500, mina.bounce); 52 | }, 1800); 53 | setTimeout(() => { 54 | cakeCherryRight.animate({ opacity: 1 }, 100, mina.bounce); 55 | }, 1900); 56 | setTimeout(() => { 57 | cakeCreamRight.animate({ opacity: 1 }, 100, mina.bounce); 58 | }, 2000); 59 | setTimeout(() => { 60 | cakeChocolateRight.animate({ opacity: 1 }, 100, mina.bounce); 61 | }, 2100); 62 | setTimeout(() => { 63 | cekeMiddleRight.animate({ opacity: 1 }, 100, mina.bounce); 64 | }, 2200); 65 | setTimeout(() => { 66 | cakePlateRight.animate({ opacity: 1 }, 100, mina.bounce); 67 | }, 2300); 68 | } -------------------------------------------------------------------------------- /src/pages/welcome/ice-cream.anim.ts: -------------------------------------------------------------------------------- 1 | import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'; 2 | 3 | declare var mina: any; 4 | 5 | export const iceCreamAnim = function (snap) { 6 | let ice = snap.select('#ice-cream'); 7 | let iceStick = ice.select('.ice-cream__stick').attr({ opacity: 0 }); 8 | let iceChocolate = ice.select('.ice-cream__chocolate').attr({ opacity: 0 }); 9 | let iceCream = ice.select('.ice-cream__cream').attr({ 'fill-opacity': 0 }); 10 | 11 | let shadow = ice.select('.ice-cream__shadow').attr({ transform: 's0 0, t0 0' }); 12 | let iceStickRight = ice.select('.ice-cream__stick--right').attr({ opacity: 0 }); 13 | let iceChocolateRight = ice.select('.ice-cream__chocolate--right').attr({ opacity: 0 }); 14 | let iceCreamRight = ice.select('.ice-cream__cream--right').attr({ opacity: 0 }); 15 | 16 | setTimeout(() => { 17 | iceStick.animate({ opacity: 1, }, 300, mina.bounce); 18 | }, 300); 19 | 20 | setTimeout(() => { 21 | iceChocolate.animate({ opacity: 1 }, 300, mina.bounce); 22 | }, 500); 23 | 24 | setTimeout(() => { 25 | iceCream.animate({ 'fill-opacity': 1 }, 500, mina.ease); 26 | }, 800); 27 | 28 | // setTimeout(() => { 29 | // iceCream.animate({ d: path }, 300, mina.bounce); 30 | // }, 1100); 31 | 32 | // load shadow 33 | setTimeout(() => { 34 | shadow.animate({ transform: 's1 1, t0 0' }, 500, mina.bounce); 35 | }, 1200); 36 | setTimeout(() => { 37 | iceStickRight.animate({ opacity: 1 }, 150, mina.bounce); 38 | }, 1350); 39 | setTimeout(() => { 40 | iceChocolateRight.animate({ opacity: 1 }, 150, mina.bounce); 41 | }, 1500); 42 | setTimeout(() => { 43 | iceCreamRight.animate({ opacity: 1 }, 150, mina.bounce); 44 | }, 1650); 45 | } -------------------------------------------------------------------------------- /src/pages/welcome/juice.anim.ts: -------------------------------------------------------------------------------- 1 | import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'; 2 | 3 | declare var mina: any; 4 | 5 | export const JuiceAnim = function (snap) { 6 | let orageJuice = snap.select('#orange-juice'); 7 | let orangeOut = orageJuice.select('.orange__out').attr({ opacity: 1, transform: 's0 0' }); 8 | let orangeOutRight = orageJuice.select('.orange__out--right').attr({ opacity: 1, transform: 's0 0' }); 9 | let orangeInner = orageJuice.select('.orange__inner').attr({ opacity: 1, transform: 's0 0' }); 10 | let orangeInnerRight = orageJuice.select('.orange__inner--right').attr({ opacity: 1, transform: 's0 0' }); 11 | let glass = orageJuice.select('.orange__glass').attr({ opacity: 1 }); 12 | let juice = orageJuice.select('.juice').attr({ opacity: 0, d: 'm299.992,435.01901l-87.984,0c-17.421,0 -31.675,-3.40715 -31.675,-7.57132l0,-44.57169l151.334,0l0,44.57169c0,4.16416 -14.254,7.57132 -31.675,7.57132z' }); 13 | 14 | let shadow = orageJuice.select('.shadow').attr({ transform: 's0 0, t0 0' }); 15 | let glassRight = orageJuice.select('.orange__glass--right').attr({ opacity: 0 }); 16 | let juiceRight = orageJuice.select('.juice--right').attr({ opacity: 0 }); 17 | 18 | setTimeout(() => { 19 | orangeOut.animate({ transform: 's1 1' }, 300, mina.bounce); 20 | orangeOutRight.animate({ transform: 's1 1' }, 300, mina.bounce); 21 | orangeInner.animate({ transform: 's1 1' }, 300, mina.bounce); 22 | orangeInnerRight.animate({ transform: 's1 1' }, 300, mina.bounce); 23 | }, 500); 24 | 25 | setTimeout(() => { 26 | juice.animate({ opacity: 1, d: "M299.992,435.019h-87.984c-17.421,0-31.675-14.254-31.675-31.675V216.876h151.334v186.468C331.667,420.765,317.413,435.019,299.992,435.019z" }, 800, mina.bounce); 27 | }, 700); 28 | 29 | // load shadow 30 | setTimeout(() => { 31 | shadow.animate({ transform: 's1 1, t0 0' }, 400, mina.bounce); 32 | }, 1300); 33 | setTimeout(() => { 34 | juiceRight.animate({ opacity: 1 }, 100, mina.bounce); 35 | }, 1400) 36 | setTimeout(() => { 37 | glassRight.animate({ opacity: 1 }, 100, mina.bounce); 38 | }, 1500) 39 | } -------------------------------------------------------------------------------- /src/pages/welcome/toast.anim.ts: -------------------------------------------------------------------------------- 1 | import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'; 2 | 3 | export const toastAnim = function (snap) { 4 | let toast = snap.select('#toast'); 5 | 6 | // bread element 7 | let bread = toast.select('.toast__bread').attr({ opacity: 1, transform: 's0 0' }); 8 | let breadBorder = toast.select('.toast__bread-border').attr({ opacity: 1, transform: 's0 0' }); 9 | // egg element 10 | let mEggWhite = new Snap.Matrix(); 11 | mEggWhite.scale(0); 12 | mEggWhite.rotate(90); 13 | let eggWhitePath = 'm262.98898,163.84c-61.01006,-7.22434 -116.26131,66.17412 -77.83234,118.89403c34.927,47.91641 43.52274,51.44787 59.88953,50.15438c16.36679,-1.29349 63.6167,9.05143 84.81124,-41.57203c16.17672,-38.63793 31.0173,-115.88492 -66.86843,-127.47638z' 14 | let eggWhite = toast.select('.toast__egg-white').attr({ opacity: 1, transform: mEggWhite, d: eggWhitePath }); 15 | let eggYolk = toast.select('.toast__egg-yolk').attr({ opacity: 1, transform: 's0 0' }); 16 | 17 | // shadow element 18 | let shadow = toast.select('.shadow').attr({ transform: 's0 0, t0 0' }); 19 | let breadRight = toast.select('.toast__bread--right').attr({ opacity: 0 }); 20 | let breadRightBorder = toast.select('.toast__bread-border--right').attr({ opacity: 0 }); 21 | let eggWhiteRight = toast.select('.toast__egg-white--right').attr({ opacity: 0 }); 22 | let eggYolkRight = toast.select('.toast__egg-yolk--right').attr({ opacity: 0 }); 23 | 24 | // load bread 25 | setTimeout(() => { 26 | bread.animate({ transform: 's1 1' }, 300, window['mina'].ease); 27 | breadBorder.animate({ transform: 's1 1' }, 300, window['mina'].ease); 28 | }, 500); 29 | 30 | // load egg 31 | setTimeout(() => { 32 | let mEggWhite = new Snap.Matrix(); 33 | mEggWhite.scale(1); 34 | mEggWhite.rotate(0); 35 | eggWhite.animate({ transform: mEggWhite }, 300, window['mina'].elastic); 36 | }, 800); 37 | setTimeout(() => { 38 | let eggWhitePath = 'M263.595,127.969c-65.122-8.708-132.782,46.273-91.763,109.82c37.281,57.757-13.32,80.793,19.241,120.464c28.694,34.959,123.409,0.062,146.032-60.958C354.372,250.722,368.078,141.941,263.595,127.969z' 39 | eggWhite.animate({ d: eggWhitePath }, 800, window['mina'].elastic); 40 | eggYolk.animate({ transform: 's1 1' }, 400, window['mina'].elastic); 41 | }, 1100); 42 | 43 | // load shadow 44 | setTimeout(() => { 45 | shadow.animate({ transform: 's1 1, t0 0' }, 400, window['mina'].elastic); 46 | }, 1500); 47 | setTimeout(() => { 48 | eggYolkRight.animate({ opacity: 1 }, 100, window['mina'].ease); 49 | }, 1600); 50 | setTimeout(() => { 51 | eggWhiteRight.animate({ opacity: 1 }, 100, window['mina'].ease); 52 | }, 1700); 53 | setTimeout(() => { 54 | breadRight.animate({ opacity: 1 }, 100, window['mina'].ease); 55 | }, 1800); 56 | setTimeout(() => { 57 | breadRightBorder.animate({ opacity: 1 }, 100, window['mina'].ease); 58 | }, 1900); 59 | } -------------------------------------------------------------------------------- /src/pages/welcome/welcome.html: -------------------------------------------------------------------------------- 1 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

{{ slide.title }}

18 |

{{ slide.desc }}

19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/pages/welcome/welcome.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { IonicPageModule } from 'ionic-angular'; 3 | import { WelcomePage } from './welcome'; 4 | 5 | @NgModule({ 6 | declarations: [ 7 | WelcomePage, 8 | ], 9 | imports: [ 10 | IonicPageModule.forChild(WelcomePage), 11 | ], 12 | exports: [ 13 | WelcomePage 14 | ] 15 | }) 16 | export class WelcomePageModule {} 17 | -------------------------------------------------------------------------------- /src/pages/welcome/welcome.scss: -------------------------------------------------------------------------------- 1 | .ios, .md { 2 | 3 | page-welcome { 4 | 5 | .slide-zoom { 6 | height: 100%; 7 | } 8 | 9 | .toolbar-background { 10 | background: transparent; 11 | border-color: transparent; 12 | } 13 | 14 | .slide-one { 15 | background-color: #ffe047; 16 | } 17 | 18 | .slide-two { 19 | background-color: #ab3ccc; 20 | } 21 | 22 | .slide-three { 23 | background-color: #00bb64; 24 | } 25 | 26 | .slide-four { 27 | background-color: #00e7f1; 28 | } 29 | 30 | ion-slide svg { 31 | height: 35vh ; 32 | width: 50vw; 33 | margin-top: 10vh; 34 | } 35 | 36 | .swiper-pagination-bullet-active { 37 | background: white; 38 | } 39 | 40 | } 41 | 42 | } 43 | -------------------------------------------------------------------------------- /src/pages/welcome/welcome.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild, ElementRef, Renderer } from '@angular/core'; 2 | import { IonicPage, NavController, NavParams, Slides } from 'ionic-angular'; 3 | import { WelcomeData } from '../../data/welcome.data'; 4 | 5 | import Snap from 'imports-loader?this=>window,fix=>module.exports=0!snapsvg/dist/snap.svg.js'; 6 | import { toastAnim } from './toast.anim'; 7 | import { JuiceAnim } from './juice.anim'; 8 | import { cakeAnim } from './cake.anim'; 9 | import { iceCreamAnim } from './ice-cream.anim'; 10 | 11 | /** 12 | * Generated class for the WelcomePage page. 13 | * 14 | * See http://ionicframework.com/docs/components/#navigation for more info 15 | * on Ionic pages and navigation. 16 | */ 17 | @IonicPage() 18 | @Component({ 19 | selector: 'page-welcome', 20 | templateUrl: 'welcome.html', 21 | }) 22 | export class WelcomePage { 23 | 24 | @ViewChild(Slides) slides: Slides; 25 | 26 | snap: any; 27 | slideData: any[] = WelcomeData; 28 | 29 | constructor( 30 | public navCtrl: NavController, 31 | public navParams: NavParams, 32 | private element: ElementRef, 33 | private renderer: Renderer 34 | ) { } 35 | 36 | ionViewDidEnter() { 37 | this.slideChanged(); 38 | } 39 | 40 | slideChanged() { 41 | let currentIndex: number = this.slides.getActiveIndex(); 42 | let prevIndex: number = this.slides.getPreviousIndex(); 43 | // beyond sildes, reset prevIndex 44 | if (prevIndex >= this.slideData.length) { 45 | prevIndex = this.slideData.length - 1; 46 | } 47 | // active edge, return 48 | if (currentIndex >= this.slideData.length || currentIndex < 0) { return; } 49 | this.svgOut(prevIndex); 50 | this.svgIn(currentIndex); 51 | } 52 | 53 | svgIn(index: number) { 54 | let slide = this.slideData[index]; 55 | let svgUrl = slide.svgUrl; 56 | let svgId = slide.svgId; 57 | Snap.load(svgUrl, res => { 58 | this.snap = Snap(`#${svgId}`); 59 | this.snap.append(res); 60 | switch (index) { 61 | case 0: toastAnim(this.snap); break; 62 | case 1: JuiceAnim(this.snap); break; 63 | case 2: cakeAnim(this.snap); break; 64 | case 3: iceCreamAnim(this.snap); break; 65 | } 66 | }); 67 | } 68 | 69 | svgOut(index: number) { 70 | if (typeof index == 'number') { 71 | let prevSlide = this.slideData[index]; 72 | let prevSvgId = prevSlide.svgId; 73 | if (prevSvgId) { 74 | document.getElementById(prevSvgId).innerHTML = ''; 75 | } 76 | } 77 | } 78 | 79 | goToHome() { 80 | this.navCtrl.setRoot('LoginPage'); 81 | } 82 | 83 | } 84 | -------------------------------------------------------------------------------- /src/service-worker.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Check out https://googlechrome.github.io/sw-toolbox/ for 3 | * more info on how to use sw-toolbox to custom configure your service worker. 4 | */ 5 | 6 | 7 | 'use strict'; 8 | importScripts('./build/sw-toolbox.js'); 9 | 10 | self.toolbox.options.cache = { 11 | name: 'ionic-cache' 12 | }; 13 | 14 | // pre-cache our key assets 15 | self.toolbox.precache( 16 | [ 17 | './build/main.js', 18 | './build/main.css', 19 | './build/polyfills.js', 20 | 'index.html', 21 | 'manifest.json' 22 | ] 23 | ); 24 | 25 | // dynamically cache any other local assets 26 | self.toolbox.router.any('/*', self.toolbox.cacheFirst); 27 | 28 | // for any other requests go to the network, cache, 29 | // and then only use that cached resource if your user goes offline 30 | self.toolbox.router.default = self.toolbox.networkFirst; 31 | -------------------------------------------------------------------------------- /src/shared.ts: -------------------------------------------------------------------------------- 1 | export * from '../../cross-app/config' 2 | export * from '../../cross-app/models' 3 | export * from '../../cross-app/services' 4 | export * from '../../cross-app/mock' 5 | 6 | export * from '../../core' 7 | -------------------------------------------------------------------------------- /src/theme/icons.scss: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'icomoon'; 3 | src: url('../assets/fonts/icomoon.eot?g9cpzb'); 4 | src: url('../assets/fonts/icomoon.eot?g9cpzb#iefix') format('embedded-opentype'), 5 | url('../assets/fonts/icomoon.ttf?g9cpzb') format('truetype'), 6 | url('../assets/fonts/icomoon.woff?g9cpzb') format('woff'), 7 | url('../assets/fonts/icomoon.svg?g9cpzb#icomoon') format('svg'); 8 | font-weight: normal; 9 | font-style: normal; 10 | } 11 | 12 | [class^="icon-"], [class*=" icon-"] { 13 | /* use !important to prevent issues with browser extensions that change fonts */ 14 | font-family: 'icomoon' !important; 15 | speak: none; 16 | font-style: normal; 17 | font-weight: normal; 18 | font-variant: normal; 19 | text-transform: none; 20 | line-height: 1; 21 | 22 | /* Better Font Rendering =========== */ 23 | -webkit-font-smoothing: antialiased; 24 | -moz-osx-font-smoothing: grayscale; 25 | } 26 | 27 | @mixin makeIcon($arg, $val) { 28 | .mz-#{$arg}:before , 29 | .ion-ios-mz-#{$arg}:before , 30 | .ion-ios-mz-#{$arg}-outline:before , 31 | .ion-md-mz-#{$arg}:before , 32 | .ion-md-mz-#{$arg}-outline:before { 33 | content: $val; 34 | } 35 | } 36 | 37 | @include makeIcon(cart, "\e93a"); 38 | @include makeIcon(spoon-knife, "\e9a3"); 39 | -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/v2/theming/ 3 | $font-path: "../assets/fonts"; 4 | 5 | @import "ionic.globals"; 6 | 7 | 8 | // Shared Variables 9 | // -------------------------------------------------- 10 | // To customize the look and feel of this app, you can override 11 | // the Sass variables found in Ionic's source scss files. 12 | // To view all the possible Ionic variables, see: 13 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 14 | $card-md-margin-left: 0; 15 | $card-md-margin-right: 0; 16 | 17 | 18 | // Named Color Variables 19 | // -------------------------------------------------- 20 | // Named colors makes it easy to reuse colors on various components. 21 | // It's highly recommended to change the default colors 22 | // to match your app's branding. Ionic uses a Sass map of 23 | // colors so you can add, rename and remove colors as needed. 24 | // The "primary" color is the only required color in the map. 25 | 26 | $colors: ( 27 | // primary: #F65B28, 28 | primary: #54d582, 29 | palm-leaf: #35452D, 30 | like: #ff5b58, 31 | white: #F7F7F7, 32 | grey: #CDCDCD, 33 | light-grey: #D3D2D0, 34 | fiery-orange: #AE5A32, 35 | gold: #FAC309, 36 | ); 37 | 38 | 39 | // App iOS Variables 40 | // -------------------------------------------------- 41 | // iOS only Sass variables can go here 42 | 43 | $toolbar-ios-title-text-color: map-get($colors, palm-leaf); 44 | 45 | 46 | // App Material Design Variables 47 | // -------------------------------------------------- 48 | // Material Design only Sass variables can go here 49 | 50 | $toolbar-md-title-text-color: map-get($colors, palm-leaf); 51 | 52 | // App Windows Variables 53 | // -------------------------------------------------- 54 | // Windows only Sass variables can go here 55 | 56 | $toolbar-wp-title-text-color: map-get($colors, palm-leaf); 57 | 58 | // App Theme 59 | // -------------------------------------------------- 60 | // Ionic apps can have different themes applied, which can 61 | // then be future customized. This import comes last 62 | // so that the above variables are used and Ionic's 63 | // default are overridden. 64 | 65 | @import "ionic.theme.default"; 66 | 67 | 68 | $ionicons-font-path: "../assets/fonts"; 69 | // Ionicons 70 | // -------------------------------------------------- 71 | // The premium icon font for Ionic. For more info, please see: 72 | // http://ionicframework.com/docs/v2/ionicons/ 73 | // @import "ionic.ionicons"; 74 | @import "ionicons"; 75 | 76 | 77 | // Fonts 78 | // -------------------------------------------------- 79 | 80 | @import "roboto"; 81 | @import "noto-sans"; 82 | $font-family-md-base: "Handlee"; 83 | $font-family-ios-base: "Handlee"; 84 | $font-family-wp-base: "Handlee"; -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "allowSyntheticDefaultImports": true, 4 | "declaration": false, 5 | "emitDecoratorMetadata": true, 6 | "experimentalDecorators": true, 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "module": "es2015", 12 | "moduleResolution": "node", 13 | "sourceMap": true, 14 | "target": "es5", 15 | 16 | "baseUrl": ".", 17 | "paths": { 18 | "rxjs": ["./node_modules/rxjs"] 19 | } 20 | }, 21 | "include": [ 22 | "src/**/*.ts" 23 | ], 24 | "exclude": [ 25 | "node_modules" 26 | ], 27 | "compileOnSave": false, 28 | "atom": { 29 | "rewriteTsconfig": false 30 | } 31 | } -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-duplicate-variable": true 4 | }, 5 | "rulesDirectory": [ 6 | "node_modules/tslint-eslint-rules/dist/rules" 7 | ] 8 | } --------------------------------------------------------------------------------