├── .gitignore ├── .io-config.json ├── CHANGELOG.md ├── README.md ├── __MACOSX └── resources │ └── ._.DS_Store ├── config.xml ├── config └── sass.config.js ├── ionic.config.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.psd ├── ios │ ├── icon │ │ ├── icon-40.png │ │ ├── icon-40@2x.png │ │ ├── icon-40@3x.png │ │ ├── icon-50.png │ │ ├── icon-50@2x.png │ │ ├── icon-60.png │ │ ├── icon-60@2x.png │ │ ├── icon-60@3x.png │ │ ├── icon-72.png │ │ ├── icon-72@2x.png │ │ ├── icon-76.png │ │ ├── icon-76@2x.png │ │ ├── icon-83.5@2x.png │ │ ├── icon-small.png │ │ ├── icon-small@2x.png │ │ ├── icon-small@3x.png │ │ ├── icon.png │ │ └── icon@2x.png │ └── splash │ │ ├── Default-568h@2x~iphone.png │ │ ├── Default-667h.png │ │ ├── Default-736h.png │ │ ├── Default-Landscape-736h.png │ │ ├── Default-Landscape@2x~ipad.png │ │ ├── Default-Landscape~ipad.png │ │ ├── Default-Portrait@2x~ipad.png │ │ ├── Default-Portrait~ipad.png │ │ ├── Default@2x~iphone.png │ │ └── Default~iphone.png └── splash.psd ├── src ├── app │ ├── app.component.ts │ ├── app.html │ ├── app.module.ts │ ├── app.scss │ └── main.ts ├── assets │ ├── example_data │ │ ├── feed.json │ │ ├── listing.json │ │ ├── lists.json │ │ ├── notifications.json │ │ ├── profile.json │ │ ├── schedule.json │ │ └── social_integrations.json │ ├── icon │ │ └── favicon.ico │ ├── images │ │ ├── feed │ │ │ ├── 500x333HydroflightSports.png │ │ │ ├── 500x333Parasailing.png │ │ │ ├── 500x333Skimboarding.png │ │ │ ├── 500x333Waterpolo.png │ │ │ └── 500x333paddleboarding.png │ │ ├── header_logo_white.png │ │ ├── listing │ │ │ ├── 200x200basquet.png │ │ │ ├── 200x200boxeo.png │ │ │ ├── 200x200crossfit.png │ │ │ ├── 200x200futbol.png │ │ │ ├── 200x200running.png │ │ │ ├── 200x200swimming.png │ │ │ ├── 200x200yoga.png │ │ │ ├── 300x300AirSports.png │ │ │ ├── 300x300AthleticSports.png │ │ │ ├── 300x300BeachSports.png │ │ │ ├── 300x300CombatSports.png │ │ │ ├── 300x300ExtremeSports.png │ │ │ ├── 300x300WaterSports.png │ │ │ └── 600x300banner1.png │ │ ├── lists │ │ │ ├── 200x200BritishOpen.png │ │ │ ├── 200x200EventCrossfit.png │ │ │ ├── 200x200EventUSOpen.png │ │ │ ├── 200x200FIFA.png │ │ │ └── 200x200TBT.png │ │ ├── logo_white.png │ │ ├── maps │ │ │ ├── place-1.jpg │ │ │ ├── place-2.jpg │ │ │ ├── place-3.jpg │ │ │ ├── place-4.jpg │ │ │ ├── place-5.jpg │ │ │ ├── place-6.jpg │ │ │ ├── place-7.jpg │ │ │ ├── place-8.jpg │ │ │ └── place-9.jpg │ │ ├── notifications │ │ │ ├── 100x100Notification1.jpeg │ │ │ ├── 100x100Notification2.png │ │ │ ├── 100x100Notification3.jpg │ │ │ ├── 100x100Notification4.jpeg │ │ │ ├── 100x100Notification5.jpg │ │ │ ├── 100x100Notification6.jpg │ │ │ └── 100x100Notification7.jpg │ │ ├── pin.min.png │ │ ├── pin.png │ │ ├── pin.svg │ │ ├── profile │ │ │ ├── 200x200ProfilePic.png │ │ │ ├── 200x200jordan.png │ │ │ ├── 200x200kobe.png │ │ │ ├── 200x200manny.png │ │ │ ├── 200x200manu.png │ │ │ ├── 200x200maria.png │ │ │ ├── 200x200messi.png │ │ │ ├── 200x200nadal.png │ │ │ ├── 200x200neymar.png │ │ │ ├── 200x200novak.png │ │ │ ├── 200x200ronaldo.png │ │ │ ├── 200x200serena.png │ │ │ ├── 200x200suarez.png │ │ │ ├── 200x200wade.png │ │ │ └── posts │ │ │ │ ├── 500x500profile1.png │ │ │ │ ├── 500x500profile2.jpg │ │ │ │ ├── 500x500profile3.jpg │ │ │ │ ├── 500x500profile4.jpg │ │ │ │ ├── 500x500profile5.jpg │ │ │ │ ├── 500x500profile6.jpg │ │ │ │ └── 500x500profile7.jpg │ │ ├── slide-2-img.png │ │ ├── slide-3-img.png │ │ └── slide-4-img.png │ └── manifest.json ├── components │ ├── background-image │ │ ├── background-image.html │ │ ├── background-image.scss │ │ └── background-image.ts │ ├── color-radio │ │ └── color-radio.ts │ ├── counter-input │ │ ├── counter-input.html │ │ ├── counter-input.scss │ │ └── counter-input.ts │ ├── google-map │ │ ├── google-map.html │ │ ├── google-map.scss │ │ └── google-map.ts │ ├── preload-image │ │ ├── preload-image.html │ │ ├── preload-image.scss │ │ └── preload-image.ts │ ├── rating │ │ ├── rating.html │ │ ├── rating.scss │ │ └── rating.ts │ └── show-hide-password │ │ ├── show-hide-container.ts │ │ ├── show-hide-input.ts │ │ ├── show-hide-password.html │ │ └── show-hide-password.scss ├── index.html ├── manifest.json ├── pages │ ├── contact-card │ │ ├── contact-card.html │ │ ├── contact-card.md.scss │ │ ├── contact-card.scss │ │ ├── contact-card.ts │ │ └── contact.model.ts │ ├── facebook-login │ │ ├── facebook-login.html │ │ ├── facebook-login.scss │ │ ├── facebook-login.service.ts │ │ ├── facebook-login.ts │ │ └── facebook-user.model.ts │ ├── feed │ │ ├── feed.html │ │ ├── feed.model.ts │ │ ├── feed.scss │ │ ├── feed.service.ts │ │ └── feed.ts │ ├── filters │ │ ├── filters.html │ │ ├── filters.md.scss │ │ ├── filters.scss │ │ ├── filters.ts │ │ └── filters.wp.scss │ ├── followers │ │ ├── followers.html │ │ ├── followers.md.scss │ │ ├── followers.scss │ │ ├── followers.ts │ │ └── followers.wp.scss │ ├── forgot-password │ │ ├── forgot-password.html │ │ ├── forgot-password.scss │ │ └── forgot-password.ts │ ├── form-layout │ │ ├── form-layout.html │ │ ├── form-layout.ios.scss │ │ ├── form-layout.md.scss │ │ ├── form-layout.scss │ │ ├── form-layout.ts │ │ └── form-layout.wp.scss │ ├── forms │ │ ├── forms.html │ │ ├── forms.scss │ │ └── forms.ts │ ├── functionalities │ │ ├── functionalities.html │ │ ├── functionalities.scss │ │ └── functionalities.ts │ ├── google-login │ │ ├── google-login.html │ │ ├── google-login.scss │ │ ├── google-login.service.ts │ │ ├── google-login.ts │ │ └── google-user.model.ts │ ├── grid │ │ ├── grid.html │ │ ├── grid.scss │ │ └── grid.ts │ ├── layouts │ │ ├── layouts.html │ │ ├── layouts.scss │ │ └── layouts.ts │ ├── list-1 │ │ ├── list-1.html │ │ ├── list-1.model.ts │ │ ├── list-1.scss │ │ ├── list-1.service.ts │ │ └── list-1.ts │ ├── list-2 │ │ ├── list-2.html │ │ ├── list-2.model.ts │ │ ├── list-2.scss │ │ ├── list-2.service.ts │ │ └── list-2.ts │ ├── listing │ │ ├── listing.html │ │ ├── listing.ios.scss │ │ ├── listing.model.ts │ │ ├── listing.scss │ │ ├── listing.service.ts │ │ └── listing.ts │ ├── login │ │ ├── login.html │ │ ├── login.scss │ │ └── login.ts │ ├── maps │ │ ├── maps.html │ │ ├── maps.md.scss │ │ ├── maps.model.ts │ │ ├── maps.scss │ │ ├── maps.service.ts │ │ ├── maps.ts │ │ └── maps.wp.scss │ ├── notifications │ │ ├── notifications.html │ │ ├── notifications.model.ts │ │ ├── notifications.scss │ │ ├── notifications.service.ts │ │ └── notifications.ts │ ├── privacy-policy │ │ ├── privacy-policy.html │ │ └── privacy-policy.ts │ ├── profile │ │ ├── profile.html │ │ ├── profile.ios.scss │ │ ├── profile.model.ts │ │ ├── profile.scss │ │ ├── profile.service.ts │ │ ├── profile.ts │ │ └── profile.wp.scss │ ├── schedule │ │ ├── schedule.html │ │ ├── schedule.ios.scss │ │ ├── schedule.model.ts │ │ ├── schedule.scss │ │ ├── schedule.service.ts │ │ ├── schedule.ts │ │ └── schedule.wp.scss │ ├── settings │ │ ├── settings.html │ │ ├── settings.md.scss │ │ ├── settings.scss │ │ ├── settings.ts │ │ └── settings.wp.scss │ ├── signup │ │ ├── signup.html │ │ ├── signup.scss │ │ └── signup.ts │ ├── tabs-navigation │ │ ├── tabs-navigation.html │ │ ├── tabs-navigation.scss │ │ ├── tabs-navigation.ts │ │ └── tabs-navigation.wp.scss │ ├── terms-of-service │ │ ├── terms-of-service.html │ │ └── terms-of-service.ts │ └── walkthrough │ │ ├── walkthrough.html │ │ ├── walkthrough.md.scss │ │ ├── walkthrough.scss │ │ └── walkthrough.ts ├── service-worker.js └── theme │ ├── common.scss │ ├── common │ ├── auth │ │ ├── auth.ios.scss │ │ ├── auth.scss │ │ └── auth.wp.scss │ ├── buttons │ │ ├── buttons.scss │ │ └── segment.scss │ ├── cards.scss │ ├── components │ │ ├── background-image.scss │ │ ├── components.scss │ │ ├── preload-image.scss │ │ └── spinner.scss │ ├── grid.scss │ ├── header.scss │ ├── inputs │ │ ├── checkbox-tags.scss │ │ ├── checkbox.scss │ │ ├── color-radio.scss │ │ ├── counter.scss │ │ ├── inputs.scss │ │ ├── radio-tags.scss │ │ ├── radio.scss │ │ ├── range.scss │ │ ├── rating.scss │ │ └── switcher.scss │ ├── layouts │ │ └── lists.scss │ ├── legal │ │ └── legal.scss │ ├── lists.scss │ ├── misc │ │ ├── multi-line-ellipsis.scss │ │ └── shadow.scss │ ├── scroll-bar.scss │ └── side-menu.scss │ └── variables.scss ├── tsconfig.json ├── tslint.json └── typings ├── globals └── google.maps │ ├── index.d.ts │ └── typings.json └── index.d.ts /.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 | PREVIEW/ 30 | DESIGN/ 31 | RELEASE/ 32 | www/ 33 | pwa/ 34 | $RECYCLE.BIN/ 35 | 36 | .DS_Store 37 | Thumbs.db 38 | UserInterfaceState.xcuserstate 39 | -------------------------------------------------------------------------------- /.io-config.json: -------------------------------------------------------------------------------- 1 | {"app_id":"9c8fa63b","api_key":"a2b6a7e677b46017427fe95a06ecb80087504828322dc1c2"} -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## Update to 2.0.0 (v1.2) 2 | - There's a breaking change in ionic 2.0.0 with the Ionicons. 3 | - We had to change the import for ionicons in theme/variables.scss file from `@import "ionicons";` to `@import "ionic.ionicons";` 4 | 5 | - Some users where experiencing an issue with Google Maps typings getting the following error: `Cannot find namespace 'google'`. We solved this by adding `"typings/**/*.ts"` in tsconfig.json include array. 6 | 7 | 8 | 9 | ## Update to RC-5 (v1.1) 10 | - There's a breaking change in ionic rc-5 with the `` (for more details see the ionic [CHANGELOG](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#slides)) 11 | 12 | - We had to remove the `[options]` attribute and change the `(ionDidChange)` event with `ionSlideDidChange` in the walkthrough.html file 13 | 14 | - Ionic introduced [CSS content property](https://developer.mozilla.org/en-US/docs/Web/CSS/contain) to improve performance. This caused some weird behavior 15 | 16 | - Added `contain: style layout;` to `.horizontal-categories .scroll-content` in the `listing.scss` file 17 | 18 | - Added `contain: style layout;` to `.post-example-view .upload-image-button` in the `form-layout.scss` file 19 | 20 | - Add css styles for tab button icon in `tabs-navigation.scss` file 21 | 22 | - Ionic (rc-4) changed the way the toolbar border works (for more details see the ionic [CHANGELOG](https://github.com/driftyco/ionic/blob/master/CHANGELOG.md#toolbar)) 23 | 24 | - We had to add an `!important` value to force no border on the `.toolbar-background` element in header.scss file 25 | 26 | - Ionic added fixed height to some components (including list items avatars). This caused some weird behavior with our custom components `preload-image` 27 | 28 | - We added `height: inherit !important;` to our `preload-image img` elements in preload-image.scss file 29 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ## Documentation 2 | http://bit.ly/ion2fullapp-with-functionalities-documentation 3 | 4 | # Workflow 5 | ##To run your app in the browser (great for initial development): 6 | `ionic serve` 7 | 8 | ##To run on iOS: 9 | `ionic run ios` 10 | 11 | ##To run on Android: 12 | `ionic run android` 13 | 14 | ##Review ionic CHANGELOG when updating ionic-angular version 15 | https://github.com/driftyco/ionic/blob/master/CHANGELOG.md 16 | 17 | # Configs 18 | ## Cordova (uses config.xml) 19 | ### [Mass saving platforms on an existing project](http://cordova.apache.org/docs/en/latest/platform_plugin_versioning_ref/index.html#mass-saving-platforms-on-an-existing-project) 20 | `cordova platform save` 21 | Use it when you have a pre-existing project and you want to save all the currently added platforms in your project. 22 | 23 | ## Ionic (uses package.json) 24 | ### [Clean and install](https://www.raymondcamden.com/2015/04/20/ionic-adds-a-new-state-feature/) 25 | `ionic state reset` 26 | This will remove everything then bring back what you have specified in the package.json file. 27 | 28 | ### [Store current state](https://www.raymondcamden.com/2015/04/20/ionic-adds-a-new-state-feature/) 29 | `ionic state save` 30 | To store the current platforms and plugins to the package.json 31 | 32 | ### [Restore current state](https://www.raymondcamden.com/2015/04/20/ionic-adds-a-new-state-feature/) 33 | `ionic state restore` 34 | This will add in the appropriate plugins and platforms from the package.json 35 | -------------------------------------------------------------------------------- /__MACOSX/resources/._.DS_Store: -------------------------------------------------------------------------------- 1 | Mac OS X  2Fx ATTRxx -------------------------------------------------------------------------------- /config/sass.config.js: -------------------------------------------------------------------------------- 1 | 2 | // https://www.npmjs.com/package/node-sass 3 | 4 | module.exports = { 5 | 6 | /** 7 | * outputFilename: The filename of the saved CSS file 8 | * from the sass build. The directory which it is saved in 9 | * is set within the "buildDir" config options. 10 | */ 11 | outputFilename: 'main.css', 12 | 13 | /** 14 | * sourceMap: If source map should be built or not. 15 | */ 16 | sourceMap: true, 17 | 18 | /** 19 | * outputStyle: How node-sass should output the css file. 20 | */ 21 | outputStyle: 'expanded', 22 | 23 | /** 24 | * autoprefixer: The config options for autoprefixer. 25 | * Excluding this config will skip applying autoprefixer. 26 | * https://www.npmjs.com/package/autoprefixer 27 | */ 28 | autoprefixer: { 29 | browsers: [ 30 | 'last 2 versions', 31 | 'iOS >= 8', 32 | 'Android >= 4.4', 33 | 'Explorer >= 11', 34 | 'ExplorerMobile >= 11' 35 | ], 36 | cascade: false 37 | }, 38 | 39 | /** 40 | * includePaths: Used by node-sass for additional 41 | * paths to search for sass imports by just name. 42 | */ 43 | includePaths: [ 44 | 'node_modules/ionic-angular/themes', 45 | 'node_modules/ionicons/dist/scss', 46 | 'node_modules/bourbon/app/assets/stylesheets' 47 | ], 48 | 49 | /** 50 | * includeFiles: An array of regex patterns to search for 51 | * sass files in the same directory as the component module. 52 | * If a file matches both include and exclude patterns, then 53 | * the file will be excluded. 54 | */ 55 | includeFiles: [ 56 | /\.(scss)$/i 57 | ], 58 | 59 | /** 60 | * excludeFiles: An array of regex patterns for files which 61 | * should be excluded. If a file matches both include and exclude 62 | * patterns, then the file will be excluded. 63 | */ 64 | excludeFiles: [ 65 | /* /\.(wp).(scss)$/i */ 66 | ], 67 | 68 | /** 69 | * variableSassFiles: Lists out the files which include 70 | * only sass variables. These variables are the first sass files 71 | * to be imported so their values override default variables. 72 | */ 73 | variableSassFiles: [ 74 | 'src/theme/variables.scss' 75 | ], 76 | 77 | /** 78 | * directoryMaps: Compiled JS modules may be within a different 79 | * directory than its source file and sibling component sass files. 80 | * For example, NGC places it's files within the .tmp directory 81 | * but doesn't copy over its sass files. This is useful so sass 82 | * also checks the JavaScript's source directory for sass files. 83 | */ 84 | directoryMaps: { 85 | '{{TMP}}': '{{SRC}}' 86 | }, 87 | 88 | /** 89 | * excludeModules: Used just as a way to skip over 90 | * modules which we know wouldn't have any sass to be 91 | * bundled. "excludeModules" isn't necessary, but is a 92 | * good way to speed up build times by skipping modules. 93 | */ 94 | excludeModules: [ 95 | '@angular', 96 | 'commonjs-proxy', 97 | 'core-js', 98 | 'ionic-native', 99 | 'rxjs', 100 | 'zone.js' 101 | ] 102 | 103 | }; 104 | -------------------------------------------------------------------------------- /ionic.config.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion2-FullApp-PRO", 3 | "app_id": "9c8fa63b", 4 | "v2": true, 5 | "typescript": true 6 | } 7 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion2-fullapp-PRO", 3 | "author": "Ionic Themes", 4 | "homepage": "https://ionicthemes.com", 5 | "private": true, 6 | "scripts": { 7 | "ionic:build": "ionic-app-scripts build", 8 | "ionic:serve": "ionic-app-scripts serve" 9 | }, 10 | "dependencies": { 11 | "@angular/common": "2.2.1", 12 | "@angular/compiler": "2.2.1", 13 | "@angular/compiler-cli": "2.2.1", 14 | "@angular/core": "2.2.1", 15 | "@angular/forms": "2.2.1", 16 | "@angular/http": "2.2.1", 17 | "@angular/platform-browser": "2.2.1", 18 | "@angular/platform-browser-dynamic": "2.2.1", 19 | "@angular/platform-server": "2.2.1", 20 | "@ionic/storage": "1.1.7", 21 | "ionic-angular": "2.0.0", 22 | "ionic-native": "2.2.11", 23 | "ionicons": "3.0.0", 24 | "rxjs": "5.0.0-beta.12", 25 | "zone.js": "0.6.26", 26 | "sw-toolbox": "3.4.0", 27 | "bourbon": "^4.2.7", 28 | "@types/googlemaps": "^3.25.38" 29 | }, 30 | "devDependencies": { 31 | "@ionic/app-scripts": "1.0.0", 32 | "typescript": "2.0.9" 33 | }, 34 | "cordovaPlugins": [ 35 | "cordova-plugin-device", 36 | "cordova-plugin-console", 37 | "cordova-plugin-whitelist", 38 | "cordova-plugin-splashscreen", 39 | "cordova-plugin-statusbar", 40 | "ionic-plugin-keyboard", 41 | "cordova-plugin-nativestorage", 42 | "cordova-plugin-inappbrowser", 43 | "cordova-plugin-x-socialsharing", 44 | { 45 | "locator": "https://github.com/Rohfosho/CordovaCallNumberPlugin.git", 46 | "id": "call-number" 47 | }, 48 | "cordova-plugin-geolocation", 49 | { 50 | "id": "cordova-plugin-facebook4", 51 | "locator": "cordova-plugin-facebook4", 52 | "variables": { 53 | "APP_ID": "826720427470540", 54 | "APP_NAME": "Ion2FullApp" 55 | } 56 | }, 57 | { 58 | "id": "cordova-plugin-googleplus", 59 | "locator": "cordova-plugin-googleplus", 60 | "variables": { 61 | "REVERSED_CLIENT_ID": "com.googleusercontent.apps.1001905109734-c6ime9d783l15kjmi2pqsplku4vua2e5" 62 | } 63 | } 64 | ], 65 | "cordovaPlatforms": [ 66 | { 67 | "platform": "ios", 68 | "version": "~4.1.1", 69 | "locator": "ios" 70 | }, 71 | { 72 | "platform": "android", 73 | "version": "~5.1.1", 74 | "locator": "android" 75 | } 76 | ], 77 | "description": "ion2-FullApp: An Ionic project", 78 | "config": { 79 | "ionic_sass": "./config/sass.config.js" 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /resources/android/icon/drawable-hdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/icon/drawable-hdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-ldpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/icon/drawable-ldpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-mdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/icon/drawable-mdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/icon/drawable-xhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/icon/drawable-xxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/icon/drawable-xxxhdpi-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/icon/drawable-xxxhdpi-icon.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-land-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-land-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-land-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-land-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-land-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-land-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-land-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-hdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-port-hdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-ldpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-port-ldpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-mdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-port-mdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-port-xhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-port-xxhdpi-screen.png -------------------------------------------------------------------------------- /resources/android/splash/drawable-port-xxxhdpi-screen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/android/splash/drawable-port-xxxhdpi-screen.png -------------------------------------------------------------------------------- /resources/icon.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/icon.psd -------------------------------------------------------------------------------- /resources/ios/icon/icon-40.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-40.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-40@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-40@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-50.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-50@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-50@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-60.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-60@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-60@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-72.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-72@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-72@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-76.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-76@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-83.5@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-small.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-small@2x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon-small@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon-small@3x.png -------------------------------------------------------------------------------- /resources/ios/icon/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon.png -------------------------------------------------------------------------------- /resources/ios/icon/icon@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/icon/icon@2x.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-568h@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-568h@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-667h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-667h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape-736h.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-Landscape-736h.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-Landscape@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Landscape~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-Landscape~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait@2x~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-Portrait@2x~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default-Portrait~ipad.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default-Portrait~ipad.png -------------------------------------------------------------------------------- /resources/ios/splash/Default@2x~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default@2x~iphone.png -------------------------------------------------------------------------------- /resources/ios/splash/Default~iphone.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/ios/splash/Default~iphone.png -------------------------------------------------------------------------------- /resources/splash.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/resources/splash.psd -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { Platform, MenuController, Nav, App } from 'ionic-angular'; 3 | import { StatusBar, Splashscreen } from 'ionic-native'; 4 | 5 | import { TabsNavigationPage } from '../pages/tabs-navigation/tabs-navigation'; 6 | import { FormsPage } from '../pages/forms/forms'; 7 | import { LayoutsPage } from '../pages/layouts/layouts'; 8 | import { WalkthroughPage } from '../pages/walkthrough/walkthrough'; 9 | import { SettingsPage } from '../pages/settings/settings'; 10 | import { FunctionalitiesPage } from '../pages/functionalities/functionalities'; 11 | 12 | 13 | @Component({ 14 | selector: 'app-root', 15 | templateUrl: 'app.html' 16 | }) 17 | export class MyApp { 18 | 19 | @ViewChild(Nav) nav: Nav; 20 | 21 | // make WalkthroughPage the root (or first) page 22 | rootPage: any = WalkthroughPage; 23 | // rootPage: any = TabsNavigationPage; 24 | 25 | 26 | pages: Array<{title: string, icon: string, component: any}>; 27 | pushPages: Array<{title: string, icon: string, component: any}>; 28 | 29 | constructor( 30 | platform: Platform, 31 | public menu: MenuController, 32 | public app: App 33 | ) { 34 | platform.ready().then(() => { 35 | // Okay, so the platform is ready and our plugins are available. 36 | // Here you can do any higher level native things you might need. 37 | Splashscreen.hide(); 38 | StatusBar.styleDefault(); 39 | }); 40 | 41 | this.pages = [ 42 | { title: 'Home', icon: 'home', component: TabsNavigationPage }, 43 | { title: 'Forms', icon: 'create', component: FormsPage }, 44 | { title: 'Functionalities', icon: 'code', component: FunctionalitiesPage } 45 | ]; 46 | 47 | this.pushPages = [ 48 | { title: 'Layouts', icon: 'grid', component: LayoutsPage }, 49 | { title: 'Settings', icon: 'settings', component: SettingsPage } 50 | ]; 51 | } 52 | 53 | openPage(page) { 54 | // close the menu when clicking a link from the menu 55 | this.menu.close(); 56 | // navigate to the new page if it is not the current page 57 | this.nav.setRoot(page.component); 58 | } 59 | 60 | pushPage(page) { 61 | // close the menu when clicking a link from the menu 62 | this.menu.close(); 63 | // rootNav is now deprecated (since beta 11) (https://forum.ionicframework.com/t/cant-access-rootnav-after-upgrade-to-beta-11/59889) 64 | this.app.getRootNav().push(page.component); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /src/app/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 12 | 13 | 14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /src/app/app.scss: -------------------------------------------------------------------------------- 1 | // http://ionicframework.com/docs/v2/theming/ 2 | 3 | // App Shared Imports 4 | // -------------------------------------------------- 5 | // These are the imports which make up the design of this app. 6 | // By default each design mode includes these shared imports. 7 | // App Shared Sass variables belong in app.variables.scss. 8 | 9 | // Include Bourbon 10 | @import "_bourbon"; 11 | 12 | // App Global Sass 13 | // -------------------------------------------------- 14 | // Put style rules here that you want to apply globally. These 15 | // styles are for the entire app and not just one component. 16 | // Additionally, this file can be also used as an entry point 17 | // to import other Sass files to be included in the output CSS. 18 | // 19 | // Shared Sass variables, which can be used to adjust Ionic's 20 | // default Sass variables, belong in "theme/variables.scss". 21 | // 22 | // To declare rules for a specific mode, create a child rule 23 | // for the .md, .ios, or .wp mode classes. The mode class is 24 | // automatically applied to the element in the app. 25 | @import "../theme/common"; 26 | -------------------------------------------------------------------------------- /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/example_data/feed.json: -------------------------------------------------------------------------------- 1 | { 2 | "feed": [ 3 | { 4 | "title": "Paddleboarding", 5 | "image": "./assets/images/feed/500x333paddleboarding.png", 6 | "description": "Paddleboarding participants are propelled by a swimming motion using their arms while lying, kneeling, or standing on a paddleboard in the ocean", 7 | "likes": 52, 8 | "comments": 3, 9 | "liked": true 10 | }, 11 | { 12 | "title": "Hydroflight Sports", 13 | "image": "./assets/images/feed/500x333HydroflightSports.png", 14 | "description": "Hydroflight sports are a category of sport in which water jet propulsion is used to create sustained flight where lift and movement are controlled by a person riding on a propulsion device. ", 15 | "likes": 11, 16 | "comments": 7, 17 | "liked": false 18 | }, 19 | { 20 | "title": "Parasailing", 21 | "image": "./assets/images/feed/500x333Parasailing.png", 22 | "description": "Parasailing is a recreational kiting activity where a person is towed behind a vehicle while attached to a specially designed canopy wing that reminds one of a parachute, known as a parasail wing.", 23 | "likes": 36, 24 | "comments": 1, 25 | "liked": true 26 | }, 27 | { 28 | "title": "Waterpolo", 29 | "image": "./assets/images/feed/500x333Waterpolo.png", 30 | "description": "Water polo is a team water sport that consists of four quarters in which the two teams attempt to score goals by throwing the ball into their opponent's goal. The team with the most goals at the end of the game wins the match.", 31 | "likes": 27, 32 | "comments": 11, 33 | "liked": false 34 | }, 35 | { 36 | "title": "Skimboarding", 37 | "image": "./assets/images/feed/500x333Skimboarding.png", 38 | "description": "Skimboarding (or skimming) is a boardsport in which a skimboard (much like a surfboard but smaller and without fins) is used to glide across the water's surface to meet an incoming breaking wave, and ride it back to shore.", 39 | "likes": 2, 40 | "comments": 5, 41 | "liked": true 42 | } 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /src/assets/example_data/listing.json: -------------------------------------------------------------------------------- 1 | { 2 | "banner_image": "./assets/images/listing/600x300banner1.png", 3 | "banner_title": "Sports", 4 | "populars": [ 5 | { 6 | "title": "Air Sports", 7 | "image": "./assets/images/listing/300x300AirSports.png" 8 | }, 9 | { 10 | "title": "Water Sports", 11 | "image": "./assets/images/listing/300x300WaterSports.png" 12 | }, 13 | { 14 | "title": "Beach Sports", 15 | "image": "./assets/images/listing/300x300BeachSports.png" 16 | }, 17 | { 18 | "title": "Extreme Sports", 19 | "image": "./assets/images/listing/300x300ExtremeSports.png" 20 | }, 21 | { 22 | "title": "Athletic Sports", 23 | "image": "./assets/images/listing/300x300AthleticSports.png" 24 | }, 25 | { 26 | "title": "Combat Sports", 27 | "image": "./assets/images/listing/300x300CombatSports.png" 28 | } 29 | ], 30 | "categories": [ 31 | { 32 | "title": "Basketball", 33 | "image": "./assets/images/listing/200x200basquet.png" 34 | }, 35 | { 36 | "title": "Boxing", 37 | "image": "./assets/images/listing/200x200boxeo.png" 38 | }, 39 | { 40 | "title": "Crossfit", 41 | "image": "./assets/images/listing/200x200crossfit.png" 42 | }, 43 | { 44 | "title": "Futbol", 45 | "image": "./assets/images/listing/200x200futbol.png" 46 | }, 47 | { 48 | "title": "Running", 49 | "image": "./assets/images/listing/200x200running.png" 50 | }, 51 | { 52 | "title": "Swimming", 53 | "image": "./assets/images/listing/200x200swimming.png" 54 | }, 55 | { 56 | "title": "Yoga", 57 | "image": "./assets/images/listing/200x200yoga.png" 58 | } 59 | 60 | ] 61 | } 62 | -------------------------------------------------------------------------------- /src/assets/example_data/lists.json: -------------------------------------------------------------------------------- 1 | { 2 | "items": [ 3 | { 4 | "name": "Crossfit WorldWide Event", 5 | "image": "./assets/images/lists/200x200EventCrossfit.png", 6 | "description": "At the Crossfit WorldWide Event athletes at compete in workouts that they learn about hours or days beforehand, consisting mostly of an assortment of standard aerobic, weightlifting, and gymnastics movement." 7 | }, 8 | { 9 | "name": "US Open", 10 | "image": "./assets/images/lists/200x200EventUSOpen.png", 11 | "description": "The United States Open Tennis Championships is a hardcourt tennis tournament. The tournament is the modern version of one of the oldest tennis championships in the world, the U.S. National Championship, for which men's singles was first contested in 1881." 12 | }, 13 | { 14 | "name": "The Basketball Tournament", 15 | "image": "./assets/images/lists/200x200TBT.png", 16 | "description": "The Basketball Tournament (TBT) is an open-application, single-elimination tournament played each summer in the United States, currently featuring 64 teams. It was founded in 2014 by Jonathan Mugar." 17 | }, 18 | { 19 | "name": "British Open", 20 | "image": "./assets/images/lists/200x200BritishOpen.png", 21 | "description": "The Open Championship, often referred to as The Open or the British Open, is the oldest of the four major championships in professional golf. Held in the United Kingdom, it is administered by The R&A and is the only major outside the United States." 22 | }, 23 | { 24 | "name": "FIFA World Cup", 25 | "image": "./assets/images/lists/200x200FIFA.png", 26 | "description": "The FIFA World Cup, often simply called the World Cup, is an international association football competition contested by the senior men's national teams of the members of Fédération Internationale de Football Association (FIFA), the sport's global governing body." 27 | } 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /src/assets/example_data/notifications.json: -------------------------------------------------------------------------------- 1 | { 2 | "today":[ 3 | { 4 | "name": "Martin", 5 | "image": "./assets/images/notifications/100x100Notification1.jpeg", 6 | "message": "Adam liked your photo", 7 | "date": "5:03 pm" 8 | }, 9 | { 10 | "name": "Jessica", 11 | "image": "./assets/images/notifications/100x100Notification2.png", 12 | "message": "Justin invited you to the event Bday Party", 13 | "date": "2:54 pm" 14 | }, 15 | { 16 | "name": "Phillip", 17 | "image": "./assets/images/notifications/100x100Notification3.jpg", 18 | "message": "Alessia wrote on your timeline", 19 | "date": "1:54 pm" 20 | } 21 | ], 22 | "yesterday":[ 23 | { 24 | "name": "George", 25 | "image": "./assets/images/notifications/100x100Notification4.jpeg", 26 | "message": "Helen mentioned you in a comment", 27 | "date": "9:11 pm" 28 | }, 29 | { 30 | "name": "Kirsten", 31 | "image": "./assets/images/notifications/100x100Notification5.jpg", 32 | "message": "Ryan commented on your video", 33 | "date": "3:09 pm" 34 | }, 35 | { 36 | "name": "Judith", 37 | "image": "./assets/images/notifications/100x100Notification6.jpg", 38 | "message": "Don recently likes the photo you’re tagged in", 39 | "date": "11:34 am" 40 | }, 41 | { 42 | "name": "Diane", 43 | "image": "./assets/images/notifications/100x100Notification7.jpg", 44 | "message": "Giselle and Christian liked your status update", 45 | "date": "7:12 am" 46 | } 47 | ] 48 | } 49 | -------------------------------------------------------------------------------- /src/assets/example_data/social_integrations.json: -------------------------------------------------------------------------------- 1 | { 2 | "friends": [ 3 | "./assets/images/profile/200x200suarez.png", 4 | "./assets/images/profile/200x200nadal.png", 5 | "./assets/images/profile/200x200manny.png", 6 | "./assets/images/profile/200x200serena.png", 7 | "./assets/images/profile/200x200jordan.png" 8 | ], 9 | "photos": [ 10 | "./assets/images/listing/300x300AirSports.png", 11 | "./assets/images/listing/300x300WaterSports.png", 12 | "./assets/images/listing/300x300BeachSports.png", 13 | "./assets/images/listing/300x300ExtremeSports.png", 14 | "./assets/images/listing/300x300AthleticSports.png", 15 | "./assets/images/listing/300x300CombatSports.png", 16 | "./assets/images/listing/300x300WaterSports.png", 17 | "./assets/images/listing/300x300ExtremeSports.png" 18 | ] 19 | } 20 | -------------------------------------------------------------------------------- /src/assets/icon/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/icon/favicon.ico -------------------------------------------------------------------------------- /src/assets/images/feed/500x333HydroflightSports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/feed/500x333HydroflightSports.png -------------------------------------------------------------------------------- /src/assets/images/feed/500x333Parasailing.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/feed/500x333Parasailing.png -------------------------------------------------------------------------------- /src/assets/images/feed/500x333Skimboarding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/feed/500x333Skimboarding.png -------------------------------------------------------------------------------- /src/assets/images/feed/500x333Waterpolo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/feed/500x333Waterpolo.png -------------------------------------------------------------------------------- /src/assets/images/feed/500x333paddleboarding.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/feed/500x333paddleboarding.png -------------------------------------------------------------------------------- /src/assets/images/header_logo_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/header_logo_white.png -------------------------------------------------------------------------------- /src/assets/images/listing/200x200basquet.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/200x200basquet.png -------------------------------------------------------------------------------- /src/assets/images/listing/200x200boxeo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/200x200boxeo.png -------------------------------------------------------------------------------- /src/assets/images/listing/200x200crossfit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/200x200crossfit.png -------------------------------------------------------------------------------- /src/assets/images/listing/200x200futbol.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/200x200futbol.png -------------------------------------------------------------------------------- /src/assets/images/listing/200x200running.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/200x200running.png -------------------------------------------------------------------------------- /src/assets/images/listing/200x200swimming.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/200x200swimming.png -------------------------------------------------------------------------------- /src/assets/images/listing/200x200yoga.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/200x200yoga.png -------------------------------------------------------------------------------- /src/assets/images/listing/300x300AirSports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/300x300AirSports.png -------------------------------------------------------------------------------- /src/assets/images/listing/300x300AthleticSports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/300x300AthleticSports.png -------------------------------------------------------------------------------- /src/assets/images/listing/300x300BeachSports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/300x300BeachSports.png -------------------------------------------------------------------------------- /src/assets/images/listing/300x300CombatSports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/300x300CombatSports.png -------------------------------------------------------------------------------- /src/assets/images/listing/300x300ExtremeSports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/300x300ExtremeSports.png -------------------------------------------------------------------------------- /src/assets/images/listing/300x300WaterSports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/300x300WaterSports.png -------------------------------------------------------------------------------- /src/assets/images/listing/600x300banner1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/listing/600x300banner1.png -------------------------------------------------------------------------------- /src/assets/images/lists/200x200BritishOpen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/lists/200x200BritishOpen.png -------------------------------------------------------------------------------- /src/assets/images/lists/200x200EventCrossfit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/lists/200x200EventCrossfit.png -------------------------------------------------------------------------------- /src/assets/images/lists/200x200EventUSOpen.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/lists/200x200EventUSOpen.png -------------------------------------------------------------------------------- /src/assets/images/lists/200x200FIFA.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/lists/200x200FIFA.png -------------------------------------------------------------------------------- /src/assets/images/lists/200x200TBT.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/lists/200x200TBT.png -------------------------------------------------------------------------------- /src/assets/images/logo_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/logo_white.png -------------------------------------------------------------------------------- /src/assets/images/maps/place-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-1.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-2.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-3.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-4.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-5.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-6.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-7.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-8.jpg -------------------------------------------------------------------------------- /src/assets/images/maps/place-9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/maps/place-9.jpg -------------------------------------------------------------------------------- /src/assets/images/notifications/100x100Notification1.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/notifications/100x100Notification1.jpeg -------------------------------------------------------------------------------- /src/assets/images/notifications/100x100Notification2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/notifications/100x100Notification2.png -------------------------------------------------------------------------------- /src/assets/images/notifications/100x100Notification3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/notifications/100x100Notification3.jpg -------------------------------------------------------------------------------- /src/assets/images/notifications/100x100Notification4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/notifications/100x100Notification4.jpeg -------------------------------------------------------------------------------- /src/assets/images/notifications/100x100Notification5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/notifications/100x100Notification5.jpg -------------------------------------------------------------------------------- /src/assets/images/notifications/100x100Notification6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/notifications/100x100Notification6.jpg -------------------------------------------------------------------------------- /src/assets/images/notifications/100x100Notification7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/notifications/100x100Notification7.jpg -------------------------------------------------------------------------------- /src/assets/images/pin.min.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/pin.min.png -------------------------------------------------------------------------------- /src/assets/images/pin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/pin.png -------------------------------------------------------------------------------- /src/assets/images/pin.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/assets/images/profile/200x200ProfilePic.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200ProfilePic.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200jordan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200jordan.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200kobe.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200kobe.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200manny.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200manny.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200manu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200manu.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200maria.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200maria.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200messi.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200messi.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200nadal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200nadal.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200neymar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200neymar.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200novak.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200novak.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200ronaldo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200ronaldo.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200serena.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200serena.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200suarez.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200suarez.png -------------------------------------------------------------------------------- /src/assets/images/profile/200x200wade.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/200x200wade.png -------------------------------------------------------------------------------- /src/assets/images/profile/posts/500x500profile1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/posts/500x500profile1.png -------------------------------------------------------------------------------- /src/assets/images/profile/posts/500x500profile2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/posts/500x500profile2.jpg -------------------------------------------------------------------------------- /src/assets/images/profile/posts/500x500profile3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/posts/500x500profile3.jpg -------------------------------------------------------------------------------- /src/assets/images/profile/posts/500x500profile4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/posts/500x500profile4.jpg -------------------------------------------------------------------------------- /src/assets/images/profile/posts/500x500profile5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/posts/500x500profile5.jpg -------------------------------------------------------------------------------- /src/assets/images/profile/posts/500x500profile6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/posts/500x500profile6.jpg -------------------------------------------------------------------------------- /src/assets/images/profile/posts/500x500profile7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/profile/posts/500x500profile7.jpg -------------------------------------------------------------------------------- /src/assets/images/slide-2-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/slide-2-img.png -------------------------------------------------------------------------------- /src/assets/images/slide-3-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/slide-3-img.png -------------------------------------------------------------------------------- /src/assets/images/slide-4-img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/atomcode93/Ionic2FullApp/f20d7b06b032e1569f633a3152c9134535a5ae10/src/assets/images/slide-4-img.png -------------------------------------------------------------------------------- /src/assets/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/components/background-image/background-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /src/components/background-image/background-image.scss: -------------------------------------------------------------------------------- 1 | background-image { 2 | display: block; 3 | position: relative; 4 | height: 100%; 5 | background-size: cover; 6 | background-repeat: no-repeat; 7 | @include transition(all ease-in-out .3s); 8 | 9 | .bg-overlay 10 | { 11 | position: absolute; 12 | top: 0; 13 | bottom: 0; 14 | left: 0; 15 | right: 0; 16 | z-index: -1; 17 | opacity: 0.6; 18 | } 19 | 20 | &.img-loaded 21 | { 22 | ion-spinner 23 | { 24 | visibility: hidden; 25 | display: none; 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/components/background-image/background-image.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ElementRef, Renderer, OnChanges, SimpleChange } from '@angular/core'; 2 | 3 | import { isPresent } from 'ionic-angular/util/util'; 4 | 5 | @Component({ 6 | selector: 'background-image', 7 | templateUrl: 'background-image.html' 8 | }) 9 | export class BackgroundImage implements OnChanges { 10 | _src: string = ''; 11 | 12 | constructor(public _elementRef: ElementRef, public _renderer: Renderer) {} 13 | 14 | @Input() class: string; 15 | 16 | @Input() set src(val: string) { 17 | this._src = isPresent(val) ? val : ''; 18 | } 19 | 20 | ngOnChanges(changes: { [propName: string]: SimpleChange }) { 21 | this._update(); 22 | // console.log("CHANGES background-image", this._src); 23 | // console.log(changes['src'].isFirstChange()); 24 | } 25 | 26 | _update() { 27 | let img = new Image(); 28 | 29 | img.addEventListener('load', () => { 30 | this._elementRef.nativeElement.style.backgroundImage = 'url(' + this._src + ')'; 31 | this._loaded(true); 32 | }); 33 | 34 | img.src = this._src; 35 | 36 | this._loaded(false); 37 | } 38 | 39 | _loaded(isLoaded: boolean) { 40 | this._elementRef.nativeElement.classList[isLoaded ? 'add' : 'remove']('img-loaded'); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/components/color-radio/color-radio.ts: -------------------------------------------------------------------------------- 1 | import { Directive, ElementRef, Input, Renderer } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[color-radio]' 5 | }) 6 | export class ColorRadio 7 | { 8 | @Input('color-radio') color: string; 9 | 10 | constructor(public el: ElementRef, public renderer: Renderer) { } 11 | 12 | setColor(color: string) { 13 | this.renderer.setElementStyle(this.el.nativeElement, 'backgroundColor', color); 14 | this.renderer.setElementStyle(this.el.nativeElement, 'borderColor', color); 15 | } 16 | 17 | ngOnInit() { 18 | console.log(this.color); 19 | this.setColor(this.color); 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/counter-input/counter-input.html: -------------------------------------------------------------------------------- 1 | 4 | {{counterValue}} 5 | 8 | -------------------------------------------------------------------------------- /src/components/counter-input/counter-input.scss: -------------------------------------------------------------------------------- 1 | counter-input { 2 | &[basic] 3 | { 4 | .counter-inner 5 | { 6 | display: none; 7 | } 8 | 9 | .counter-icon 10 | { 11 | &:first-child 12 | { 13 | border-top-right-radius: 0px !important; 14 | border-bottom-right-radius: 0px !important; 15 | border-right: none !important; 16 | } 17 | 18 | &:last-child 19 | { 20 | border-top-left-radius: 0px !important; 21 | border-bottom-left-radius: 0px !important; 22 | } 23 | } 24 | } 25 | 26 | .counter-icon 27 | { 28 | box-shadow: none; 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/components/counter-input/counter-input.ts: -------------------------------------------------------------------------------- 1 | import { Component, forwardRef, Input, OnChanges } from '@angular/core'; 2 | import { FormControl, ControlValueAccessor, NG_VALUE_ACCESSOR, NG_VALIDATORS } from '@angular/forms'; 3 | 4 | const noop = () => {}; 5 | 6 | export function counterRangeValidator(maxValue, minValue) { 7 | return (c: FormControl) => { 8 | let err = { 9 | rangeError: { 10 | given: c.value, 11 | max: maxValue || 10, 12 | min: minValue || 0 13 | } 14 | }; 15 | 16 | return (c.value > +maxValue || c.value < +minValue) ? err: null; 17 | } 18 | } 19 | 20 | @Component({ 21 | selector: 'counter-input', 22 | templateUrl: 'counter-input.html', 23 | host: { 24 | 'class': 'counter-input' 25 | }, 26 | providers: [ 27 | { provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => CounterInput), multi: true }, 28 | { provide: NG_VALIDATORS, useExisting: forwardRef(() => CounterInput), multi: true } 29 | ] 30 | }) 31 | export class CounterInput implements ControlValueAccessor, OnChanges { 32 | 33 | propagateChange:any = noop; 34 | validateFn:any = noop; 35 | 36 | @Input('counterValue') _counterValue = 0; 37 | @Input('max') counterRangeMax; 38 | @Input('min') counterRangeMin; 39 | 40 | get counterValue() { 41 | return this._counterValue; 42 | } 43 | 44 | set counterValue(val) { 45 | this._counterValue = val; 46 | this.propagateChange(val); 47 | } 48 | 49 | ngOnChanges(inputs) { 50 | if (inputs.counterRangeMax || inputs.counterRangeMin) { 51 | this.validateFn = counterRangeValidator(this.counterRangeMax, this.counterRangeMin); 52 | } 53 | } 54 | 55 | writeValue(value) { 56 | if (value) { 57 | this.counterValue = value; 58 | } 59 | } 60 | 61 | registerOnChange(fn) { 62 | this.propagateChange = fn; 63 | } 64 | 65 | registerOnTouched() {} 66 | 67 | increase() { 68 | this.counterValue++; 69 | } 70 | 71 | decrease() { 72 | this.counterValue--; 73 | } 74 | 75 | validate(c: FormControl) { 76 | return this.validateFn(c); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/components/google-map/google-map.html: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/components/google-map/google-map.scss: -------------------------------------------------------------------------------- 1 | google-map { 2 | display: block; 3 | } 4 | -------------------------------------------------------------------------------- /src/components/google-map/google-map.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ElementRef, OnInit, EventEmitter } from '@angular/core'; 2 | 3 | import { isPresent } from 'ionic-angular/util/util'; 4 | 5 | @Component({ 6 | selector: 'google-map', 7 | template: '' 8 | }) 9 | export class GoogleMap implements OnInit{ 10 | 11 | public _el: HTMLElement; 12 | public _map: google.maps.Map; 13 | public _mapOptions: google.maps.MapOptions = { 14 | zoom: 15 15 | }; 16 | public $mapReady: EventEmitter = new EventEmitter(); 17 | public _mapIdledOnce: boolean = false; 18 | 19 | @Input() set options(val: google.maps.MapOptions) { 20 | if(isPresent(val)) 21 | { 22 | this._mapOptions = val; 23 | } 24 | } 25 | 26 | constructor(public _elementRef: ElementRef) { 27 | 28 | } 29 | 30 | ngOnInit() { 31 | this.initMap(); 32 | } 33 | 34 | initMap(): void { 35 | this._el = this._elementRef.nativeElement; 36 | this._map = new google.maps.Map(this._el, this._mapOptions); 37 | 38 | // Workarround for init method: try to catch the first idel event after the map cretion (this._mapIdledOnce). The following idle events don't matter. 39 | let _ready_listener = this._map.addListener('idle', () => { 40 | console.log("mapReady - IDLE"); 41 | if (!this._mapIdledOnce) { 42 | this.$mapReady.emit(this._map); 43 | this._mapIdledOnce = true; 44 | // Stop listening to event, the map is ready 45 | google.maps.event.removeListener(_ready_listener); 46 | } 47 | }); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /src/components/preload-image/preload-image.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /src/components/preload-image/preload-image.scss: -------------------------------------------------------------------------------- 1 | preload-image { 2 | position: relative; 3 | width: 100%; 4 | display: block; 5 | overflow: hidden; 6 | 7 | // If the image is rounded 8 | &.rounded-image 9 | { 10 | border-radius: 50%; 11 | } 12 | 13 | &.img-loaded 14 | { 15 | background-color: transparent; 16 | border: none; 17 | 18 | img 19 | { 20 | visibility: visible; 21 | opacity: 1; 22 | } 23 | 24 | ion-spinner { 25 | visibility: hidden; 26 | display: none; 27 | } 28 | } 29 | 30 | img 31 | { 32 | position: absolute; 33 | left: 0px; 34 | top: 0px; 35 | visibility: hidden; 36 | opacity: 0; 37 | @include transition(visibility 0s linear, opacity 0.5s linear); 38 | width: 100% !important; 39 | height: inherit !important; 40 | // To reset min/max-width/height 41 | max-width: inherit !important; 42 | max-height: inherit !important; 43 | min-width: inherit !important; 44 | min-height: inherit !important; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /src/components/preload-image/preload-image.ts: -------------------------------------------------------------------------------- 1 | import { Component, Input, ElementRef, Renderer, OnChanges, SimpleChange } from '@angular/core'; 2 | 3 | import { isPresent } from 'ionic-angular/util/util'; 4 | 5 | @Component({ 6 | selector: 'preload-image', 7 | templateUrl: 'preload-image.html' 8 | }) 9 | export class PreloadImage implements OnChanges { 10 | _src: string = ''; 11 | _ratio: { w: number, h: number }; 12 | _img: any; 13 | 14 | constructor(public _elementRef: ElementRef, public _renderer: Renderer) { 15 | this._img = new Image(); 16 | } 17 | 18 | @Input() alt: string; 19 | 20 | @Input() title: string; 21 | 22 | @Input() set src(val: string) { 23 | this._src = isPresent(val) ? val : ''; 24 | } 25 | 26 | @Input() set ratio(ratio: { w: number, h: number }){ 27 | this._ratio = ratio || null; 28 | } 29 | 30 | ngOnChanges(changes: { [propName: string]: SimpleChange }) { 31 | let ratio_height = (this._ratio.h / this._ratio.w * 100)+"%"; 32 | // Conserve aspect ratio (see: http://stackoverflow.com/a/10441480/1116959) 33 | this._renderer.setElementStyle(this._elementRef.nativeElement, 'padding-bottom', ratio_height); 34 | 35 | this._update(); 36 | // console.log("CHANGES preload-image", this._src); 37 | // console.log(changes['src'].isFirstChange()); 38 | } 39 | 40 | _update() { 41 | if (isPresent(this.alt)) { 42 | this._img.alt = this.alt; 43 | } 44 | if (isPresent(this.title)) { 45 | this._img.title = this.title; 46 | } 47 | 48 | this._img.addEventListener('load', () => { 49 | this._elementRef.nativeElement.appendChild(this._img); 50 | this._loaded(true); 51 | }); 52 | 53 | this._img.src = this._src; 54 | 55 | this._loaded(false); 56 | } 57 | 58 | _loaded(isLoaded: boolean) { 59 | this._elementRef.nativeElement.classList[isLoaded ? 'add' : 'remove']('img-loaded'); 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/components/rating/rating.html: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /src/components/rating/rating.scss: -------------------------------------------------------------------------------- 1 | rating { 2 | @include display(flex); 3 | @include justify-content(flex-end); 4 | @include align-items(center); 5 | 6 | [ion-button].rating-icon 7 | { 8 | flex: 1; 9 | max-width: 2em; 10 | margin: 0px; 11 | padding: 0px 4px; 12 | min-width: 0px; 13 | background: none; 14 | box-shadow: none; 15 | 16 | ion-icon { 17 | font-size: 1.6em; 18 | padding: 0px; 19 | } 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/components/rating/rating.ts: -------------------------------------------------------------------------------- 1 | import { Component, forwardRef, Input } from '@angular/core'; 2 | import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 3 | 4 | const noop = () => {}; 5 | 6 | export const RATING_CONTROL_VALUE_ACCESSOR: any = { 7 | provide: NG_VALUE_ACCESSOR, 8 | useExisting: forwardRef(() => Rating), 9 | multi: true 10 | }; 11 | 12 | @Component({ 13 | selector: 'rating', 14 | templateUrl: 'rating.html', 15 | providers: [RATING_CONTROL_VALUE_ACCESSOR] 16 | }) 17 | export class Rating implements ControlValueAccessor { 18 | 19 | @Input() max = 5; 20 | @Input('read-only') readOnly = false; 21 | 22 | range: Array; 23 | innerValue: any; 24 | propagateChange:any = noop; 25 | 26 | ngOnInit() { 27 | let states: Array = []; 28 | 29 | for (let i = 0; i < this.max; i++) { 30 | if (this.innerValue > i && this.innerValue < i + 1) { 31 | states[i] = 2; 32 | } else if (this.innerValue > i) { 33 | states[i] = 1; 34 | } else { 35 | states[i] = 0; 36 | } 37 | } 38 | 39 | this.range = states; 40 | } 41 | 42 | get value(): any { 43 | return this.innerValue; 44 | } 45 | 46 | set value(val: any) { 47 | if (val !== this.innerValue) { 48 | this.innerValue = val; 49 | this.propagateChange(val); 50 | } 51 | } 52 | 53 | writeValue(value: any) { 54 | if (value !== this.innerValue) { 55 | this.innerValue = value; 56 | } 57 | } 58 | 59 | registerOnChange(fn) { 60 | this.propagateChange = fn; 61 | } 62 | 63 | registerOnTouched() {} 64 | 65 | rate(amount: number) { 66 | if (!this.readOnly && amount >= 0 && amount <= this.range.length) { 67 | this.value = amount; 68 | } 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /src/components/show-hide-password/show-hide-container.ts: -------------------------------------------------------------------------------- 1 | import { Component, ContentChild } from '@angular/core'; 2 | import { ShowHideInput } from './show-hide-input' 3 | 4 | @Component({ 5 | selector: 'show-hide-container', 6 | templateUrl: 'show-hide-password.html', 7 | host: { 8 | 'class': 'show-hide-password' 9 | } 10 | }) 11 | export class ShowHideContainer 12 | { 13 | show = false; 14 | 15 | @ContentChild(ShowHideInput) input: ShowHideInput; 16 | 17 | constructor(){} 18 | 19 | toggleShow() 20 | { 21 | this.show = !this.show; 22 | if (this.show){ 23 | this.input.changeType("text"); 24 | } 25 | else { 26 | this.input.changeType("password"); 27 | } 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /src/components/show-hide-password/show-hide-input.ts: -------------------------------------------------------------------------------- 1 | import { Directive, HostBinding, ElementRef } from '@angular/core'; 2 | 3 | @Directive({ 4 | selector: '[show-hide-input]' 5 | }) 6 | export class ShowHideInput 7 | { 8 | @HostBinding() type: string; 9 | 10 | constructor(public el: ElementRef){ 11 | this.type = 'password'; 12 | } 13 | 14 | changeType(type:string) { 15 | this.type = type; 16 | this.el.nativeElement.children[0].type = this.type; 17 | } 18 | } 19 | -------------------------------------------------------------------------------- /src/components/show-hide-password/show-hide-password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/components/show-hide-password/show-hide-password.scss: -------------------------------------------------------------------------------- 1 | .show-hide-password 2 | { 3 | display: block; 4 | position: relative; 5 | 6 | .item 7 | { 8 | .item-inner 9 | { 10 | padding-right: 6rem; 11 | } 12 | } 13 | 14 | 15 | .type-toggle 16 | { 17 | position: absolute; 18 | right: 0px; 19 | top: 0px; 20 | height: 4.4rem; 21 | width: 6rem; 22 | text-align: center; 23 | padding: 0px; 24 | 25 | .show-option, 26 | .hide-option 27 | { 28 | height: 4.4rem; 29 | line-height: 4.4rem; 30 | font-size: 2.4rem; 31 | 32 | &:not(ion-icon) 33 | { 34 | text-transform: uppercase; 35 | font-size: 1.2rem; 36 | } 37 | } 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Ionic App 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ion2-fullapp", 3 | "short_name": "ion2FullApp", 4 | "start_url": "index.html", 5 | "display": "standalone", 6 | "icons": [{ 7 | "src": "assets/img/appicon.png", 8 | "sizes": "512x512", 9 | "type": "image/png" 10 | }], 11 | "background_color": "#387ef5", 12 | "theme_color": "#387ef5" 13 | } 14 | -------------------------------------------------------------------------------- /src/pages/contact-card/contact-card.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Contact Card 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

{{ contact.name }}

16 | 17 | 18 |
19 | 20 | 21 | 22 |
23 | 24 | 25 |

26 | Today opens from 8:30 am to 6:00 pm 27 |

28 | 29 | 30 |
31 | 34 | 37 | 40 |
41 | 42 | 43 | 44 | 45 | 46 | 47 | {{ contact.address }} 48 | 49 | 50 | 51 | 52 | 53 | {{ contact.website }} 54 | 55 | 56 | 57 | 58 | 59 | {{ contact.phone }} 60 | 61 | 62 | 63 | 64 | 65 | {{ contact.email }} 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /src/pages/contact-card/contact-card.md.scss: -------------------------------------------------------------------------------- 1 | ion-app.md { 2 | contact-card-page { 3 | .contact-card-content 4 | { 5 | .button-bar 6 | { 7 | background: $white; 8 | border-radius: 6px; 9 | 10 | & > .button 11 | { 12 | box-shadow: none; 13 | } 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/contact-card/contact-card.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { CallNumber, SocialSharing, InAppBrowser } from 'ionic-native'; 4 | 5 | import { ContactModel } from './contact.model'; 6 | 7 | @Component({ 8 | selector: 'contact-card-page', 9 | templateUrl: 'contact-card.html' 10 | }) 11 | export class ContactCardPage { 12 | contact: ContactModel = new ContactModel(); 13 | 14 | constructor( 15 | public navCtrl: NavController 16 | ) { 17 | } 18 | 19 | call(number: string){ 20 | CallNumber.callNumber(number, true) 21 | .then(() => console.log('Launched dialer!')) 22 | .catch(() => console.log('Error launching dialer')); 23 | } 24 | 25 | sendMail(email: string){ 26 | SocialSharing.canShareViaEmail().then(() => { 27 | SocialSharing.shareViaEmail("Hello, I'm trying this fantastic app that will save me hours of development.", "This app is the best!", [email]).then(() => { 28 | console.log('Success!'); 29 | }).catch(() => { 30 | console.log('Error'); 31 | }); 32 | }).catch(() => { 33 | console.log('Sharing via email is not possible'); 34 | }); 35 | } 36 | 37 | openInAppBrowser(website: string){ 38 | new InAppBrowser(website, '_blank', "location=yes"); 39 | } 40 | 41 | } 42 | -------------------------------------------------------------------------------- /src/pages/contact-card/contact.model.ts: -------------------------------------------------------------------------------- 1 | export class ContactModel { 2 | images: Array = []; 3 | name: string; 4 | rating: number; 5 | email: string; 6 | phone: string; 7 | website: string; 8 | address: string; 9 | 10 | constructor() { 11 | this.images = [ 12 | './assets/images/maps/place-1.jpg', 13 | './assets/images/maps/place-2.jpg', 14 | './assets/images/maps/place-3.jpg', 15 | './assets/images/maps/place-4.jpg' 16 | ]; 17 | this.name = "Railway Cafe"; 18 | this.rating = 4; 19 | this.email = "contact@ionicthemes.com"; 20 | this.phone = "555-555-555"; 21 | this.website = "https://ionicthemes.com"; 22 | this.address = "7644 sable st"; 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/facebook-login/facebook-login.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 55 | -------------------------------------------------------------------------------- /src/pages/facebook-login/facebook-login.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | import 'rxjs/add/operator/toPromise'; 4 | import { Facebook, NativeStorage } from 'ionic-native'; 5 | import { FacebookUserModel } from './facebook-user.model'; 6 | 7 | 8 | @Injectable() 9 | export class FacebookLoginService { 10 | FB_APP_ID: number = 826720427470540; 11 | 12 | constructor(public http: Http) { 13 | Facebook.browserInit(this.FB_APP_ID, "v2.8"); 14 | } 15 | 16 | doFacebookLogin() 17 | { 18 | let env = this; 19 | 20 | return new Promise((resolve, reject) => { 21 | //["public_profile"] is the array of permissions, you can add more if you need 22 | Facebook.login(["public_profile"]).then(function(response){ 23 | //Getting name and gender properties 24 | Facebook.api("/me?fields=name,gender", []) 25 | .then(function(user) { 26 | //now we have the users info, let's save it in the NativeStorage 27 | env.setFacebookUser(user) 28 | .then(function(res){ 29 | resolve(res); 30 | }); 31 | }) 32 | }, function(error){ 33 | reject(error); 34 | }); 35 | }); 36 | } 37 | 38 | doFacebookLogout() 39 | { 40 | return new Promise((resolve, reject) => { 41 | Facebook.logout() 42 | .then(function(res) { 43 | //user logged out so we will remove him from the NativeStorage 44 | NativeStorage.remove('facebook_user'); 45 | resolve(); 46 | }, function(error){ 47 | reject(); 48 | }); 49 | }); 50 | } 51 | 52 | getFacebookUser() 53 | { 54 | return NativeStorage.getItem('facebook_user'); 55 | } 56 | 57 | setFacebookUser(user: any) 58 | { 59 | return new Promise((resolve, reject) => { 60 | this.getFriendsFakeData() 61 | .then(data => { 62 | resolve(NativeStorage.setItem('facebook_user', 63 | { 64 | userId: user.id, 65 | name: user.name, 66 | gender: user.gender, 67 | image: "https://graph.facebook.com/" + user.id + "/picture?type=large", 68 | friends: data.friends, 69 | photos: data.photos 70 | }) 71 | ); 72 | }); 73 | }); 74 | } 75 | 76 | getFriendsFakeData(): Promise { 77 | return this.http.get('./assets/example_data/social_integrations.json') 78 | .toPromise() 79 | .then(response => response.json() as FacebookUserModel) 80 | .catch(this.handleError); 81 | } 82 | 83 | private handleError(error: any): Promise { 84 | console.error('An error occurred', error); // for demo purposes only 85 | return Promise.reject(error.message || error); 86 | } 87 | 88 | } 89 | -------------------------------------------------------------------------------- /src/pages/facebook-login/facebook-login.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, LoadingController } from 'ionic-angular'; 3 | 4 | import { FacebookUserModel } from './facebook-user.model'; 5 | import { FacebookLoginService } from './facebook-login.service'; 6 | 7 | @Component({ 8 | selector: 'facebook-login-page', 9 | templateUrl: 'facebook-login.html' 10 | }) 11 | export class FacebookLoginPage { 12 | user: FacebookUserModel = new FacebookUserModel(); 13 | loading: any; 14 | 15 | constructor( 16 | public nav: NavController, 17 | public facebookLoginService: FacebookLoginService, 18 | public loadingCtrl: LoadingController 19 | ) { 20 | this.loading = this.loadingCtrl.create(); 21 | } 22 | 23 | ionViewDidLoad(){ 24 | this.loading.present(); 25 | let env = this; 26 | 27 | this.facebookLoginService.getFacebookUser() 28 | .then(function(user){ 29 | env.user = user; 30 | env.loading.dismiss(); 31 | }, function(error){ 32 | console.log(error); 33 | env.loading.dismiss(); 34 | }); 35 | } 36 | 37 | doFacebookLogout(){ 38 | let env = this; 39 | 40 | this.facebookLoginService.doFacebookLogout() 41 | .then(function(res) { 42 | env.user = new FacebookUserModel(); 43 | }, function(error){ 44 | console.log("Facebook logout error", error); 45 | }); 46 | } 47 | 48 | doFacebookLogin() { 49 | let env = this; 50 | 51 | this.facebookLoginService.doFacebookLogin() 52 | .then(function(user){ 53 | env.user = user; 54 | }, function(err){ 55 | console.log("Facebook Login error", err); 56 | }); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/pages/facebook-login/facebook-user.model.ts: -------------------------------------------------------------------------------- 1 | export class FacebookUserModel { 2 | image: string; 3 | gender: string; 4 | name: string; 5 | userId: string; 6 | friends: Array = []; 7 | photos: Array = []; 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/feed/feed.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | {{ feed.category.title }} 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | 17 | 18 | {{post.title}} 19 | 20 |

21 | {{post.description}} 22 |

23 | 24 | 25 | 26 | 30 | 31 | 32 | 36 | 37 | 38 | 42 | 43 | 44 | 45 |
46 | 47 | -------------------------------------------------------------------------------- /src/pages/feed/feed.model.ts: -------------------------------------------------------------------------------- 1 | export class FeedPostModel { 2 | title: string; 3 | image: string; 4 | description: string; 5 | likes: number = 0; 6 | comments: number = 0; 7 | liked: boolean = false; 8 | } 9 | 10 | export class FeedModel { 11 | category: any; 12 | posts: Array; 13 | } 14 | -------------------------------------------------------------------------------- /src/pages/feed/feed.scss: -------------------------------------------------------------------------------- 1 | feed-page { 2 | .feed-content 3 | { 4 | background-color: color($colors, background, base); 5 | 6 | .feed-item 7 | { 8 | @include basic-card-styles($white-d); 9 | 10 | .item-title 11 | { 12 | margin: 0px; 13 | margin-bottom: 12px; 14 | padding: 0px; 15 | letter-spacing: 1.1px; 16 | color: $theme-color-2; 17 | } 18 | } 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /src/pages/feed/feed.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | 6 | import { FeedPostModel } from './feed.model'; 7 | 8 | @Injectable() 9 | export class FeedService { 10 | constructor(public http: Http) {} 11 | 12 | getPosts(): Promise { 13 | return this.http.get('./assets/example_data/feed.json') 14 | .toPromise() 15 | .then(response => response.json().feed as FeedPostModel[]) 16 | .catch(this.handleError); 17 | } 18 | 19 | private handleError(error: any): Promise { 20 | console.error('An error occurred', error); // for demo purposes only 21 | return Promise.reject(error.message || error); 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/pages/feed/feed.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, NavParams, LoadingController } from 'ionic-angular'; 3 | 4 | import { ProfilePage } from '../profile/profile'; 5 | import 'rxjs/Rx'; 6 | 7 | import { FeedModel } from './feed.model'; 8 | import { FeedService } from './feed.service'; 9 | import { SocialSharing } from 'ionic-native'; 10 | 11 | @Component({ 12 | selector: 'feed-page', 13 | templateUrl: 'feed.html' 14 | }) 15 | export class FeedPage { 16 | feed: FeedModel = new FeedModel(); 17 | loading: any; 18 | 19 | constructor( 20 | public nav: NavController, 21 | public feedService: FeedService, 22 | public navParams: NavParams, 23 | public loadingCtrl: LoadingController 24 | ) { 25 | this.feed.category = navParams.get('category'); 26 | 27 | this.loading = this.loadingCtrl.create(); 28 | } 29 | 30 | 31 | ionViewDidLoad() { 32 | this.loading.present(); 33 | this.feedService 34 | .getPosts() 35 | .then(posts => { 36 | this.feed.posts = posts; 37 | this.loading.dismiss(); 38 | }); 39 | } 40 | 41 | goToProfile(event, item) { 42 | this.nav.push(ProfilePage, { 43 | user: item 44 | }); 45 | } 46 | 47 | getRandomInt(min, max) { 48 | return Math.floor(Math.random() * (max - min + 1)) + min; 49 | } 50 | 51 | sharePost(post) { 52 | //this code is to use the social sharing plugin 53 | // message, subject, file, url 54 | SocialSharing.share(post.description, post.title, post.image) 55 | .then(() => { 56 | console.log('Success!'); 57 | }) 58 | .catch(() => { 59 | console.log('Error'); 60 | }); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/pages/filters/filters.md.scss: -------------------------------------------------------------------------------- 1 | ion-app.md { 2 | filters-page { 3 | .range-list 4 | { 5 | .range-item 6 | { 7 | @include range-item-md-styles($theme-color-1); 8 | } 9 | } 10 | 11 | .switchers-list 12 | { 13 | .switcher-item 14 | { 15 | @include switcher-item-md-styles($theme-color-1); 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/pages/filters/filters.scss: -------------------------------------------------------------------------------- 1 | filters-page { 2 | ion-header { 3 | @include header-styles(color($colors, header-alt, base), color($colors, header-alt, contrast)); 4 | } 5 | 6 | ion-item-divider { 7 | padding: 15px !important; 8 | background-color: transparent !important; 9 | 10 | .item-inner 11 | { 12 | min-height: 0px; 13 | 14 | ion-label { 15 | margin: 0px; 16 | font-size: 1.2rem; 17 | font-weight: 500; 18 | letter-spacing: 0.9px; 19 | color: $theme-color-3; 20 | } 21 | } 22 | } 23 | 24 | .filters-content 25 | { 26 | background-color: color($colors, background, base); 27 | } 28 | 29 | .range-list 30 | { 31 | @include range-item-styles($white-d, $black-d, $theme-color-1); 32 | } 33 | 34 | .checkbox-list 35 | { 36 | padding-left: 15px; 37 | background-color: $white; 38 | @include element-shadow(); 39 | 40 | @include checkbox-item-styles($white-d, $white, $theme-color-1); 41 | } 42 | 43 | .radio-group 44 | { 45 | padding-left: 15px; 46 | background-color: $white; 47 | @include element-shadow(); 48 | 49 | @include radio-item-styles($white-d, $white-a, $theme-color-1); 50 | } 51 | 52 | @include checkbox-tags-styles($white, $white-d, $theme-color-1, $white); 53 | 54 | .rounded-tags 55 | { 56 | background-color: $white; 57 | padding: 15px; 58 | @include element-shadow(); 59 | 60 | .checkbox-tag 61 | { 62 | .item-inner 63 | { 64 | border-radius: 2.2rem; 65 | background-color: $white-b; 66 | color: $white; 67 | } 68 | } 69 | } 70 | 71 | @include radio-tags-styles($white, $theme-color-1, $white); 72 | 73 | .radio-tags 74 | { 75 | @include flex-wrap(nowrap); 76 | padding: 15px; 77 | 78 | .radio-tag 79 | { 80 | border-radius: 8px; 81 | 82 | .item-inner 83 | { 84 | padding: 0px 8px; 85 | 86 | ion-label { 87 | margin: 8px 0px; 88 | } 89 | } 90 | } 91 | } 92 | 93 | .switchers-list 94 | { 95 | @include switcher-item-styles($white-d, $theme-color-1); 96 | 97 | .switcher-item 98 | { 99 | padding: 0px; 100 | 101 | .item-inner 102 | { 103 | padding: 0px; 104 | border: none; 105 | 106 | ion-label { 107 | margin-left: 15px; 108 | } 109 | } 110 | } 111 | } 112 | 113 | .counter-list 114 | { 115 | @include counter-item-styles($white-d, $theme-color-1, $white); 116 | } 117 | 118 | .ratings-list 119 | { 120 | @include rating-item-styles($white-d, $theme-color-1); 121 | } 122 | 123 | .color-tags 124 | { 125 | background-color: $white; 126 | @include element-shadow(); 127 | @include flex-wrap(wrap); 128 | 129 | @include color-radio-styles($white, $black); 130 | } 131 | } 132 | -------------------------------------------------------------------------------- /src/pages/filters/filters.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, Range } from 'ionic-angular'; 3 | import { FormGroup, FormControl } from '@angular/forms'; 4 | import { counterRangeValidator } from '../../components/counter-input/counter-input'; 5 | 6 | @Component({ 7 | selector: 'filters-page', 8 | templateUrl: 'filters.html' 9 | }) 10 | export class FiltersPage { 11 | rangeForm: any; 12 | checkboxForm: FormGroup; 13 | radioForm: FormGroup; 14 | checkboxTagsForm: FormGroup; 15 | radioTagsForm: FormGroup; 16 | switchersForm: FormGroup; 17 | counterForm: any; 18 | ratingForm: FormGroup; 19 | radioColorForm: FormGroup; 20 | 21 | constructor(public nav: NavController) { 22 | this.rangeForm = new FormGroup({ 23 | single: new FormControl(25), 24 | dual: new FormControl({lower: 33, upper: 60}) 25 | }); 26 | 27 | this.checkboxForm = new FormGroup({ 28 | person_1: new FormControl(true), 29 | person_2: new FormControl(false), 30 | person_3: new FormControl(false), 31 | person_4: new FormControl(true), 32 | person_5: new FormControl(false) 33 | }); 34 | 35 | this.radioForm = new FormGroup({ 36 | selected_option: new FormControl('apple') 37 | }); 38 | 39 | this.checkboxTagsForm = new FormGroup({ 40 | tag_1: new FormControl(false), 41 | tag_2: new FormControl(false), 42 | tag_3: new FormControl(true), 43 | tag_4: new FormControl(true), 44 | tag_5: new FormControl(false), 45 | tag_6: new FormControl(false), 46 | tag_7: new FormControl(true), 47 | tag_8: new FormControl(false) 48 | }); 49 | 50 | this.radioTagsForm = new FormGroup({ 51 | selected_option: new FormControl('any') 52 | }); 53 | 54 | this.switchersForm = new FormGroup({ 55 | notifications: new FormControl(true), 56 | email_notifications: new FormControl(false) 57 | }); 58 | 59 | this.counterForm = new FormGroup({ 60 | counter: new FormControl(5, counterRangeValidator(7, 1)), 61 | counter2: new FormControl(2, counterRangeValidator(5, 1)) 62 | }); 63 | 64 | this.ratingForm = new FormGroup({ 65 | rate: new FormControl(2.5), 66 | rate2: new FormControl(1.5) 67 | }); 68 | 69 | this.radioColorForm = new FormGroup({ 70 | selected_color: new FormControl('#fc9961') 71 | }); 72 | } 73 | 74 | rangeChange(range: Range) { 75 | console.log(`range, change, ratio: ${range.ratio}, value: ${range.value}`); 76 | } 77 | 78 | } 79 | -------------------------------------------------------------------------------- /src/pages/filters/filters.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | filters-page { 3 | .range-list 4 | { 5 | .range-item 6 | { 7 | @include range-item-wp-styles($theme-color-1); 8 | } 9 | } 10 | 11 | .switchers-list 12 | { 13 | .switcher-item 14 | { 15 | @include switcher-item-wp-styles($white-b, $theme-color-2); 16 | } 17 | } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/pages/followers/followers.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Followers 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |

{{item.name}}

16 |

{{item.about}}

17 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /src/pages/followers/followers.md.scss: -------------------------------------------------------------------------------- 1 | ion-app.md { 2 | followers-page { 3 | ion-searchbar { 4 | .searchbar-input 5 | { 6 | border-radius: 2.1rem; 7 | } 8 | } 9 | 10 | .relation-button 11 | { 12 | &.following 13 | { 14 | ion-icon { 15 | font-size: 3.0em !important; 16 | } 17 | } 18 | } 19 | } 20 | 21 | } 22 | -------------------------------------------------------------------------------- /src/pages/followers/followers.scss: -------------------------------------------------------------------------------- 1 | $followers-description-font-size: 12px; 2 | 3 | followers-page { 4 | .followers-content 5 | { 6 | background-color: color($colors, background, base); 7 | 8 | ion-searchbar { 9 | background: transparent; 10 | padding: 10px; 11 | border: none; 12 | 13 | .searchbar-input 14 | { 15 | border-radius: 1.5rem; 16 | color: $theme-color-2; 17 | background-color: $white-c; 18 | } 19 | 20 | .searchbar-search-icon { 21 | @include ios-searchbar-icon($searchbar-ios-input-search-icon-svg, $theme-color-2); 22 | } 23 | } 24 | 25 | .followers-list 26 | { 27 | margin: 10px; 28 | 29 | .list-item 30 | { 31 | margin: 6px 0px; 32 | border-radius: 6px; 33 | border: none; 34 | padding: 0px; 35 | @include element-shadow(); 36 | 37 | ion-thumbnail { 38 | flex: 0 0 24%; 39 | max-width: 24%; 40 | margin: 0px; 41 | padding: 8px; 42 | } 43 | 44 | .item-inner 45 | { 46 | border: none; 47 | padding: 0px; 48 | 49 | .input-wrapper 50 | { 51 | padding: 8px; 52 | } 53 | 54 | ion-label { 55 | margin: 0px; 56 | @include align-self(flex-start); 57 | 58 | .item-title 59 | { 60 | font-size: 1.4rem; 61 | font-weight: 500; 62 | letter-spacing: 0.2px; 63 | color: $theme-color-3; 64 | margin-bottom: 6px; 65 | } 66 | 67 | .item-description 68 | { 69 | letter-spacing: 0.2px; 70 | word-break: break-word; 71 | color: $white-d; 72 | @include multi-line-ellipsis($followers-description-font-size); 73 | } 74 | } 75 | 76 | .relation-button 77 | { 78 | margin: 0px; 79 | padding: 0px 16px; 80 | height: inherit; 81 | @include align-self(stretch); 82 | border-radius: 0px 6px 6px 0px; 83 | background-color: $theme-color-2; 84 | width: 24%; 85 | 86 | &.following 87 | { 88 | background-color: $theme-color-1; 89 | 90 | ion-icon { 91 | font-size: 4.2em; 92 | } 93 | } 94 | 95 | ion-icon { 96 | font-size: 2.4em; 97 | color: $white; 98 | } 99 | } 100 | } 101 | } 102 | } 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /src/pages/followers/followers.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MenuController, NavParams } from 'ionic-angular'; 3 | import { UserModel } from '../profile/profile.model'; 4 | 5 | @Component({ 6 | selector: 'followers-page', 7 | templateUrl: 'followers.html' 8 | }) 9 | export class FollowersPage { 10 | list: Array = []; 11 | 12 | constructor(public menu: MenuController, public navParams: NavParams) 13 | { 14 | this.list = navParams.get('list'); 15 | } 16 | 17 | ionViewDidEnter() { 18 | // the root left menu should be disabled on this page 19 | this.menu.enable(false); 20 | } 21 | 22 | ionViewWillLeave() { 23 | // enable the root left menu when leaving the tutorial page 24 | this.menu.enable(true); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /src/pages/followers/followers.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | followers-page { 3 | ion-searchbar { 4 | background: transparent; 5 | 6 | .searchbar-input-container 7 | { 8 | border-radius: 1.6rem; 9 | } 10 | 11 | .searchbar-input 12 | { 13 | border-radius: 1.5rem; 14 | } 15 | } 16 | } 17 | 18 | } 19 | -------------------------------------------------------------------------------- /src/pages/forgot-password/forgot-password.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Forgot Password? 4 | 5 | 6 | 7 | 8 |

Recover your password

9 |

10 | Please enter your email address and we'll send you an email to reset your password. 11 |

12 |
13 | 14 | 15 | 16 | 17 |
18 | 19 | -------------------------------------------------------------------------------- /src/pages/forgot-password/forgot-password.scss: -------------------------------------------------------------------------------- 1 | forgot-password-page { 2 | .forgot-password-content 3 | { 4 | .recover-message 5 | { 6 | color: $white-d; 7 | margin: 10px 0px; 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/pages/forgot-password/forgot-password.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { Validators, FormGroup, FormControl } from '@angular/forms'; 4 | 5 | import { TabsNavigationPage } from '../tabs-navigation/tabs-navigation'; 6 | 7 | @Component({ 8 | selector: 'forgot-password-page', 9 | templateUrl: 'forgot-password.html' 10 | }) 11 | export class ForgotPasswordPage { 12 | forgot_password: FormGroup; 13 | main_page: { component: any }; 14 | 15 | constructor(public nav: NavController) { 16 | this.main_page = { component: TabsNavigationPage }; 17 | 18 | this.forgot_password = new FormGroup({ 19 | email: new FormControl('', Validators.required) 20 | }); 21 | } 22 | 23 | recoverPassword(){ 24 | console.log(this.forgot_password.value); 25 | this.nav.setRoot(this.main_page.component); 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/pages/form-layout/form-layout.ios.scss: -------------------------------------------------------------------------------- 1 | ion-app.ios { 2 | form-layout-page { 3 | .forms-examples-segment 4 | { 5 | @include segment-button-ios-styles(); 6 | } 7 | } 8 | 9 | ion-alert.category-prompt { 10 | .alert-wrapper 11 | { 12 | border-radius: 18px; 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/pages/form-layout/form-layout.md.scss: -------------------------------------------------------------------------------- 1 | ion-app.md { 2 | form-layout-page { 3 | .upload-image-button 4 | { 5 | padding-top: 26px !important; 6 | 7 | .button-inner 8 | { 9 | ion-icon { 10 | font-size: 3.2em !important; 11 | margin-bottom: 8px; 12 | } 13 | } 14 | } 15 | 16 | .checkbox-list .checkbox-item 17 | { 18 | margin-left: 1px; 19 | } 20 | 21 | .radio-group .radio-item 22 | { 23 | margin-left: 1px; 24 | } 25 | 26 | .range-item 27 | { 28 | @include range-item-md-styles($theme-color-1); 29 | } 30 | 31 | .switcher-item 32 | { 33 | @include switcher-item-md-styles($theme-color-1); 34 | } 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /src/pages/form-layout/form-layout.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | form-layout-page { 3 | .forms-examples-segment 4 | { 5 | @include justify-content(center); 6 | @include segment-button-wp-styles(); 7 | } 8 | 9 | .range-item 10 | { 11 | @include range-item-wp-styles($theme-color-1); 12 | } 13 | 14 | .counter-item 15 | { 16 | .item-inner counter-input .counter-icon 17 | { 18 | ion-icon { 19 | margin: 0px; 20 | border: none; 21 | padding: 1px; 22 | width: 100%; 23 | } 24 | } 25 | } 26 | 27 | .post-form 28 | { 29 | .upload-image-button 30 | { 31 | border: none; 32 | } 33 | 34 | .time-item 35 | { 36 | ion-datetime { 37 | .datetime-text 38 | { 39 | text-align: right; 40 | } 41 | } 42 | } 43 | } 44 | 45 | .event-form 46 | { 47 | .time-item 48 | { 49 | ion-datetime { 50 | width: 100%; 51 | padding-right: 0px !important; 52 | padding-top: 8px !important; 53 | padding-bottom: 7px !important; 54 | } 55 | } 56 | } 57 | 58 | .card-form 59 | { 60 | .time-item 61 | { 62 | ion-datetime { 63 | padding-right: 0px !important; 64 | } 65 | } 66 | } 67 | 68 | .switcher-item 69 | { 70 | @include switcher-item-wp-styles($white-b, $theme-color-2); 71 | } 72 | 73 | .sample-form 74 | { 75 | .item 76 | { 77 | padding: 0px; 78 | 79 | .item-inner 80 | { 81 | padding: 0px; 82 | position: relative; 83 | 84 | ion-icon { 85 | position: absolute; 86 | right: 0px; 87 | top: 0px; 88 | margin: 13px 6px; 89 | line-height: 3rem; 90 | border: solid 2px rgba(0, 0, 0, 0); 91 | } 92 | } 93 | 94 | .text-input 95 | { 96 | padding: 0px 0.6rem; 97 | } 98 | 99 | &[icon-right] 100 | { 101 | .text-input 102 | { 103 | padding-right: 35px; 104 | } 105 | } 106 | } 107 | } 108 | } 109 | 110 | ion-alert.category-prompt { 111 | .alert-wrapper 112 | { 113 | width: 100%; 114 | } 115 | 116 | .alert-button-group 117 | { 118 | padding: 20px 22px; 119 | 120 | .alert-button 121 | { 122 | background: $white; 123 | } 124 | } 125 | 126 | } 127 | } 128 | -------------------------------------------------------------------------------- /src/pages/forms/forms.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | Forms 7 | 8 | 9 | 10 | 11 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/pages/forms/forms.scss: -------------------------------------------------------------------------------- 1 | forms-page { 2 | .forms-content 3 | { 4 | background-color: color($colors, background, base); 5 | 6 | .forms-list 7 | { 8 | @include basic-list-styles($theme-color-3, $theme-color-2); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/forms/forms.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | 4 | import { FormLayoutPage } from '../form-layout/form-layout'; 5 | import { FiltersPage } from '../filters/filters'; 6 | 7 | @Component({ 8 | selector: 'forms-page', 9 | templateUrl: 'forms.html' 10 | }) 11 | export class FormsPage { 12 | items: Array<{title: string, note?: string, component: any}>; 13 | 14 | constructor(public nav: NavController) { 15 | this.items = [ 16 | { title: 'Forms Examples', component: FormLayoutPage }, 17 | { title: 'Filters', component: FiltersPage } 18 | ]; 19 | } 20 | 21 | itemTapped(event, item) { 22 | this.nav.push(item.component); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/functionalities/functionalities.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | Functionalities 7 | 8 | 9 | 10 | 11 | 12 | 23 | 24 | 25 | -------------------------------------------------------------------------------- /src/pages/functionalities/functionalities.scss: -------------------------------------------------------------------------------- 1 | functionalities-page { 2 | .functionalities-content 3 | { 4 | background-color: color($colors, background, base); 5 | 6 | .functionalities-list 7 | { 8 | @include basic-list-styles($theme-color-3, $theme-color-2); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/functionalities/functionalities.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | import { MapsPage } from '../maps/maps'; 4 | import { FacebookLoginPage } from '../facebook-login/facebook-login'; 5 | import { GoogleLoginPage } from '../google-login/google-login'; 6 | import { ContactCardPage } from '../contact-card/contact-card'; 7 | 8 | @Component({ 9 | selector: 'functionalities-page', 10 | templateUrl: 'functionalities.html' 11 | }) 12 | export class FunctionalitiesPage { 13 | items: Array<{title: string, note?: string, component: any}>; 14 | 15 | constructor(public nav: NavController) { 16 | this.items = [ 17 | { title: 'Facebook Integration', component: FacebookLoginPage }, 18 | { title: 'Google Integration', component: GoogleLoginPage }, 19 | { title: 'Contact Card', component: ContactCardPage }, 20 | { title: 'Maps', component: MapsPage } 21 | ]; 22 | } 23 | 24 | itemTapped(event, item) { 25 | this.nav.push(item.component); 26 | } 27 | 28 | } 29 | -------------------------------------------------------------------------------- /src/pages/google-login/google-login.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Google 4 | 5 | 6 | 7 | 8 | 9 |
10 |

You haven't linked your Google account yet.

11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 |
19 | 20 | 21 | 22 |

{{user.name}}

23 | 24 | 25 |

26 | {{user.email}} 27 |

28 | 29 | 30 |

Friends

31 | 32 | 33 | 34 |

Tom

35 | 36 | 37 |
38 |

22

39 |
40 | 41 | 42 |

Photos

43 | 44 | 45 | 46 | 47 |
48 |

107

49 |
50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
59 | 60 | -------------------------------------------------------------------------------- /src/pages/google-login/google-login.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, LoadingController } from 'ionic-angular'; 3 | 4 | import { GoogleUserModel } from './google-user.model'; 5 | import { GoogleLoginService } from './google-login.service'; 6 | 7 | @Component({ 8 | selector: 'google-login-page', 9 | templateUrl: 'google-login.html' 10 | }) 11 | export class GoogleLoginPage { 12 | user: GoogleUserModel = new GoogleUserModel(); 13 | loading: any; 14 | 15 | constructor( 16 | public navCtrl: NavController, 17 | public googleLoginService: GoogleLoginService, 18 | public loadingCtrl: LoadingController 19 | ) { 20 | this.loading = this.loadingCtrl.create(); 21 | } 22 | 23 | ionViewDidLoad(){ 24 | this.loading.present(); 25 | let env = this; 26 | 27 | this.googleLoginService.getGoogleUser() 28 | .then(function(user){ 29 | env.user = user; 30 | env.loading.dismiss(); 31 | }, function(error){ 32 | console.log(error); 33 | env.loading.dismiss(); 34 | }); 35 | } 36 | 37 | doGoogleLogout(){ 38 | let env = this; 39 | 40 | this.googleLoginService.doGoogleLogout() 41 | .then(function(res) { 42 | env.user = new GoogleUserModel(); 43 | }, function(error){ 44 | console.log("Google logout error", error); 45 | }); 46 | } 47 | 48 | doGoogleLogin() { 49 | let env = this; 50 | 51 | this.googleLoginService.doGoogleLogin() 52 | .then(function(user){ 53 | env.user = user; 54 | }, function(err){ 55 | console.log("Google Login error", err); 56 | }); 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/pages/google-login/google-user.model.ts: -------------------------------------------------------------------------------- 1 | export class GoogleUserModel { 2 | image: string; 3 | email: string; 4 | name: string; 5 | userId: string; 6 | friends: Array = []; 7 | photos: Array = []; 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/grid/grid.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Grid 4 | 5 | 6 | 7 | 8 | 9 | Grid Example #1 10 | 11 | 12 |
13 |
14 |

1

15 |

1

16 |

1

17 |

1

18 |
19 |
20 | 21 | 22 |
23 |
24 |

{{ item }}

25 |
26 |
27 | 28 | 29 | Grid Example #2 30 | 31 | 32 |
33 |
34 |

1

35 |

1

36 |

1

37 |
38 |
39 | 40 | 41 | 42 |
43 |
44 |

{{ item }}

45 |
46 |
47 | 48 | 49 | 50 |
51 |
52 |

{{ item }}

53 |
54 |
55 | 56 | 57 | Grid Example #3 58 | 59 | 60 |
61 |
62 |

{{ item }}

63 |
64 |
65 | 66 | 67 | Grid Example #4 68 | 69 | 70 |
71 |
72 |

{{ item }}

73 |
74 |
75 | 76 | 77 | 78 | 79 | -------------------------------------------------------------------------------- /src/pages/grid/grid.scss: -------------------------------------------------------------------------------- 1 | grid-page { 2 | ion-item-divider { 3 | padding: 15px 10px !important; 4 | 5 | .item-inner 6 | { 7 | min-height: 0px; 8 | 9 | ion-label { 10 | margin: 0px; 11 | font-size: 1.2rem; 12 | font-weight: 500; 13 | letter-spacing: 0.9px; 14 | color: $theme-color-3; 15 | } 16 | } 17 | } 18 | 19 | .grid-example 20 | { 21 | padding: 10px 5px 0px 5px; 22 | @include flex-wrap(wrap); 23 | 24 | .grid-item 25 | { 26 | padding: 0px 5px 10px; 27 | 28 | &.double-item 29 | { 30 | & > .grid-item 31 | { 32 | padding: 5px 0px; 33 | 34 | &:first-child 35 | { 36 | padding-top: 0px; 37 | } 38 | 39 | &:last-child 40 | { 41 | padding-bottom: 0px; 42 | } 43 | } 44 | } 45 | 46 | .grid-item-wrapper 47 | { 48 | position: relative; 49 | padding-bottom: 100%; 50 | height: 0px; 51 | background-color: $white-c; 52 | 53 | .grid-item-inner 54 | { 55 | height: 100%; 56 | width: 100%; 57 | position: absolute; 58 | @include display(flex); 59 | @include justify-content(center); 60 | @include align-items(center); 61 | 62 | .item-title 63 | { 64 | margin: 0px; 65 | color: $black-c; 66 | text-align: center; 67 | } 68 | 69 | &.multi-line 70 | { 71 | @include flex-wrap(wrap); 72 | 73 | .item-title 74 | { 75 | flex: 0 0 100%; 76 | max-width: 100%; 77 | margin: 5px 0px; 78 | } 79 | } 80 | } 81 | } 82 | } 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /src/pages/grid/grid.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | 4 | @Component({ 5 | selector: 'grid-page', 6 | templateUrl: 'grid.html' 7 | }) 8 | export class GridPage { 9 | 10 | constructor(public nav: NavController) {} 11 | 12 | } 13 | -------------------------------------------------------------------------------- /src/pages/layouts/layouts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Layouts 4 | 5 | 6 | 7 | 8 | 9 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /src/pages/layouts/layouts.scss: -------------------------------------------------------------------------------- 1 | layouts-page { 2 | .layouts-content 3 | { 4 | background-color: color($colors, background, base); 5 | 6 | .layouts-list 7 | { 8 | @include basic-list-styles($theme-color-3, $theme-color-2); 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/layouts/layouts.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController } from 'ionic-angular'; 3 | 4 | import { SchedulePage } from '../schedule/schedule'; 5 | import { List1Page } from '../list-1/list-1'; 6 | import { List2Page } from '../list-2/list-2'; 7 | import { GridPage } from '../grid/grid'; 8 | import { NotificationsPage } from '../notifications/notifications'; 9 | import { ProfilePage } from '../profile/profile'; 10 | 11 | 12 | @Component({ 13 | selector: 'layouts-page', 14 | templateUrl: 'layouts.html' 15 | }) 16 | export class LayoutsPage { 17 | items: Array<{title: string, note?: string, component: any}>; 18 | 19 | constructor(public nav: NavController) { 20 | this.items = [ 21 | { title: 'Schedule', component: SchedulePage }, 22 | { title: 'Lists', note: '(Big)', component: List1Page }, 23 | { title: 'Lists', note: '(Mini)', component: List2Page }, 24 | { title: 'Grid', component: GridPage }, 25 | { title: 'Notifications', component: NotificationsPage }, 26 | { title: 'Profile', component: ProfilePage } 27 | ]; 28 | } 29 | 30 | itemTapped(event, item) { 31 | this.nav.push(item.component); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/pages/list-1/list-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | List Big 4 | 5 | 6 | 7 | 8 |
9 | 10 | 25 | 26 |
27 | 28 | -------------------------------------------------------------------------------- /src/pages/list-1/list-1.model.ts: -------------------------------------------------------------------------------- 1 | export class ListModel { 2 | name: string; 3 | image: string; 4 | description: string; 5 | } 6 | export class List1Model { 7 | items: Array; 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/list-1/list-1.scss: -------------------------------------------------------------------------------- 1 | // Common list styles can be found in "./common.styles/layouts/lists" 2 | $list-big-description-font-size: 12px; 3 | 4 | list-1-page { 5 | ion-header { 6 | @include header-styles(color($colors, header-alt, base), color($colors, header-alt, contrast)); 7 | } 8 | 9 | .list-big-content 10 | { 11 | background-color: color($colors, background, base); 12 | 13 | .list-big 14 | { 15 | @include layout-list-styles($theme-color-2, $white-d); 16 | 17 | ion-list { 18 | .list-item 19 | { 20 | 21 | .content-row 22 | { 23 | @include align-items(center); 24 | } 25 | 26 | .item-content 27 | { 28 | @include align-content(stretch); 29 | @include display(flex); 30 | @include flex-wrap(wrap); 31 | @include align-self(stretch); 32 | 33 | .item-title 34 | { 35 | margin-bottom: 8px; 36 | overflow: hidden; 37 | text-overflow: ellipsis; 38 | white-space: nowrap; 39 | } 40 | 41 | .item-description 42 | { 43 | @include multi-line-ellipsis($list-big-description-font-size); 44 | } 45 | } 46 | } 47 | } 48 | } 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /src/pages/list-1/list-1.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | 6 | import { List1Model } from './list-1.model'; 7 | 8 | @Injectable() 9 | export class List1Service { 10 | constructor(public http: Http) {} 11 | 12 | getData(): Promise { 13 | return this.http.get('./assets/example_data/lists.json') 14 | .toPromise() 15 | .then(response => response.json() as List1Model) 16 | .catch(this.handleError); 17 | } 18 | 19 | private handleError(error: any): Promise { 20 | console.error('An error occurred', error); // for demo purposes only 21 | return Promise.reject(error.message || error); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/list-1/list-1.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, LoadingController } from 'ionic-angular'; 3 | 4 | import 'rxjs/Rx'; 5 | 6 | import { List1Model } from './list-1.model'; 7 | import { List1Service } from './list-1.service'; 8 | 9 | @Component({ 10 | selector: 'list-1-page', 11 | templateUrl: 'list-1.html' 12 | }) 13 | export class List1Page { 14 | list1: List1Model = new List1Model(); 15 | loading: any; 16 | 17 | constructor( 18 | public nav: NavController, 19 | public list1Service: List1Service, 20 | public loadingCtrl: LoadingController 21 | ) { 22 | this.loading = this.loadingCtrl.create(); 23 | } 24 | 25 | ionViewDidLoad() { 26 | this.loading.present(); 27 | this.list1Service 28 | .getData() 29 | .then(data => { 30 | this.list1.items = data.items; 31 | this.loading.dismiss(); 32 | }); 33 | } 34 | 35 | 36 | } 37 | -------------------------------------------------------------------------------- /src/pages/list-2/list-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | List Mini 4 | 5 | 6 | 7 | 8 |
9 | 10 | 25 | 26 |
27 | 28 | -------------------------------------------------------------------------------- /src/pages/list-2/list-2.model.ts: -------------------------------------------------------------------------------- 1 | export class ListModel { 2 | name: string; 3 | image: string; 4 | description: string; 5 | } 6 | export class List2Model { 7 | items: Array; 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/list-2/list-2.scss: -------------------------------------------------------------------------------- 1 | // Common list styles can be found in "./common.styles/layouts/lists" 2 | list-2-page { 3 | ion-header { 4 | @include header-styles(color($colors, header-alt, base), color($colors, header-alt, contrast)); 5 | } 6 | 7 | .list-mini-content 8 | { 9 | background-color: color($colors, background, base); 10 | 11 | .list-mini 12 | { 13 | @include layout-list-styles($theme-color-2, $white-d); 14 | 15 | ion-list { 16 | .list-item 17 | { 18 | .content-row 19 | { 20 | .item-title{ 21 | overflow: hidden; 22 | text-overflow: ellipsis; 23 | white-space: nowrap; 24 | } 25 | 26 | &.one-line 27 | { 28 | @include align-items(center); 29 | 30 | .item-description 31 | { 32 | overflow: hidden; 33 | text-overflow: ellipsis; 34 | white-space: nowrap; 35 | } 36 | } 37 | } 38 | } 39 | } 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/pages/list-2/list-2.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | 6 | import { List2Model } from './list-2.model'; 7 | 8 | @Injectable() 9 | export class List2Service { 10 | constructor(public http: Http) {} 11 | 12 | getData(): Promise { 13 | return this.http.get('./assets/example_data/lists.json') 14 | .toPromise() 15 | .then(response => response.json() as List2Model) 16 | .catch(this.handleError); 17 | } 18 | 19 | private handleError(error: any): Promise { 20 | console.error('An error occurred', error); // for demo purposes only 21 | return Promise.reject(error.message || error); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/list-2/list-2.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, LoadingController } from 'ionic-angular'; 3 | 4 | import 'rxjs/Rx'; 5 | 6 | import { List2Model } from './list-2.model'; 7 | import { List2Service } from './list-2.service'; 8 | 9 | @Component({ 10 | selector: 'list-2-page', 11 | templateUrl: 'list-2.html' 12 | }) 13 | export class List2Page { 14 | list2: List2Model = new List2Model(); 15 | loading: any; 16 | 17 | constructor( 18 | public nav: NavController, 19 | public list2Service: List2Service, 20 | public loadingCtrl: LoadingController 21 | ) { 22 | this.loading = this.loadingCtrl.create(); 23 | } 24 | 25 | ionViewDidLoad() { 26 | this.loading.present(); 27 | this.list2Service 28 | .getData() 29 | .then(data => { 30 | this.list2.items = data.items; 31 | this.loading.dismiss(); 32 | }); 33 | } 34 | 35 | } 36 | -------------------------------------------------------------------------------- /src/pages/listing/listing.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 |

{{listing.banner_title}}

19 | 20 | 21 | 22 |

Popular

23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |

Browse categories

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

{{category.title}}

37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /src/pages/listing/listing.ios.scss: -------------------------------------------------------------------------------- 1 | ion-app.ios { 2 | listing-page { 3 | 4 | .listing-header 5 | { 6 | .header-logo 7 | { 8 | width: 34vw; 9 | margin: 0px auto; 10 | } 11 | } 12 | 13 | .grid-categories 14 | { 15 | .category-item 16 | { 17 | .category-heading 18 | { 19 | .heading-row 20 | { 21 | .category-title 22 | { 23 | font-size: 7vw; 24 | } 25 | } 26 | } 27 | } 28 | } 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /src/pages/listing/listing.model.ts: -------------------------------------------------------------------------------- 1 | export class ListingModel { 2 | populars: Array; 3 | categories: Array; 4 | banner_title: string; 5 | banner_image: string; 6 | } 7 | 8 | export class ListingItemModel { 9 | title: string; 10 | image: string; 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/listing/listing.scss: -------------------------------------------------------------------------------- 1 | @mixin categories-title-style($color){ 2 | display: inline-block; 3 | width: 100%; 4 | text-align: center; 5 | font-size: 8vw; 6 | font-weight: 900; 7 | letter-spacing: 0.4px; 8 | color: $color; 9 | margin: 0px; 10 | } 11 | 12 | listing-page { 13 | $categories-heading-image-height: 150px; 14 | $categories-grid-padding: 10px; 15 | $categories-horizontal-list-padding: 10px; 16 | 17 | .listing-header 18 | { 19 | .header-logo 20 | { 21 | width: 34vw; 22 | } 23 | } 24 | 25 | .listing-content 26 | { 27 | .image-heading 28 | { 29 | height: $categories-heading-image-height; 30 | 31 | .bg-overlay 32 | { 33 | z-index: 1; 34 | background-color: rgba($black-c, .6); 35 | } 36 | 37 | ion-spinner { 38 | z-index: 2; 39 | } 40 | 41 | @include spinner-color($white); 42 | 43 | .heading-row 44 | { 45 | height: 100%; 46 | z-index: 3; 47 | position: absolute; 48 | @include align-items(center); 49 | 50 | .main-title 51 | { 52 | @include categories-title-style($white); 53 | font-size: 10vw; 54 | } 55 | } 56 | } 57 | 58 | .categories-title 59 | { 60 | font-size: 1.2rem; 61 | font-weight: 400; 62 | letter-spacing: 0.7px; 63 | color: $white-d; 64 | margin: 8px 16px 16px; 65 | } 66 | 67 | .horizontal-categories 68 | { 69 | border-bottom: 10px solid $white-a; 70 | @include element-shadow(); 71 | padding-bottom: 16px; 72 | 73 | .scroll-content 74 | { 75 | position: relative; 76 | contain: style layout; 77 | } 78 | 79 | preload-image { 80 | border-radius: 50%; 81 | 82 | img { 83 | border-radius: 50%; 84 | } 85 | } 86 | 87 | .categories-row 88 | { 89 | &::after{ 90 | content: ''; 91 | flex: 0 0 $categories-horizontal-list-padding; 92 | max-width: $categories-horizontal-list-padding; 93 | } 94 | } 95 | 96 | .horizontal-item 97 | { 98 | padding: 0px 0px 0px $categories-horizontal-list-padding; 99 | } 100 | } 101 | 102 | .grid-categories 103 | { 104 | padding: 0px ($categories-grid-padding/2); 105 | @include flex-wrap(wrap); 106 | 107 | .category-item 108 | { 109 | padding: 0px ($categories-grid-padding/2) $categories-grid-padding; 110 | 111 | .category-heading 112 | { 113 | padding-bottom: 100%; 114 | 115 | .bg-overlay 116 | { 117 | z-index: 1; 118 | background-color: rgba($black-c, .6); 119 | } 120 | 121 | ion-spinner { 122 | z-index: 2; 123 | } 124 | 125 | @include spinner-color($white); 126 | 127 | .heading-row 128 | { 129 | height: 100%; 130 | z-index: 3; 131 | position: absolute; 132 | @include align-items(center); 133 | 134 | .category-title 135 | { 136 | @include categories-title-style($white); 137 | } 138 | } 139 | } 140 | } 141 | } 142 | } 143 | } 144 | -------------------------------------------------------------------------------- /src/pages/listing/listing.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | 6 | import { ListingModel } from './listing.model'; 7 | 8 | @Injectable() 9 | export class ListingService { 10 | constructor(public http: Http) {} 11 | 12 | getData(): Promise { 13 | return this.http.get('./assets/example_data/listing.json') 14 | .toPromise() 15 | .then(response => response.json() as ListingModel) 16 | .catch(this.handleError); 17 | } 18 | 19 | private handleError(error: any): Promise { 20 | console.error('An error occurred', error); // for demo purposes only 21 | return Promise.reject(error.message || error); 22 | } 23 | 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/listing/listing.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, LoadingController } from 'ionic-angular'; 3 | 4 | import { FeedPage } from '../feed/feed'; 5 | import 'rxjs/Rx'; 6 | 7 | import { ListingModel } from './listing.model'; 8 | import { ListingService } from './listing.service'; 9 | 10 | 11 | @Component({ 12 | selector: 'listing-page', 13 | templateUrl: 'listing.html', 14 | }) 15 | export class ListingPage { 16 | listing: ListingModel = new ListingModel(); 17 | loading: any; 18 | 19 | constructor( 20 | public nav: NavController, 21 | public listingService: ListingService, 22 | public loadingCtrl: LoadingController 23 | ) { 24 | this.loading = this.loadingCtrl.create(); 25 | } 26 | 27 | 28 | ionViewDidLoad() { 29 | this.loading.present(); 30 | this.listingService 31 | .getData() 32 | .then(data => { 33 | this.listing.banner_image = data.banner_image; 34 | this.listing.banner_title = data.banner_title; 35 | this.listing.populars = data.populars; 36 | this.listing.categories = data.categories; 37 | this.loading.dismiss(); 38 | }); 39 | } 40 | 41 | 42 | goToFeed(category: any) { 43 | console.log("Clicked goToFeed", category); 44 | this.nav.push(FeedPage, { category: category }); 45 | } 46 | 47 | } 48 | -------------------------------------------------------------------------------- /src/pages/login/login.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 33 | -------------------------------------------------------------------------------- /src/pages/login/login.scss: -------------------------------------------------------------------------------- 1 | login-page { 2 | .login-content 3 | { 4 | .alt-options 5 | { 6 | .button 7 | { 8 | margin: 0px; 9 | padding: 0px; 10 | font-size: 1.4rem; 11 | } 12 | 13 | .forgot-button 14 | { 15 | color: $white-d; 16 | 17 | .button-inner 18 | { 19 | @include justify-content(flex-start); 20 | } 21 | } 22 | 23 | .signup-button 24 | { 25 | font-weight: 500; 26 | color: $theme-color-2; 27 | 28 | .button-inner 29 | { 30 | @include justify-content(flex-end); 31 | } 32 | } 33 | } 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/pages/maps/maps.md.scss: -------------------------------------------------------------------------------- 1 | ion-app.md { 2 | maps-page { 3 | .search-container 4 | { 5 | .search-toolbar 6 | { 7 | .bar-buttons 8 | { 9 | .geolocation-button 10 | { 11 | margin-left: 0px; 12 | margin-right: -4px; 13 | } 14 | } 15 | } 16 | } 17 | 18 | ion-searchbar { 19 | .searchbar-input 20 | { 21 | border-radius: 2.1rem !important; 22 | } 23 | } 24 | } 25 | 26 | } 27 | -------------------------------------------------------------------------------- /src/pages/maps/maps.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | maps-page { 3 | .search-container 4 | { 5 | .search-toolbar 6 | { 7 | .bar-buttons 8 | { 9 | .geolocation-button 10 | { 11 | margin-left: 0px; 12 | margin-right: -4px; 13 | } 14 | } 15 | } 16 | } 17 | 18 | ion-searchbar { 19 | background: transparent; 20 | 21 | .searchbar-input-container 22 | { 23 | border-radius: 1.6rem; 24 | } 25 | 26 | .searchbar-input 27 | { 28 | border-radius: 1.5rem; 29 | } 30 | } 31 | } 32 | 33 | } 34 | -------------------------------------------------------------------------------- /src/pages/notifications/notifications.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | Notifications 4 | 5 | 6 | 7 | 8 | 9 | Today 10 | 11 | 12 | 13 | 14 |

{{notification.name}}

15 |

{{notification.message}}

16 | {{notification.date}} 17 | 18 | Yesterday 19 | 20 | 21 | 22 | 23 |

{{notification.name}}

24 |

{{notification.message}}

25 | {{notification.date}} 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /src/pages/notifications/notifications.model.ts: -------------------------------------------------------------------------------- 1 | export class NotificationModel { 2 | image: string; 3 | message: string; 4 | name: string; 5 | date: Date; 6 | } 7 | 8 | export class NotificationsModel { 9 | today: Array = []; 10 | yesterday: Array = []; 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/notifications/notifications.scss: -------------------------------------------------------------------------------- 1 | notifications-page { 2 | .notifications-content 3 | { 4 | .notifications-divider 5 | { 6 | font-size: 1.2rem; 7 | font-weight: 500; 8 | letter-spacing: 0.9px; 9 | color: $theme-color-3; 10 | 11 | &:not(:first-child) 12 | { 13 | padding-top: 30px; 14 | } 15 | } 16 | 17 | .notification-item 18 | { 19 | padding: 12px; 20 | border: none; 21 | box-shadow: inset 0 -0.5px 0 0 $black-d; 22 | @include align-items(flex-start); 23 | 24 | ion-avatar { 25 | flex: 0 0 16%; 26 | max-width: 16%; 27 | margin: 0px; 28 | @include align-self(flex-start); 29 | 30 | .user-image 31 | { 32 | border-radius: 50%; 33 | } 34 | } 35 | 36 | .item-inner 37 | { 38 | padding: 0px; 39 | padding-left: 12px; 40 | border: none; 41 | 42 | ion-label { 43 | margin: 0px; 44 | } 45 | } 46 | 47 | .item-title 48 | { 49 | font-size: 1.4rem; 50 | font-weight: 500; 51 | letter-spacing: 0.2px; 52 | color: $theme-color-2; 53 | margin-bottom: 4px; 54 | } 55 | 56 | .item-description 57 | { 58 | font-size: 1.2rem; 59 | letter-spacing: 0.2px; 60 | color: $white-d; 61 | text-overflow: initial; 62 | overflow: initial; 63 | white-space: initial; 64 | } 65 | 66 | .item-time 67 | { 68 | font-size: 1.2rem; 69 | font-weight: 500; 70 | color: $white-d; 71 | margin: 0px; 72 | padding-left: 8px; 73 | @include align-self(flex-start); 74 | } 75 | } 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /src/pages/notifications/notifications.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | import { NotificationsModel } from './notifications.model'; 6 | 7 | @Injectable() 8 | export class NotificationsService { 9 | constructor(public http: Http) {} 10 | 11 | getData(): Promise { 12 | return this.http.get('./assets/example_data/notifications.json') 13 | .toPromise() 14 | .then(response => response.json() as NotificationsModel) 15 | .catch(this.handleError); 16 | } 17 | 18 | private handleError(error: any): Promise { 19 | console.error('An error occurred', error); // for demo purposes only 20 | return Promise.reject(error.message || error); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/pages/notifications/notifications.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, LoadingController } from 'ionic-angular'; 3 | 4 | import 'rxjs/Rx'; 5 | 6 | import { NotificationsModel } from './notifications.model'; 7 | import { NotificationsService } from './notifications.service'; 8 | 9 | @Component({ 10 | selector: 'notifications-page', 11 | templateUrl: 'notifications.html' 12 | }) 13 | export class NotificationsPage { 14 | notifications: NotificationsModel = new NotificationsModel(); 15 | loading: any; 16 | 17 | constructor( 18 | public nav: NavController, 19 | public notificationsService: NotificationsService, 20 | public loadingCtrl: LoadingController 21 | ) { 22 | this.loading = this.loadingCtrl.create(); 23 | } 24 | 25 | ionViewDidLoad() { 26 | this.loading.present(); 27 | this.notificationsService 28 | .getData() 29 | .then(data => { 30 | this.notifications.today = data.today; 31 | this.notifications.yesterday = data.yesterday; 32 | this.loading.dismiss(); 33 | }); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/pages/privacy-policy/privacy-policy.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | Privacy Policy 11 | 12 | 13 | 14 | 15 | 16 |

Last modified: Nov 14, 2016

17 |

Welcome to ion2FullApp!

18 |

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

19 |

Using our Services

20 |

You must follow any policies made available to you within the Services.

21 |

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

22 |

About these Terms

23 |

We may modify these terms or any additional terms that apply to a Service to, for example, reflect changes to the law or changes to our Services. You should look at the terms regularly. We’ll post notice of modifications to these terms on this page. We’ll post notice of modified additional terms in the applicable Service. Changes will not apply retroactively and will become effective no sooner than fourteen days after they are posted. However, changes addressing new functions for a Service or changes made for legal reasons will be effective immediately. If you do not agree to the modified terms for a Service, you should discontinue your use of that Service.

24 | 25 | -------------------------------------------------------------------------------- /src/pages/privacy-policy/privacy-policy.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ViewController } from 'ionic-angular'; 3 | 4 | @Component({ 5 | selector: 'privacy-policy-page', 6 | templateUrl: 'privacy-policy.html' 7 | }) 8 | 9 | export class PrivacyPolicyPage { 10 | 11 | constructor(public view: ViewController) {} 12 | 13 | dismiss() { 14 | this.view.dismiss(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/pages/profile/profile.ios.scss: -------------------------------------------------------------------------------- 1 | ion-app.ios { 2 | profile-page { 3 | .user-content-segment 4 | { 5 | @include segment-button-ios-styles(); 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/profile/profile.model.ts: -------------------------------------------------------------------------------- 1 | export class UserModel { 2 | image: string; 3 | location: string; 4 | about: string; 5 | email: string; 6 | phone: string; 7 | name: string; 8 | website: string; 9 | } 10 | 11 | export class ProfilePostModel { 12 | date: Date; 13 | image: string; 14 | description: string; 15 | likes: number = 0; 16 | comments: number = 0; 17 | liked: boolean = false; 18 | } 19 | 20 | export class ProfileModel { 21 | user: UserModel = new UserModel(); 22 | following: Array = []; 23 | followers: Array = []; 24 | posts: Array = []; 25 | } 26 | -------------------------------------------------------------------------------- /src/pages/profile/profile.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | import { ProfileModel } from './profile.model'; 6 | 7 | @Injectable() 8 | export class ProfileService { 9 | constructor(public http: Http) {} 10 | 11 | getData(): Promise { 12 | return this.http.get('./assets/example_data/profile.json') 13 | .toPromise() 14 | .then(response => response.json() as ProfileModel) 15 | .catch(this.handleError); 16 | } 17 | 18 | private handleError(error: any): Promise { 19 | console.error('An error occurred', error); // for demo purposes only 20 | return Promise.reject(error.message || error); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/pages/profile/profile.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { MenuController, SegmentButton, App, NavParams, LoadingController } from 'ionic-angular'; 3 | import { FollowersPage } from '../followers/followers'; 4 | import { SettingsPage } from '../settings/settings'; 5 | import { ProfileModel } from './profile.model'; 6 | import { ProfileService } from './profile.service'; 7 | import { SocialSharing } from 'ionic-native'; 8 | import 'rxjs/Rx'; 9 | 10 | @Component({ 11 | selector: 'profile-page', 12 | templateUrl: 'profile.html' 13 | }) 14 | export class ProfilePage { 15 | display: string; 16 | profile: ProfileModel = new ProfileModel(); 17 | loading: any; 18 | 19 | constructor( 20 | public menu: MenuController, 21 | public app: App, 22 | public navParams: NavParams, 23 | public profileService: ProfileService, 24 | public loadingCtrl: LoadingController 25 | ) { 26 | this.display = "list"; 27 | 28 | this.loading = this.loadingCtrl.create(); 29 | } 30 | 31 | ionViewDidLoad() { 32 | this.loading.present(); 33 | this.profileService 34 | .getData() 35 | .then(data => { 36 | this.profile.user = data.user; 37 | this.profile.following = data.following; 38 | this.profile.followers = data.followers; 39 | this.profile.posts = data.posts; 40 | this.loading.dismiss(); 41 | }); 42 | } 43 | 44 | goToFollowersList() { 45 | // close the menu when clicking a link from the menu 46 | this.menu.close(); 47 | this.app.getRootNav().push(FollowersPage, { 48 | list: this.profile.followers 49 | }); 50 | } 51 | 52 | goToFollowingList() { 53 | // close the menu when clicking a link from the menu 54 | this.menu.close(); 55 | this.app.getRootNav().push(FollowersPage, { 56 | list: this.profile.following 57 | }); 58 | } 59 | 60 | goToSettings() { 61 | // close the menu when clicking a link from the menu 62 | this.menu.close(); 63 | this.app.getRootNav().push(SettingsPage); 64 | } 65 | 66 | onSegmentChanged(segmentButton: SegmentButton) { 67 | // console.log('Segment changed to', segmentButton.value); 68 | } 69 | 70 | onSegmentSelected(segmentButton: SegmentButton) { 71 | // console.log('Segment selected', segmentButton.value); 72 | } 73 | 74 | sharePost(post) { 75 | //this code is to use the social sharing plugin 76 | // message, subject, file, url 77 | SocialSharing.share(post.description, post.title, post.image) 78 | .then(() => { 79 | console.log('Success!'); 80 | }) 81 | .catch(() => { 82 | console.log('Error'); 83 | }); 84 | } 85 | } 86 | -------------------------------------------------------------------------------- /src/pages/profile/profile.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | profile-page { 3 | .user-content-segment 4 | { 5 | @include justify-content(center); 6 | 7 | @include segment-button-wp-styles(); 8 | } 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule.ios.scss: -------------------------------------------------------------------------------- 1 | ion-app.ios { 2 | schedule-page { 3 | .schedule-segment 4 | { 5 | @include segment-button-ios-styles(); 6 | } 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule.model.ts: -------------------------------------------------------------------------------- 1 | export class EventModel { 2 | subject: string; 3 | location: string; 4 | date: EventDate; 5 | } 6 | 7 | export class ScheduleModel { 8 | today: Array = []; 9 | upcoming: Array = []; 10 | } 11 | 12 | export class EventDate { 13 | day: string; 14 | month: string; 15 | month_name: string; 16 | time: string; 17 | full: string; 18 | } 19 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from "@angular/core"; 2 | import { Http } from '@angular/http'; 3 | 4 | import 'rxjs/add/operator/toPromise'; 5 | import { ScheduleModel } from './schedule.model'; 6 | 7 | @Injectable() 8 | export class ScheduleService { 9 | constructor(public http: Http) {} 10 | 11 | getData(): Promise { 12 | return this.http.get('./assets/example_data/schedule.json') 13 | .toPromise() 14 | .then(response => response.json() as ScheduleModel) 15 | .catch(this.handleError); 16 | } 17 | 18 | private handleError(error: any): Promise { 19 | console.error('An error occurred', error); // for demo purposes only 20 | return Promise.reject(error.message || error); 21 | } 22 | 23 | } 24 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, SegmentButton, LoadingController } from 'ionic-angular'; 3 | import 'rxjs/Rx'; 4 | 5 | import { ScheduleModel } from './schedule.model'; 6 | import { ScheduleService } from './schedule.service'; 7 | 8 | @Component({ 9 | selector: 'schedule-page', 10 | templateUrl: 'schedule.html' 11 | }) 12 | export class SchedulePage { 13 | segment: string; 14 | schedule: ScheduleModel = new ScheduleModel(); 15 | loading: any; 16 | 17 | constructor( 18 | public nav: NavController, 19 | public scheduleService: ScheduleService, 20 | public loadingCtrl: LoadingController 21 | ) { 22 | this.segment = "today"; 23 | this.loading = this.loadingCtrl.create(); 24 | } 25 | 26 | ionViewDidLoad() { 27 | this.loading.present(); 28 | this.scheduleService 29 | .getData() 30 | .then(data => { 31 | this.schedule.today = data.today; 32 | this.schedule.upcoming = data.upcoming; 33 | this.loading.dismiss(); 34 | }); 35 | } 36 | 37 | onSegmentChanged(segmentButton: SegmentButton) { 38 | // console.log('Segment changed to', segmentButton.value); 39 | } 40 | 41 | onSegmentSelected(segmentButton: SegmentButton) { 42 | // console.log('Segment selected', segmentButton.value); 43 | } 44 | 45 | } 46 | -------------------------------------------------------------------------------- /src/pages/schedule/schedule.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | schedule-page { 3 | .schedule-segment 4 | { 5 | @include justify-content(center); 6 | @include segment-button-wp-styles(); 7 | } 8 | } 9 | } 10 | -------------------------------------------------------------------------------- /src/pages/settings/settings.md.scss: -------------------------------------------------------------------------------- 1 | ion-app.md { 2 | settings-page { 3 | .switchers-list 4 | { 5 | .switcher-item 6 | { 7 | @include switcher-item-md-styles($theme-color-1); 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/settings/settings.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { NavController, ModalController, LoadingController } from 'ionic-angular'; 3 | import { FormGroup, FormControl } from '@angular/forms'; 4 | 5 | import { TermsOfServicePage } from '../terms-of-service/terms-of-service'; 6 | import { PrivacyPolicyPage } from '../privacy-policy/privacy-policy'; 7 | 8 | import { WalkthroughPage } from '../walkthrough/walkthrough'; 9 | 10 | import 'rxjs/Rx'; 11 | 12 | import { ProfileModel } from '../profile/profile.model'; 13 | import { ProfileService } from '../profile/profile.service'; 14 | 15 | @Component({ 16 | selector: 'settings-page', 17 | templateUrl: 'settings.html' 18 | }) 19 | export class SettingsPage { 20 | settingsForm: FormGroup; 21 | // make WalkthroughPage the root (or first) page 22 | rootPage: any = WalkthroughPage; 23 | loading: any; 24 | profile: ProfileModel = new ProfileModel(); 25 | 26 | constructor( 27 | public nav: NavController, 28 | public modal: ModalController, 29 | public loadingCtrl: LoadingController, 30 | public profileService: ProfileService 31 | ) { 32 | this.loading = this.loadingCtrl.create(); 33 | 34 | this.settingsForm = new FormGroup({ 35 | name: new FormControl(), 36 | location: new FormControl(), 37 | description: new FormControl(), 38 | currency: new FormControl(), 39 | weather: new FormControl(), 40 | notifications: new FormControl() 41 | }); 42 | } 43 | 44 | ionViewDidLoad() { 45 | this.loading.present(); 46 | this.profileService 47 | .getData() 48 | .then(data => { 49 | this.profile.user = data.user; 50 | 51 | this.settingsForm.setValue({ 52 | name: data.user.name, 53 | location: data.user.location, 54 | description: data.user.about, 55 | currency: 'dollar', 56 | weather: 'fahrenheit', 57 | notifications: true 58 | }); 59 | 60 | this.loading.dismiss(); 61 | }); 62 | } 63 | 64 | logout() { 65 | // navigate to the new page if it is not the current page 66 | this.nav.setRoot(this.rootPage); 67 | } 68 | 69 | showTermsModal() { 70 | let modal = this.modal.create(TermsOfServicePage); 71 | modal.present(); 72 | } 73 | 74 | showPrivacyModal() { 75 | let modal = this.modal.create(PrivacyPolicyPage); 76 | modal.present(); 77 | } 78 | } 79 | -------------------------------------------------------------------------------- /src/pages/settings/settings.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | settings-page { 3 | .user-data-content 4 | { 5 | ion-input input, 6 | ion-textarea textarea { 7 | padding: 0 8px !important; 8 | } 9 | } 10 | 11 | .button-wp 12 | { 13 | border: none; 14 | } 15 | 16 | .switchers-list 17 | { 18 | .switcher-item 19 | { 20 | @include switcher-item-wp-styles($white-b, $theme-color-2); 21 | } 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/pages/signup/signup.html: -------------------------------------------------------------------------------- 1 | 6 | 7 | 34 | -------------------------------------------------------------------------------- /src/pages/signup/signup.scss: -------------------------------------------------------------------------------- 1 | signup-page { 2 | .signup-content 3 | { 4 | .legal-stuff 5 | { 6 | color: $white-d; 7 | text-align: center; 8 | margin: 10px 12px; 9 | 10 | .legal-action 11 | { 12 | font-weight: 500; 13 | color: $theme-color-2; 14 | } 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/pages/tabs-navigation/tabs-navigation.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /src/pages/tabs-navigation/tabs-navigation.scss: -------------------------------------------------------------------------------- 1 | tabs-navigation { 2 | .tabbar 3 | { 4 | background: color($colors, tabs-navigation, base) !important; 5 | border-top-color: darken(color($colors, tabs-navigation, base), 6%) !important; 6 | 7 | .tab-button 8 | { 9 | color: color($colors, tabs-navigation, contrast); 10 | 11 | .tab-button-icon 12 | { 13 | color: color($colors, tabs-navigation, contrast); 14 | } 15 | } 16 | 17 | .tab-button:hover:not(.disable-hover), 18 | .tab-button[aria-selected=true] 19 | { 20 | color: $theme-color-1; 21 | 22 | .tab-button-icon 23 | { 24 | color: $theme-color-1; 25 | } 26 | } 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /src/pages/tabs-navigation/tabs-navigation.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | import { ListingPage } from '../listing/listing'; 4 | import { ProfilePage } from '../profile/profile'; 5 | import { NotificationsPage } from '../notifications/notifications'; 6 | 7 | @Component({ 8 | selector: 'tabs-navigation', 9 | templateUrl: 'tabs-navigation.html' 10 | }) 11 | export class TabsNavigationPage { 12 | tab1Root: any; 13 | tab2Root: any; 14 | tab3Root: any; 15 | 16 | constructor() { 17 | this.tab1Root = ListingPage; 18 | this.tab2Root = ProfilePage; 19 | this.tab3Root = NotificationsPage; 20 | } 21 | } 22 | -------------------------------------------------------------------------------- /src/pages/tabs-navigation/tabs-navigation.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | tabs-navigation { 3 | .tabbar 4 | { 5 | .tab-button[aria-selected=true] 6 | { 7 | border-bottom-color: $theme-color-1; 8 | } 9 | } 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/pages/terms-of-service/terms-of-service.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 8 | 9 | 10 | Terms of Service 11 | 12 | 13 | 14 | 15 | 16 |

Last modified: Nov 14, 2016

17 |

Welcome to ion2FullApp!

18 |

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

19 |

Using our Services

20 |

You must follow any policies made available to you within the Services.

21 |

It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).

22 |

About these Terms

23 |

We may modify these terms or any additional terms that apply to a Service to, for example, reflect changes to the law or changes to our Services. You should look at the terms regularly. We’ll post notice of modifications to these terms on this page. We’ll post notice of modified additional terms in the applicable Service. Changes will not apply retroactively and will become effective no sooner than fourteen days after they are posted. However, changes addressing new functions for a Service or changes made for legal reasons will be effective immediately. If you do not agree to the modified terms for a Service, you should discontinue your use of that Service.

24 | 25 | -------------------------------------------------------------------------------- /src/pages/terms-of-service/terms-of-service.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { ViewController } from 'ionic-angular'; 3 | 4 | @Component({ 5 | selector: 'terms-of-service-page', 6 | templateUrl: 'terms-of-service.html' 7 | }) 8 | 9 | export class TermsOfServicePage { 10 | 11 | constructor(public view: ViewController) {} 12 | 13 | dismiss() { 14 | this.view.dismiss(); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/pages/walkthrough/walkthrough.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |

Welcome!

18 |

19 | This is the new Ionic 2 Full App template 20 |

21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 |

Wake up!

29 |

30 | We should get started. 31 |

32 |

33 | Here we have a beautiful walkthrough 34 |

35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 |

Get ready!

43 |

44 | Soon your app will look and feel awesome! 45 |

46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 |

Almost done!

54 |

55 | Log in to your account. 56 |

57 |

58 | We are ready to rock! 59 |

60 |
61 | 62 | 63 |
64 | 65 | 66 | 67 | -------------------------------------------------------------------------------- /src/pages/walkthrough/walkthrough.md.scss: -------------------------------------------------------------------------------- 1 | ion-app.md { 2 | walkthrough-page { 3 | .walkthrough-header 4 | { 5 | &::after 6 | { 7 | background: none; 8 | } 9 | } 10 | 11 | .walkthrough-content 12 | { 13 | .button-bar 14 | { 15 | background: $white; 16 | border-radius: 6px; 17 | 18 | & > .button 19 | { 20 | box-shadow: none; 21 | } 22 | } 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/pages/walkthrough/walkthrough.scss: -------------------------------------------------------------------------------- 1 | walkthrough-page { 2 | .walkthrough-header 3 | { 4 | @include header-styles(color($colors, walkthrough-header, base), color($colors, walkthrough-header, contrast)); 5 | } 6 | 7 | .walkthrough-content 8 | { 9 | // Default background when bouncing isn't disabled 10 | background-color: color($colors, walkthrough, base); 11 | 12 | .scroll-content 13 | { 14 | margin: 0px !important; 15 | } 16 | 17 | ion-slide:nth-child(odd) 18 | { 19 | background-color: color($colors, walkthrough, base); 20 | color: color($colors, walkthrough, contrast); 21 | } 22 | 23 | ion-slide:nth-child(even) 24 | { 25 | background-color: color($colors, walkthrough-alt, base); 26 | color: color($colors, walkthrough-alt, contrast); 27 | } 28 | 29 | .swiper-pagination-bullet 30 | { 31 | background: $white; 32 | opacity: .5; 33 | 34 | &.swiper-pagination-bullet-active 35 | { 36 | opacity: 1; 37 | } 38 | } 39 | 40 | ion-slides { 41 | 42 | ion-slide { 43 | @include align-items(flex-start); 44 | } 45 | 46 | .intro-image-row 47 | { 48 | @include justify-content(center); 49 | margin-top: 90px; 50 | margin-top: 16vh; 51 | } 52 | 53 | .main-title 54 | { 55 | margin: 35px 20px 20px; 56 | font-size: 3.4rem; 57 | font-weight: 900; 58 | font-style: italic; 59 | text-align: center; 60 | color: $white; 61 | } 62 | 63 | .intro-text 64 | { 65 | margin: 0px 20%; 66 | font-size: 1.4rem; 67 | line-height: 1.35; 68 | text-align: center; 69 | color: $white; 70 | } 71 | } 72 | 73 | .slide-4 74 | { 75 | .main-title 76 | { 77 | margin-top: 15px; 78 | } 79 | 80 | .button-bar 81 | { 82 | @include display(flex); 83 | margin: 25px 8%; 84 | 85 | & > .button 86 | { 87 | @include segment-text-styles(color($colors, button-alt, base)); 88 | background-color: color($colors, button-alt, contrast); 89 | margin: 0px; 90 | border-radius: 0px; 91 | @include flex(1); 92 | 93 | &:first-child 94 | { 95 | border-radius: 6px 0px 0px 6px; 96 | 97 | &::after 98 | { 99 | content: ''; 100 | background-color: color($colors, button-alt, base); 101 | width: 2px; 102 | @include calc(height, "100% - 20px"); 103 | margin: 10px 0px; 104 | position: absolute; 105 | top: 0px; 106 | right: 0px; 107 | opacity: 0.6; 108 | } 109 | } 110 | &:last-child 111 | { 112 | border-radius: 0px 6px 6px 0px; 113 | } 114 | } 115 | } 116 | } 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /src/pages/walkthrough/walkthrough.ts: -------------------------------------------------------------------------------- 1 | import { Component, ViewChild } from '@angular/core'; 2 | import { NavController, Slides } from 'ionic-angular'; 3 | 4 | import { LoginPage } from '../login/login'; 5 | import { SignupPage } from '../signup/signup'; 6 | 7 | @Component({ 8 | selector: 'walkthrough-page', 9 | templateUrl: 'walkthrough.html' 10 | }) 11 | export class WalkthroughPage { 12 | 13 | lastSlide = false; 14 | 15 | @ViewChild('slider') slider: Slides; 16 | 17 | constructor(public nav: NavController) { 18 | 19 | } 20 | 21 | skipIntro() { 22 | // You can skip to main app 23 | // this.nav.setRoot(TabsNavigationPage); 24 | 25 | // Or you can skip to last slide (login/signup slide) 26 | this.lastSlide = true; 27 | this.slider.slideTo(this.slider.length()); 28 | } 29 | 30 | onSlideChanged() { 31 | // If it's the last slide, then hide the 'Skip' button on the header 32 | this.lastSlide = this.slider.isEnd(); 33 | } 34 | 35 | goToLogin() { 36 | this.nav.push(LoginPage); 37 | } 38 | 39 | goToSignup() { 40 | this.nav.push(SignupPage); 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /src/theme/common.scss: -------------------------------------------------------------------------------- 1 | // Basic 2 | @import "./common/scroll-bar"; 3 | @import "./common/grid"; 4 | @import "./common/misc/shadow"; 5 | @import "./common/misc/multi-line-ellipsis"; 6 | 7 | // Elements 8 | @import "./common/components/components"; 9 | @import "./common/inputs/inputs"; 10 | @import "./common/buttons/buttons"; 11 | @import "./common/side-menu"; 12 | @import "./common/header"; 13 | @import "./common/lists"; 14 | @import "./common/cards"; 15 | 16 | // Views 17 | @import "./common/auth/auth"; 18 | @import "./common/legal/legal"; 19 | @import "./common/layouts/lists"; 20 | -------------------------------------------------------------------------------- /src/theme/common/auth/auth.ios.scss: -------------------------------------------------------------------------------- 1 | ion-app.ios { 2 | .auth-content 3 | { 4 | .auth-form 5 | { 6 | .show-hide-password 7 | { 8 | ion-item.item input[type=password].text-input 9 | { 10 | letter-spacing: 4px; 11 | } 12 | } 13 | } 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/theme/common/auth/auth.scss: -------------------------------------------------------------------------------- 1 | .auth-header 2 | { 3 | @include header-styles(color($colors, header, base), color($colors, header, contrast)); 4 | } 5 | 6 | .auth-content 7 | { 8 | padding: 16px 6%; 9 | background-color: color($colors, background, base); 10 | 11 | .scroll-content 12 | { 13 | padding: 16px 6%; 14 | } 15 | 16 | .auth-title 17 | { 18 | color: $theme-color-2; 19 | margin-top: 10px; 20 | margin-bottom: 25px; 21 | } 22 | 23 | .auth-form 24 | { 25 | ion-item { 26 | @include basic-input-style(color($colors, background, base), $theme-color-3, $white-d); 27 | 28 | &.item 29 | { 30 | input[type="password"].text-input 31 | { 32 | padding-right: 6rem; 33 | } 34 | } 35 | } 36 | 37 | .auth-action-button 38 | { 39 | margin: 0px; 40 | margin-top: 20px; 41 | 42 | @include call-to-action-button-styles(color($colors, button, base), color($colors, button, contrast)); 43 | } 44 | 45 | .show-hide-password 46 | { 47 | .type-toggle 48 | { 49 | color: $white-d; 50 | margin: 0px; 51 | padding: 0px 6px; 52 | text-align: right; 53 | } 54 | } 55 | } 56 | 57 | .auth-divider 58 | { 59 | font-size: 1.6rem; 60 | color: $white-d; 61 | margin: 20px 0px; 62 | text-align: center; 63 | } 64 | 65 | .facebook-auth-button 66 | { 67 | margin: 0px; 68 | @include call-to-action-button-styles(color($colors, facebook, base), color($colors, facebook, contrast)); 69 | } 70 | 71 | .google-auth-button 72 | { 73 | margin: 0px; 74 | margin-top: 20px; 75 | @include call-to-action-button-styles(color($colors, google, base), color($colors, google, contrast)); 76 | } 77 | 78 | .twitter-auth-button 79 | { 80 | margin: 0px; 81 | margin-top: 20px; 82 | @include call-to-action-button-styles(color($colors, twitter, base), color($colors, twitter, contrast)); 83 | } 84 | } 85 | 86 | @import "./auth.ios"; 87 | @import "./auth.wp"; 88 | -------------------------------------------------------------------------------- /src/theme/common/auth/auth.wp.scss: -------------------------------------------------------------------------------- 1 | ion-app.wp { 2 | .auth-content 3 | { 4 | .auth-form 5 | { 6 | .item 7 | { 8 | padding: 0px; 9 | 10 | .item-inner 11 | { 12 | padding: 0px; 13 | } 14 | 15 | .text-input 16 | { 17 | padding: 0px 0.6rem; 18 | } 19 | } 20 | 21 | .show-hide-password 22 | { 23 | .type-toggle 24 | { 25 | height: 3rem; 26 | margin: 15px 0px; 27 | 28 | .show-option, 29 | .hide-option 30 | { 31 | line-height: 3rem; 32 | font-size: 2.4rem; 33 | height: inherit; 34 | 35 | &:not(ion-icon) 36 | { 37 | text-transform: uppercase; 38 | font-size: 1.2rem; 39 | } 40 | } 41 | } 42 | } 43 | } 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /src/theme/common/buttons/buttons.scss: -------------------------------------------------------------------------------- 1 | @mixin call-to-action-button-styles($background, $color){ 2 | border-radius: 6px; 3 | color: $color; 4 | background-color: $background; 5 | font-size: 1.6rem; 6 | font-weight: 500; 7 | } 8 | 9 | @import "./segment"; 10 | -------------------------------------------------------------------------------- /src/theme/common/buttons/segment.scss: -------------------------------------------------------------------------------- 1 | @mixin segment-text-styles($color){ 2 | font-size: 1.6rem; 3 | font-weight: 500; 4 | color: $color; 5 | letter-spacing: 0.2px; 6 | text-align: center; 7 | } 8 | 9 | @mixin segment-button-styles($active-color){ 10 | .segment-button 11 | { 12 | border-radius: 0px; 13 | border: none; 14 | 15 | &:not(:last-child) 16 | { 17 | border-right: solid 2px rgba($white-d, .3); 18 | } 19 | 20 | &.segment-activated 21 | { 22 | color: $active-color; 23 | background-color: transparent; 24 | } 25 | } 26 | } 27 | 28 | @mixin segment-button-ios-styles(){ 29 | .segment-button 30 | { 31 | &:hover:not(.segment-activated) 32 | { 33 | background-color: transparent; 34 | } 35 | } 36 | } 37 | 38 | @mixin segment-button-wp-styles(){ 39 | .segment-button 40 | { 41 | flex: 1; 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/theme/common/cards.scss: -------------------------------------------------------------------------------- 1 | // These card styles are for the feed and profile views 2 | @mixin basic-card-styles($text-color){ 3 | ion-card { 4 | border-radius: 6px; 5 | @include element-shadow(); 6 | } 7 | 8 | .item-text 9 | { 10 | line-height: 1.6; 11 | color: $text-color; 12 | margin: 0px; 13 | } 14 | 15 | .actions-row 16 | { 17 | padding: 0px 16px 14px; 18 | 19 | .action-button 20 | { 21 | padding: 0px; 22 | margin: 0px; 23 | color: $text-color; 24 | 25 | .button-inner 26 | { 27 | font-size: 1.2rem; 28 | } 29 | 30 | ion-icon { 31 | font-size: 2.0em; 32 | 33 | &[ng-reflect-is-active="true"], 34 | &.ion-ios-heart 35 | { 36 | color: color($colors, danger); 37 | } 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /src/theme/common/components/background-image.scss: -------------------------------------------------------------------------------- 1 | @mixin background-image-styles($background, $spinner-size, $spinner-color){ 2 | background-image { 3 | .bg-overlay 4 | { 5 | background-color: $background; 6 | } 7 | 8 | @include spinner-size($spinner-size); 9 | @include spinner-color($spinner-color); 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /src/theme/common/components/components.scss: -------------------------------------------------------------------------------- 1 | @import "./spinner"; 2 | @import "./preload-image"; 3 | @import "./background-image"; 4 | 5 | 6 | @include preload-image-styles(rgba($white-c, .25), 28px, $white-d); 7 | @include background-image-styles(rgba($white-c, .50), 28px, $white-d); 8 | -------------------------------------------------------------------------------- /src/theme/common/components/preload-image.scss: -------------------------------------------------------------------------------- 1 | @mixin preload-image-styles($background, $spinner-size, $spinner-color){ 2 | preload-image { 3 | background-color: $background; 4 | 5 | @include spinner-size($spinner-size); 6 | @include spinner-color($spinner-color); 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/theme/common/components/spinner.scss: -------------------------------------------------------------------------------- 1 | @mixin spinner-size($size){ 2 | ion-spinner { 3 | position: absolute; 4 | width: $size; 5 | height: $size; 6 | line-height: inherit; 7 | @include animation(none); 8 | @include calc(top, "50% - #{($size/2)}"); 9 | @include calc(left, "50% - #{($size/2)}"); 10 | } 11 | } 12 | 13 | @mixin spinner-color($color){ 14 | ion-spinner * { 15 | fill: $color !important; 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/theme/common/grid.scss: -------------------------------------------------------------------------------- 1 | ion-col { 2 | &[width-100] { 3 | flex: 0 0 100%; 4 | max-width: 100%; 5 | } 6 | 7 | &[width-72] { 8 | flex: 0 0 72%; 9 | max-width: 72%; 10 | } 11 | 12 | &[width-70] { 13 | flex: 0 0 70%; 14 | max-width: 70%; 15 | } 16 | 17 | &[width-65] { 18 | flex: 0 0 65%; 19 | max-width: 65%; 20 | } 21 | 22 | &[width-64] { 23 | flex: 0 0 64%; 24 | max-width: 64%; 25 | } 26 | 27 | &[width-60] { 28 | flex: 0 0 60%; 29 | max-width: 60%; 30 | } 31 | 32 | &[width-57] { 33 | flex: 0 0 57%; 34 | max-width: 57%; 35 | } 36 | 37 | &[width-45] { 38 | flex: 0 0 45%; 39 | max-width: 45%; 40 | } 41 | 42 | &[width-40] { 43 | flex: 0 0 40%; 44 | max-width: 40%; 45 | } 46 | 47 | &[width-35] { 48 | flex: 0 0 35%; 49 | max-width: 35%; 50 | } 51 | 52 | &[width-30] { 53 | flex: 0 0 30%; 54 | max-width: 30%; 55 | } 56 | 57 | &[width-28] { 58 | flex: 0 0 28%; 59 | max-width: 28%; 60 | } 61 | 62 | &[width-18] { 63 | flex: 0 0 18%; 64 | max-width: 18%; 65 | } 66 | 67 | &[width-15] { 68 | flex: 0 0 15%; 69 | max-width: 15%; 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /src/theme/common/header.scss: -------------------------------------------------------------------------------- 1 | @mixin header-styles($background, $color){ 2 | .toolbar-background 3 | { 4 | border: none !important; 5 | background-color: $background; 6 | } 7 | 8 | .toolbar-title, 9 | .back-button, 10 | .bar-button 11 | { 12 | color: $color; 13 | } 14 | } 15 | 16 | ion-header { 17 | @include header-styles(color($colors, header, base), color($colors, header, contrast)); 18 | } 19 | -------------------------------------------------------------------------------- /src/theme/common/inputs/checkbox-tags.scss: -------------------------------------------------------------------------------- 1 | @mixin checkbox-tags-styles($background, $color, $active-background, $active-color){ 2 | .checkbox-tags 3 | { 4 | @include display(flex); 5 | @include flex-wrap(wrap); 6 | padding: 0px 15px; 7 | 8 | .checkbox-tag 9 | { 10 | flex: 0 1 auto; 11 | width: initial; 12 | font-size: 1.4rem; 13 | font-weight: 500; 14 | letter-spacing: 0.2px; 15 | text-align: center; 16 | background-color: transparent; 17 | border: none !important; 18 | padding: 0px; 19 | margin: 5px; 20 | 21 | ion-checkbox { 22 | margin: 0px !important; 23 | 24 | .checkbox-icon 25 | { 26 | display: none; 27 | } 28 | } 29 | 30 | .item-inner 31 | { 32 | padding: 0px 8px; 33 | border: none; 34 | background-color: $background; 35 | color: $color; 36 | 37 | ion-label { 38 | margin: 8px 6px; 39 | } 40 | } 41 | 42 | &.item-checkbox-checked 43 | { 44 | .item-inner 45 | { 46 | background-color: $active-background; 47 | color: $active-color; 48 | } 49 | } 50 | } 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /src/theme/common/inputs/checkbox.scss: -------------------------------------------------------------------------------- 1 | @mixin checkbox-item-styles($color, $background, $active-color){ 2 | .checkbox-item 3 | { 4 | padding: 0px; 5 | border: none !important; 6 | @include element-shadow(); 7 | 8 | .item-inner 9 | { 10 | padding: 0px; 11 | border: none; 12 | 13 | ion-label { 14 | margin: 16px 0px 16px 8px; 15 | font-size: 1.4rem; 16 | font-weight: 500; 17 | letter-spacing: 0.2px; 18 | color: $color; 19 | } 20 | } 21 | 22 | ion-checkbox { 23 | order: 2; 24 | margin-right: 22px !important; 25 | 26 | .checkbox-icon 27 | { 28 | border: none; 29 | background-color: $background; 30 | 31 | &.checkbox-checked .checkbox-inner 32 | { 33 | border-color: $active-color; 34 | border-width: 3px; 35 | border-top-width: 0px; 36 | border-left-width: 0px; 37 | width: 9px; 38 | height: 18px; 39 | top: 2px; 40 | } 41 | } 42 | } 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /src/theme/common/inputs/color-radio.scss: -------------------------------------------------------------------------------- 1 | @mixin color-radio-styles($text-color, $active-border){ 2 | .radio-tag[color-radio] 3 | { 4 | border-radius: 50%; 5 | flex: 0 0 16%; 6 | max-width: 16%; 7 | margin: 2%; 8 | padding: 0px; 9 | border-width: 4px; 10 | border-style: solid; 11 | 12 | .item-inner 13 | { 14 | background-color: inherit; 15 | padding: 0px; 16 | padding-bottom: 100%; 17 | height: 0px; 18 | 19 | .input-wrapper 20 | { 21 | position: absolute; 22 | top: 0px; 23 | bottom: 0px; 24 | left: 0px; 25 | right: 0px; 26 | } 27 | 28 | ion-label { 29 | margin: 0px 2px; 30 | color: rgba($text-color, .7); 31 | font-size: 1.1rem; 32 | } 33 | } 34 | 35 | &.item-radio-checked 36 | { 37 | border-color: rgba($active-border, .3) !important; 38 | box-shadow: none; 39 | 40 | .item-inner 41 | { 42 | ion-label { 43 | color: $text-color; 44 | } 45 | } 46 | } 47 | 48 | &.item-radio-disabled 49 | { 50 | opacity: 0.3; 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/theme/common/inputs/counter.scss: -------------------------------------------------------------------------------- 1 | @mixin counter-item-styles($text-color, $value-color, $background){ 2 | .counter-item 3 | { 4 | padding: 0px; 5 | border: none !important; 6 | @include element-shadow(); 7 | 8 | .item-inner 9 | { 10 | padding: 0px; 11 | border: none; 12 | 13 | ion-label { 14 | margin: 0px; 15 | @include display(flex); 16 | @include justify-content(space-between); 17 | } 18 | 19 | .counter-label 20 | { 21 | margin: 15px; 22 | font-size: 1.4rem; 23 | font-weight: 500; 24 | letter-spacing: 0.2px; 25 | color: $text-color; 26 | flex: 1; 27 | } 28 | 29 | .counter-value 30 | { 31 | margin: 15px 5px; 32 | font-size: 1.6rem; 33 | font-weight: 500; 34 | text-align: center; 35 | color: $value-color; 36 | } 37 | 38 | counter-input { 39 | flex: 1; 40 | text-align: right; 41 | padding-right: 15px; 42 | @include display(flex); 43 | @include align-items(center); 44 | @include justify-content(flex-end); 45 | 46 | .counter-icon 47 | { 48 | margin: 0px; 49 | border-radius: 50%; 50 | border: 1px solid $value-color; 51 | background-color: $background; 52 | color: $value-color; 53 | width: 34px; 54 | height: 34px; 55 | 56 | ion-icon { 57 | color: $value-color; 58 | } 59 | } 60 | 61 | &[basic] 62 | { 63 | .counter-icon 64 | { 65 | width: initial; 66 | border-radius: 12px; 67 | height: 30px; 68 | } 69 | } 70 | 71 | .counter-inner 72 | { 73 | font-size: 1.8rem; 74 | text-align: center; 75 | color: $value-color; 76 | margin: 0px 12px; 77 | } 78 | } 79 | } 80 | } 81 | } 82 | -------------------------------------------------------------------------------- /src/theme/common/inputs/inputs.scss: -------------------------------------------------------------------------------- 1 | @mixin basic-input-style($background, $text-color, $placeholder-color){ 2 | &.item 3 | { 4 | padding: 0px; 5 | background-color: $background; 6 | 7 | .item-inner 8 | { 9 | padding: 0px 0.6rem; 10 | } 11 | 12 | .text-input 13 | { 14 | margin-right: 0px; 15 | margin-left: 0px; 16 | width: 100%; 17 | padding: 0px; 18 | color: $text-color; 19 | @include placeholder { 20 | color: $placeholder-color; 21 | } 22 | } 23 | } 24 | } 25 | 26 | @import "./range"; 27 | @import "./checkbox"; 28 | @import "./radio"; 29 | @import "./checkbox-tags"; 30 | @import "./radio-tags"; 31 | @import "./switcher"; 32 | @import "./counter"; 33 | @import "./rating"; 34 | @import "./color-radio"; 35 | -------------------------------------------------------------------------------- /src/theme/common/inputs/radio-tags.scss: -------------------------------------------------------------------------------- 1 | @mixin radio-tags-styles($background, $color, $active-color){ 2 | .radio-tags 3 | { 4 | @include display(flex); 5 | 6 | .radio-tag 7 | { 8 | flex: 1; 9 | margin: 5px; 10 | padding: 0px; 11 | text-align: center; 12 | font-size: 1.4rem; 13 | font-weight: 500; 14 | letter-spacing: 0.2px; 15 | min-height: initial; 16 | 17 | &.item-block 18 | { 19 | border: 1px solid $color; 20 | } 21 | 22 | ion-radio { 23 | margin: 0px !important; 24 | 25 | .radio-icon 26 | { 27 | display: none; 28 | } 29 | } 30 | 31 | .item-inner 32 | { 33 | border: none; 34 | background-color: $background; 35 | 36 | ion-label { 37 | color: $color; 38 | } 39 | } 40 | 41 | &.item-radio-disabled 42 | { 43 | opacity: 0.5; 44 | } 45 | 46 | &.item-radio-checked 47 | { 48 | border-color: $color; 49 | 50 | .item-inner 51 | { 52 | background-color: $color; 53 | 54 | ion-label { 55 | color: $active-color; 56 | } 57 | } 58 | } 59 | } 60 | } 61 | } 62 | -------------------------------------------------------------------------------- /src/theme/common/inputs/radio.scss: -------------------------------------------------------------------------------- 1 | @mixin radio-item-styles($color, $background, $active-color){ 2 | .radio-item 3 | { 4 | padding: 0px; 5 | border: none !important; 6 | @include element-shadow(); 7 | 8 | .item-inner 9 | { 10 | padding: 0px; 11 | border: none; 12 | 13 | ion-label { 14 | margin: 16px 0px 16px 8px; 15 | font-size: 1.4rem; 16 | font-weight: 500; 17 | letter-spacing: 0.2px; 18 | color: $color; 19 | } 20 | } 21 | 22 | ion-radio { 23 | margin-left: 8px !important; 24 | margin-right: 12px !important; 25 | 26 | .radio-icon 27 | { 28 | border: none; 29 | background-color: $background; 30 | border-radius: 50%; 31 | width: 22px; 32 | height: 22px; 33 | 34 | .radio-inner 35 | { 36 | background-color: $background; 37 | } 38 | 39 | &.radio-checked .radio-inner 40 | { 41 | border: none; 42 | background-color: $active-color; 43 | border-radius: 50%; 44 | width: 12px; 45 | height: 12px; 46 | top: 5px; 47 | left: 5px; 48 | transform: rotate(0deg); 49 | } 50 | } 51 | } 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /src/theme/common/inputs/range.scss: -------------------------------------------------------------------------------- 1 | @mixin range-item-styles($text-color, $bar-color, $bar-active-color){ 2 | .range-item 3 | { 4 | padding: 15px; 5 | border: none !important; 6 | @include element-shadow(); 7 | 8 | .item-inner 9 | { 10 | padding: 0px; 11 | border: none; 12 | } 13 | 14 | ion-label { 15 | flex: 1; 16 | width: 100%; 17 | @include display(flex); 18 | @include justify-content(space-between); 19 | margin: 0px; 20 | 21 | .range-value 22 | { 23 | font-size: 1.2rem; 24 | font-weight: 600; 25 | letter-spacing: 0.2px; 26 | color: $text-color; 27 | flex: 1 0 12%; 28 | max-width: 100%; 29 | margin: 0px; 30 | 31 | &:first-child 32 | { 33 | text-align: left; 34 | } 35 | 36 | &:last-child 37 | { 38 | text-align: right; 39 | } 40 | } 41 | 42 | .range-label 43 | { 44 | font-size: 1.4rem; 45 | font-weight: 500; 46 | letter-spacing: 0.2px; 47 | text-align: center; 48 | color: $text-color; 49 | flex: 0 1 76%; 50 | max-width: 76%; 51 | margin: 0px; 52 | 53 | &:first-child 54 | { 55 | text-align: left; 56 | } 57 | } 58 | } 59 | 60 | ion-range { 61 | padding: 12px 12px 0px; 62 | 63 | .range-tick 64 | { 65 | display: none; 66 | } 67 | 68 | .range-bar 69 | { 70 | background: $bar-color; 71 | height: 2px; 72 | } 73 | 74 | .range-bar-active 75 | { 76 | background: $bar-active-color; 77 | } 78 | } 79 | } 80 | } 81 | 82 | @mixin range-item-md-styles($knob-color){ 83 | ion-range { 84 | .range-knob 85 | { 86 | background: $knob-color; 87 | } 88 | } 89 | } 90 | 91 | @mixin range-item-wp-styles($knob-color){ 92 | ion-range { 93 | .range-knob 94 | { 95 | background: $knob-color; 96 | } 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /src/theme/common/inputs/rating.scss: -------------------------------------------------------------------------------- 1 | @mixin rating-item-styles($text-color, $value-color){ 2 | .rating-item 3 | { 4 | padding: 0px; 5 | border: none !important; 6 | @include element-shadow(); 7 | 8 | .item-inner 9 | { 10 | padding: 0px; 11 | border: none; 12 | 13 | ion-label { 14 | margin: 0px; 15 | @include display(flex); 16 | @include justify-content(space-between); 17 | } 18 | 19 | .rating-label 20 | { 21 | margin: 15px; 22 | font-size: 1.4rem; 23 | font-weight: 500; 24 | letter-spacing: 0.2px; 25 | color: $text-color; 26 | flex: 1; 27 | } 28 | 29 | rating { 30 | flex: 1; 31 | padding-right: 11px; 32 | 33 | .rating-icon ion-icon { 34 | color: $value-color; 35 | font-size: 1.8em; 36 | } 37 | } 38 | } 39 | } 40 | } 41 | -------------------------------------------------------------------------------- /src/theme/common/inputs/switcher.scss: -------------------------------------------------------------------------------- 1 | @mixin switcher-item-styles($color, $active-color){ 2 | .switcher-item 3 | { 4 | border: none !important; 5 | @include element-shadow(); 6 | 7 | .item-inner 8 | { 9 | padding: 0px; 10 | border: none; 11 | 12 | ion-label { 13 | margin-top: 16px; 14 | margin-bottom: 16px; 15 | font-size: 1.4rem; 16 | font-weight: 500; 17 | letter-spacing: 0.2px; 18 | color: $color; 19 | } 20 | } 21 | 22 | ion-toggle { 23 | .toggle-icon.toggle-checked 24 | { 25 | background-color: $active-color; 26 | } 27 | } 28 | } 29 | } 30 | 31 | @mixin switcher-item-md-styles($toggle-color){ 32 | ion-toggle { 33 | .toggle-icon.toggle-checked 34 | { 35 | .toggle-inner 36 | { 37 | background-color: $toggle-color; 38 | } 39 | } 40 | } 41 | } 42 | 43 | @mixin switcher-item-wp-styles($toggle-color, $toggle-active-color){ 44 | ion-toggle { 45 | .toggle-icon 46 | { 47 | border-color: $toggle-color; 48 | 49 | .toggle-inner 50 | { 51 | background-color: $toggle-active-color; 52 | } 53 | 54 | &.toggle-checked 55 | { 56 | border-color: $toggle-active-color; 57 | 58 | .toggle-inner 59 | { 60 | background-color: $toggle-color; 61 | } 62 | } 63 | } 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /src/theme/common/layouts/lists.scss: -------------------------------------------------------------------------------- 1 | // These list styles are for the list-1 and list-2 views under the Layouts section 2 | @mixin layout-list-styles($color-1, $color-2){ 3 | ion-list { 4 | margin: 0px; 5 | 6 | .list-item 7 | { 8 | padding: 10px; 9 | @include element-shadow(); 10 | border: none !important; 11 | 12 | .content-row 13 | { 14 | @include align-items(flex-start); 15 | } 16 | 17 | .item-inner 18 | { 19 | border: none; 20 | background: none; 21 | padding: 0px; 22 | 23 | ion-label { 24 | margin: 0px; 25 | } 26 | } 27 | 28 | .item-avatar 29 | { 30 | padding-right: 5px; 31 | 32 | preload-image.avatar-image 33 | { 34 | border-radius: 6px; 35 | 36 | img 37 | { 38 | border-radius: 6px; 39 | } 40 | } 41 | } 42 | 43 | .item-content 44 | { 45 | padding: 0px 5px; 46 | 47 | .item-title 48 | { 49 | font-size: 1.6rem; 50 | font-weight: 500; 51 | letter-spacing: 0.2px; 52 | color: $color-1; 53 | } 54 | 55 | .item-description 56 | { 57 | font-size: 1.2rem; 58 | line-height: 1.1; 59 | letter-spacing: 0.2px; 60 | color: $color-2; 61 | overflow: visible; 62 | text-overflow: initial; 63 | white-space: normal; 64 | } 65 | } 66 | 67 | .item-icon 68 | { 69 | text-align: right; 70 | color: $color-1; 71 | padding-left: 10px; 72 | @include align-self(center); 73 | 74 | ion-icon { 75 | font-size: 2.0em; 76 | } 77 | } 78 | } 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/theme/common/legal/legal.scss: -------------------------------------------------------------------------------- 1 | .legal-header 2 | { 3 | @include header-styles(color($colors, header-alt, base), color($colors, header-alt, contrast)); 4 | } 5 | 6 | .legal-content 7 | { 8 | padding: 16px 6%; 9 | background-color: color($colors, background, base); 10 | color: $theme-color-3; 11 | 12 | .scroll-content 13 | { 14 | padding: 16px 6%; 15 | } 16 | 17 | .legal-title 18 | { 19 | color: $theme-color-2; 20 | margin-top: 10px; 21 | margin-bottom: 25px; 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /src/theme/common/lists.scss: -------------------------------------------------------------------------------- 1 | // These are the forms and layout lists 2 | @mixin basic-list-styles($text-color, $icon-color){ 3 | .list-item 4 | { 5 | padding: 20px; 6 | @include element-shadow(); 7 | border: none; 8 | 9 | .item-inner 10 | { 11 | border: none; 12 | background: none; 13 | padding: 0px; 14 | 15 | ion-label { 16 | margin: 0px; 17 | 18 | .item-title 19 | { 20 | font-size: 1.8rem; 21 | letter-spacing: 1px; 22 | color: $text-color; 23 | margin: 0px; 24 | display: inline-block; 25 | } 26 | 27 | .item-note 28 | { 29 | font-size: 1.4rem; 30 | letter-spacing: 1px; 31 | color: $text-color; 32 | margin: 0px; 33 | margin-left: 4px; 34 | display: inline-block; 35 | } 36 | } 37 | } 38 | 39 | .item-content 40 | { 41 | @include align-self(center); 42 | } 43 | 44 | .item-icon 45 | { 46 | text-align: right; 47 | color: $icon-color; 48 | 49 | ion-icon { 50 | font-size: 2.0em; 51 | } 52 | } 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /src/theme/common/misc/multi-line-ellipsis.scss: -------------------------------------------------------------------------------- 1 | @mixin multi-line-ellipsis($font-size:12px){ 2 | overflow: hidden; 3 | position: relative; 4 | white-space: normal; 5 | word-break: break-all; 6 | font-size: $font-size; 7 | line-height: ($font-size + 4px); 8 | // Default 9 | height: ($font-size + 4px)*4; 10 | 11 | &[rows="2"] 12 | { 13 | height: ($font-size + 4px)*2; 14 | } 15 | &[rows="3"] 16 | { 17 | height: ($font-size + 4px)*3; 18 | } 19 | &[rows="4"] 20 | { 21 | height: ($font-size + 4px)*4; 22 | } 23 | 24 | &::after 25 | { 26 | content: '...'; 27 | position: absolute; 28 | bottom: 0px; 29 | right: 0px; 30 | padding-left: 10px; 31 | @include background-image(linear-gradient(left, rgba($white, 0) 0%,rgba($white, 1) 40%)); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /src/theme/common/misc/shadow.scss: -------------------------------------------------------------------------------- 1 | @mixin element-shadow($color:$white-d){ 2 | box-shadow: inset 0 -0.5px 0 0 #{$color}; 3 | } 4 | -------------------------------------------------------------------------------- /src/theme/common/scroll-bar.scss: -------------------------------------------------------------------------------- 1 | // Hide all scroll indicators 2 | .scroll-bar-indicator 3 | { 4 | opacity: 0; 5 | } 6 | ::-webkit-scrollbar 7 | { 8 | display: none; 9 | } 10 | -------------------------------------------------------------------------------- /src/theme/common/side-menu.scss: -------------------------------------------------------------------------------- 1 | ion-menu { 2 | .menu-content 3 | { 4 | background-color: color($colors, background, base); 5 | } 6 | 7 | .menu-list 8 | { 9 | margin-top: 20vh; 10 | 11 | .item 12 | { 13 | background-color: color($colors, background, base); 14 | padding-right: 32px; 15 | 16 | &:first-child 17 | { 18 | border-top: solid 1px rgba($white-d, 0.15); 19 | } 20 | 21 | &:last-child 22 | { 23 | border-bottom: solid 1px rgba($white-d, 0.15); 24 | } 25 | 26 | .item-inner 27 | { 28 | border-bottom: 1px solid rgba($white-d, 0.15); 29 | font-size: 1.8rem; 30 | font-weight: 300; 31 | letter-spacing: 1px; 32 | color: $theme-color-3; 33 | } 34 | 35 | .item-icon 36 | { 37 | color: $theme-color-2; 38 | font-size: 3.4rem; 39 | } 40 | 41 | &.activated 42 | { 43 | background-color: $theme-color-1; 44 | transition-duration: 0ms; 45 | 46 | .item-inner 47 | { 48 | color: $white; 49 | } 50 | 51 | .item-icon 52 | { 53 | color: $white; 54 | } 55 | } 56 | } 57 | } 58 | } 59 | -------------------------------------------------------------------------------- /src/theme/variables.scss: -------------------------------------------------------------------------------- 1 | // Ionic Variables and Theming. For more info, please see: 2 | // http://ionicframework.com/docs/v2/theming/ 3 | @import "ionic.globals"; 4 | 5 | 6 | // Shared Variables 7 | // -------------------------------------------------- 8 | // To customize the look and feel of this app, you can override 9 | // the Sass variables found in Ionic's source scss files. 10 | // To view all the possible Ionic variables, see: 11 | // http://ionicframework.com/docs/v2/theming/overriding-ionic-variables/ 12 | 13 | $white: #FFFFFF; 14 | $white-a: darken($white, 3%); 15 | $white-b: darken($white, 6%); 16 | $white-c: darken($white, 12%); 17 | $white-d: darken($white, 24%); 18 | 19 | $black: rgba(#000000, .8); 20 | $black-a: lighten($black, 10%); 21 | $black-b: lighten($black, 20%); 22 | $black-c: lighten($black, 40%); 23 | $black-d: lighten($black, 60%); 24 | 25 | $theme-color-1: #00e9d5; 26 | $theme-color-2: #ae75e7; 27 | $theme-color-3: #5e5874; 28 | 29 | // Named Color Variables 30 | // -------------------------------------------------- 31 | // Named colors makes it easy to reuse colors on various components. 32 | // It's highly recommended to change the default colors 33 | // to match your app's branding. Ionic uses a Sass map of 34 | // colors so you can add, rename and remove colors as needed. 35 | // The "primary" color is the only required color in the map. 36 | 37 | $colors: ( 38 | primary: #387ef5, 39 | secondary: #32db64, 40 | danger: #f53d3d, 41 | light: #f4f4f4, 42 | dark: #222, 43 | favorite: #69BB7B, 44 | walkthrough:( 45 | base: $theme-color-1, 46 | contrast: $white 47 | ), 48 | walkthrough-alt:( 49 | base: $theme-color-2, 50 | contrast: $white 51 | ), 52 | walkthrough-header:( 53 | base: transparent, 54 | contrast: $white 55 | ), 56 | header:( 57 | base: $theme-color-1, 58 | contrast: $white 59 | ), 60 | header-alt:( 61 | base: $theme-color-2, 62 | contrast: $white 63 | ), 64 | facebook:( 65 | base: #3b5998, 66 | contrast: $white 67 | ), 68 | google:( 69 | base: #cc181e, 70 | contrast: $white 71 | ), 72 | twitter:( 73 | base: #00aced, 74 | contrast: $white 75 | ), 76 | button:( 77 | base: $theme-color-1, 78 | contrast: $white 79 | ), 80 | button-alt:( 81 | base: $theme-color-2, 82 | contrast: $white 83 | ), 84 | background:( 85 | base: $white-a, 86 | contrast: $black-b 87 | ), 88 | tabs-navigation:( 89 | base: $white, 90 | contrast: $white-d 91 | ) 92 | ); 93 | 94 | 95 | // App Theme 96 | // -------------------------------------------------- 97 | // Ionic apps can have different themes applied, which can 98 | // then be future customized. This import comes last 99 | // so that the above variables are used and Ionic's 100 | // default are overridden. 101 | 102 | @import "ionic.theme.default"; 103 | 104 | 105 | // Ionicons 106 | // -------------------------------------------------- 107 | // The premium icon font for Ionic. For more info, please see: 108 | // http://ionicframework.com/docs/v2/ionicons/ 109 | 110 | $ionicons-font-path: "../assets/fonts"; 111 | @import "ionic.ionicons"; 112 | -------------------------------------------------------------------------------- /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 | "include": [ 17 | "src/**/*.ts", 18 | "typings/**/*.ts" 19 | ], 20 | "exclude": [ 21 | "node_modules" 22 | ], 23 | "compileOnSave": false, 24 | "atom": { 25 | "rewriteTsconfig": false 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "rules": { 3 | "no-duplicate-variable": true, 4 | "no-unused-variable": [ 5 | true 6 | ] 7 | }, 8 | "rulesDirectory": [ 9 | "node_modules/tslint-eslint-rules/dist/rules" 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /typings/globals/google.maps/typings.json: -------------------------------------------------------------------------------- 1 | { 2 | "resolution": "main", 3 | "tree": { 4 | "src": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/a8a8a493f00471f6c02da96fec25f1ef4e162fb9/googlemaps/google.maps.d.ts", 5 | "raw": "registry:dt/google.maps#3.25.0+20161208205818", 6 | "typings": "https://raw.githubusercontent.com/DefinitelyTyped/DefinitelyTyped/a8a8a493f00471f6c02da96fec25f1ef4e162fb9/googlemaps/google.maps.d.ts" 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /typings/index.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | --------------------------------------------------------------------------------