From 8915c32484f6ee663b2e8e61f070fc8f7cf1de5c Mon Sep 17 00:00:00 2001 From: Thomas Burleson Date: Thu, 4 Sep 2014 17:52:25 -0500 Subject: [PATCH] fix(demo): tab demos improved layout and accessibility Tab demos - use internal tab content views to auto- inject ARIA features - fixed to layout tab buttons properly - fixed to paginate only when necessary. - support arrow key navigation and autofocus of selected tab; - synchronized key tab selection with tab content. --- docs/app/css/style.css | 21 +++++++-------------- docs/templates/readme.template.html | 21 ++++++++------------- src/components/tabs/tabs.js | 4 ++-- 3 files changed, 17 insertions(+), 29 deletions(-) diff --git a/docs/app/css/style.css b/docs/app/css/style.css index 27bef41974f..c35e60c049d 100644 --- a/docs/app/css/style.css +++ b/docs/app/css/style.css @@ -119,19 +119,8 @@ iframe.demo { border-top: 1px solid #ddd; } .demo-frame-container { - background: #fff; - z-index: 1; - -webkit-transition: 0.2s ease-out all; - -moz-transition: 0.2s ease-out all; - transition: 0.2s ease-out all; - -webkit-transform: translate3d(0, -440px, 0); - -moz-transform: translate3d(0, -440px, 0); - transform: translate3d(0, -440px, 0); -} -.demo-frame-container.below { - -webkit-transform: translate3d(0, 0, 0); - -moz-transform: translate3d(0, 0, 0); - transform: translate3d(0, 0, 0); + background: #fff; + z-index: 1; } material-toolbar.demo-toolbar, @@ -155,15 +144,19 @@ material-toolbar.demo-toolbar material-button { } .demo-source-container { + display:block; border: 1px solid #ddd; + background-color: #f6f6f6; + height:400px; } + .demo-source-content { height: 400px; } .demo-source-content, .demo-source-content pre, .demo-source-content code { - background: #f4f4f4; + background: #f6f6f6; } .demo-source-content pre { max-width: 100%; diff --git a/docs/templates/readme.template.html b/docs/templates/readme.template.html index 4e19e27b293..0f57a122fbd 100644 --- a/docs/templates/readme.template.html +++ b/docs/templates/readme.template.html @@ -6,7 +6,7 @@
+ ng-class="{'no-source': !demo.$showSource}" layout="vertical">
@@ -19,26 +19,21 @@
- + + + + + - -
-
- - -
-
-
-
+