Merge pull request #54 from christianbundy/revamp-design

Rewrite header and organize template

client/lib/style.less

@@ -11,46 +11,6 @@ body {
   background-color: hsl(210, 20%, 98%);
 }
 
-.faded {
-  opacity: 0.5;
-}
-
-.main {
-  padding: 0;
-  background-color: #fefefe;
-}
-
-.content {
-  padding: 0;
-}
-
-a {
-  &:hover {
-    text-decoration: none;
-      color: #60ACF0;
-  }
-}
-
-.downvote {
-  &:hover {
-    color: #FF5100;
-  }
-}
-
-.upvote {
-  &:hover {
-    color: #007FFF;
-  }
-}
-
-.upvoted {
-  color: #007FFF;
-}
-
-.downvoted {
-  color: #FF5100;
-}
-
-.container, .container-fluid {
-  padding: 0;
+a:hover {
+  text-decoration: none;
 }

client/views/feed/feed.html

@@ -1,5 +1,7 @@
 <template name="feed">
-  {{#each posts}}
-    {{> post}}
-  {{/each}}
+  <div class="feed">
+    {{#each posts}}
+      {{> post}}
+    {{/each}}
+  </div>
 </template>

client/views/footer/footer.html

@@ -1,14 +1,9 @@
 <template name="footer">
   <div class="footer">
-    <p class="faded">
-      <a href="https://github.com/fraction/fraction/releases/tag/v{{version}}">v{{version}}</a>
-      <span class="pull-right">
-        <a href="https://github.com/fraction/fraction">Code</a>
-        •
-        <a href="http://blog.fraction.io">Blog</a>
-        •
-        <a href="http://eepurl.com/PS9SD">Subscribe</a>
-      </span>
-    </p>
+      <p>
+        You're previewing Fraction <a href="https://github.com/fraction/fraction/releases/tag/v{{version}}">v{{version}}</a>.
+        <br />
+        Please read our <a href="http://blog.fraction.io">blog</a>, follow our <a href="http://twitter.com/GetFraction">tweets</a>, and sign up for the <a href="http://eepurl.com/PS9SD">launch email</a>. Thank you!
+      </p>
   </div>
 </template>

client/views/footer/footer.less

@@ -1,3 +1,5 @@
 .footer {
+  opacity: 0.5;
   padding: 2rem 2rem 1rem 2rem;
+  text-align: center;
 }

client/views/header/header.html

@@ -1,10 +1,25 @@
 <template name="header">
   <div class="header">
-        <h1 class="title"><a href="/">Fraction</a></h1>
-        <ul class="menu nav nav-pills">
-          {{#each links}}
-            <li><a href="/{{url}}">{{text}}</a></li>
-          {{/each}}
-        </ul>
+    <nav class="navbar navbar-inverse" role="navigation">
+      <div class="container">
+        <div class="navbar-header">
+          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-9">
+            <span class="sr-only">Toggle navigation</span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+            <span class="icon-bar"></span>
+          </button>
+          <a class="navbar-brand" href="/">F<span class="hidden-xs">raction</span></a>
+          <div class="current-view">{{currentView}}</div>
+        </div>
+        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-9">
+          <ul class="nav navbar-nav navbar-right">
+            {{#each links}}
+              <li><a href="/{{url}}">{{text}}</a></li>
+            {{/each}}
+          </ul>
+        </div>
+      </div>
+    </nav>
   </div>
 </template>

client/views/header/header.less

@@ -1,60 +1,39 @@
 .header {
-  border-bottom: 2px solid #F9FAFB;
-}
 
-.title {
-  margin-top: 0;
-  margin-bottom: 0;
-  display: inline-block;
-  a {
-  margin: 0;
-  font-weight: bold;
-  color: hsl(206, 15%, 31%);
-  font-size: 2rem;
-  margin: 2rem;
-  float: left;
-  display: inline-block;
-  padding-right: 0;
-    &:hover {
-      color: hsl(206, 15%, 31%);
-    }
-  }
-  .post-btn {
-    margin-top: 28px;
-    margin-right: 30px;
-    float: right;
+  nav {
+    border-radius: 0;
+    background-color: #303540;
+    margin-bottom: 0;
   }
-}
 
-.menu {
-  margin: 2rem;
-  padding-left: 0;
-  float: right;
-  li > a {
-    font-size: 1rem;
-    padding-top: 0.5rem;
-    padding-bottom: 0.5rem;
-    &:hover {
-      background-color: white;
-    }
+  .navbar-brand {
+    color: #F9FAFB;
+    font-weight: bold;
   }
-}
-
 
-@media only screen and (max-width: 767px) {
-  .title > a {
-    margin: 1rem;
+  .navbar ul > li > a {
+    color: #F9FAFB;
   }
 
-  .menu {
-    margin: 1rem;
+  .navbar-toggle {
+    background-color: #303540;
+    border: 0;
+    &:hover, &:active, &:focus {
+      background-color: #303540;
+    }
   }
 
-  .title a {
-    font-size: 1.5rem;
-  }
-  .menu li > a {
-      padding-top: 0.15rem;
-      padding-bottom: 0.35rem;
+  // todo: remove magic numbers
+  .current-view {
+    position: absolute;
+    height: 50px;
+    width: 200px;
+    margin-left: -100px;
+    top: 1rem;
+    font-size: 1.2rem;
+    left: 50%;
+    color: #DDE0E6;
+    text-align: center;
+    overflow: hidden;
   }
 }

client/views/index/index.html

@@ -10,13 +10,6 @@
 </body>
 
 <template name="index">
-  <div class="container-fluid">
-    <div class="main col-xs-12 col-md-10 col-md-offset-1 col-lg-8 col-lg-offset-2">
-      {{>header}}
-      <div class="content">
-      {{yield}}
-      {{>footer}}
-      </div>
-    </div>
-  </div>
+  {{>header}}
+  {{>wrapper}}
 </template>

client/views/main/main.html

@@ -0,0 +1,8 @@
+<template name="main">
+  <div class="wrapper container">
+    <div class="content">
+      {{yield}}
+    </div>
+    {{>footer}}
+  </div>
+</template>

client/views/newPost/newPost.html

@@ -1,8 +1,5 @@
 <template name="newPost">
   <div class="entry col-md-4 col-md-offset-4">
-      <div class="email-option">
-        <h3>New Post</h3>
-      </div>
       <form class="entry-form">
         <div class="form-group">
           <input autofocus="" name="title" type="text" class="title form-control" value="" placeholder="Title">

client/views/user/user.html

@@ -1,7 +1,4 @@
 <template name="user">
-  <div class="user-profile-name">
-    {{username}}
-  </div>
   {{#each posts}}
     {{> post}}
   {{/each}}

client/views/wrapper/wrapper.html

@@ -0,0 +1,8 @@
+<template name="wrapper">
+  <div class="wrapper container">
+    <div class="content">
+      {{yield}}
+    </div>
+    {{>footer}}
+  </div>
+</template>

client/views/wrapper/wrapper.less

@@ -0,0 +1,5 @@
+.wrapper {
+  &.container {
+    padding: 0;
+  }
+}

shared/router.js

@@ -6,23 +6,40 @@ Router.map(function () {
   "use strict";
   this.route('newPost', {
     path:     '/new-post',
-    template: 'newPost'
+    template: 'newPost',
+    data: function () {
+      var templateData = {
+        currentView: 'New Post',
+        posts: Posts.find({username : this.params.username})
+      };
+      return templateData;
+    }
   });
+
   this.route('index', {
     path:     '/',
-    template: 'feed'
+    template: 'feed',
+    data: function () {
+      var templateData = {
+        currentView: 'Popular',
+      };
+      return templateData;
+    }
   });
+
   this.route('user', {
     path:     'user/:username',
     template: 'user',
     data: function () {
       var templateData = {
+        currentView: this.params.username,
         username: this.params.username,
         posts: Posts.find({username : this.params.username})
       };
       return templateData;
     }
   });
+
   this.route('comments', {
     path:     'comments/:id/*',
     template: 'comments'