fix(examples): issue where demos would not load in firefox

- apparently firefox cannot manage [innerText]="" style bindings. Use interpolated strings in the body of elements for now {{ yay }}
justindujardin · Dec 16, 2015 · bc54249 · bc54249
1 parent 32be4a5
commit bc54249
Show file tree

Hide file tree

Showing 7 changed files with 18 additions and 10 deletions.
diff --git a/examples/app.html b/examples/app.html
@@ -25,7 +25,7 @@ <h1>Components</h1>
 
 
   <section *ngFor="#value of meta" [id]="value.id">
-    <h1 [innerText]="value.name"></h1>
+    <h1>{{ value.name }}</h1>
     <example *ngFor="#demo of value.examples" [model]="demo"></example>
     <md-divider></md-divider>
   </section>

diff --git a/examples/app.scss b/examples/app.scss
@@ -34,7 +34,7 @@ demos-app {
       font-size: rem(3.4);
       font-weight: 400;
       line-height: rem(4);
-      margin-bottom: 30px;
+      margin-bottom: rem(4);
     }
 
     .examples-intro {

diff --git a/examples/app.ts b/examples/app.ts
@@ -29,6 +29,16 @@ export class DemosApp {
   constructor(http: Http) {
     http.get('public/meta.json')
       .subscribe((res: Response) => {
+        // HACKS: use to filter down to a single example for testing
+        //let data = res.json();
+        //let results = [];
+        //data.forEach((d) => {
+        //  if(d.name === 'Toolbar'){
+        //    results.push(d);
+        //  }
+        //});
+        //this.meta = results;
+
         this.meta = res.json();
         console.log(this.meta);
       });

diff --git a/examples/components/progress_circular/basic_usage.html b/examples/components/progress_circular/basic_usage.html
@@ -45,7 +45,7 @@ <h4>Theming </h4>
         [checked]="activated"
         (md-on-change)="toggleActivation()"
         aria-label="Toggle Progress Circular Indicators">
-      <h5 [innerText]="activated?'On':'Off'"></h5>
+      <h5>{{ activated?'On':'Off' }}</h5>
     </md-switch>
   </div>
 

diff --git a/examples/components/progress_linear/basic_usage.html b/examples/components/progress_linear/basic_usage.html
@@ -51,7 +51,7 @@ <h4 class="md-title">Query</h4>
         [checked]="activated"
         (mdOnChange)="toggleActivation()"
         aria-label="Enable Indicators">
-      <h5 [innerText]="activated ? 'On' : 'Off'"></h5>
+      <h5>{{ activated ? 'On' : 'Off' }}</h5>
     </md-switch>
   </div>
 

diff --git a/examples/components/radio/basic_usage.html b/examples/components/radio/basic_usage.html
@@ -1,5 +1,5 @@
 <form ng-submit="submit()">
-  <p>Selected Value: <span class="radioValue" [innerText]="data.group1"></span></p>
+  <p>Selected Value: <span class="radioValue">{{ data.group1 }}</span></p>
 
   <md-radio-group [(value)]="data.group1">
 

diff --git a/examples/example.html b/examples/example.html
@@ -1,21 +1,19 @@
 <div class="doc-demo-content doc-content">
   <div flex layout="column" style="z-index:1">
 
-    <div class="doc-description" ng-bind-html="demoCtrl.demoDescription.contents | toHtml"></div>
-
     <section class="demo-container md-whiteframe-z1"
-             ng-class="{'show-source': demoCtrl.$showSource}">
+             [ngClass]="{'show-source': showSource}">
 
       <md-toolbar class="demo-toolbar md-primary">
         <div class="md-toolbar-tools">
-          <h3 [innerText]="model?.name"></h3>
+          <h3>{{ model?.name }}</h3>
           <span flex></span>
           <button md-button *ngFor="#file of orderedFiles"
                   aria-label="View Source"
                   [style.display]="showSource!=true?'none':'block'"
                   [ngClass]="{ active: selected==file.type }"
-                  [innerText]="file.type"
                   (click)="selected=file.type">
+            {{ file.type }}
           </button>
           <button md-button
                   class="md-icon-button"