From 4e99505d2ae714565d5a93474b7facda20a9a80b Mon Sep 17 00:00:00 2001 From: Steven Miers Date: Sun, 15 Mar 2015 21:32:37 -0500 Subject: [PATCH] VRFS-2877 : Update look and feel of cart * New checkmark icon * Use table layout instead of width/float * Misc layout fixes --- web/app/assets/images/content/checkmark.png | Bin 1813 -> 6955 bytes .../stylesheets/client/sessionList.css.scss | 4 +- .../stylesheets/client/shoppingCart.css.scss | 16 ++------ .../views/clients/_shopping_cart.html.haml | 38 +++++++++--------- 4 files changed, 26 insertions(+), 32 deletions(-) diff --git a/web/app/assets/images/content/checkmark.png b/web/app/assets/images/content/checkmark.png index 8ce5e42ee4980680cae9d759eff1df1d17610f0e..628f05a1f08912e6da98bc74e285c9ff4c6c1e74 100644 GIT binary patch literal 6955 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 Q5m1i7)78&qol`;+0Iv(`qW}N^ diff --git a/web/app/assets/stylesheets/client/sessionList.css.scss b/web/app/assets/stylesheets/client/sessionList.css.scss index b0df3def5..6bc54dc93 100644 --- a/web/app/assets/stylesheets/client/sessionList.css.scss +++ b/web/app/assets/stylesheets/client/sessionList.css.scss @@ -1,7 +1,7 @@ @import "client/common"; -table.findsession-table, table.local-recordings, table.open-jam-tracks, table.open-backing-tracks, #account-session-detail { +table.findsession-table, table.local-recordings, table.open-jam-tracks, table.open-backing-tracks, table.cart-items, #account-session-detail { .latency-unacceptable { width: 50px; @@ -64,7 +64,7 @@ table.findsession-table, table.local-recordings, table.open-jam-tracks, table.op text-align:center; } } -table.findsession-table, table.local-recordings, table.open-jam-tracks, table.open-backing-tracks { +table.findsession-table, table.local-recordings, table.open-jam-tracks, table.open-backing-tracks, table.cart-items { width:98%; height:10%; font-size:11px; diff --git a/web/app/assets/stylesheets/client/shoppingCart.css.scss b/web/app/assets/stylesheets/client/shoppingCart.css.scss index f8a8c6fdb..ba3b31146 100644 --- a/web/app/assets/stylesheets/client/shoppingCart.css.scss +++ b/web/app/assets/stylesheets/client/shoppingCart.css.scss @@ -29,9 +29,7 @@ } .cart-item-caption { - width: 50%; - text-align: left; - float: left; + text-align: left; } .cart-item-caption#header { @@ -39,21 +37,15 @@ } .cart-item-price { - width: 15%; - text-align: right; - float: left; + text-align: right; } .cart-item-quantity { - width: 15%; - text-align: right; - float: left; + text-align: right; } .cart-item-actions { - width: 20%; - text-align: center; - float: left; + //text-align: center; } .cart-items { diff --git a/web/app/views/clients/_shopping_cart.html.haml b/web/app/views/clients/_shopping_cart.html.haml index df3be13f9..fe6be5f60 100644 --- a/web/app/views/clients/_shopping_cart.html.haml +++ b/web/app/views/clients/_shopping_cart.html.haml @@ -19,35 +19,37 @@ .clearall %script{type: 'text/template', id: 'template-shopping-cart-body'} - .cart-items - .cart-item-caption#header - Your shopping cart now contains: - .cart-item-price - %span{style: "text-decoration: underline;"} Price - .cart-item-quantity - %span{style: "text-decoration: underline;"} Quantity - .clearall + %table.cart-items + %tr + %th.cart-item-caption + YOUR SHOPPING CART NOW CONTAINS: + %th.cart-item-price + Price + %th.cart-item-quantity + Quantity + %th = "{% if (data.carts.length == 0) { %}" - .no-cart-items Nothing in cart + %tr + %td.no-cart-items colspan=4 Nothing in cart = "{% } %}" + = "{% _.each(data.carts, function(cart) { %}" - .cart-item{"cart-id" => "{{cart.id}}"} - .cart-item-caption + %tr.cart-item{"cart-id" => "{{cart.id}}"} + %td.cart-item-caption {{cart.cart_type}}: {{cart.product_info.name}} - .cart-item-price + %td.cart-item-price $ {{cart.product_info.price}} - .cart-item-quantity + %td.cart-item-quantity {{cart.quantity}} - .cart-item-actions - %a.button-grey.remove-cart{href: "#", "cart-id" => "{{cart.id}}"} DELETE - .clearall + %td.cart-item-actions + %a.button-grey.remove-cart{href: "#", "cart-id" => "{{cart.id}}"} + DELETE = "{% }); %}" .shopping-sub-total Subtotal: $ {{data.sub_total}} .clearall - .left - %a.button-grey{href: "#"} HELP .right + %a.button-grey{href: "#"} HELP %a.button-orange{href: "/client#/jamtrack"} CONTINUE SHOPPING %a.button-orange.proceed-checkout{href: "#"} PROCEED TO CHECKOUT .clearall \ No newline at end of file