From 17c6321c8bb42b34f0fc080594ae37e500222986 Mon Sep 17 00:00:00 2001 From: Will Marshall Date: Wed, 22 Jan 2014 11:47:10 +1100 Subject: [PATCH] Adding some basic collapse/expand for variants in Shop --- app/assets/images/collapse.png | Bin 0 -> 1586 bytes app/assets/images/expand.png | Bin 0 -> 1593 bytes .../stylesheets/darkswarm/shop.css.sass | 13 ++++++-- .../stylesheets/darkswarm/tables.css.sass | 5 +++ app/views/shop/_products.html.haml | 31 +++++++++++------- spec/features/consumer/shopping_spec.rb | 13 +++++++- 6 files changed, 47 insertions(+), 15 deletions(-) create mode 100644 app/assets/images/collapse.png create mode 100644 app/assets/images/expand.png create mode 100644 app/assets/stylesheets/darkswarm/tables.css.sass diff --git a/app/assets/images/collapse.png b/app/assets/images/collapse.png new file mode 100644 index 0000000000000000000000000000000000000000..1ac2122d8afe415ee243f3afeb0d5b314df713c9 GIT binary patch literal 1586 zcmeAS@N?(olHy`uVBq!ia0vp^k|4~%1SGw?g-k%464!{5;QX|b^2DN42FH~Aq*MjZ z+{EB@w}FfdWj%4dKI|^K-~-sHue<-iOJciB??KY z>6v-9O7C~?S5nAKu~iB;^)>Jbs{}UJ3djZt>nkaMm6T-LDnT3-;TxdfoL`ixV5(=Vn`~fcs9E!^lV%s6w~6GOr}DLN~8i8D@e@YH@N=Wx*A$ZZ2GPaY;}r!o64xE)J1T?`q ze0{Av^NLFn^O93NU2K(rX6R*RrdXL;7#ld6y11D;0mIqQ)!4$=#nsK(#2LtRwlH)w zg6Vb1PcF?(%`1WFO@ZrmHNdGClo)agfHu3N7G;*DrnnX5=PH0bZIy}JEiO3CgX&Ge z=@u7PoO<#DphYAP1iGQ}cl7y$G1FZ?`ecWME)g;_2cTQgLg} zRB!K9fg)|C)taB2TGAF)O1Aj zm8V{m+Z@$c2XoBy zb#yFb_~cTjeqw+9_3PFM9XS~p8ylM!CA)U+v=oS1yY2Q{rd$)LJ@aSH`tl+&6_v>-;kG|Z*FdWGekuwF}O>xNjE<~fBWsX6*hLZwr8a; zt`0Pty>!mSj1m_CN41|TE;#*2nLB4rOnkh)zW!#tqxnrWAsLE$Hpj)q_4W15@q1pM zeZ@RrVJn0Cl+#cBmT%s&#l)qctgKC)t=5&B(SDU-%6a$Zpzrof>_?I|c6M@FGU~Pf zT~)B{Xp$t0mIzmag__TFAGM$L_f0qoSpJzv_0}4H`uXSKL&c{aDneI&JbT7==kepk zb2u6MDypg$xjs3+Gp4U=*WGso7Hfi5iiwLC{=9ql?zL-TxnGnenPe7T%y_cvk#pb8 z=bu@b7|-0T&fI?6P~`QZ#QG=B4WIA*{p0)X;jv?EwmQ=*Yincgv9qW&F)xaJYI|xy zT)~uh?Z5Xv6tHM7Uw-cVdC|vgQ9u_p=N1)BGBh&d)@8A1GG26S$9zL0HV#ps)V=E2 z8_kW4H*ep5JgA;kNggORzqlz-nyXdf)yfbq^BxYR$-uCxKK$!_%u>!7xi;(8thtf1 z?coAo#O~gGy3xpbXF%K8>R)Z|-rxQ(N9yP@x5Ll&*6=58{Q2|e`f3hmCaJG-zv}G6 u?3;QwM^yESC35B*|0h`c{T9k~Z8#XVj9T-G@yGywp#U0*8z literal 0 HcmV?d00001 diff --git a/app/assets/images/expand.png b/app/assets/images/expand.png new file mode 100644 index 0000000000000000000000000000000000000000..aa3fc20f39727164987377b2c0b25a06dccd583e GIT binary patch literal 1593 zcmaJ>drT8|96uQ<;_wAw*ooe*%sRF22XMA(UqGD&R*I`i2uFLg4fL+N9<;#d9O@83 zFmV+fzL7t)+GPyP7J>{^h;zy|jZ;yXsAI-}nQKvCjNKvN{usO55;e!pUoh(3^N1DS^BkWPd^0l5j!MnR1YF{3&ZF%^Dv z8I=OS8!=YBfi!40!baT2LFgEc%Vww003coGvLnV^lmxR;vlWv;&zf5y&}x!FABwd+ ztzC&)tVu-#npTvoHx}g@<4w@IwV>1mQv^1YL_n7<4|BjS88prdQ#S49Lg07^nJa@{ z6=l$-f=Zk~K`}?jHuCs*MPiABzZw+q_yR7Ex+QGB2o_6VK`c0NK~y%vlmqKj z2@|=flMJ$uq#fpRolYmmDdgaUnahulkEb~V0yY)Fb`)YH;$mYC<|Km(br=b&owVW@ zNHZeYcs?nEs7hb8V6#urVvdP1Q3K<;5IdL8;n6Kk25PncA8NBrMLS3x`nul#BzEWv z?I>4=I`DkLNG&dhNvE>IN&-bloY3QV-sBWhEjWogEVvz1rb)mRTEu9@Xvcfw2(1>@ zU=9+&jHpH>gD4J;)oOypaYCM4tWv}(s5$f1!Z@KyouCvcDN`B8mkTDbD%_ZFLosp^ zYkG}UPK%|*V6#)1RVZOCKurk*ZUe`ghON`r55#OC6@9k7AVG2};;24>qa+Ajqpx$@Q)~hdj+G+46`oE^{{ NyY)E7V@8a)Y zd*WhN?=mZ*RH)Yn8?ALS7<+>v_Jnps&A6Z>*IoLi`9-F|PdanlJu*jTU14$YzKFr+ z&xs+#v!Q;Ix2e1T!2@J_TUOJSPf8AK@}{2_32r`pnk%W5$z&yN_sypPp->ne9?oPk z&u;Q=IeY)^UGkTbwMVZ!UZn7w9<;Z$wT+IBwzrpd_s=@{*HC}I4L;0?tca{Y9gc8w zx*>zb*z^3`bLS+nv8+Io*XuP2PW@yF`V@F;tSs>IWz@W~&d$!;LdKq-fez1*vn8|V z-aYZbjc0aYmGkD$pVK!uIJgb0+;=E(XJk8T)xOJ8sq~D`*IVO{ekfhpxZwWg!^teq zhJ|^}_c$dzsmFH$i5VFgB1Txl^3fYVDz-6KBxR&)$F_YI8MH($)~2LfIj6zCzO7H! zdB0bO*n>~iH=xC4vw37>mv6H@U4557kS^_dOf0Q7qo}$tkzx)D`28pEc6^z| zvq);ItEv>o7li#DD5|NcN#7naqv}}gz`%e$rLwB3w65$4ueGPOvGK+#&w^hqixc|# z`gUw?T1~>yafE2in(nzf_WQ`VCE0HGkuhOHQS`gMlJ!wrLiDXs3_;n_QP zhq8m?p0#MdV6j-`e4l&n#X`O1osX~0N$BtBm?b%r%;2LxWFL!&$yY5tb-ucFW)#q^K6J*jdSEI2GuNn-RX#;l=|ABl BW_bVr literal 0 HcmV?d00001 diff --git a/app/assets/stylesheets/darkswarm/shop.css.sass b/app/assets/stylesheets/darkswarm/shop.css.sass index 0c345c13f1..6927bdb5a2 100644 --- a/app/assets/stylesheets/darkswarm/shop.css.sass +++ b/app/assets/stylesheets/darkswarm/shop.css.sass @@ -82,11 +82,18 @@ shop display: block padding-top: 36px table + table-layout: fixed width: 100% border-collapse: collapse border: none th line-height: 50px + &.name + width: 265px + &.notes + width: 280px + &.variant + width: 200px .notes max-width: 300px td, th @@ -96,12 +103,12 @@ shop border-right: 0px td padding: 20px 0px + &.name img + float: left + margin-right: 20px input[type=number] width: 60px margin: 0px - - - display: block float: right padding-top: 14px diff --git a/app/assets/stylesheets/darkswarm/tables.css.sass b/app/assets/stylesheets/darkswarm/tables.css.sass new file mode 100644 index 0000000000..18433ca84d --- /dev/null +++ b/app/assets/stylesheets/darkswarm/tables.css.sass @@ -0,0 +1,5 @@ +table thead tr, table tbody tr + th, td + box-sizing: border-box + padding-left: 12px + padding-right: 12px diff --git a/app/views/shop/_products.html.haml b/app/views/shop/_products.html.haml index b2259fdd33..8725591d44 100644 --- a/app/views/shop/_products.html.haml +++ b/app/views/shop/_products.html.haml @@ -4,24 +4,33 @@ %input.button.right{type: :submit, value: "Check Out"} %table %thead - %th{colspan: 2} Item + %th.name Item %th.notes Notes - %th Variant + %th.variant Variant %th QTY %th Bulk %th Price %tbody{"ng-repeat" => "product in data.products | filter:query"} %tr.product - %td + %td.name %img{"ng-src" => "{{ product.master.images[0].small_url }}"} - {{product.master.images[0].alt}} - %td - %h5 - {{ product.name }} - {{ product.supplier.name }} + %div + %h5 + {{ product.name }} + {{ product.supplier.name }} %td.notes {{ product.description | truncate:80 }} - %td {{ product.master.options_text }} + %td + {{ product.master.options_text }} + + %span{"ng-show" => "product.variants.length > 0"} + %img.collapse{src: "/assets/collapse.png", + "ng-show" => "product.show_variants", + "ng-click" => "product.show_variants = !product.show_variants"} + + %img.expand{src: "/assets/expand.png", + "ng-show" => "!product.show_variants", + "ng-click" => "product.show_variants = !product.show_variants"} %td %span{"ng-show" => "(product.variants.length == 0)"} %input{type: :number, @@ -39,8 +48,8 @@ %td.price %small{"ng-show" => "(product.variants.length > 0)"} from ${{ product.price }} - %tr{"ng-repeat" => "variant in product.variants"} - %td{colspan: 3} + %tr{"ng-repeat" => "variant in product.variants", "ng-show" => "product.show_variants"} + %td{colspan: 2} %td {{variant.options_text}} %td %input{type: :number, diff --git a/spec/features/consumer/shopping_spec.rb b/spec/features/consumer/shopping_spec.rb index c1f543e29e..3d6843ae61 100644 --- a/spec/features/consumer/shopping_spec.rb +++ b/spec/features/consumer/shopping_spec.rb @@ -46,7 +46,6 @@ feature "As a consumer I want to shop with a distributor", js: true do oc1 = create(:simple_order_cycle, distributors: [distributor]) exchange = Exchange.find(oc1.exchanges.to_enterprises(distributor).outgoing.first.id) exchange.update_attribute :pickup_time, "turtles" - visit shop_path page.should have_selector "option[selected]", text: 'turtles' end @@ -118,6 +117,18 @@ feature "As a consumer I want to shop with a distributor", js: true do it "should not show quantity field for product with variants" do page.should_not have_selector("#variants_#{product.master.id}", visible: true) end + + it "collapses variants by default" do + page.should_not have_text variant.options_text + end + + it "expands variants" do + find(".expand").trigger "click" + page.should have_text variant.options_text + find(".collapse").trigger "click" + page.should_not have_text variant.options_text + end + it "allows the user to expand variants" end describe "Filtering on hand and on demand products" do