mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 04:14:21 +08:00
chore(demos): update demos to work
* chore(demos): WIP refactor gulp demos task to use SystemJS move build files into dist/demos and comment out the AoT demos task for right now. This makes both `gulp demos` and `gulp demos.watch`work again. references #8411 * docs(demos): fix infinite scroll demo * chore(demos): move old demos task to demos.prod update the demos file with shared tasks, include the shared css * docs(demos): fix API demos to use correct styles * chore(demos): remove the main.ts files from each demo * chore(demos): add prod template and constant * chore(demos): remove tsconfig and package from demos * chore(demos): update app.module path to ionic * chore(demos): update app.module path to ionic * chore(demos): update prod task for demos to work with AoT also puts the demo build files into dist/ instead of the src directory * docs(demos): update deploy and docs tasks for new build * docs(scripts): update demos README * chore(demos): fix path for prod build
This commit is contained in:
Brandy Carney
committed by
Adam Bradley
Adam Bradley
parent
3701ee5e37
commit
1f83cde78b
241
scripts/demos/demos.shared.css
Normal file
241
scripts/demos/demos.shared.css
Normal file
@ -0,0 +1,241 @@
|
||||
/*
|
||||
Scrollbar
|
||||
*/
|
||||
|
||||
body.has-scrollbar .scroll-content {
|
||||
margin-right: -15px;
|
||||
}
|
||||
body.has-scrollbar ion-menu .scroll-content {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Popover
|
||||
*/
|
||||
|
||||
page-api-radio-popover ion-row,
|
||||
page-api-radio-popover ion-col {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.popover-text-button {
|
||||
padding-left: 0;
|
||||
text-align: center;
|
||||
min-height: 20px;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.popover-text-button .item-inner {
|
||||
padding-right: 0;
|
||||
}
|
||||
|
||||
.popover-text-smaller {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.popover-text-larger {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
.popover-row-dots {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.popover-dot {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
margin: 10px auto;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.popover-dot-white {
|
||||
background-color: rgb(255,255,255);
|
||||
}
|
||||
|
||||
.popover-dot-tan {
|
||||
background-color: rgb(249,241,228);
|
||||
}
|
||||
|
||||
.popover-dot-grey {
|
||||
background-color: rgb(76,75,80);
|
||||
}
|
||||
|
||||
.popover-dot-black {
|
||||
background-color: rgb(0,0,0);
|
||||
}
|
||||
|
||||
.ios .popover-dot.selected,
|
||||
.md .popover-dot.selected,
|
||||
.wp .popover-dot.selected {
|
||||
border-width: 2px;
|
||||
border-color: #327eff;
|
||||
}
|
||||
|
||||
.popover-text-athelas {
|
||||
font-family: "Athelas";
|
||||
}
|
||||
|
||||
.popover-text-charter {
|
||||
font-family: "Charter";
|
||||
}
|
||||
|
||||
.popover-text-iowan {
|
||||
font-family: "Iowan";
|
||||
}
|
||||
|
||||
.popover-text-palatino {
|
||||
font-family: "Palatino";
|
||||
}
|
||||
|
||||
.popover-text-san-francisco {
|
||||
font-family: "San Francisco";
|
||||
}
|
||||
|
||||
.popover-text-seravek {
|
||||
font-family: "Seravek";
|
||||
}
|
||||
|
||||
.popover-text-times-new-roman {
|
||||
font-family: "Times New Roman";
|
||||
}
|
||||
|
||||
/*
|
||||
iOS Popover
|
||||
*/
|
||||
|
||||
.ios .popover-text-smaller {
|
||||
border-right: 1px solid #c8c7cc;
|
||||
}
|
||||
|
||||
.ios .popover-row-dots {
|
||||
border-bottom: 1px solid #c8c7cc;
|
||||
}
|
||||
|
||||
.ios .popover-dot {
|
||||
border: 1px solid #c8c7cc;
|
||||
}
|
||||
|
||||
.hairlines .popover-text-smaller,
|
||||
.hairlines .popover-row-dots,
|
||||
.hairlines .popover-dot {
|
||||
border-width: 0.55px;
|
||||
}
|
||||
|
||||
/*
|
||||
Material Design Popover
|
||||
*/
|
||||
|
||||
.md .popover-text-smaller {
|
||||
border-right: 1px solid #dedede;
|
||||
}
|
||||
|
||||
.md .popover-row-dots {
|
||||
border-bottom: 1px solid #dedede;
|
||||
}
|
||||
|
||||
.md .popover-dot {
|
||||
border: 1px solid #dedede;
|
||||
}
|
||||
|
||||
/*
|
||||
Windows Popover
|
||||
*/
|
||||
|
||||
.wp .popover-dot {
|
||||
border: 2px solid #ccc;
|
||||
}
|
||||
|
||||
/*
|
||||
Loading Custom Component
|
||||
*/
|
||||
|
||||
.loading-custom-spinner-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.loading-custom-spinner-box {
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: spin 3s infinite linear;
|
||||
}
|
||||
|
||||
.loading-custom-spinner-box:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: pulse 1.5s infinite ease;
|
||||
}
|
||||
|
||||
/*
|
||||
Windows Loading Custom Component
|
||||
*/
|
||||
|
||||
.wp .loading-custom-spinner-box,
|
||||
.wp .loading-custom-spinner-box:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
/*
|
||||
Loading Custom Component Keyframes
|
||||
*/
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Tabs Only
|
||||
*/
|
||||
|
||||
ion-tabs[tabs-only]:first-child {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
ion-tabs[tabs-only] {
|
||||
margin-bottom: 20px;
|
||||
contain: none;
|
||||
}
|
||||
|
||||
ion-tabs[tabs-only],
|
||||
ion-tabs[tabs-only] .tabbar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
height: auto;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
57
scripts/demos/demos.template.dev.html
Normal file
57
scripts/demos/demos.template.dev.html
Normal file
@ -0,0 +1,57 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en">
|
||||
|
||||
<head>
|
||||
<title>Ionic E2E</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
<link id="ionicLink" href="../css/ionic.css" rel="stylesheet">
|
||||
<link href="../css/demos.shared.css" rel="stylesheet">
|
||||
|
||||
<script src="/node_modules/systemjs/dist/system.src.js"></script>
|
||||
<script>
|
||||
System.config({
|
||||
map: {
|
||||
'@angular/core': '/node_modules/@angular/core/bundles/core.umd.js',
|
||||
'@angular/compiler': '/node_modules/@angular/compiler/bundles/compiler.umd.js',
|
||||
'@angular/common': '/node_modules/@angular/common/bundles/common.umd.js',
|
||||
'@angular/forms': '/node_modules/@angular/forms/bundles/forms.umd.js',
|
||||
'@angular/http': '/node_modules/@angular/http/bundles/http.umd.js',
|
||||
'@angular/platform-browser': '/node_modules/@angular/platform-browser/bundles/platform-browser.umd.js',
|
||||
'@angular/platform-browser-dynamic': '/node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
|
||||
'ionic-angular': location.protocol + '//' + location.host,
|
||||
'rxjs': '/node_modules/rxjs'
|
||||
},
|
||||
packages: {
|
||||
'ionic-angular': {
|
||||
main: 'index',
|
||||
defaultExtension: false
|
||||
},
|
||||
'rxjs': {
|
||||
defaultExtension: 'js'
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<script src="../polyfills/polyfills.ng.js"></script>
|
||||
<script src="../../bundles/ionic.system.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<ion-app></ion-app>
|
||||
|
||||
<script>
|
||||
System.import('@angular/platform-browser-dynamic').then(function(platformBrowserDynamic) {
|
||||
System.import('app.module.js').then(function(appModule) {
|
||||
platformBrowserDynamic.platformBrowserDynamic().bootstrapModule(appModule.AppModule);
|
||||
}, console.error.bind(console));
|
||||
}, console.error.bind(console));
|
||||
</script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
19
scripts/demos/demos.template.prod.html
Normal file
19
scripts/demos/demos.template.prod.html
Normal file
@ -0,0 +1,19 @@
|
||||
<!DOCTYPE html>
|
||||
<html dir="ltr" lang="en">
|
||||
<head>
|
||||
<title>Ionic E2E</title>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
|
||||
<link id="ionicLink" href="../css/ionic.css" rel="stylesheet">
|
||||
<link href="../css/demos.shared.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ion-app></ion-app>
|
||||
|
||||
<script src="../polyfills/polyfills.ng.js"></script>
|
||||
<script src="./app.bundle.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
6
scripts/demos/entry.ts
Normal file
6
scripts/demos/entry.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { platformBrowser } from '@angular/platform-browser';
|
||||
import { enableProdMode } from '@angular/core';
|
||||
import { AppModuleNgFactory } from './app.module.ngfactory';
|
||||
|
||||
enableProdMode();
|
||||
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
|
||||
Reference in New Issue
Block a user