update demos

Broltes · Jun 10, 2016 · 308b4fb · 308b4fb
1 parent a96d52a
commit 308b4fb
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -74,9 +74,15 @@ var App = React.createClass({
         }
 
         return (
-            <Tloader className="view" onRefresh={refresh} onLoadMore={loadMore} hasMore={hasMore} initializing={initializing}>
-                <ul>{list}</ul>
-            </Tloader>
+            <div className="view">
+                <h1>react-touch-loader</h1>
+
+                <Tloader className="main" onRefresh={refresh} onLoadMore={loadMore} hasMore={hasMore} initializing={initializing}>
+                    <ul>{list}</ul>
+                </Tloader>
+
+                <h2><a href="https://github.com/Broltes/react-touch-loader">view source</a></h2>
+            </div>
         );
     }
 });

diff --git a/demos/app.jsx b/demos/app.jsx
@@ -51,22 +51,25 @@ var App = React.createClass({
         var list = [];
 
         if(listLen) {
-            list.push(<li key="t"><p>{refreshedAt.toString().substr(7)}</p></li>);
-
             for(var i = 0; i < listLen; i++){
                 list.push(
                     <li key={i}>
                         <p>{i}</p>
-                        <img src="cover.jpg"/>
                     </li>
                 );
             }
         }
 
         return (
-            <Tloader className="view" onRefresh={refresh} onLoadMore={loadMore} hasMore={hasMore} initializing={initializing}>
-                <ul>{list}</ul>
-            </Tloader>
+            <div className="view">
+                <h1>react-touch-loader {refreshedAt.toString().substr(7)}</h1>
+
+                <Tloader className="main" onRefresh={refresh} onLoadMore={loadMore} hasMore={hasMore} initializing={initializing}>
+                    <ul>{list}</ul>
+                </Tloader>
+
+                <h2><a href="https://github.com/Broltes/react-touch-loader">view source</a></h2>
+            </div>
         );
     }
 });

diff --git a/demos/app.less b/demos/app.less
@@ -1,50 +1,63 @@
+html,body{
+    margin: 0;
+    padding: 0;
+}
 body {
     font-family: "Helvetica Neue",Helvetica,"STHeitiSC-Light","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
     text-align: center;
-    padding: 0 2em;
-    -webkit-tap-highlight-color: rgba(0,0,0,0);// disable tap highlight on android
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
 }
 :focus {
   outline: none;
 }
 :not(input):not(textarea):not([contenteditable]) {
-  -webkit-touch-callout: none;// 禁止长按呼出菜单
-  user-select: none;// 禁止文本选择
+  -webkit-touch-callout: none;
+  user-select: none;
 }
 
-#app {
+.view{
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 100%;
     overflow: hidden;
-}
-
-.view{
-    height: 100%;
     background-color: #EFEFF4;
-    overflow-x: hidden;
-    overflow-y: scroll;
-    -webkit-overflow-scrolling: touch;// enhance ios scrolling
+    display: flex;
+    flex-direction: column;
 
-    img{
-        width: 100%;
-        display: block;
+    // header, footer
+    h1, h2{
+        margin: 0;
+        background-color: #333;
+        color: #eee;
+        font-size: 1em;
+        line-height: 3;
+
+        a{
+            color: inherit;
+        }
     }
 
-    ul{
-        list-style: none;
-        margin: 0;
-        padding: 0;
+    .main{
+        flex: 1;
+        overflow-x: hidden;
+        overflow-y: scroll;
+        -webkit-overflow-scrolling: touch;// enhance ios scrolling
+
+        ul{
+            list-style: none;
+            margin: 0;
+            padding: 0;
 
-        li{
-            margin-bottom: .5em;
-            background-color: #fff;
+            li{
+                background-color: #fff;
+                border-bottom: 1px solid #ccc;
 
-            p{
-                margin: 0;
-                line-height: 3em;
+                p{
+                    margin: 0;
+                    line-height: 3em;
+                }
             }
         }
     }

diff --git a/demos/cover.jpg b/demos/cover.jpg
diff --git a/demos/index.html b/demos/index.html
@@ -7,8 +7,6 @@
     <meta name="format-detection" content="telephone=no" />
 </head>
 <body ontouchstart>
-    <h1>react-touch-loader</h1>
     <div id="app"></div>
-    <h2><a href="https://github.com/Broltes/react-touch-loader">view source</a></h2>
 </body>
 </html>