Adds FB picture sync script and UI fixes

static/gaute/sass/screen.scss

@@ -10,15 +10,20 @@ body {
             @include inline-block-list;
 
             li {
-                padding: 1.5em;
+                padding-right: 10px;
+                padding-top: 10px;
                 text-align: center;
-                width: 100px;
+                width: 79px;
 
                 &:hover {
                     background-color: #dddddd;
                 }
                 &.marked {
-                    background-color: #dddddd;
+                    color: #468847;
+                    background-color: #DFF0D8;
+                }
+                .name {
+                    font-weight: bold;
                 }
             }
         }
@@ -30,12 +35,25 @@ body {
                 @include inline-block-list;
                 
                 li {
-                    padding: 1.5em;
+                    padding-top: 10px;
+                    padding-left: 20px;
+                    padding-right: 20px;
                     text-align: center;
 
                     &:hover {
                         background-color: #dddddd;
                     }
+                    &.marked {
+                        color: #468847;
+                        background-color: #DFF0D8;
+                    }
+                    .qty {
+                        font-size: 1.7em;
+                        font-weight: bold;
+                    }
+                    .name {
+                        font-weight: bold;
+                    }
                 }
             }
         }

static/gaute/stylesheets/screen.css

@@ -4118,15 +4118,20 @@ body #customer ul li {
   *display: inline;
 }
 body #customer ul li {
-  padding: 1.5em;
+  padding-right: 10px;
+  padding-top: 10px;
   text-align: center;
-  width: 100px;
+  width: 79px;
 }
 body #customer ul li:hover {
   background-color: #dddddd;
 }
 body #customer ul li.marked {
-  background-color: #dddddd;
+  color: #468847;
+  background-color: #DFF0D8;
+}
+body #customer ul li .name {
+  font-weight: bold;
 }
 body #register #products ul {
   margin: 0;
@@ -4156,12 +4161,25 @@ body #register #products ul li {
   *display: inline;
 }
 body #register #products ul li {
-  padding: 1.5em;
+  padding-top: 10px;
+  padding-left: 20px;
+  padding-right: 20px;
   text-align: center;
 }
 body #register #products ul li:hover {
   background-color: #dddddd;
 }
+body #register #products ul li.marked {
+  color: #468847;
+  background-color: #DFF0D8;
+}
+body #register #products ul li .qty {
+  font-size: 1.7em;
+  font-weight: bold;
+}
+body #register #products ul li .name {
+  font-weight: bold;
+}
 body #register #total div {
   color: #ffffff;
   background-color: #222;

static/js/register.js

@@ -5,6 +5,21 @@ $(document).ready(function() {
             $(this).show();
         });
     }
+    function enable_all_products() {
+        $("li.product").each(function(i) {
+            $(this).removeClass("marked");
+            $(this).show();
+        });
+    }
+    function reset_qtys() {
+        $(".qty").each(function(i) {
+            $(this).html('0');
+        });
+
+        $("input[name$=amount]").each(function(i) {
+            $(this).val("0");
+        });
+    }
     function filter_customers(typed) {
         /* FIXME: Does not work well. */
         setTimeout(function() {
@@ -42,9 +57,14 @@ $(document).ready(function() {
     });
     /* Product amount controls */
     $("li.product").click( function() {
-        var form_field = $(this).children("input[type=text]");
+        /* Mark the product as selected */
+        $(this).addClass("marked");
+        /* Update amounts */
+        var form_field = $(this).children("input[name$=amount]");
+        var display = $(this).children(".qty");
         var qty = Number(form_field.val()) + 1;
         form_field.val(qty);
+        display.html(qty);
         /* Update total*/
         var sale_price_int = Number($(this).children("span.sale_price_int").text());
         var cur_total = Number($("span.total_text").text())
@@ -56,6 +76,8 @@ $(document).ready(function() {
         $("#id_customer_typeahead").val("");
         $("span.total_text").html("");
         enable_all_customers();
+        enable_all_products();
+        reset_qtys();
     });
     /* Hide alert messages */
     $("a[data-dismiss=alert]").click(function(){