From 9d4866b22ff0f098cbbd3c2acdd3624b991ef175 Mon Sep 17 00:00:00 2001 From: lightningtgc Date: Tue, 3 Mar 2015 11:25:59 +0800 Subject: [PATCH] Update demo --- demo/index.html | 55 +++++++++++++++++++++++++++------------- demo/styles/css/demo.css | 37 +++++++++++++++++++++------ demo/type1.html | 28 +++++++++++--------- package.json | 5 ++-- 4 files changed, 86 insertions(+), 39 deletions(-) diff --git a/demo/index.html b/demo/index.html index e47485c..285fc6a 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,20 +5,21 @@ Material Design swipe to refresh - + - Fork me on GitHub - -
+
+ Fork me on GitHub

Intro

@@ -39,15 +40,13 @@

Type1: Above surface (default)

You can try it in mobile browser or webview by scanning the following QR code:

- QR + QR

URL: http://lightningtgc.github.io/material-refresh/type1.html

Type2: Below surface

- Below surface Below surface

Source code:

@@ -64,8 +63,7 @@

You can try it in chrome device mode or other mobile emulator.

Similarly, try it in mobile browser or webview by scanning the following QR code:

- QR + QR

URL: http://lightningtgc.github.io/material-refresh/index.html

@@ -99,26 +97,49 @@

More details

- + diff --git a/demo/styles/css/demo.css b/demo/styles/css/demo.css index 34d1495..9442199 100644 --- a/demo/styles/css/demo.css +++ b/demo/styles/css/demo.css @@ -49,6 +49,7 @@ a.no-border { margin-left: 2rem; } .rotate-btn { + display: inline-block; cursor:pointer; width: 25px; height: 25px; @@ -77,16 +78,18 @@ a.no-border { } #doRotate { position: relative; - float:right; - top:10px; - right:2rem; + float: right; + width: 6rem; + height: 100%; + text-align: center; + cursor:pointer; } .rotate-btn-wrapper { background-color: #02BBD3; color: white; text-align:center; height: 40px; - width: 90px; + width: 150px; line-height:40px; border-radius: 10px; cursor:pointer; @@ -94,14 +97,25 @@ a.no-border { } .demo-rotate-btn { position:relative; - top: 7px; - left: 35px; } .contents { position: relative; - top: 60px; + top: 50px; + left: 0; margin: 0 auto; - max-width: 800px; + max-width: 800px; + +} +@media screen and (max-width:700px){ + .contents { + position: absolute; + top: 60px; + left: 0; + right: 0; + bottom: 0; + /* -webkit-overflow-scrolling: touch; */ + overflow-y: scroll; + } } .demo-block { margin: 0 2rem; @@ -137,6 +151,13 @@ a.no-border { .demo-block .half-img { max-width: 340px; } +.demo-block .qr-img { + display: block; + margin:0 auto; + width: 300px; + height: 300px; + max-width:100%; +} @media screen and (min-width:600px){ .demo-block .half-img { width: 49%; diff --git a/demo/type1.html b/demo/type1.html index 4a7aaa0..f4f094f 100644 --- a/demo/type1.html +++ b/demo/type1.html @@ -5,11 +5,15 @@ Material Design swipe to refresh - +