fix(docs): example row helper (#1548)

akveo · Jun 2, 2019 · c0d404f · c0d404f
1 parent 870fe76
commit c0d404f
Show file tree

Hide file tree

Showing 29 changed files with 59 additions and 72 deletions.
diff --git a/.../app/blocks/components/components-overview-block/components-overview-block.component.scss b/.../app/blocks/components/components-overview-block/components-overview-block.component.scss
@@ -23,8 +23,8 @@
 
     .component-icon {
       margin-bottom: 1rem;
-      width: 4rem;
       height: 4rem;
+      width: auto;
     }
 
     .component-name {

diff --git a/src/playground/styles/example-helpers.scss b/src/playground/styles/example-helpers.scss
@@ -17,26 +17,26 @@
     justify-content: space-around;
   }
 
-  .example-items-row {
-    margin-top: -1rem;
+  .example-items-rows {
     display: flex;
-    flex-direction: row;
+    flex-wrap: wrap;
     align-items: flex-start;
+    margin: -0.5rem;
 
     > * {
-      margin-top: 1rem;
-      margin-right: 1rem;
-
-      &:last-child {
-        margin-right: 0;
-      }
+      margin: 0.5rem;
     }
   }
 
+  .example-last-child-no-b-margin > :last-child {
+    margin-bottom: 0;
+  }
+
   .example-items-col {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
+
     & > * {
       margin-bottom: 1rem;
 

diff --git a/src/playground/with-layout/alert/alert-accents.component.html b/src/playground/with-layout/alert/alert-accents.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert accent="primary">Primary. You have been successfully authenticated!</nb-alert>
     <nb-alert accent="success">Success. You have been successfully authenticated!</nb-alert>
     <nb-alert accent="info">Info. You have been successfully authenticated!</nb-alert>

diff --git a/src/playground/with-layout/alert/alert-colors.component.html b/src/playground/with-layout/alert/alert-colors.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert status="primary">Primary. You have been successfully authenticated!</nb-alert>
     <nb-alert status="success">Success. You have been successfully authenticated!</nb-alert>
     <nb-alert status="info">Info. You have been successfully authenticated!</nb-alert>

diff --git a/src/playground/with-layout/alert/alert-outline.component.html b/src/playground/with-layout/alert/alert-outline.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert outline="primary">Primary. You have been successfully authenticated!</nb-alert>
     <nb-alert outline="success">Success. You have been successfully authenticated!</nb-alert>
     <nb-alert outline="info">Info. You have been successfully authenticated!</nb-alert>

diff --git a/src/playground/with-layout/alert/alert-showcase.component.html b/src/playground/with-layout/alert/alert-showcase.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert status="success" closable>You have been successfully authenticated!</nb-alert>
   </nb-card-body>
 </nb-card>
diff --git a/src/playground/with-layout/alert/alert-sizes.component.html b/src/playground/with-layout/alert/alert-sizes.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-last-child-no-b-margin">
     <nb-alert status="primary" size="tiny">Tiny. You have been successfully authenticated!</nb-alert>
     <nb-alert status="primary" size="small">Small. You have been successfully authenticated!</nb-alert>
     <nb-alert status="primary" size="medium">Medium. You have been successfully authenticated!</nb-alert>

diff --git a/src/playground/with-layout/button/button-colors.component.html b/src/playground/with-layout/button/button-colors.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Colors</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton status="primary">Primary</button>
     <button nbButton status="success">Success</button>
     <button nbButton status="info">Info</button>

diff --git a/src/playground/with-layout/button/button-full-width.component.html b/src/playground/with-layout/button/button-full-width.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Full Width</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton fullWidth status="primary">Primary</button>
     <button nbButton fullWidth status="success">Success</button>
     <button nbButton fullWidth status="info">Info</button>

diff --git a/src/playground/with-layout/button/button-hero.component.html b/src/playground/with-layout/button/button-hero.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Hero</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton hero status="primary">Primary</button>
     <button nbButton hero status="success">Success</button>
     <button nbButton hero status="info">Info</button>

diff --git a/src/playground/with-layout/button/button-icon.component.html b/src/playground/with-layout/button/button-icon.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button with Icon</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton status="primary"><nb-icon icon="star"></nb-icon>Primary</button>
     <button nbButton status="success">Success<nb-icon icon="star"></nb-icon></button>
     <button nbButton status="danger"><nb-icon icon="star"></nb-icon></button>

diff --git a/src/playground/with-layout/button/button-outline.component.html b/src/playground/with-layout/button/button-outline.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Outline</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton outline status="primary">Primary</button>
     <button nbButton outline status="success">Success</button>
     <button nbButton outline status="info">Info</button>

diff --git a/src/playground/with-layout/button/button-shapes.component.html b/src/playground/with-layout/button/button-shapes.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Shapes</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton shape="rectangle" status="primary">Rectangle Hero</button>
     <button nbButton shape="semi-round" status="info">Semi-round Outline</button>
     <button nbButton shape="round" size="small" status="success">Round Small</button>

diff --git a/src/playground/with-layout/button/button-showcase.component.html b/src/playground/with-layout/button/button-showcase.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton>Active</button>
     <button nbButton disabled>Disabled</button>
   </nb-card-body>

diff --git a/src/playground/with-layout/button/button-sizes.component.html b/src/playground/with-layout/button/button-sizes.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Sizes</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button nbButton size="tiny">tiny</button>
     <button nbButton size="small">small</button>
     <button nbButton size="medium">medium</button>

diff --git a/src/playground/with-layout/button/button-types.component.html b/src/playground/with-layout/button/button-types.component.html
@@ -1,6 +1,6 @@
 <nb-card>
   <nb-card-header>Button Elements</nb-card-header>
-  <nb-card-body class="example-items-row">
+  <nb-card-body class="example-items-rows">
     <button (click)="onClick()" nbButton>Button</button>
     <input (click)="onClick()" nbButton type="submit" value="Input Submit"/>
     <input (click)="onClick()" nbButton type="button" value="Input Button"/>

diff --git a/src/playground/with-layout/button/button-types.component.ts b/src/playground/with-layout/button/button-types.component.ts
@@ -12,8 +12,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
   templateUrl: './button-types.component.html',
 })
 export class ButtonTypesComponent {
-
-
   onClick() {
     return false;
   }

diff --git a/src/playground/with-layout/icon/icon-colors.component.html b/src/playground/with-layout/icon/icon-colors.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-items-rows">
     <nb-icon icon="heart-outline" status="primary"></nb-icon>
     <nb-icon icon="heart-outline" status="info"></nb-icon>
     <nb-icon icon="heart-outline" status="success"></nb-icon>

diff --git a/src/playground/with-layout/icon/icon-showcase.component.html b/src/playground/with-layout/icon/icon-showcase.component.html
@@ -1,5 +1,5 @@
 <nb-card>
-  <nb-card-body>
+  <nb-card-body class="example-items-rows">
     <nb-icon icon="heart-outline"></nb-icon>
     <nb-icon icon="star"></nb-icon>
   </nb-card-body>

diff --git a/src/playground/with-layout/input/input-showcase.component.ts b/src/playground/with-layout/input/input-showcase.component.ts
@@ -9,7 +9,7 @@ import { Component } from '@angular/core';
 @Component({
   template: `
     <nb-card>
-      <nb-card-body class="example-items-row">
+      <nb-card-body class="example-items-rows">
         <input type="text" nbInput placeholder="Text field">
         <input type="text" nbInput placeholder="Disabled Text field" disabled>
       </nb-card-body>

diff --git a/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html b/src/playground/with-layout/progress-bar/progress-bar-interactive.component.html
@@ -2,11 +2,11 @@
   <nb-card-body>
     <div class="container">
       <nb-actions size="medium">
-        <nb-action icon="arrowhead-down-outline" (click)="setValue(value - 25)"></nb-action>
+        <nb-action icon="minus-outline" (click)="setValue(value - 25)"></nb-action>
       </nb-actions>
       <nb-progress-bar [value]="value" [status]="status" [displayValue]="true"></nb-progress-bar>
       <nb-actions size="medium">
-        <nb-action icon="arrowhead-up-outline" (click)="setValue(value + 25)"></nb-action>
+        <nb-action icon="plus-outline" (click)="setValue(value + 25)"></nb-action>
       </nb-actions>
     </div>
   </nb-card-body>

diff --git a/src/playground/with-layout/spinner/spinner-button.component.ts b/src/playground/with-layout/spinner/spinner-button.component.ts
@@ -10,7 +10,7 @@ import { Component } from '@angular/core';
   selector: 'nb-app-spinner-button',
   template: `
      <nb-card accent="primary">
-      <nb-card-body class="example-items-row">
+      <nb-card-body class="example-items-rows">
           <button nbButton status="success" (click)="toggleLoadingAnimation()"
                   [nbSpinner]="loading" nbSpinnerStatus="success" nbSpinnerSize="large" nbSpinnerMessage="">
             Download

diff --git a/src/playground/with-layout/toastr/toastr-destroy-by-click.component.ts b/src/playground/with-layout/toastr/toastr-destroy-by-click.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -12,17 +12,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrDestroyByClickComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  className = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 

diff --git a/src/playground/with-layout/toastr/toastr-duration.component.ts b/src/playground/with-layout/toastr/toastr-duration.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -13,17 +13,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrDurationComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  className = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 

diff --git a/src/playground/with-layout/toastr/toastr-icon.component.ts b/src/playground/with-layout/toastr/toastr-icon.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -13,17 +13,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrIconComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  className = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 

diff --git a/src/playground/with-layout/toastr/toastr-positions.component.ts b/src/playground/with-layout/toastr/toastr-positions.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -18,17 +18,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrPositionsComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 

diff --git a/src/playground/with-layout/toastr/toastr-prevent-duplicates.component.ts b/src/playground/with-layout/toastr/toastr-prevent-duplicates.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -12,14 +12,14 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
 export class ToastrPreventDuplicatesComponent {
+
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 

diff --git a/src/playground/with-layout/toastr/toastr-showcase.component.ts b/src/playground/with-layout/toastr/toastr-showcase.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -12,16 +12,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
 export class ToastrShowcaseComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }
 

diff --git a/src/playground/with-layout/toastr/toastr-statuses.component.ts b/src/playground/with-layout/toastr/toastr-statuses.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, HostBinding } from '@angular/core';
 import { NbToastrService } from '@nebular/theme';
 
 @Component({
@@ -16,17 +16,15 @@ import { NbToastrService } from '@nebular/theme';
       ::ng-deep nb-layout-column {
         height: 80vw;
       }
-
-      button {
-        margin: 1rem;
-      }
     `,
   ],
 })
-
 export class ToastrStatusesComponent {
   private index: number = 0;
 
+  @HostBinding('class')
+  classes = 'example-items-rows';
+
   constructor(private toastrService: NbToastrService) {
   }