styling changes

app/assets/javascripts/user/application.js.erb

@@ -39,7 +39,8 @@ var path_mapping = {
   list_products: '/user/list_products',
   active_list: '/user/active_list',
   history_list: '/user/history_list',
-  obtain_user_token: '/user/obtain_token'
+  obtain_user_token: '/user/obtain_token',
+  lists_history: '/user/list_history'
 }
 var $translations = {
   en: {

app/assets/stylesheets/_constants.css.sass

@@ -1,6 +1,7 @@
 //$qbrown: #634227
 $qbrown: #853d15
 $qbrown-active: lighten($qbrown, 20%)
+$green: #7BB459 //Heineken
 //$wood: image-url('textures/wood001-vertical.jpg')
 $wood: image-url('textures/theme1.jpg')
 $background-brown: #57351f

app/assets/stylesheets/user/_constants.css.sass

@@ -0,0 +1,78 @@
+$qbrown: #853d15
+$qbrown-active: lighten($qbrown, 20%)
+$green: #7BB459 //Heineken
+//$wood: image-url('textures/wood001-vertical.jpg')
+$wood: image-url('textures/theme1.jpg')
+$background-brown: #57351f
+$side-spacing: 5px
+=wood-button
+  background-color: transparent
+  background-repeat: no-repeat, no-repeat, repeat-x
+  background-position: left center, right center, center center
+  background-image: url(/assets/theme1/button-wood-left.png), url(/assets/theme1/button-wood-right.png), url(/assets/theme1/button-wood-middle.png)
+  color: $green
+  border-width: 0
+  border-radius: 0
+  height: 31px
+  //padding-bottom: 18px
+  +box-shadow(#000 4px 4px 8px)
+  &:hover
+    background-color: transparent
+    background-repeat: no-repeat, no-repeat, repeat-x
+    background-position: left center, right center, center center
+    background-image: url(/assets/theme1/button-wood-left.png), url(/assets/theme1/button-wood-right.png), url(/assets/theme1/button-wood-middle.png)
+    color: blue
+=button-bar
+  background-color: transparent
+  background-repeat: no-repeat, no-repeat
+  background-position: left bottom, right bottom
+  background-image: image-url('theme1/button-bar-left.png'), image-url('theme1/button-bar-right.png')
+  color: $green
+  border-width: 0
+  border-radius: 0
+  min-height: 61px
+  height: 61px
+  padding-left: 49px
+  padding-right: 53px 
+  .button-bar-inner
+    //+single-box-shadow(#000, 0px, 4px, 8px, 0px, true)
+    background-color: white
+    background-repeat: repeat-x
+    background-position: center bottom
+    background-image: image-url('theme1/button-bar-middle.png')
+    //min-height: 61px
+    height: 100%
+    .button-bar-content
+      padding: 8px
+      .title
+        margin-top: -10px
+        margin-right: 5px
+        margin-left: 5px
+        margin-bottom: 3px
+        color: black
+        float: left
+      .action-buttons
+        float: left
+        width: 150px
+  //padding-bottom: 18px
+  //+box-shadow(#000 4px 4px 8px)
+=user-button
+  +wood-button
+  cursor: pointer
+  border: 0px solid black
+  //+border-radius(4px)
+  //+box-shadow(#000 4px 4px 8px)
+  width: 30px
+  //height: 34px
+  display: inline-block
+  float: left
+  margin-right: 15px
+  background-color: $qbrown
+  text-align: center
+  line-height: 34px
+  text-indent: -5000px
+  &.active
+    background-color: $qbrown-active
+  &.hide
+    display: none
+

app/assets/stylesheets/user/list_products.css.sass

@@ -0,0 +1,5 @@
+@import compass
+@import user/constants
+#products-table
+  .order-product-button
+    +wood-button

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

@@ -1,27 +1,5 @@
 @import compass
-@import constants
+@import user/constants
-$side-spacing: 5px
-=user-button
-  cursor: pointer
-  border: 2px solid black
-  +border-radius(4px)
-  +box-shadow(#000 4px 4px 8px)
-  width: 34px
-  height: 34px
-  display: block
-  float: left
-  margin-left: 15px
-  background-color: $qbrown
-  text-align: center
-  line-height: 34px
-  background-repeat: no-repeat
-  background-position: center center
-  text-indent: -5000px
-  &.active
-    background-color: $qbrown-active
-  &.hide
-    display: none
-
 html
   background-image: $wood
   background-color: $background-brown
@@ -58,13 +36,20 @@ body
         margin-top: 5px
         margin-left: auto
         margin-right: auto
-        background-color: green
         width: 262px
         a
           +user-button
+          span
+            display: block
+            width: 28px
+            height: 26px
+            background-repeat: no-repeat
+            background-position: center center
           &.home-list-link
+            span
               background-image: image-url('icons/list.png')
           &.home-menu-link
+            span
               background-image: image-url('icons/menu.png')
   //padding-top: 50px
   .navbar-fixed-top
@@ -82,11 +67,6 @@ body
   .order-count-cell
     white-space: nowrap
   .page-header
-    .supplier-name
-      float: right
-      margin-right: 8px
-    .table-number
-      float: right
 #list-needs-help-button
   button
     margin-left: 5px
@@ -99,11 +79,32 @@ body
     padding-left: 5px
 .user-top-button
   +user-button 
-  &#show-active-list
+  span
+    display: block
+    width: 28px
+    height: 28px
+    background-position: center center
+    background-repeat: no-repeat
+.top-button-bar
+  +button-bar
+  height: 90px
+  .button-bar-content
+    padding-top: 10px
+    .supplier-name
+      float: right
+      margin-right: 8px
+    .table-number
+      float: right
+    #show-active-list
+      span
         background-image: image-url('icons/list.png')
-  &#place-order-on-list
+    #place-order-on-list
+      span
         background-image: image-url('icons/menu.png')
-  &#list-needs-payment-button
+    #list-needs-payment-button
+      span
         background-image: image-url('icons/needs-payment.png')
-  &#list-needs-help-button
+    #list-needs-help-button
+      span
         background-image: image-url('icons/needs-help.png')
+

app/helpers/application_helper.rb

@@ -97,4 +97,16 @@ module ApplicationHelper
     render(template, handlers: [:mustache])
   end
 
+  def top_bar(options = {}, &block)
+    title = options[:title]
+    title = title.present? ? content_tag(:h3, t("user.#{title}"), class: 'title', data: {t: title}) : ''
+    content_tag :div, class: 'top-button-bar' do
+      content_tag :div, class: 'button-bar-inner' do
+        content_tag :div, class: 'button-bar-content' do
+          (title + capture(&block)).html_safe
+        end
+      end
+    end
+  end
+
 end

app/templates/user/_products_category_for_order.mustache

@@ -8,6 +8,6 @@
     <span class="btn btn-info btn-mini" onclick="Quser.increment_products_counter('{{_id}}')">+</span>
   </td>
   <td>{{#currency}}{{price}}{{/currency}}</td>
-  <td><button class="btn btn-mini btn-primary" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button></td>
+  <td><button class="btn order-product-button" onclick="Quser.add_product_to_order('{{_id}}', this)">Add</button></td>
 </tr>
 {{/products}}

app/views/layouts/phone.html.slim

@@ -57,6 +57,7 @@ html lang="en"
         QMobile.setAuthToken('#{current_user.authentication_token}');QMobile.setUserId('#{current_user.id}');
 
   body class=action_name
+    - unless ENV['QWAITER_MOBILE_EXPORT'] == 'yes'
       .navbar.navbar-fixed-top
         .navbar-inner
           .container
@@ -68,7 +69,6 @@ html lang="en"
             .container.nav-collapse
               ul.nav#top-navigation-list
                 li= link_to 'View history', user_list_history_path
-
     .container
 
       .content

app/views/user/active_list.html.slim

@@ -1,11 +1,13 @@
-.page-header
+= top_bar title: 'active_list.title' do
+  .pull-right
     .table-number
     .supplier-name
-  h4 data-t="active_list.title" = t('user.active_list.title', list: List.model_name.human)
+  .action-buttons
-.form-actions
+    = link_to content_tag(:span, t('helpers.links.place_order')), user_list_products_path, class: ['user-top-button'], id: 'place-order-on-list'
-  = link_to t('helpers.links.place_order'), user_list_products_path, class: ['user-top-button'], id: 'place-order-on-list'
     span#list-needs-payment-button.user-top-button
+      span
     span#list-needs-help-button.user-top-button
+      span
 .well
   table#active-list-table.table
     thead

app/views/user/home.html.slim

@@ -4,8 +4,8 @@
     a href="#" onClick="QMobile.scanQr()" = image_tag 'scan-logo.png'
   .home-footer
     .home-footer-content
-      = link_to 'P', user_list_products_path, class: [:hide, 'home-link', 'home-menu-link']
+      = link_to content_tag(:span, 'P'), user_list_products_path, class: [:hide, 'home-link', 'home-menu-link']
-      = link_to 'L', user_active_list_path, class: [:hide, 'home-link', 'home-list-link']
+      = link_to content_tag(:span, 'L'), user_active_list_path, class: [:hide, 'home-link', 'home-list-link']
 - content_for :footer do
   javascript:
     $(function(){

app/views/user/list_products.html.slim

@@ -1,11 +1,14 @@
-.page-header
+= top_bar title: 'show_products.title' do
+  .pull-right
     .table-number
     .supplier-name
-  h4 data-t="show_products.title" = t('user.show_products.title', products: Product.model_name.human_plural)
+  .action-buttons
-.form-actions
+    = link_to content_tag(:span, t('helpers.links.show_active_list'), list: List.model_name.human), user_active_list_path, class: ['user-top-button'], id: 'show-active-list'
-  = link_to t('helpers.links.show_active_list', list: List.model_name.human), user_active_list_path, class: ['user-top-button'], id: 'show-active-list'
     span#list-needs-payment-button.user-top-button
+      span
     span#list-needs-help-button.user-top-button
+      span
+ 
 .well
   table#products-table.table
     tbody

config/locales/en.yml

@@ -92,9 +92,9 @@ en:
         closed_at: Closed at
   supplier:
     menu:
-      active_lists: Active %{lists}
+      active_lists: Active lists
     active_lists:
-      title: Active %{lists}
+      title: Active list
       price: Price
     active_orders:
       title: Active %{orders}