fix(aio): cheatsheet table layout fix

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

View File

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

View File

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