Merge pull request google#492 from google/text-only-header

Add mobile header to text-only template
larz0 · Jun 26, 2015 · 362dc1a · 362dc1a
2 parents 40e99ba + d56c5cc
commit 362dc1a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/templates/text-only/index.html b/templates/text-only/index.html
@@ -44,16 +44,16 @@
     </style>
   </head>
   <body class="mdl-demo mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
-    <div class="mdl-layout mdl-js-layout">
+    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
       <header class="mdl-layout__header mdl-layout__header--scroll mdl-color--primary">
-        <div class="mdl-layout__header-row">
+        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
         </div>
         <div class="mdl-layout__header-row">
           <h3>Name &amp; Title</h3>
         </div>
-        <div class="mdl-layout__header-row">
+        <div class="mdl-layout--large-screen-only mdl-layout__header-row">
         </div>
-        <div class="mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
+        <div class="mdl-layout--large-screen-only mdl-layout__tab-bar mdl-js-ripple-effect mdl-color--primary-dark">
           <a href="#overview" class="mdl-layout__tab is-active">Overview</a>
           <a href="#features" class="mdl-layout__tab">Features</a>
           <a href="#features" class="mdl-layout__tab">Details</a>

diff --git a/templates/text-only/styles.css b/templates/text-only/styles.css
@@ -7,6 +7,15 @@ html, body {
   padding-left: 40px;
   height: 53px;
 }
+.mdl-demo .mdl-layout.is-small-screen .mdl-layout__tab-bar-container {
+  display: none;
+}
+.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row {
+  padding-left: 60px;
+}
+.mdl-demo .mdl-layout.is-small-screen .mdl-layout__header-row h3 {
+  font-size: inherit;
+}
 .mdl-demo .mdl-layout__tab-bar-button {
   display: none;
 }