From aecfce8718b544d444e7dc021cc072135ab39402 Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Fri, 1 Nov 2024 17:32:20 +0800 Subject: [PATCH] Add horizontal items into the cart Signed-off-by: Egor Savkin --- sass/css/_shop.scss | 44 ++++++- static/images/shop/icon-drag-and-drop.svg | 1 + static/js/shop.bundle.js | 2 +- static/js/shop/Cart.jsx | 39 ++++-- static/js/shop/CartHorizontal.jsx | 59 +++++++++ static/js/shop/Catalog.jsx | 2 +- static/js/shop/Crate.jsx | 9 +- static/js/shop/FakePlaceholder.jsx | 2 +- static/js/shop/OptionsWrapper.jsx | 27 ++-- static/js/shop/OrderPanel.jsx | 1 - static/js/shop/ProductCartItem.jsx | 11 +- static/js/shop/ProductCartItemHorizontal.jsx | 96 ++++++++++++++ static/js/shop/ProductItem.jsx | 7 +- static/js/shop/SummaryCrate.jsx | 9 ++ static/js/shop/SummaryCrateCard.jsx | 34 +++-- static/js/shop/SummaryOrderShipping.jsx | 3 +- static/js/shop/json_porter.js | 14 +- static/js/shop/options/validation.js | 6 +- static/js/shop/shop_store.js | 129 ++++++++++++------- static/js/shop_data.js | 5 +- 20 files changed, 398 insertions(+), 102 deletions(-) create mode 100644 static/images/shop/icon-drag-and-drop.svg create mode 100644 static/js/shop/CartHorizontal.jsx create mode 100644 static/js/shop/ProductCartItemHorizontal.jsx diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index 84b6c1e..7f192fa 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -117,10 +117,20 @@ button { margin-bottom: 20px; } + button { + img { + cursor: pointer; + } + } + img { height: 400px; align-self: center; border: 0; + cursor: grab; + &.default-icon { + height: 144px; + } } h3 { @@ -487,8 +497,40 @@ button { &.horizontal { flex-direction: column; - min-height: 50px; + min-height: 10px; overflow-y: auto; + overflow-x: hidden; + width: 100%; + + > div { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-content: center; + align-items: center; + width: 100%; + max-width: 100%; + padding: 5px 3px; + } + .progress-container { + max-width: 40px; + padding: 0 10px; + justify-self: start; + } + .product-name { + justify-self: start; + padding: 0 10px; + max-width: 100%; + width: 100%; + } + .removeHorizontal { + justify-self: end; + padding: 0 10px; + img { + width: 20px; + height: 20px; + } + } } > div { diff --git a/static/images/shop/icon-drag-and-drop.svg b/static/images/shop/icon-drag-and-drop.svg new file mode 100644 index 0000000..1601063 --- /dev/null +++ b/static/images/shop/icon-drag-and-drop.svg @@ -0,0 +1 @@ + diff --git a/static/js/shop.bundle.js b/static/js/shop.bundle.js index 2364b20..31e5241 100644 --- a/static/js/shop.bundle.js +++ b/static/js/shop.bundle.js @@ -1,2 +1,2 @@ /*! For license information please see shop.bundle.js.LICENSE.txt */ -(()=>{var e={146:(e,t,n)=>{"use strict";var r=n(363),a={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},o={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},i={$$typeof:!0,compare:!0,defaultProps:!0,displayName:!0,propTypes:!0,type:!0},l={};function s(e){return r.isMemo(e)?i:l[e.$$typeof]||a}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var c=Object.defineProperty,u=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,p=Object.getOwnPropertyDescriptor,f=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var a=f(n);a&&a!==m&&e(t,a,r)}var i=u(n);d&&(i=i.concat(d(n)));for(var l=s(t),g=s(n),h=0;h{"use strict";e.exports=function(e,t,n,r,a,o,i,l){if(!e){var s;if(void 0===t)s=new Error("Minified exception occurred; use the non-minified dev environment for the full error message and additional helpful warnings.");else{var c=[n,r,a,o,i,l],u=0;(s=new Error(t.replace(/%s/g,(function(){return c[u++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},678:function(e,t,n){var r,a;r=function(){"use strict";Array.isArray||(Array.isArray=function(e){return"[object Array]"===Object.prototype.toString.call(e)});var e={},t={"==":function(e,t){return e==t},"===":function(e,t){return e===t},"!=":function(e,t){return e!=t},"!==":function(e,t){return e!==t},">":function(e,t){return e>t},">=":function(e,t){return e>=t},"<":function(e,t,n){return void 0===n?e=t?[]:r}};return e.is_logic=function(e){return"object"==typeof e&&null!==e&&!Array.isArray(e)&&1===Object.keys(e).length},e.truthy=function(e){return!(Array.isArray(e)&&0===e.length||!e)},e.get_operator=function(e){return Object.keys(e)[0]},e.get_values=function(t){return t[e.get_operator(t)]},e.apply=function(n,r){if(Array.isArray(n))return n.map((function(t){return e.apply(t,r)}));if(!e.is_logic(n))return n;var a,o,i,l,s,c=e.get_operator(n),u=n[c];if(Array.isArray(u)||(u=[u]),"if"===c||"?:"==c){for(a=0;a0){var d=String(c).split("."),p=t;for(a=0;a{"use strict";var r=n(925);function a(){}function o(){}o.resetWarningCache=a,e.exports=function(){function e(e,t,n,a,o,i){if(i!==r){var l=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use PropTypes.checkPropTypes() to call them. Read more at http://fb.me/use-check-prop-types");throw l.name="Invariant Violation",l}}function t(){return e}e.isRequired=e;var n={array:e,bigint:e,bool:e,func:e,number:e,object:e,string:e,symbol:e,any:e,arrayOf:t,element:e,elementType:e,instanceOf:t,node:e,objectOf:t,oneOf:t,oneOfType:t,shape:t,exact:t,checkPropTypes:o,resetWarningCache:a};return n.PropTypes=n,n}},556:(e,t,n)=>{e.exports=n(694)()},925:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},551:(e,t,n)=>{"use strict";var r=n(540),a=n(982);function o(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n