Date styles and updates home screen styles

4 files changed, 92 insertions, 27 deletions

diff --git a/client/button.js b/client/button.js
index 525bbbf..1cdf9bc 100644
--- a/client/button.js
+++ b/client/button.js
@@ -31,7 +31,12 @@ Template.dates.events({
 })
 
 Template.dates.helpers({
-  months: _.range(1, 13),
+  months: [
+    [{val: 1, name: 'Jan.'}, {val: 2, name: 'Feb.'}, {val: 3, name: 'March'}],
+    [{val: 4, name: 'Apr.'}, {val: 5, name: 'May'}, {val: 6, name: 'June'}],
+    [{val: 7, name: 'July'}, {val: 8, name: 'Aug.'}, {val: 9, name: 'Sept.'}],
+    [{val: 10, name: 'Oct.'}, {val: 11, name: 'Nov.'}, {val: 12, name: 'Dec.'}],
+  ],
   years: _.range(2012, 2016)
 })
 
diff --git a/client/colors.less b/client/colors.less
index 87fe959..8d403db 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -11,27 +11,74 @@ body {
         flex: 0 0 auto;
         h1 {
           color: #67C288;
-          font-size: 6em;
+          font-size: 3.5em;
           font-weight: bold;
         }
         h2 {
-          margin-top: 80px;
-          font-size: 3.3em;
+          margin: 30px 10px 0px 10px;
+          font-size: 2em;
           font-weight: bold;
         }
         button.login {
-          margin-top: 100px;
+          margin-top: 30px;
           color: #fff;
-          font-size: 2.8em;
+          font-size: 1.3em;
           background-color: #67C288;
           padding: 7px 35px;
           border: 0px;
-          line-height: 72px;
           &:hover, &:active {
             background-color: #5DA577;
           }
         }
       }
     }
+    div.dates-wrapper {
+      div.dates {
+        h2 {
+          color: #4589F7;
+          font-size: 3.3em;
+          font-weight: bold;
+          text-align: center;
+        }
+        form {
+          div.month-row {
+            padding: 40px;
+            label.radio-inline {
+              width: 90%;
+              text-align: center;
+              color: #333;
+              border: 1px solid #333;
+              padding: 9px;
+              font-size: 2.2em;
+            }
+            input[type="radio"] {
+              display: none;
+              &:checked + label.radio-inline {
+                color: #fff;
+                background-color: #4589F7;
+                border: 0px;
+              }
+            }
+          }
+          div.years {
+            margin-top: 40px;
+            text-align: center;
+            label.radio-inline {
+              color: #333;
+              padding: 9px;
+              font-size: 2.2em;
+            }
+            input[type="radio"] {
+              display: none;
+              &:checked + label.radio-inline {
+                color: #4589F7;
+                font-weight: bold;
+                border: 0px;
+              }
+            }
+          }
+        }
+      }
+    }
   }
 }
diff --git a/client/templates/dates.html b/client/templates/dates.html
index d4ff115..558ca2e 100644
--- a/client/templates/dates.html
+++ b/client/templates/dates.html
@@ -1,27 +1,42 @@
 <template name="dates">
-  <form class="dates">
-    <div class="form-group">
-      {{#each months}}
-        {{> month}}
-      {{/each}}
+  <div class="dates-wrapper">
+    <div class="dates">
+      <h2>Choose your month</h2>
+      <form class="dates">
+        <div class="form-group">
+          {{#each months}}
+            {{> row}}
+          {{/each}}
+        </div>
+        <div class="form-group">
+          <div class="years">
+            {{#each years}}
+              {{> year}}
+            {{/each}}
+          </div>
+        </div>
+        <button type="submit" class="dates btn btn-default">Start</button>
+      </form>
     </div>
-    <div class="form-group">
-      {{#each years}}
-        {{> year}}
-      {{/each}}
-    </div>
-    <button type="submit" class="dates btn btn-default">Start</button>
-  </form>
+  </div>
+</template>
+
+<template name="row">
+  <div class="row month-row">
+  {{#each this}}
+    {{> month}}
+  {{/each}}
+  </div>
 </template>
 
 <template name="month">
-  <label class="radio-inline">
-    <input type="radio" name="monthOptions" id="monthRadio{{this}}" value="{{this}}"> {{this}}
-  </label>
+  <div class="col-xs-4">
+    <input type="radio" name="monthOptions" id="monthRadio{{val}}" value="{{val}}">
+    <label class="radio-inline" for="monthRadio{{val}}">{{name}}</label>
+  </div>
 </template>
 
 <template name="year">
-  <label class="radio-inline">
-    <input type="radio" name="yearOptions" id="yearRadio{{this}}" value="{{this}}"> {{this}}
-  </label>
+  <input type="radio" name="yearOptions" id="yearRadio{{this}}" value="{{this}}">
+  <label class="radio-inline" for="yearRadio{{this}}">{{this}}</label>
 </template>
diff --git a/client/templates/layout.html b/client/templates/layout.html
index 2798e7d..9463db6 100644
--- a/client/templates/layout.html
+++ b/client/templates/layout.html
@@ -1,7 +1,5 @@
 <template name="layout">
   <div class="container page">
-    <!-- <button class="logout">logout</button>
-    <hr> -->
 {{> yield}}
   </div>
 </template>