From bf5746b88bf195959f10447416d94d176199451f Mon Sep 17 00:00:00 2001
From: Syrus Akbary <me@syrusakbary.com>
Date: Sat, 28 Nov 2015 00:19:54 -0800
Subject: [PATCH] Improved views for mobile

---
 docs/css/main.styl           | 8 ++++++++
 docs/pages/docs/_template.js | 1 +
 docs/pages/index.md          | 2 +-
 3 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/docs/css/main.styl b/docs/css/main.styl
index 0fafdf5e..65244342 100644
--- a/docs/css/main.styl
+++ b/docs/css/main.styl
@@ -207,6 +207,10 @@ html, body
   opacity 0
   position absolute
 
+.starwars-example-wrapper
+  +below(600px)
+    margin-bottom 30px
+
 .starwars-example
   background: #3C3C3C
   display inline-block
@@ -237,6 +241,9 @@ html, body
     transform translateY(-3px)
     box-shadow 0px 4px 8px 0px rgba(0,0,0,0.32)
 
+  +below(600px)
+    top -70px
+
 .improve-document-link
   position fixed
   right 0
@@ -390,6 +397,7 @@ $title
     display none
 
 .docs-aside-navselect
+  margin-top -18px
   display none
   width 100%
   +below(600px)
diff --git a/docs/pages/docs/_template.js b/docs/pages/docs/_template.js
index 507b9a79..856a9c20 100644
--- a/docs/pages/docs/_template.js
+++ b/docs/pages/docs/_template.js
@@ -4,6 +4,7 @@ import _  from 'lodash';
 
 class Template extends React.Component {
   goToPage(event) {
+    event.target.blur();
     var page = event.target.value;
     this.context.router.transitionTo(page);
   }
diff --git a/docs/pages/index.md b/docs/pages/index.md
index 880dc27c..778e5225 100644
--- a/docs/pages/index.md
+++ b/docs/pages/index.md
@@ -1,7 +1,7 @@
 ---
 path: /
 ---
-<div><a class="starwars-example" href="http://swapi.graphene-python.org/">Check our Django Starwars API example!</a></div>
+<div class="starwars-example-wrapper"><a class="starwars-example" href="http://swapi.graphene-python.org/">Check our Django Starwars API example!</a></div>
 
 ## Meet Graphene