working on mobile version

packages/nova-base-components/lib/posts/PostsViews.jsx

@@ -1,6 +1,6 @@
 import React, { PropTypes, Component } from 'react';
 import Router from '../router.js';
-import { Button, ButtonGroup } from 'react-bootstrap';
+import { Button, ButtonGroup, DropdownButton, MenuItem } from 'react-bootstrap';
 
 const PostsViews = (props, context) => {
 
@@ -17,10 +17,21 @@ const PostsViews = (props, context) => {
   
   return (
     <div className="post-views">
+      {/*
       <ButtonGroup>
         {views.map(view => <Button className={currentRoute.route.name === "posts.list" && currentView === view ? "post-view-active" : "post-view-inactive"} bsStyle="default" key={view} href={Router.extendPathWithQueryParams("posts.list", {}, {view: view})}>{Telescope.utils.capitalise(view)}</Button>)}
       </ButtonGroup>
       <Button bsStyle="default" href={Router.path("posts.daily")} className={currentRoute.route.name === "posts.daily" ? "post-view-active" : "post-view-inactive"} >Daily</Button>
+      */}
+      <DropdownButton 
+        bsStyle="default" 
+        className="views btn-secondary" 
+        title="View" 
+        id="views-dropdown"
+      >
+        {views.map(view => <MenuItem key={view} href={Router.extendPathWithQueryParams("posts.list", {}, {view: view})} className={currentRoute.route.name === "posts.list" && currentView === view ? "dropdown-item post-view-active" : "dropdown-item post-view-inactive"}>{Telescope.utils.capitalise(view)}</MenuItem>)}
+        <MenuItem href={Router.path("posts.daily")} className={currentRoute.route.name === "posts.daily" ? "dropdown-item post-view-active" : "dropdown-item post-view-inactive"} >Daily</MenuItem>
+      </DropdownButton>
     </div>
   )
 }

packages/nova-base-styles/lib/stylesheets/_header.scss

@@ -13,6 +13,9 @@
 }
 
 .logo{
+  @include small{
+    text-align: center;
+  }
   @include medium-large{
     display: flex;
     align-items: baseline;
@@ -30,11 +33,21 @@
 
 .nav{
   @include flex-center;
-  .nav-user{
-    margin-right: $hmargin;
+  @include small{
+    border-top: 1px solid $medium-grey;
+    margin-top: $vmargin;
+    padding-top: $vmargin;
+    justify-content: space-between;
+  }
+  @include medium-large{
+    .nav-user{
+      margin-right: $hmargin;
+    }
   }
   .nav-new-post{
+    @include small{
 
+    }
   }
 }
 

packages/nova-base-styles/lib/stylesheets/_posts.scss

@@ -16,14 +16,28 @@
     margin: 0 auto;
     margin-bottom: $vmargin;
     text-align: center;
+    .btn-group{
+      margin-right: 0;
+      width: 100%;
+    }
+    .dropdown-toggle{
+      width: 100%;
+    }
   }
 }
 
 .post-views{
   @include small{
     margin-bottom: $vmargin;
+    .btn-group{
+      margin-right: 0;
+      width: 100%;
+    }
+    .dropdown-toggle{
+      width: 100%;
+    }
   }
-  a{
+  a.btn{
     @include border;
     // @include border-radius;
     // padding: 3px 5px;