fix(demo): fix demo layout

valor-software · Mar 12, 2016 · 227ef4e · 227ef4e
1 parent 4ff89a5
commit 227ef4e
Show file tree

Hide file tree

Showing 17 changed files with 179 additions and 171 deletions.
diff --git a/demo/assets/css/style.css b/demo/assets/css/style.css
@@ -28,7 +28,7 @@ section {
 
 .page-header {
   padding-bottom: 9px;
-  margin: 40px 0 20px;
+  margin: 10px 0 40px;
   border-bottom: 1px solid #eee;
 }
 
@@ -246,3 +246,7 @@ pre {
   white-space: -o-pre-wrap;    /* Opera 7 */
   word-wrap: break-word;       /* Internet Explorer 5.5+ */
 }
+
+#getting-started {
+  padding: 0;
+}
diff --git a/demo/components/accordion-section.ts b/demo/components/accordion-section.ts
@@ -15,24 +15,25 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
 @Component({
   selector: 'accordion-section',
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
+    <div class="description">${titleDoc}</div>
 
-    <div class="row">
+    <br/>
+
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <accordion-demo></accordion-demo>
       </div>
     </div>
+    
+    <br/>
 
-    <br>
-
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -46,10 +47,10 @@ let html = require('!!prismjs?lang=markup!./accordion/accordion-demo.html');
         </tab>
       </tabset>
     </div>
+    
+    <br/>
 
-    <br>
-
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>

diff --git a/demo/components/alert-section.ts b/demo/components/alert-section.ts
@@ -17,24 +17,25 @@ let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
 @Component({
   selector: 'alert-section',
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
 
-    <div class="row">
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <alert-demo></alert-demo>
       </div>
     </div>
+    
+    <br/>
 
-    <br>
-
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -48,10 +49,10 @@ let html = require('!!prismjs?lang=markup!./alert/alert-demo.html');
         </tab>
       </tabset>
     </div>
-
-    <br>
-
-    <div class="row">
+    
+    <br/>
+      
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>

diff --git a/demo/components/buttons-section.ts b/demo/components/buttons-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
   selector: 'buttons-section',
   directives: [ButtonsDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <buttons-demo></buttons-demo>
       </div>
     </div>
 
-    <br>
-
-    <div class="row">
+    <br/>
+    
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./buttons/buttons-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `

diff --git a/demo/components/carousel-section.ts b/demo/components/carousel-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
   selector: 'carousel-section',
   directives: [CarouselDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <carousel-demo></carousel-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./carousel/carousel-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `

diff --git a/demo/components/collapse-section.ts b/demo/components/collapse-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
   selector: 'collapse-section',
   directives: [CollapseDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <collapse-demo></collapse-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./collapse/collapse-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `

diff --git a/demo/components/datepicker-section.ts b/demo/components/datepicker-section.ts
@@ -19,24 +19,25 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
 })
 @View({
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <datepicker-demo></datepicker-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -51,9 +52,9 @@ let html = require('!!prismjs?lang=markup!./datepicker/datepicker-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
       <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>

diff --git a/demo/components/demo-header.ts b/demo/components/demo-header.ts
@@ -39,7 +39,7 @@ let template = `
         </ul>
       </nav>
       <nav class="visible-xs hidden-md-up">
-        <ul class="nav nav-pills nav-stacked scrollable-menu" [collapse]="!isCollapsed" (click)="isCollapsed = !isCollapsed; true">
+        <ul class="nav nav-pills nav-stacked scrollable-menu" [collapse]="isCollapsed" (click)="isCollapsed = !isCollapsed; true">
           <li class="nav-item"><a class="nav-link" href="{{prefix}}#getting-started">Getting started</a></li>
           <li class="nav-item"><a class="nav-link" href="{{prefix}}#migration">Migration</a></li>
           <li *ngFor="#comp of components" class="nav-item"><a class="dropdown-item nav-link" href="{{prefix}}#{{comp.toLowerCase()}}">{{comp}}</a></li>

diff --git a/demo/components/dropdown-section.ts b/demo/components/dropdown-section.ts
@@ -18,24 +18,25 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
   selector: 'dropdown-section',
   directives: [DropdownDemo, TAB_DIRECTIVES, CORE_DIRECTIVES],
   template: `
-  <br>
   <section id="${name.toLowerCase()}">
-    <div class="row"><h1>${name}<small>(<a href="${src}">src</a>)</small></h1></div>
+    <h1>${name}<small>(<a href="${src}">src</a>)</small></h1>
 
     <hr>
 
-    <div class="row"><div class="col-md-12">${titleDoc}</div></div>
-
-    <div class="row">
+    <div class="description">${titleDoc}</div>
+    
+    <br/>
+    
+    <div class="example">
       <h2>Example</h2>
       <div class="card card-block panel panel-default panel-body">
         <dropdown-demo></dropdown-demo>
       </div>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="markup">
       <tabset>
         <tab heading="Markup">
           <div class="card card-block panel panel-default panel-body">
@@ -50,13 +51,11 @@ let html = require('!!prismjs?lang=markup!./dropdown/dropdown-demo.html');
       </tabset>
     </div>
 
-    <br>
+    <br/>
 
-    <div class="row">
+    <div class="api">
       <h2>API</h2>
-      <div class="card card-block panel panel-default panel-body">
-      ${doc}
-      </div>
+      <div class="card card-block panel panel-default panel-body">${doc}</div>
     </div>
   </section>
   `