Update demo.html

tikicoder · Aug 26, 2014 · 6f1d70e · 6f1d70e
1 parent 01557a5
commit 6f1d70e
Showing 1 changed file with 48 additions and 78 deletions.
diff --git a/demo.html b/demo.html
@@ -5,96 +5,66 @@
 -->
 <html>
 <head>
-  <title>trutek-header-panel-drawer</title>
+  <title>trutek-tri-drawer-panel</title>
 
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   <meta name="mobile-web-app-capable" content="yes">
   <meta name="apple-mobile-web-app-capable" content="yes">
 
-  <script src="./bower_components/platform/platform.js"></script>
+  <script src="../platform/platform.js"></script>
 
-  <link rel="import" href="../trutek-header-panel-drawer/header-panel-drawer.html">
-  <link rel="import" href="../../bower_components/core-header-panel/core-header-panel.html">
-  <link rel="import" href="../../bower_components/core-menu/core-menu.html">
-  <link rel="import" href="../../bower_components/core-item/core-item.html">
-
-  <link href="../../bower_components/paper-button/paper-button.html" rel="import">
+  <link rel="import" href="trutek-tri-drawer-panel.html">
 
   <style>
-
-    body {
-      font-family: sans-serif;
-    }
-
-   header-panel-drawer {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-    }
 
-	paper-button[raisedButton].colored {
-	font-size:.7em;
-      background: #4285f4;
-      color: #fff;
-    }
-    paper-button[raisedButton].colored.hover:hover {
-      background: #3367d6;
-    }
-    paper-button[raisedButton].colored::shadow #ripple {
-      color: #2a56c6;
-    }
-    paper-button[raisedButton].colored::shadow #focusBg {
-      background: #3367d6;
-    }
-
-	paper-button[raisedButton].advsearch {
-	font-size:.5em;
-      background: #4285f4;
-      color: #fff;
-    }
-    paper-button[raisedButton].advsearch.hover:hover {
-      background: #3367d6;
-    }
-    paper-button[raisedButton].advsearch::shadow #ripple {
-      color: #2a56c6;
-    }
-    paper-button[raisedButton].advsearch::shadow #focusBg {
-      background: #3367d6;
-    }
-
-
+      html, body {
+        height: 100%;
+      }
 
-  </style>
+      body {
+        font-family: sans-serif;
+        color: #FFF;
+        margin: 0;
+      }
+
+      [drawer] {
+        background-color: #B99588;
+        border-right: 1px solid #ccc;
+      }
+
+      [main] {
+        height: 100%;
+        background-color: #4F7DC9;
+      }
+
+      button {
+        display: none;
+        width: 160px;
+        height: 40px;
+        font-size: 16px;
+        margin: 8px;
+      }
+
+      trutek-tri-drawer-panel[narrow] button {
+        display: inline-block
+      }
+
+    </style>
+
+  </head>
 
-</head>
-
-<body unresolved>
-
-  <trutek-header-panel-drawer>
+  <body unresolved>
 
-    <core-header-panel navigation flex mode="seamed">
-	<core-toolbar style="background-color: #4d69ff; color: #fff;">
-	<div style="margin-left:auto;margin-right:10px;"><paper-button raisedButton class="colored hover" label="Login"></paper-button></div>
-	</core-toolbar>
-      <core-menu theme="core-light-theme">
-        <core-item icon="settings" label="item1"></core-item>
-        <core-item icon="settings" label="item2"></core-item>
-      </core-menu>
-    </core-header-panel>
+    <trutek-tri-drawer-panel>
 
-    <div tool>Title</div>
-	
-	<div searchAdvance style="margin-left:10px;margin-right:auto;float:right;">
-		
-	</div>
-	
-	<div userlogin style="margin-left:auto;margin-right:10px;"><paper-button raisedButton class="colored hover" label="Login"></paper-button></div>
+      <div drawer></div>
+        
+      <div main>
+        <button onclick="document.querySelector('trutek-tri-drawer-panel').togglePanel();">toggle drawer</button>
+      </div>
+      
+    </trutek-tri-drawer-panel>
 
-    <div>Content goes here...bower version</div>
-
-  </trutek-header-panel-drawer>
-
-</body>
+  </body>
 </html>
+