style changes and refactoring

app/assets/javascripts/jquery.cookie.js

@@ -1,96 +0,0 @@
-/**
- * Cookie plugin
- *
- * Copyright (c) 2006 Klaus Hartl (stilbuero.de)
- * Dual licensed under the MIT and GPL licenses:
- * http://www.opensource.org/licenses/mit-license.php
- * http://www.gnu.org/licenses/gpl.html
- *
- */
-
-/**
- * Create a cookie with the given name and value and other optional parameters.
- *
- * @example $.cookie('the_cookie', 'the_value');
- * @desc Set the value of a cookie.
- * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });
- * @desc Create a cookie with all available options.
- * @example $.cookie('the_cookie', 'the_value');
- * @desc Create a session cookie.
- * @example $.cookie('the_cookie', null);
- * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
- *       used when the cookie was set.
- *
- * @param String name The name of the cookie.
- * @param String value The value of the cookie.
- * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.
- * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.
- *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
- *                             If set to null or omitted, the cookie will be a session cookie and will not be retained
- *                             when the the browser exits.
- * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).
- * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).
- * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will
- *                        require a secure protocol (like HTTPS).
- * @type undefined
- *
- * @name $.cookie
- * @cat Plugins/Cookie
- * @author Klaus Hartl/klaus.hartl@stilbuero.de
- */
-
-/**
- * Get the value of a cookie with the given name.
- *
- * @example $.cookie('the_cookie');
- * @desc Get the value of a cookie.
- *
- * @param String name The name of the cookie.
- * @return The value of the cookie.
- * @type String
- *
- * @name $.cookie
- * @cat Plugins/Cookie
- * @author Klaus Hartl/klaus.hartl@stilbuero.de
- */
-jQuery.cookie = function(name, value, options) {
-    if (typeof value != 'undefined') { // name and value given, set cookie
-        options = options || {};
-        if (value === null) {
-            value = '';
-            options.expires = -1;
-        }
-        var expires = '';
-        if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
-            var date;
-            if (typeof options.expires == 'number') {
-                date = new Date();
-                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
-            } else {
-                date = options.expires;
-            }
-            expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
-        }
-        // CAUTION: Needed to parenthesize options.path and options.domain
-        // in the following expressions, otherwise they evaluate to undefined
-        // in the packed version for some reason...
-        var path = options.path ? '; path=' + (options.path) : '';
-        var domain = options.domain ? '; domain=' + (options.domain) : '';
-        var secure = options.secure ? '; secure' : '';
-        document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
-    } else { // only name given, get cookie
-        var cookieValue = null;
-        if (document.cookie && document.cookie != '') {
-            var cookies = document.cookie.split(';');
-            for (var i = 0; i < cookies.length; i++) {
-                var cookie = jQuery.trim(cookies[i]);
-                // Does this cookie string begin with the name we want?
-                if (cookie.substring(0, name.length + 1) == (name + '=')) {
-                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
-                    break;
-                }
-            }
-        }
-        return cookieValue;
-    }
-};

app/assets/javascripts/qrammer.js.coffee

@@ -21,33 +21,6 @@ root.Qrammer =
     num = 0.0 if isNaN(num) || num == '' || num == null
     '€ ' + parseFloat(num).toFixed(2)
 
-
-  build_product_list_as_modal: ->
-    wrapper = $('<div class="modal"></div>')
-    callback_wrapper = ->
-      wrapper.modal('hide')
-      callback()
-    header = $('<div class="modal-header"></div>')
-      .append('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>')
-      .append('<h3>Product list</h3>').appendTo(wrapper)
-
-    body = $('<div class="modal-body"></div>')
-    table = $('<table class="table"></table>').appendTo(body)
-    tbody = $('<tbody></tbody>').appendTo(table)
-    for product_id, info of window.active_products_list
-      row = $('<tr></tr>').appendTo(tbody)
-      row.append('<td>'+info.product.name+'</td>')
-      row.append('<td>'+info.number+'</td>')
-      row.append('<td>'+Qrammer.currency(info.product.price * info.number)+'</td>')
-    
-    body.appendTo(wrapper)
-
-    footer = $('<div class="modal-footer"></div>')
-      .append($('<a href="#" class="btn">Close</a>').click(-> wrapper.modal('hide')))
-      .append($('<a href="#" class="btn btn-primary">Yes</a>').click(callback_wrapper))
-      .appendTo(wrapper)
-    wrapper.modal()
-
 jQuery.ajaxSetup
   'beforeSend': (xhr) ->
     xhr.setRequestHeader("Accept", "text/javascript")

app/assets/javascripts/supplier/application.js

@@ -0,0 +1,38 @@
+// This is a manifest file that'll be compiled into application.js, which will include all the files
+// listed below.
+//
+// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
+// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
+//
+// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
+// the compiled file.
+//
+// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
+// GO AFTER THE REQUIRES BELOW.
+//
+//= require jquery
+//= require jquery_ujs
+//= require jquery-ui
+//= require twitter/bootstrap
+//= require_directory .
+//= require_self
+var path_mapping = {
+  user_root: '/user',
+  join_occupied_table: '/user/join_occupied_table',
+  list_products_for_table: '/user/list_products_for_table',
+  list_products: '/user/list_products'
+}
+function redirect_to(mapping, variables){
+  variables || (variables = {});
+  var vars = []
+  for(var name in variables){
+    vars.push(name + '=' +variables[name])
+  }
+  window.location = path_mapping[mapping] + '?' + vars.join('&')
+}
+function currency(num) {
+  if (isNaN(num) || num === '' || num === null) {
+    num = 0.0;
+  }
+  return '€ ' + parseFloat(num).toFixed(2);
+}

app/assets/javascripts/supplier/qsupplier.js.coffee

@@ -86,12 +86,12 @@ root.Qsupplier=
 
         row.append($('<td class="numeric"></td>').text(list.table_number))
         row.append($('<td></td>').text(list.section_title))
-        row.append($('<td class="currency"></td>').html(Qrammer.currency(list.total_amount)))
+        row.append($('<td class="currency"></td>').html(currency(list.total_amount)))
         td_buttons = $('<td class="actions"></td>')
         td_buttons.append(needs_help_btn).append('&nbsp;') if list.needs_help
         td_buttons.append(close_btn)
         row.append(td_buttons)
-      #foot.append('<tr><td></td><td class="currency"><strong>'+Qrammer.currency(res.total_amount)+'</strong></td></tr>');
+      #foot.append('<tr><td></td><td class="currency"><strong>'+currency(res.total_amount)+'</strong></td></tr>');
     )
 
   load_active_orders: () -> 
@@ -125,10 +125,10 @@ root.Qsupplier=
         row.append($('<td></td>').text(order_txts.join(', ')))
         row.append($('<td class="numeric"></td>').text(order.table_number))
         row.append($('<td></td>').text(order.section_title))
-        row.append($('<td class="currency"></td>').html(Qrammer.currency(order.total_amount)))
+        row.append($('<td class="currency"></td>').html(currency(order.total_amount)))
         td_buttons = $('<td class="actions"></td>')
         td_buttons.append(process_btn).append('&nbsp;') if order.state == 'placed'
         td_buttons.append(delivered_btn)
         row.append(td_buttons)
-      #foot.append('<tr><td></td><td class="currency"><strong>'+Qrammer.currency(res.total_amount)+'</strong></td></tr>');
+      #foot.append('<tr><td></td><td class="currency"><strong>'+currency(res.total_amount)+'</strong></td></tr>');
     )

app/assets/javascripts/user/application.js

@@ -12,8 +12,20 @@
 //
 //= require jquery
 //= require jquery_ujs
-//= require jquery-ui
+// require twitter/bootstrap
-//= require twitter/bootstrap
+//= require twitter/bootstrap/bootstrap-transition
+// require twitter/bootstrap/bootstrap-alert
+//= require twitter/bootstrap/bootstrap-modal
+//= require twitter/bootstrap/bootstrap-dropdown
+//= require twitter/bootstrap/bootstrap-scrollspy
+//= require twitter/bootstrap/bootstrap-tab
+//= require twitter/bootstrap/bootstrap-tooltip
+//= require twitter/bootstrap/bootstrap-popover
+//= require twitter/bootstrap/bootstrap-button
+//= require twitter/bootstrap/bootstrap-collapse
+// require twitter/bootstrap/bootstrap-carousel
+//= require twitter/bootstrap/bootstrap-typeahead
+//= require twitter/bootstrap/bootstrap-affix
 //= require_directory .
 //= require_self
 var path_mapping = {

app/assets/javascripts/user/quser.js.coffee

@@ -133,6 +133,7 @@ window.Quser=
       if res.table_number
         $('.table-number').text(res.table_number)
         delete(res['table_number'])
+      body.find('tr').remove()
       for category, products of res
         body.append('<tr><td colspan="4"><h4>'+category+'<h4></td></tr>')
         for product in products

app/assets/stylesheets/_constants.css.sass

@@ -0,0 +1,3 @@
+$qbrown: #634227
+$wood: image-url('textures/wood6.png')
+$background-brown: #57351f

app/assets/stylesheets/bootstrap_overrides.css.sass

@@ -15,3 +15,8 @@ body
     $navbar-inner-teint: 200 
     background-color: rgba($navbar-inner-teint, $navbar-inner-teint, $navbar-inner-teint, 0.8)
     background-image: url()
+    .brand
+      padding: 3px 0
+    .container
+      .brand
+        padding-left: 7px

app/assets/stylesheets/darkstrap.sass

@@ -0,0 +1,286 @@
+@import compass
+@import mixins
+
+// Contents:
+//   =General
+//   =Breadcrumbs
+//   =Headings
+//   =Navigation
+//   =Forms
+//   =Tables
+//   =Pagination
+//   =Misc
+
+$color: #c6c6c6
+$bg: #2f2f2f
+$link: #0088cc
+
+$warning: #faa732
+$success: #5bb75b
+$error: #fc5b5e
+
+// ds original: #FB292D
+$info: #3a87ad
+
+$input-bg: #666666
+
+// ds default: #444
+$input-border: #111111
+
+// default: white
+$input-placeholder: #666666
+$input-color: white
+
+//=General ========================================
+// Everything with the inset panel just extends .well
+.well
+  +inset-panel-dark
+
+body
+  background: $bg
+  color: $color
+
+//=Breadcrumbs =======================================
+.breadcrumb
+  @extend .well
+  border: 0
+  //over bs
+  li
+    text-shadow: 0 1px 0 #000
+    //over bs
+
+//=Headings ======================================
+.page-header
+  +horizontal-rule-dark
+
+h1,h2,h3,h4,h5,h6
+  color: white
+
+h6
+  color: #999
+
+//=Navigation
+.nav .dropdown-menu
+
+.nav-tabs .open .dropdown-toggle,
+.nav-pills .open .dropdown-toggle,
+.nav > .open.active > a:hover
+  background-color: darken($bg, 5%)
+  border-color: $bg $bg transparent $bg
+
+.nav > .dropdown.active >  a:hover
+  color: #fff
+
+.nav-tabs .active .dropdown-toggle .caret,
+.nav-pills .active .dropdown-toggle .caret
+  border-top-color: #fff
+
+.nav-tabs
+  border-bottom: 1px solid #666
+  & > .active > a,
+  & > .active > a:hover
+    background-color: $bg
+    color: #fff
+    border-color: #666 #666 transparent #666
+  & > li > a:hover
+    border-color: $bg $bg #666666 $bg
+    background-color: darken($bg, 5%)
+    color: lighten($link, 10%)
+  &.nav-stacked
+    & > li > a, 
+    & > li > a:hover
+      border-color: #666
+
+.nav-pills
+  & > li > a:hover
+    background-color: darken($bg, 5%)
+    color: lighten($link, 10%)
+
+.nav-list > li > a,
+.nav-list .nav-header
+  text-shadow: 0 1px 0 #000
+
+.nav-list > li > a:hover
+  background-color: darken($bg, 10%)
+  color: lighten($link, 10%)
+
+.nav-list .active
+  & > a:hover
+    background-color: #0088cc
+    color: white
+
+.tabs-below .nav-tabs
+  border-top: 1px solid #666
+
+.tabs-left .nav-tabs
+  border-right: 1px solid #666
+
+.tabs-right .nav-tabs
+  border-left: 1px solid #666
+
+.tabs-below .nav-tabs > li > a:hover
+  border-top: 1px solid #666
+
+.tabs-left .nav-tabs > li > a:hover
+  border-color: transparent #666 transparent transparent
+
+.tabs-right .nav-tabs > li > a:hover
+  border-color: transparent transparent transparent #666
+
+.tabs-below .nav-tabs .active > a,
+.tabs-below .nav-tabs .active > a:hover
+  border-color: transparent #666 #666 #666
+
+.tabs-left .nav-tabs .active > a,
+.tabs-left .nav-tabs .active > a:hover
+  border-color: #666 transparent #666 #666
+
+.tabs-right .nav-tabs .active > a,
+.tabs-right .nav-tabs .active > a:hover
+  border-color: #666 #666 #666 transparent
+
+//=Forms ========================================
++placeholder($input-placeholder)
+
+.input-prepend .add-on,
+.input-append .add-on
+  background: #444
+  color: $color
+  border-color: #111
+  text-shadow: 0 1px 0  black
+
+label
+  color: $color
+
+input,
+input[type="file"],
+select,
+textarea
+  color: $input-color
+  //background-color: $input-bg;
+  border-color: $input-border
+  @extend .well
+
+.search-query
+  -webkit-box-shadow: rgba(255, 255, 255, 0.1) 0 1px 0, rgba(0, 0, 0, 0) 0 1px 7px 0px inset
+
+legend
+  color: white
+  +horizontal-rule-dark
+
+.form-actions
+  border-top-color: #222
+  background-color: #444
+
+.help-inline
+  color: #999
+
+.control-group
+  &.warning
+    +controls($warning)
+  &.success
+    +controls($success)
+  &.error
+    +controls($error)
+
+//=Tables ========================================
+.table
+  thead
+    color: white
+  td
+    border-top-color: #666
+
+.table-striped
+  tbody tr:nth-child(2n+1)
+    td, th
+      background-color: #444
+
+.table-bordered
+  border: 1px solid #666
+  th + th,
+  td + td,
+  th + td,
+  td + th
+    border-left: 1px solid #666
+
+//=Pagination
+.pagination a:hover
+  color: lighten($link, 10%)
+  background-color: darken($bg, 5%)
+
+.pagination .active a
+  color: #fff
+  background-color: darken($bg, 5%)
+
+.pagination a
+  border-color: #666
+
+//=Pager
+.pager a
+  background-color: $bg
+  border-color: #666
+  &:hover
+    background-color: darken($bg, 5%)
+    color: lighten($link, 10%)
+
+//=Alerts
+=alert($color)
+  color: #fff
+  background-color: $color
+  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25)
+  border-color: darken($color, 25%)
+  h4
+    color: darken($color, 20%)
+
+.alert
+  +alert($warning)
+
+.alert-success
+  +alert($success)
+
+.alert-error
+  +alert($error)
+
+.alert-info
+  +alert($info)
+
+//=Modals
+
+.modal
+  background-color: #444
+
+.modal-header
+  border-bottom: 1px solid #222
+
+.modal-body p
+  color: $color
+
+.modal-footer
+  background-color: darken(#444444, 5%)
+  border-top: 1px solid #222
+  +box-shadow(0 1px 0 #333333 inset)
+
+//=Progress bars
+.progress
+  @extend .well
+
+//=Misc ========================================
+blockquote
+  border-left-color: #111
+  &.pull-right
+    border-right-color: #111
+
+hr
+  +horizontal-rule-dark
+  border-top: none
+
+code
+  @extend .well
+  border: none
+  //over bs
+
+pre
+  @extend .well
+  border: none
+  //over bs
+  color: $color

app/assets/stylesheets/mixins.sass

@@ -0,0 +1,41 @@
+=placeholder($color: $input-placeholder)
+  \:-moz-placeholder
+    color: $color
+  \::-webkit-input-placeholder
+    color: $color
+
+=controls($color)
+  & > label, 
+  .help-block,
+  .help-inline
+    color: $color
+  input, select, textarea
+    //color: lighten($color, 20%);
+    color: $color
+    border-color: $color
+  input:focus,
+  select:focus,
+  textarea:focus
+    border-color: $color
+    +box-shadow(0 0 6px $color)
+
+=inset-panel-dark
+  +box-shadow(rgba(white, 0.1) 0 1px 0, rgba(black, 0.8) 0 1px 7px 0px inset)
+  background: darken(#2f2f2f, 6)
+  background-color: rgba(black, 0.3)
+
+=horizontal-rule-dark
+  +box-shadow(rgba(white, 0.07) 0 1px 0)
+  border-bottom: 1px solid #121212
+
+=horizontal-rule-top-dark
+  +box-shadow(rgba(white, 0.07) 0 1px 0 inset)
+  border-top: 1px solid #121212
+
+=vertical-rule-dark
+  +box-shadow(rgba(white, 0.07) 1px 0 0)
+  border-right: 1px solid #121212
+
+=vertical-rule-left-dark
+  +box-shadow(rgba(white, 0.07) 1px 0 0 inset)
+  border-left: 1px solid #121212

app/assets/stylesheets/phone/application.css

@@ -8,6 +8,8 @@
  * You're free to add application-wide styles to this file and they'll appear at the top of the
  * compiled file, but it's generally better to create a new file per style scope.
  *
- *= require_self
+ *= require 'bootstrap_and_overrides'
+ *= require 'bootstrap_overrides'
  *= require_directory .
+ *= require_self
  */

app/assets/stylesheets/phone/structure.css.sass

@@ -1,14 +1,16 @@
 @import compass
+@import constants
 $side-spacing: 5px
-$qbrown: #634227
 
 
 html
-  background-image: image-url('textures/wood6.png')
+  background-image: $wood
+  background-color: $background-brown
 body
   padding-left: $side-spacing
   padding-right: $side-spacing
-  background-image: image-url('textures/wood6.png')
+  //background-image: image-url('textures/wood6.png')
+  background-color: transparent
   .home-panel
     margin-left: 20px
     margin-right: 20px

app/assets/stylesheets/qr_sheet/application.css

@@ -0,0 +1,13 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
+ * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the top of the
+ * compiled file, but it's generally better to create a new file per style scope.
+ *
+ *= require_self
+ *= require_directory .
+ */

app/assets/stylesheets/qr_sheet/structure.css.sass

@@ -0,0 +1,7 @@
+ul#qr-list
+  list-style: none
+  li
+    float: left
+    margin-right: 20px
+    border: 1px solid black
+    margin-bottom: 20px

app/assets/stylesheets/structure.css.sass

@@ -1,3 +1,9 @@
+@import constants
+html
+  background-color: $background-brown
+  background-image: $wood
+body
+  background-color: transparent
 table
   thead
     th 
@@ -84,3 +90,6 @@ table
   padding: 0
   li
     float: left
+img.home-qr
+  float: left
+  margin: 0 20px 20px 0

app/assets/stylesheets/tablet/application.css

@@ -1,5 +1,6 @@
 /*
- *= require_self
+ *= require 'bootstrap_and_overrides'
+ *= require 'bootstrap_overrides'
  *= require_directory .
- *= require 'phone/bootstrap_overrides'
+ *= require_self
  */

app/assets/stylesheets/tablet/structure.css.sass

@@ -1,8 +1,12 @@
 $side-spacing: 0px
+@import constants
+html
+  background-image: $wood
+  background-color: $background-brown
 body
   padding-left: $side-spacing
   padding-right: $side-spacing
-  background-image: image-url('textures/wood6.png')
+  background-color: transparent
   //padding-top: 50px
   .navbar-fixed-top
     margin-left: -$side-spacing

app/controllers/suppliers/tables_controller.rb

@@ -85,5 +85,10 @@ module Suppliers
         format.json { head :no_content }
       end
     end
+
+    def qr_codes
+      @tables = current_supplier.tables
+      render layout: 'qr_sheet'
+    end
   end
 end

app/helpers/application_helper.rb

@@ -53,4 +53,8 @@ module ApplicationHelper
   def no_content_given(model)
     t('helpers.list.no_records')
   end
+
+  def slider_image
+    image_tag('spinner.gif')
+  end
 end

app/views/dashboard/home.html.slim

@@ -1,2 +1,5 @@
 .page-header
-  h1 Home
+  h1 Qwaiter
+p
+  = image_tag 'qr.png', class: 'home-qr'
+  |Welcome on the Qwaiter homepage. Qwaiter is an application that lets you place orders by simply scanning a code from a table on a terrace or a restaurant. Then directly the menu appears and you can place your order. See the progress while you wait for your drinks!

app/views/layouts/application.html.slim

@@ -15,24 +15,24 @@ html lang="en"
     link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114"
     link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72"
     link href="images/apple-touch-icon.png" rel="apple-touch-icon-precomposed"
-    link href="images/favicon.ico" rel="shortcut icon"
+    link href="/favicon.ico" rel="shortcut icon"
 
   body
-    .navbar.navbar-fixed-top
+    .container
+
+      .navbar
         .navbar-inner
           .container
             a.btn.btn-navbar data-target=".nav-collapse" data-toggle="collapse"
               span.icon-bar
               span.icon-bar
               span.icon-bar
-          a.brand href=root_path = application_title
+            a.brand href=root_path = image_tag 'icons/logo-small.png', alt: application_title
             .container.nav-collapse
               ul.nav
                 li= link_to User.model_name.human_plural, user_root_path
                 li= link_to Supplier.model_name.human_plural, supplier_root_path
 
-    .container
-
       .content
         - if flash[:alert].present?
           .alert.alert-error

app/views/layouts/phone.html.slim

@@ -10,19 +10,19 @@ html lang="en"
     /! Le HTML5 shim, for IE6-8 support of HTML elements
     /[if lt IE 9]
       = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
-    = stylesheet_link_tag "application", :media => "all"
     = stylesheet_link_tag "phone/application", :media => "all"
     link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144"
     link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114"
     link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72"
     link href="images/apple-touch-icon.png" rel="apple-touch-icon-precomposed"
-    link href="images/favicon.ico" rel="shortcut icon"
+    link href="/favicon.ico" rel="shortcut icon"
     javascript:
       var QMobile;
       // Dummy holder when Qmobile object is not supplied by the mobile phone
       QMobile || (QMobile = {
         scanQr: function(){window.location = '/select_qrcode'},
-        activateRotation: function(){}
+        activateRotation: function(){},
+        mobile: function(){return false}
       });
 
   body class=action_name
@@ -33,7 +33,7 @@ html lang="en"
             span.icon-bar
             span.icon-bar
             span.icon-bar
-          a.brand href=user_root_path = application_title
+          a.brand href=user_root_path = image_tag 'icons/logo-small.png', alt: application_title
           .container.nav-collapse
             ul.nav#top-navigation-list
               li= link_to 'View history', user_list_history_path

app/views/layouts/qr_sheet.html.slim

@@ -0,0 +1,13 @@
+doctype html
+html lang="en"
+  head
+    meta charset="utf-8"
+    meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"
+    meta name="viewport" content="width=device-width, initial-scale=1.0"
+    title= content_for?(:title) ? yield(:title) : application_title
+    = csrf_meta_tags
+    = stylesheet_link_tag "qr_sheet/application", :media => "all"
+    link href="/favicon.ico" rel="shortcut icon"
+
+  body
+    = yield

app/views/layouts/tablet.html.slim

@@ -10,13 +10,13 @@ html lang="en"
     /! Le HTML5 shim, for IE6-8 support of HTML elements
     /[if lt IE 9]
       = javascript_include_tag "http://html5shim.googlecode.com/svn/trunk/html5.js"
-    = stylesheet_link_tag "application", :media => "all"
+    = stylesheet_link_tag "supplier/application", :media => "all"
     = stylesheet_link_tag "tablet/application", :media => "all"
     link href="images/apple-touch-icon-144x144.png" rel="apple-touch-icon-precomposed" sizes="144x144"
     link href="images/apple-touch-icon-114x114.png" rel="apple-touch-icon-precomposed" sizes="114x114"
     link href="images/apple-touch-icon-72x72.png" rel="apple-touch-icon-precomposed" sizes="72x72"
     link href="images/apple-touch-icon.png" rel="apple-touch-icon-precomposed"
-    link href="images/favicon.ico" rel="shortcut icon"
+    link href="/favicon.ico" rel="shortcut icon"
 
   body
     .navbar.navbar-fixed-top.navbar-inverse
@@ -26,7 +26,7 @@ html lang="en"
             span.icon-bar
             span.icon-bar
             span.icon-bar
-          a.brand href=supplier_root_path = application_title
+          a.brand href=supplier_root_path = image_tag 'icons/logo-small.png', alt: application_title
           ul.nav.pull-right
             li.dropdown
               a.dropdown-toggle href="#" data-toggle="dropdown"

app/views/suppliers/tables/index.html.slim

@@ -24,3 +24,5 @@ div.page-header= title :index, model_class
 
 .form-actions
   = link_to t("helpers.links.new"), new_suppliers_table_path, class: 'btn btn-primary'
+  '
+  = link_to t('supplier.tables.qr_codes.link'), qr_codes_suppliers_tables_path, class: 'btn btn-info'

app/views/suppliers/tables/qr_codes.html.slim

@@ -0,0 +1,3 @@
+ul#qr-list
+  - for table in @tables
+    li= image_tag(url_for(table_qr_image_path(table_id: table.id, format: :png)))

app/views/user/list_products.html.slim

@@ -7,6 +7,8 @@
 .well
   table#products-table.table
     tbody
+      tr
+        td= slider_image
   table#active-order-table.table.hide
     thead
       tr

app/views/user/list_products_for_table.html.slim

@@ -4,6 +4,8 @@
 .well
   table#products-table.table.table-hover
     tbody
+      tr
+        td= slider_image
   table#active-order-table.table.hide
     thead
       tr

config/locales/en.yml

@@ -72,6 +72,10 @@ en:
     you_are_currently_closed_alert: 'You are currently closed and not able to take orders'
     mark_as_open_button: 'Open up the place!'
     table_number: Table
+    tables:
+      qr_codes:
+        link: Qr codes sheet
+        
   user:
     active_list:
       title: Active %{list}

config/routes.rb

@@ -68,7 +68,11 @@ Qrammer::Application.routes.draw do
         get :tables_view
       end
     end
-    resources :tables
+    resources :tables do
+      collection do
+        get :qr_codes
+      end
+    end
     resources :products
     resources :product_categories
     root to: 'sections#index'

notes.js.coffee

@@ -0,0 +1,25 @@
+  build_product_list_as_modal: ->
+    wrapper = $('<div class="modal"></div>')
+    callback_wrapper = ->
+      wrapper.modal('hide')
+      callback()
+    header = $('<div class="modal-header"></div>')
+      .append('<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>')
+      .append('<h3>Product list</h3>').appendTo(wrapper)
+
+    body = $('<div class="modal-body"></div>')
+    table = $('<table class="table"></table>').appendTo(body)
+    tbody = $('<tbody></tbody>').appendTo(table)
+    for product_id, info of window.active_products_list
+      row = $('<tr></tr>').appendTo(tbody)
+      row.append('<td>'+info.product.name+'</td>')
+      row.append('<td>'+info.number+'</td>')
+      row.append('<td>'+Qrammer.currency(info.product.price * info.number)+'</td>')
+    
+    body.appendTo(wrapper)
+
+    footer = $('<div class="modal-footer"></div>')
+      .append($('<a href="#" class="btn">Close</a>').click(-> wrapper.modal('hide')))
+      .append($('<a href="#" class="btn btn-primary">Yes</a>').click(callback_wrapper))
+      .appendTo(wrapper)
+    wrapper.modal()