Commit 720fad8

@@ -1,43 +1,40 @@
 {{#if clock}}
-  <div class="callout {{alertStatus}}">
-    <p class="text-center"> {{message}} </p>
-    <p class="text-center"> Rest Clock: {{clock}} </p>
+  <div class="columns">
+    <div class="column is-6 is-offset-3">
+      <div class="notification {{alertStatus}}">
+        {{message}} {{clock}}
+      </div>
+    </div>
   </div>
 {{/if}}
 
-<ul class="accordion" data-accordion data-multi-expand="true" data-allow-all-closed="true">
-  {{#each workout.exercises}}
-  <li class="accordion-item" data-accordion-item>
-    <a href="#" class="accordion-title">{{name}}</a>
-    <div class="accordion-content" data-tab-content>
-      {{#each sets}}
-      <div class="row">
-        <div class="columns">
-          <button id='{{id}}' on-click="updateProgress" class="button {{status}}">
-            {{#if target_duration}}
-              {{actual_duration}}
-            {{else}}
-              {{actual_repetitions}}
-            {{/if}}
-          </button>
-        </div>
-        <div class="columns">
-          <p class="text-center">
-            {{#if target_duration}}
-              {{target_duration}} seconds
-            {{else}}
-              {{target_repetitions}} x {{target_weight}}
-            {{/if}}
-          </p>
+{{#each workout.exercises}}
+  <div class="columns">
+    <div class="column is-6 is-offset-3">
+      <h2 class="subtitle">{{name}}</h2>
+        <div class="level">
+        {{#each sets}}
+          <div class="level-item has-text-centered">
+            <div>
+              <p class="heading">
+                {{#if target_duration}}
+                  {{target_duration}} seconds
+                {{else}}
+                  {{target_repetitions}} x {{target_weight}}
+                {{/if}}
+              </p>
+              <p class="title"> {{weight_per_side}} </p>
+              <button id='{{id}}' on-click="updateProgress" class="button is-large {{status}}">
+                {{#if target_duration}}
+                  {{actual_duration}}
+                {{else}}
+                  {{actual_repetitions}}
+                {{/if}}
+              </button>
+            </div>
+          </div>
+        {{/each}}
         </div>
-        <div class="columns">
-          <p class="text-center">
-            {{weight_per_side}}
-          </p>
-        </div>
-      </div>
-      {{/each}}
     </div>
-  </li>
-  {{/each}}
-</ul>
+  </div>
+{{/each}}

@@ -45,9 +45,9 @@ class Stronglifters.WorkoutView extends Ractive
         message = "If it was easy break for 1:30, otherwise rest for 3:00."
       else
         message = "No rest for the wicked. Let's do this!"
-      @displayMessage message, 'success'
+      @displayMessage message, 'is-success'
     else
-      @displayMessage "Take a 5:00 break.", 'alert'
+      @displayMessage "Take a 5:00 break.", 'is-danger'
 
     @clock.start()
 
@@ -60,9 +60,9 @@ class Stronglifters.WorkoutView extends Ractive
       return
 
     if model.successful()
-      @set "#{keypath}.status", "success"
+      @set "#{keypath}.status", "is-success"
     else
-      @set "#{keypath}.status", "alert"
+      @set "#{keypath}.status", "is-danger"
 
   displayMessage: (message, status) ->
     @set 'message', message

@@ -1,15 +1,17 @@
-<div class="row">
+<div class="container">
+  <div id="workout-view"></div>
   <div class="columns">
-    <div id="workout-view"></div>
-    <%= link_to t(:done), workouts_path, class: 'button float-right' %>
+    <div class="column is-6 is-offset-3">
+      <%= link_to t(:done), workouts_path, class: 'button is-large is-fullwidth is-primary' %>
+    </div>
   </div>
 </div>
 
-<script type="text/javascript" charset="utf-8">
+<% content_for :javascript do %>
 window.currentView = new Stronglifters.WorkoutView({
   el: 'workout-view',
   data: function() {
     return <%= raw render partial: 'edit.json.jbuilder', locals: { workout: @workout } %>;
   }
 })
-</script>
+<% end %>