Improved views for mobile

Author: syrusakbary

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)

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);
   }

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