Merge pull request #21 from Mango/fix-back-to-top-5

Fix back to top - #5

Author: impronunciable

README.md

@@ -50,7 +50,6 @@ First of all, you'll need to create your markup. You should have a menu (`#menu`
 Add the Slideout.js styles (index.css) in your web application.
 
 ```css
-html,
 body {
   width: 100%;
   height: 100%;
@@ -75,7 +74,8 @@ body {
 }
 
 .slideout-open,
-.slideout-open body {
+.slideout-open body,
+.slideout-open .slideout-panel {
   overflow: hidden;
 }
 

index.css

@@ -1,4 +1,3 @@
-html,
 body {
   width: 100%;
   height: 100%;
@@ -23,7 +22,8 @@ body {
 }
 
 .slideout-open,
-.slideout-open body {
+.slideout-open body,
+.slideout-open .slideout-panel {
   overflow: hidden;
 }
 

package.json

@@ -3,7 +3,7 @@
   "repository": "git@github.com:mango/slideout.git",
   "description": "A touch slideout navigation menu for your mobile web apps.",
   "author": "Guille Paz <guille87paz@gmail.com>",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "scripts": {
     "build": "node browserify.js",
     "test": "npm run build && node_modules/.bin/_mocha",

test/index.html

@@ -34,24 +34,55 @@ <h3 class="menu-section-title">Docs</h3>
           <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
         </ul>
       </section>
-    </nav>
 
-    <main id="panel" class="panel">
+      <section class="menu-section">
+        <h3 class="menu-section-title">Docs</h3>
+        <ul class="menu-section-list">
+          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
+          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
+          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
+          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
+        </ul>
+      </section>
 
-      <header class="panel-header">
-        <button class="btn-hamburger js-slideout-toggle"></button>
-        <h1 class="title">Slideout.js</h1>
-      </header>
+      <section class="menu-section">
+        <h3 class="menu-section-title">Docs</h3>
+        <ul class="menu-section-list">
+          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
+          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
+          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
+          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
+        </ul>
+      </section>
 
-      <section class="box">
-        <h2 class="box-title">Test</h2>
-        <div id="mocha" class="box-content"></div>
+      <section class="menu-section">
+        <h3 class="menu-section-title">Docs</h3>
+        <ul class="menu-section-list">
+          <li><a href="https://github.com/mango/slideout#installation" target="_blank">Installation</a></li>
+          <li><a href="https://github.com/mango/slideout#usage" target="_blank">Usage</a></li>
+          <li><a href="https://github.com/mango/slideout#api" target="_blank">API</a></li>
+          <li><a href="https://github.com/mango/slideout#npm-scripts" target="_blank">npm-scripts</a></li>
+        </ul>
       </section>
+    </nav>
+
+    <div class="slideout-wrapper">
+      <main id="panel" class="panel">
+        <header class="panel-header">
+          <button class="btn-hamburger js-slideout-toggle"></button>
+          <h1 class="title">Slideout.js</h1>
+        </header>
+
+        <section class="box">
+          <h2 class="box-title">Test</h2>
+          <div id="mocha" class="box-content"></div>
+        </section>
 
-      <footer class="panel-footer">
-        <p>with <span class="heart">❤</span> by <a href="https://getmango.com/en" target="_blank">Mango</a></p>
-      </footer>
-    </main>
+        <footer class="panel-footer">
+          <p>with <span class="heart">❤</span> by <a href="https://getmango.com/en" target="_blank">Mango</a></p>
+        </footer>
+      </main>
+    </div>
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/mocha/1.13.0/mocha.min.js"></script>
     <script>