cargdev/angular
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(aio): cheatsheet table layout fix

Browse Source
This commit is contained in:
Stefanie Fluin 2017-05-03 10:32:15 -07:00 committed by Matias Niemelä
parent 6748aeabb6
commit 919ff12377
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
aio/content/guide/cheatsheet.md
View File

@ -3,9 +3,8 @@ Cheat Sheet
@description @description
<div class="l-content-small grid-fluid docs-content cheatsheet"> <div id="cheatsheet">
<table class="is-full-width is-fixed-layout">
<table>
<tbody><tr> <tbody><tr>
<th>Bootstrapping</th> <th>Bootstrapping</th>
<th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code> <th><p><code>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';</code>
@ -19,7 +18,7 @@ Cheat Sheet
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>NgModules</th> <th>NgModules</th>
<th><p><code>import { NgModule } from '@angular/core';</code> <th><p><code>import { NgModule } from '@angular/core';</code>
@ -54,7 +53,7 @@ is available to <code>declarations</code> of this module.</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Template syntax</th> <th>Template syntax</th>
<th></th> <th></th>
@ -120,7 +119,7 @@ is available to <code>declarations</code> of this module.</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Built-in directives</th> <th>Built-in directives</th>
<th><p><code>import { CommonModule } from '@angular/common';</code> <th><p><code>import { CommonModule } from '@angular/common';</code>
@ -146,7 +145,7 @@ is available to <code>declarations</code> of this module.</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Forms</th> <th>Forms</th>
<th><p><code>import { FormsModule } from '@angular/forms';</code> <th><p><code>import { FormsModule } from '@angular/forms';</code>
@ -160,7 +159,7 @@ is available to <code>declarations</code> of this module.</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Class decorators</th> <th>Class decorators</th>
<th><p><code>import { Directive, ... } from '@angular/core';</code> <th><p><code>import { Directive, ... } from '@angular/core';</code>
@ -187,7 +186,7 @@ is available to <code>declarations</code> of this module.</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Directive configuration</th> <th>Directive configuration</th>
<th><p><code>@Directive({ property1: value1, ... })</code> <th><p><code>@Directive({ property1: value1, ... })</code>
@ -207,7 +206,7 @@ is available to <code>declarations</code> of this module.</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Component configuration</th> <th>Component configuration</th>
<th><p> <th><p>
@ -234,7 +233,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Class field decorators for directives and components</th> <th>Class field decorators for directives and components</th>
<th><p><code>import { Input, ... } from '@angular/core';</code> <th><p><code>import { Input, ... } from '@angular/core';</code>
@ -277,7 +276,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Directive and component change detection and lifecycle hooks</th> <th>Directive and component change detection and lifecycle hooks</th>
<th><p>(implemented as class methods) <th><p>(implemented as class methods)
@ -323,7 +322,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Dependency injection configuration</th> <th>Dependency injection configuration</th>
<th></th> <th></th>
@ -343,7 +342,7 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</tr> </tr>
</tbody></table> </tbody></table>
<table> <table class="is-full-width is-fixed-layout">
<tbody><tr> <tbody><tr>
<th>Routing and navigation</th> <th>Routing and navigation</th>
<th><p><code>import { Routes, RouterModule, ... } from '@angular/router';</code> <th><p><code>import { Routes, RouterModule, ... } from '@angular/router';</code>
@ -388,5 +387,4 @@ so the <code>@Directive</code> configuration applies to components as well</p>
</td> </td>
</tr> </tr>
</tbody></table> </tbody></table>
</div> </div>

8
aio/src/styles/2-modules/_table.scss
View File

@ -8,6 +8,10 @@ table {
width: 100%; width: 100%;
} }
&.is-fixed-layout {
table-layout: fixed;
}
thead { thead {
vertical-align: middle; vertical-align: middle;
border-color: inherit; border-color: inherit;
@ -83,4 +87,8 @@ table {
} }
} }
}
#cheatsheet table tbody td {
overflow: auto;
} }