tweak styles

app/controllers/workouts.coffee

@@ -18,7 +18,7 @@ class WorkoutsCreate extends Panel
   constructor: ->
     super
     @addButton('Back', @back)
-    @addButton('Create', -> @form.submit()).addClass('right')
+    @addButton('Create', @create).addClass('right')
     @active -> @render()
 
   render: ->
@@ -29,17 +29,18 @@ class WorkoutsCreate extends Panel
 
   create: (e) ->
     e.preventDefault()
-    data = @form.serializeForm()
-    item = new Workout(data)
-    if item.save()
-      @back()
-    else
-      @delay ->
-        alert(item.validate().capitalize())
+    item = Workout.create(@formData())
+    @back() if item
 
   back: ->
     @form.blur()
     @navigate('/workouts', trans: 'left')
+
+  formData: ->
+    type    = @form.find('[name=type]').val()
+    minutes = parseInt(@form.find('[name=minutes]').val())
+    date    = @form.find('[name=date]')[0].valueAsDate
+    {type: type, minutes: minutes, date: date}
 
 class WorkoutsList extends Panel
   title: 'Workouts'

app/models/workout.coffee

@@ -4,19 +4,14 @@ class Workout extends Spine.Model
   @configure 'Workout', 'type', 'minutes', 'date'
 
   @extend Spine.Model.Local
-
-  stringDate: (value) ->
-    @date = Date.parseDashString(value)
-
-  stringMinutes: (value) ->
-    @minutes = parseFloat(value)
-
+
   load: ->
     super
     @date = new Date(Date.parse(@date))
 
   validate: ->    
     return 'type required' unless @type
     return 'minutes required' unless @minutes
+    return 'date required' unless @date
 
 module.exports = Workout

app/views/workouts/form.eco

@@ -1,23 +1,32 @@
 <form>
-  <select name="type" size="1" required>
-    <option value="">Select workout type:</option>
-    <% for type in @types: %>
-      <option value="<%= type %>"><%= type.capitalize() %></option>
-    <% end %>
-  </select>
+  <label>
+    <span>Select type</span>
 
-  <select name="stringMinutes" size="1" required>
-    <option value="">Select minutes:</option>
-    <option value="5">5 minutes</option>
-    <option value="10">10 minutes</option>
-    <option value="15">15 minutes</option>
-    <option value="20">20 minutes</option>
-    <option value="30">30 minutes</option>
-    <option value="45">45 minutes</option>
-    <option value="60">1 hour</option>
-    <option value="120">2 hours</option>
-    <option value="180">3 hours</option>
-  </select>
+    <select name="type" size="1" required>
+      <% for type in @types: %>
+        <option value="<%= type %>"><%= type.capitalize() %></option>
+      <% end %>
+    </select>
+  </label>
 
-  <input name="stringDate" type="date" required value="<%= @today.toDashString() %>" max="<%= @today.toDashString() %>">
+  <label>
+    <span>Select minutes</span>
+
+    <select name="minutes" size="1" required>
+      <option value="5">5 minutes</option>
+      <option value="10">10 minutes</option>
+      <option value="15">15 minutes</option>
+      <option value="20">20 minutes</option>
+      <option value="30">30 minutes</option>
+      <option value="45">45 minutes</option>
+      <option value="60">1 hour</option>
+      <option value="120">2 hours</option>
+      <option value="180">3 hours</option>
+    </select>
+  </label>
+
+  <label>
+    <span>Select date</span>
+    <input name="date" type="date" required value="<%= @today.toDashString() %>" max="<%= @today.toDashString() %>">
+  </label>
 </form>

css/views/workouts.styl

@@ -10,16 +10,25 @@
 
     form
       margin: 10px
-      padding: 20px
       background: #FFF
       border: 1px solid #aeaeae
       border-radius(10px)
+      box-shadow(0, 1px 1px, rgba(0, 0, 0, 0.1))
+
+    label
+      display: block
+      border-bottom: 1px solid #aeaeae
+      font-size: 13px
+      padding: 15px
+
+      &:last-child
+        border-bottom: none
+
+      span::after
+        content: ':'
 
     select, input
       display: block
-      margin: 0 0 15px 0
       width: 100%
       font-size: 15px
-
-      &:last-child
-        margin-bottom: 0
+      margin: 5px 0 0 0

public/cache.manifest

@@ -1,8 +1,9 @@
 CACHE MANIFEST
-# v0.0.1
+# v0.0.2
 NETWORK:
 *
 CACHE:
 ./application.js
 ./application.css
-./index.html
+./index.html
+./images/loading.png

public/index.html

@@ -2,12 +2,7 @@
 <html manifest="cache.manifest">
 <head>
   <meta charset=utf-8>
-  <title>App</title>
-  <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1; maximum-scale=1.0; user-scalable=0;"/>
-  <meta name="apple-mobile-web-app-capable" content="yes" />
-  <meta name="format-detection" content="telephone=no" />
-  <link rel="apple-touch-startup-image" href="images/loading.png">
-
+  <title>Workout</title>
   <link rel="stylesheet" href="/application.css" type="text/css" charset="utf-8">
   <script src="/application.js" type="text/javascript" charset="utf-8"></script>
   <script type="text/javascript" charset="utf-8">
@@ -18,6 +13,13 @@
       exports.app = new App({el: $("body")});      
     });
   </script>
+
+  <meta name="viewport" content="width=device-width; initial-scale=1.0; minimum-scale=1; maximum-scale=1.0; user-scalable=0;"/>
+  <meta name="apple-mobile-web-app-capable" content="yes" />
+  <meta name="format-detection" content="telephone=no" />
+  <link rel="apple-touch-startup-image" href="images/loading.png">
+  <link rel="apple-touch-icon-precomposed" href="images/icons/appicon.png">
+  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="images/icons/appicon-x2.png">
 </head>
 <body>
 </body>