Merge pull request #113 from christianbundy/master

Simplify comments

.gitignore

@@ -0,0 +1,2 @@
+
+settings/production.json

.meteor/packages

@@ -14,10 +14,10 @@ insecure
 fast-render
 iron-router-progress
 bootstrap3-less
-appcache
 power-queue
 reactive-list
 http
 feedparser
 npm
 lodash
+appcache

.meteor/release

@@ -1 +1 @@
-0.8.0.1
+0.8.1

client/comments/view/viewComment.html

@@ -1,14 +1,15 @@
 <template name="viewComment">
   {{#if text}}
-  <div class="nonvoted post" data-id="{{id}}">
+  <div class="nonvoted post comment" data-id="{{id}}">
     <div class="media">
-      <div href="#" class="pull-left">
-        {{>vote}}
-      </div>
+      {{#if currentUser}}
+        <div href="#" class="pull-left">
+          {{>vote}}
+        </div>
+      {{/if}}
       <div class="media-body">
-
-        <p class="caption">{{points}} points by {{author}} at <abbr title="{{created_at}}"><time datetime="{{created_at}}">{{created_at}}</time></abbr></p>
-        <p class="commentText">{{{text}}}</p>
+        <p class="author caption"><a href="/user/{{author}}"><i class="fa fa-user"></i> {{author}}</a></p>
+        <p class="commentText">{{{cleanText}}}</p>
       </div>
     </div>
   </div>
@@ -19,7 +20,3 @@
     </div>
   {{/each}}
 </template>
-
-<template name="upvoted">
-  nonvoted
-</template>

client/comments/view/viewComment.js

@@ -0,0 +1,7 @@
+Template.viewComment.helpers({
+  'cleanText' : function () {
+    "use strict";
+    // replace '\n' with a newline character
+    return this.text.replace(/\\n/g, "\n");
+  }
+});

client/comments/view/viewComment.less

@@ -1,4 +1,21 @@
+.comment {
+  .commentText {
+    margin-top: 0.5rem;
+    max-width: 35rem;
+
+    p {
+      margin-top: 0.5rem;
+    }
+  }
+
+  .commentAuthor {
+    margin-top: 0.2rem;
+    margin-bottom: 0;
+  }
+}
+
 .indent {
   padding-left: 1rem;
-  background-color: #F9FAFB;
+  background-color: white;
+  border-left: 3px solid #F9FAFB;
 }

client/global/index.html

@@ -2,5 +2,4 @@
   <title>Fraction</title>
   <link rel="icon" type="image/png" href="/img/favicon.png" />
   <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
-  <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
 </head>

client/global/sidebar/globalSidebar.html

@@ -0,0 +1,28 @@
+<template name="sidebar">
+  <div class="sidebar col-sm-2">
+    <a class="title" href="/"><img src="/img/logo.svg"> Fraction</a>
+    <ul class="list-group">
+      <li class="list-header list-group-item">
+        <i class="fa fa-sort"></i>
+        <strong>SORT </strong>
+      </li>
+        <a href="/hot" class="{{activeSort 'hot'}} list-group-item"><i class="fa fa-fire"></i> Hot</a>
+        <a href="/top/week" class="{{activeSort 'top'}} list-group-item"><i class="fa fa-star"></i> Top</a>
+        <a href="/recent" class="{{activeSort 'recent'}} list-group-item"><i class="fa fa-clock-o"></i> Recent</a>
+        <a href="/random" class="{{activeSort 'random'}} list-group-item"><i class="fa fa-random"></i> Random</a>
+      {{#if isSortTop}}
+        <li class="list-group-item"></li>
+        <li class="list-header list-group-item">
+          <i class="fa fa-calendar"></i>
+          <strong>TIME</strong>
+        </li>
+          <a class="{{activeTime 'hour'}} list-group-item" href="/{{sortType}}/hour">Hour</a>
+          <a class="{{activeTime 'day'}} list-group-item" href="/{{sortType}}/day">Day</a>
+          <a class="{{activeTime 'week'}} list-group-item" href="/{{sortType}}/week">Week</a>
+          <a class="{{activeTime 'month'}} list-group-item" href="/{{sortType}}/month">Month</a>
+          <a class="{{activeTime 'year'}} list-group-item" href="/{{sortType}}/year">Year</a>
+          <a class="{{activeTime 'ever'}} list-group-item" href="/{{sortType}}/ever">Ever</a>
+      {{/if}}
+    </ul>
+  </div>
+</template>

client/global/sidebar/globalSidebar.js

@@ -0,0 +1,37 @@
+Handlebars.registerHelper('activeTime', function(time) {
+  "use strict";
+
+  if (Session.equals('topTime', time)) {
+    return 'active';
+  } else {
+    return null;
+  }
+});
+
+
+Handlebars.registerHelper('activeSort', function(sort) {
+  "use strict";
+
+  if (Session.equals('sortType', sort)) {
+    return 'active';
+  } else {
+    return 'inactive';
+  }
+});
+
+Template.sidebar.helpers({
+  'isSortTop' : function () {
+    "use strict";
+
+    if (Session.equals('sortType', 'top')) {
+      return true;
+    } else {
+      return false;
+    }
+  },
+  'sortType' : function () {
+    "use strict";
+
+    return Session.get('sortType').toLowerCase();
+  }
+});

client/global/sidebar/globalSidebar.less

@@ -0,0 +1,49 @@
+@import "/client/global/style/variables.import.less";
+
+.sidebar {
+  background-color: hsl(210, 12%, 23%);
+  padding-left: 0;
+  padding-right: 0;
+
+  @media @sm {
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+  }
+
+  .title {
+    background-color: hsl(208, 70%, 52%); // todo: change to brand color
+    display: inline-block;
+    padding: 1rem;
+    color: white;
+    font-weight: 500;
+    font-size: 1rem;
+    width: 100%;
+    img {
+      margin-top: -0.25rem;
+      width: 2rem;
+    }
+  }
+
+  .list-group-item {
+    border-color: transparent;
+    background-color: hsl(210, 12%, 23%);
+    color: hsl(210, 16%, 76%);
+    &:hover {
+      background-color: hsl(210, 16%, 29%);
+    }
+  }
+
+  .list-header {
+    color: hsl(210, 6%, 54%);
+    &:hover {
+      background-color: hsl(210, 12%, 23%);
+    }
+  }
+
+  .list-group {
+    color: hsl(221%, 14%, 22%) !important;
+    background-color: hsl(210, 12%, 23%);
+  }
+}