Added score coloring

Makefile

 CACHE_DIR      := .cache
 WWW_DIR        := www
 LIB_DIR        := vendor
-SCRIPTS        := forms scores plot
+SCRIPTS        := forms scores plot match
 STYLES         := main
 LOCALE_DIR     := locale
 LOCALES        := nl_NL

sass/main.sass

@@ -54,7 +54,30 @@ $lg-width: 1200px
     border: none
     outline: none
     width: 100%
-    background-color: #fff
+    background-color: transparent
+
+  $yellow: #F5F52C
+  $red:    #F25E5E
+  $blue:   #728EED
+  $black:  #303030
+  $white:  #F2F2F2
+
+  &.recurve.colored
+    .val-10, .val-9
+      background-color: $yellow
+
+    .val-8, .val-7
+      background-color: $red
+
+    .val-6, .val-5
+      background-color: $blue
+
+    .val-4, .val-3
+      background-color: $black
+      color: white
+
+    .val-2, .val-1
+      background-color: $white
 
 .panel textarea
   border: none
@@ -68,7 +91,10 @@ $lg-width: 1200px
 
 .actions
   margin-bottom: 15px
+  float: right
 
+.actions-responsive
+  float: left
   .btn
     .glyphicon
       display: none
@@ -76,7 +102,7 @@ $lg-width: 1200px
       display: inline-block
 
 @media (max-width: $sm-width - 1)
-  .actions
+  .actions-responsive
     float: right
     .btn
       .glyphicon
@@ -111,4 +137,3 @@ td
 @media (min-width: $sm-width)
   td.sm-stretch
     width: 100%
-

templates/match/create.latte

@@ -22,7 +22,7 @@
     </div>
     <div class="form-group">
         <div class="form-actions col-sm-offset-2 col-sm-10">
-            <div class="btn-group actions">
+            <div class="btn-group actions actions-responsive">
                 <a href="matches" class="btn btn-default" title="{_'Cancel'}">
                     <span class="glyphicon glyphicon-remove"></span>
                     <span class="text">{_'Cancel'}</span>

templates/match/delete.latte

@@ -10,7 +10,7 @@
 </p>
 
 <form action="match/{$match->id}" method="post">
-    <div class="btn-group actions">
+    <div class="btn-group actions actions-responsive">
         <a href="match/{$match->id}" class="btn btn-default" title="{_'Cancel'}">
             <span class="glyphicon glyphicon-remove"></span>
             <span class="text">{_'Cancel'}</span>

templates/match/edit.latte

@@ -32,7 +32,7 @@
     </div>
     <div class="form-group">
         <div class="form-actions col-sm-offset-2 col-sm-10">
-            <div class="btn-group actions">
+            <div class="btn-group actions actions-responsive">
                 <button type="submit" name="send" class="btn btn-primary" title="{_'Save'}">
                     <span class="glyphicon glyphicon-ok"></span>
                     <span class="text">{_'Save'}</span>

templates/match/scores.latte

@@ -64,7 +64,7 @@
     </div>
 </div>
 
-<div class="actions">
+<div class="actions actions-responsive">
     <button type="submit" class="btn btn-primary" title="{_'Save'}">
         <span class="glyphicon glyphicon-ok"></span>
         <span class="text">{_'Save'}</span>

templates/match/view.latte

@@ -30,7 +30,7 @@
 </div>
 *}
 
-<table class="table table-bordered table-condensed match">
+<table id="match" class="table table-bordered table-condensed match {$match->discipline}">
     <thead>
         <tr>
             <th class="separator"></th>
@@ -42,7 +42,7 @@
         <tr n:foreach="$rows as $i => $row">
             <th class="separator">{$i + 1}</th>
             <td n:foreach="$row as $j => $arrow"
-                n:class="$j == $match->arrows - 1 ? separator">
+                class="val-{$arrow} {$j == $match->arrows - 1 ? separator}">
                 <input type="text" disabled value="{$arrow}">
             </td>
             <td>{$sum = array_sum($row)}</td>
@@ -75,20 +75,34 @@
 </div>
 
 <div class="btn-group actions">
+    <a href="javascript:void(0)" id="toggle-colored" class="btn btn-default"
+        title="{_'Show/hide colors'}">
+        <span class="glyphicon glyphicon-tint"></span>
+        {*<span class="text">{_'Show/hide colors'}</span>*}
+    </a>
     <a href="match/{$match->id}/edit" class="btn btn-default" title="{_'Edit metadata'}">
         <span class="glyphicon glyphicon-cog"></span>
-        <span class="text">{_'Edit metadata'}</span>
+        {*<span class="text">{_'Edit metadata'}</span>*}
     </a>
     <a href="match/{$match->id}/scores" class="btn btn-default" title="{_'Edit scores'}">
         <span class="glyphicon glyphicon-pencil"></span>
-        <span class="text">{_'Edit scores'}</span>
+        {*<span class="text">{_'Edit scores'}</span>*}
     </a>
     <a href="match/{$match->id}/delete" class="btn btn-danger" title="{_'Delete'}">
         <span class="glyphicon glyphicon-trash"></span>
-        <span class="text">{_'Delete'}</span>
+        {*<span class="text">{_'Delete'}</span>*}
     </a>
 </div>
 
 </div>
 </div>
 {/block}
+
+{block scripts}
+<script type="text/javascript">
+    $('#toggle-colored').click(function() {
+        $(this).toggleClass('active');
+        $('#match').toggleClass('colored');
+    });
+</script>
+{/block}