Merge pull request #14 from adelq/develop

Basic templating

chart.svg

@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
-	<!ENTITY ns_svg "http://www.w3.org/2000/svg">
-	<!ENTITY ns_xlink "http://www.w3.org/1999/xlink">
-]>
-<svg  version="1.1" xmlns="&ns_svg;" xmlns:xlink="&ns_xlink;" width="216" height="216" viewBox="0 0 216 216"
-	 overflow="visible" enable-background="new 0 0 216 216" xml:space="preserve">
-<text transform="matrix(1 0 0 1 65.4502 16.3101)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="16">Daily Progress</text>
-<text transform="matrix(1 0 0 1 62.6401 212.4004)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="14">Day of the Week</text>
-<text transform="matrix(-6.123032e-017 -1 1 -6.123032e-017 10.7998 150.6201)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="14">Tasks Completed</text>
-<line fill="none" stroke="#000000" x1="68.15" y1="180" x2="68.15" y2="186"/>
-<line fill="none" stroke="#000000" x1="94.07" y1="180" x2="94.07" y2="186"/>
-<line fill="none" stroke="#000000" x1="120" y1="180" x2="120" y2="186"/>
-<line fill="none" stroke="#000000" x1="145.93" y1="180" x2="145.93" y2="186"/>
-<line fill="none" stroke="#000000" x1="171.85" y1="180" x2="171.85" y2="186"/>
-<path fill="none" stroke="#000000" d="M42.22,186v-6h155.56v6"/>
-<text transform="matrix(1 0 0 1 36.6602 198)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">M</text>
-<text transform="matrix(1 0 0 1 62.5898 198)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">T</text>
-<text transform="matrix(1 0 0 1 88.5098 198)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">W</text>
-<text transform="matrix(1 0 0 1 114.4404 198)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">Th</text>
-<text transform="matrix(1 0 0 1 140.3701 198)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">F</text>
-<text transform="matrix(1 0 0 1 166.29 198)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">S</text>
-<text transform="matrix(1 0 0 1 192.2197 198)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">Su</text>
-<line fill="none" stroke="#000000" x1="36" y1="145.33" x2="30" y2="145.33"/>
-<line fill="none" stroke="#000000" x1="36" y1="116.44" x2="30" y2="116.44"/>
-<line fill="none" stroke="#000000" x1="36" y1="87.56" x2="30" y2="87.56"/>
-<line fill="none" stroke="#000000" x1="36" y1="58.67" x2="30" y2="58.67"/>
-<path fill="none" stroke="#000000" d="M30,29.78h6v144.44h-6"/>
-<text transform="matrix(-6.123032e-017 -1 1 -6.123032e-017 25.2002 177)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">0</text>
-<text transform="matrix(-6.123032e-017 -1 1 -6.123032e-017 25.2002 148.1104)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">2</text>
-<text transform="matrix(-6.123032e-017 -1 1 -6.123032e-017 25.1997 119.2197)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">4</text>
-<text transform="matrix(-6.123032e-017 -1 1 -6.123032e-017 25.1997 90.3398)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">6</text>
-<text transform="matrix(-6.123032e-017 -1 1 -6.123032e-017 25.2002 61.4502)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">8</text>
-<text transform="matrix(-6.123032e-017 -1 1 -6.123032e-017 25.1997 35.3398)" font-family="'Helvetica Neue', Helvetica, Arial, sans-serif" font-size="10">10</text>
-<rect x="42.22" y="130.89" fill="#5cb85c" stroke="#398439" width="25.93" height="43.33"/>
-<rect x="68.15" y="130.89" fill="#5cb85c" stroke="#398439" width="25.93" height="43.33"/>
-<rect x="94.07" y="58.66" fill="#d9534f" stroke="#ac2925" width="25.93" height="115.56"/>
-<rect x="120" y="29.78" fill="#d9534f" stroke="#ac2925" width="25.93" height="144.44"/>
-<rect x="145.93" y="102" fill="#f0ad4e" stroke="#d58512" width="25.931" height="72.22"/>
-<rect x="171.85" y="145.33" fill="#5cb85c" stroke="#398439" width="25.931" height="28.89"/>
-</svg>

client/main.coffee

@@ -1,5 +1,5 @@
-Session.setDefault("filter", "everything")
-Session.setDefault("sort", "auto")
+Session.setDefault("filter", "Uncompleted")
+Session.setDefault("sortby", "Auto")
 
 Template.todos.tasks = ->
   Tasks.find()

client/views/ui/filters.coffee

@@ -0,0 +1,7 @@
+Template.filters.events
+  'click li': (e) ->
+    e.preventDefault()
+    Session.set('filter', e.target.text)
+
+Template.filters.helpers
+  'filter': -> Session.get('filter')

client/views/ui/filters.html

@@ -1,6 +1,6 @@
 <template name="filters">
 	<div class="col-xs-6 text-left dropdown">
-		<a href="#" data-toggle="dropdown">Filter: Uncompleted</a>
+		<a href="#" data-toggle="dropdown">Filter: {{ filter }}</a>
 		<ul class="dropdown-menu" role="menu" arial-labelledby="dLabel">
 			<li><a href="#">Uncompleted</a></li>
 			<li><a href="#">Not in my lists</a></li>

client/views/ui/sortby.coffee

@@ -0,0 +1,7 @@
+Template.sortBy.events
+  'click li': (e) ->
+    e.preventDefault()
+    Session.set('sortby', e.target.text)
+
+Template.sortBy.helpers
+  'sortby': -> Session.get('sortby')

client/views/ui/sortby.html

@@ -1,6 +1,6 @@
 <template name="sortBy">
   <div class="col-xs-6 text-right dropdown">
-    <a href="#" data-toggle="dropdown">Sort by: Auto</a>
+    <a href="#" data-toggle="dropdown">Sort by: {{ sortby }}</a>
     <ul class="dropdown-menu pull-right" role="menu">
       <li><a href="#">Auto</a></li>
       <li><a href="#">Manual</a></li>

style.css

@@ -1,105 +0,0 @@
-body {
-	padding-top: 60px;
-	/* background-color: #eee; */
-}
-.form-group {
-	display: block !important;
-}
-.list-group-item {
-	padding: 5px 10px 5px 10px;
-}
-.nav .btn {
-	color: #fff;
-	background-color: #474949;
-	border-color: #323333;
-}
-.nav .btn-default:hover, .nav .btn-default:focus, .nav .btn-default:active, .nav .btn-default.active {
-	background-color: #3a3c3c;
-	border-color: #2e2f2f;
-}
-.navbar-collapse .navbar-nav.navbar-right:last-child {
-	margin-right: 0;
-}
-#signin {
-	width: 100%;
-}
-.profile img {
-	position: absolute;
-	height: 48px;
-	width: 48px;
-}
-.profile h4 {
-	padding: 13px 0 10px 60px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-}
-#filters hr {
-	margin-top: 15px;
-	margin-bottom: 5px;
-}
-#addTaskInput {
-	width: 100%;
-}
-#addTaskInput input {
-	width: 75%;
-}
-#addTaskInput button {
-	width: 24%;
-}
-.tasksHeading {
-	padding-bottom: 10px;
-}
-.taskListItem {
-	padding: 8px 0 8px 5px;
-	border-bottom: 1px solid #d3d7cf;
-}
-.completeBox {
-	height: 28px;
-	width: 28px;
-	position: absolute;
-	margin-top: 5px;
-	border: 3px solid #00a5e6;
-	-moz-border-radius: 25%;
-	border-radius: 25%;
-}
-.taskRowTop {
-	padding-left: 45px;
-	cursor: pointer;
-}
-.taskRowBottom {
-	padding: 1px 0 1px 45px;
-}
-@media (max-width: 768px) {
-	#filters hr {
-		margin-top: 2px;
-		margin-bottom: 10px;
-	}
-	#signin {
-		width: 90%;
-	}
-	#addTaskInput input {
-		width: 100%;
-		margin-bottom: 15px;
-	}
-	#addTaskInput button {
-		width: 100%;
-	}
-	.navbar-brand {
-		display: block;
-		float: none;
-		padding: 15px;
-		max-width: 200px;
-		margin: 0 auto;
-		text-align: center;
-	}
-}
-@media (max-width: 480px) {
-	#filters {
-		display: none;
-	}
-	.tasksHeading {
-		text-align: center;
-		margin-top: 5px;
-	}
-}