Initial code dump

3 files changed, 87 insertions, 113 deletions

diff --git a/client/button.js b/client/button.js
index d67bbb6..81b70b3 100644
--- a/client/button.js
+++ b/client/button.js
@@ -195,9 +195,9 @@ Template.dates.events({
 
 Template.dates.helpers({
   months: [
-    [{val: 1, name: 'January'}, {val: 2, name: 'February'}, {val: 3, name: 'March'}, {val: 4, name: 'April'}],
-    [{val: 5, name: 'May'}, {val: 6, name: 'June'}, {val: 7, name: 'July'}, {val: 8, name: 'August'}],
-    [{val: 9, name: 'September'}, {val: 10, name: 'October'}, {val: 11, name: 'November'}, {val: 12, name: 'December'}],
+    {val: 1, name: 'January'}, {val: 2, name: 'February'}, {val: 3, name: 'March'}, {val: 4, name: 'April'},
+    {val: 5, name: 'May'}, {val: 6, name: 'June'}, {val: 7, name: 'July'}, {val: 8, name: 'August'},
+    {val: 9, name: 'September'}, {val: 10, name: 'October'}, {val: 11, name: 'November'}, {val: 12, name: 'December'},
   ],
   years: _.range(2012, 2016)
 })
diff --git a/client/colors.less b/client/colors.less
index f92f758..4faa9a5 100644
--- a/client/colors.less
+++ b/client/colors.less
@@ -84,83 +84,65 @@ body {
     }
     div.dates-wrapper {
       div.dates {
-        max-width: 700px;
-        margin: 0 auto;
-        margin-top: 85px;
-        h2 {
-          color: #2636F9;
-          font-size: 3.3em;
+        display: -webkit-flex;
+        display: flex;
+        -webkit-align-items: center;
+        align-items: center;
+        -webkit-justify-content: center;
+        justify-content: center;
+        .date {
+          height: 430px;
+          font-size: 16em;
           font-weight: bold;
-          text-align: center;
+          color: black;
+          display: inline-block;
+          height: 414px;
+          margin-top: 60px;
         }
-        form {
-          margin-top: 65px;
-          div.month-row {
-            display: -webkit-flex;
-            display: flex;
-            -webkit-justify-content: center;
-            justify-content: center;
-            div.month-button {
-              -webkit-flex-grow: 1;
-              flex-grow: 1;
-              text-align: center;
-              label.radio-inline {
-                text-align: center;
-                color: #999;
-                padding: 10px;
-                font-size: 1.2em;
-                width: 160px;
-                border: 1px #999 solid;
-                margin-bottom: 20px;
-              }
-              input[type="radio"] {
-                display: none;
-                &:checked + label.radio-inline {
-                  color: #fff;
-                  background-color: #2636F9;
-                  border: 0px;
-                }
-              }
-            }
-          }
-          div.years {
-            margin-top: 20px;
-            text-align: center;
-            label.radio-inline {
-              color: #999;
-              padding: 9px 40px;
-              font-size: 1.6em;
-            }
-            input[type="radio"] {
-              display: none;
-              &:checked + label.radio-inline {
-                color: #2636F9;
-                font-weight: bold;
-              }
-            }
-          }
-          div.next {
-            text-align: center;
-            div.error {
-              color: #2636F9;
-              width: 400px;
-              margin: 0 auto;
-              margin-top: 30px;
-            }
-            button.dates {
-              font-size: 1.2em;
-              width: 130px;
-              margin-top: 20px;
-              color: #2636F9;
-              padding: 7px 35px;
-              background-color: white;
-              border: 1px #2636F9 solid;
-              &:hover, &:active {
-                color: white;
-                background-color: #2636F9;
-              }
-            }
-          }
+
+        .month-wrapper {
+          overflow: scroll;
+          float: left;
+          height: 410px;
+          position: relative;
+          width: 420px;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        .all-months {
+          position: absolute;
+          top:0;
+        }
+
+        .slash {
+          float:left;
+        }
+
+        .year-wrapper {
+          overflow: scroll;
+          float: left;
+          height: 410px;
+          position: relative;
+          width: 420px;
+          -webkit-overflow-scrolling: touch;
+        }
+
+        .all-years {
+          position: absolute;
+          top:0;
+        }
+
+        .month {
+          height: 410px;
+          overflow: hidden;
+          width: 390px;
+          text-align: right;
+        }
+
+        .year {
+          height: 410px;
+          overflow: hidden;
+          width: 390px;
         }
       }
     }
diff --git a/client/templates/dates.html b/client/templates/dates.html
index 2b16a5c..7e277c5 100644
--- a/client/templates/dates.html
+++ b/client/templates/dates.html
@@ -1,45 +1,37 @@
 <template name="dates">
   <div class="dates-wrapper">
     <div class="dates">
-      <h2>Choose a month and a year</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 class="date">
+        <div class="month-wrapper">
+          <div class="all-months">
+            <div class="month">01</div>
+            <div class="month">02</div>
+            <div class="month">03</div>
+            <div class="month">04</div>
+            <div class="month">05</div>
+            <div class="month">06</div>
+            <div class="month">07</div>
+            <div class="month">08</div>
+            <div class="month">09</div>
+            <div class="month">10</div>
+            <div class="month">11</div>
+            <div class="month">12</div>
           </div>
         </div>
-        <div class="next">
-          <div class="error" style="display: none;">Apparently you don't have enough photos to create a statistic from, please choose another month and try again</div>
-          <button type="submit" class="dates" style="display: none;">Start</button>
+        <div class="slash">/</div>
+        <div class="year-wrapper">
+          <div class="all-years">
+            <div class="year">12</div>
+            <div class="year">13</div>
+            <div class="year">14</div>
+            <div class="year">15</div>
+          </div>
         </div>
+      </div>
+      <form class="date-form">
+        <input type="hidden" name="month" id="month" value="01">
+        <input type="hidden" name="year" id="year" value="15">
       </form>
     </div>
   </div>
 </template>
-
-<template name="row">
-  <div class="month-row">
-  {{#each this}}
-    {{> month}}
-  {{/each}}
-  </div>
-</template>
-
-<template name="month">
-  <div class="month-button">
-    <input type="radio" class="monthOptions" name="monthOptions" id="monthRadio{{val}}" value="{{val}}">
-    <label class="radio-inline" for="monthRadio{{val}}">{{name}}</label>
-  </div>
-</template>
-
-<template name="year">
-  <input type="radio" class="yearOptions" name="yearOptions" id="yearRadio{{this}}" value="{{this}}">
-  <label class="radio-inline" for="yearRadio{{this}}">{{this}}</label>
-</template>