From 14c365b20fc843e26410922ae6f5f91d39774a92 Mon Sep 17 00:00:00 2001 From: Egor Savkin Date: Fri, 15 Dec 2023 17:26:52 +0800 Subject: [PATCH] Add legend to help users discover options Signed-off-by: Egor Savkin --- sass/css/_shop.scss | 22 ++++++++++++++------ static/css/order-hardware.css | 38 +++++++++++++++++++++++++++++++---- static/js/shop.bundle.js | 2 +- static/js/shop/Crate.jsx | 4 ++-- static/js/shop/CrateMode.jsx | 2 +- static/js/shop/Legend.jsx | 21 +++++++++++++++++++ static/js/shop/OrderPanel.jsx | 9 +++++++-- static/js/shop/Shop.jsx | 2 ++ static/js/shop/shop_store.js | 11 +++++++--- static/js/shop_data.js | 10 +++++++++ 10 files changed, 102 insertions(+), 19 deletions(-) create mode 100644 static/js/shop/Legend.jsx diff --git a/sass/css/_shop.scss b/sass/css/_shop.scss index 1070cd2..8bb7989 100644 --- a/sass/css/_shop.scss +++ b/sass/css/_shop.scss @@ -212,10 +212,22 @@ button { display: flex; font-size: .8rem; - > p { + > .description { width: 50%; padding-right: 30px; } + + > .legend { + //d-flex justify-content-end align-self-start + display: flex; + justify-content: end; + align-self: start; + width: 50%; + table { + width: 75%; + max-width: 300px; + } + } } .summary { @@ -560,6 +572,7 @@ button { .crate-bar { width: 100%; + font-size: 0.9rem; .crate-mode { text-align: left; @@ -572,6 +585,7 @@ button { color: inherit; text-decoration: none; padding-bottom: 5px; + display: inline-block; } a.active { font-weight: 700; @@ -663,17 +677,13 @@ button { color: white; font-weight: 700; font-size: .6rem; - padding: .8rem 1rem; + padding: .5rem .8rem; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.15); text-align: left; p { margin-bottom: 0; } - - p + p { - padding-bottom: 8px; - } } .k-popup-connectors { diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css index e8b1064..0f45610 100644 --- a/static/css/order-hardware.css +++ b/static/css/order-hardware.css @@ -108,9 +108,17 @@ } #root-shop .panel .control > .description, + #root-shop .panel .control > .legend, #root-shop .crate-mode { width: 100%; } + #root-shop .panel .control > .legend { + justify-content: center; + align-self: center; + } + #root-shop .panel .control > .legend tr { + padding: 0; + } #root-shop .crate-mode { text-align: left; @@ -308,12 +316,23 @@ } #root-shop .panel .control > .description, - #root-shop .crate-mode { + #root-shop .panel .control > .legend { width: 100%; } + #root-shop .panel .control > .legend { + justify-content: center; + align-self: center; + } + #root-shop .panel .control > .legend tr { + padding: 0; + } - #root-shop .crate-mode { + #root-shop .panel .crate .crate-bar .crate-mode { text-align: left; + width: 50%; + } + #root-shop .panel .crate .crate-bar .crate-mode a { + display: block; } #root-shop .panel .summary { @@ -571,12 +590,23 @@ } #root-shop .panel .control > .description, - #root-shop .panel .control > .crate-mode { + #root-shop .panel .control > .legend { width: 100%; } + #root-shop .panel .control > .legend { + justify-content: center; + align-self: center; + } + #root-shop .panel .control > .legend tr { + padding: 0; + } - #root-shop .panel .control > .crate-mode { + #root-shop .panel .crate .crate-bar .crate-mode { text-align: left; + width: 50%; + } + #root-shop .panel .crate .crate-bar .crate-mode a { + display: block; } #root-shop .panel .summary { diff --git a/static/js/shop.bundle.js b/static/js/shop.bundle.js index a91ac09..29b53a1 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={841:(e,t)=>{"use strict";var n=Symbol.for("react.element"),r=Symbol.for("react.portal"),o=Symbol.for("react.fragment"),a=Symbol.for("react.strict_mode"),i=Symbol.for("react.profiler"),l=Symbol.for("react.provider"),s=Symbol.for("react.context"),u=Symbol.for("react.server_context"),c=Symbol.for("react.forward_ref"),d=Symbol.for("react.suspense"),f=Symbol.for("react.suspense_list"),p=Symbol.for("react.memo"),m=Symbol.for("react.lazy");Symbol.for("react.offscreen");Symbol.for("react.module.reference"),t.isContextConsumer=function(e){return function(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case n:switch(e=e.type){case o:case i:case a:case d:case f:return e;default:switch(e=e&&e.$$typeof){case u:case s:case c:case m:case p:case l:return e;default:return t}}case r:return t}}}(e)===s}},366:(e,t,n)=>{"use strict";e.exports=n(841)},184:(e,t)=>{var n;!function(){"use strict";var r={}.hasOwnProperty;function o(){for(var e=[],t=0;t{"use strict";var r=n(296),o={childContextTypes:!0,contextType:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,getDerivedStateFromError:!0,getDerivedStateFromProps:!0,mixins:!0,propTypes:!0,type:!0},a={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]||o}l[r.ForwardRef]={$$typeof:!0,render:!0,defaultProps:!0,displayName:!0,propTypes:!0},l[r.Memo]=i;var u=Object.defineProperty,c=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,f=Object.getOwnPropertyDescriptor,p=Object.getPrototypeOf,m=Object.prototype;e.exports=function e(t,n,r){if("string"!=typeof n){if(m){var o=p(n);o&&o!==m&&e(t,o,r)}var i=c(n);d&&(i=i.concat(d(n)));for(var l=s(t),g=s(n),h=0;h{"use strict";var n="function"==typeof Symbol&&Symbol.for,r=n?Symbol.for("react.element"):60103,o=n?Symbol.for("react.portal"):60106,a=n?Symbol.for("react.fragment"):60107,i=n?Symbol.for("react.strict_mode"):60108,l=n?Symbol.for("react.profiler"):60114,s=n?Symbol.for("react.provider"):60109,u=n?Symbol.for("react.context"):60110,c=n?Symbol.for("react.async_mode"):60111,d=n?Symbol.for("react.concurrent_mode"):60111,f=n?Symbol.for("react.forward_ref"):60112,p=n?Symbol.for("react.suspense"):60113,m=n?Symbol.for("react.suspense_list"):60120,g=n?Symbol.for("react.memo"):60115,h=n?Symbol.for("react.lazy"):60116,y=n?Symbol.for("react.block"):60121,b=n?Symbol.for("react.fundamental"):60117,v=n?Symbol.for("react.responder"):60118,w=n?Symbol.for("react.scope"):60119;function E(e){if("object"==typeof e&&null!==e){var t=e.$$typeof;switch(t){case r:switch(e=e.type){case c:case d:case a:case l:case i:case p:return e;default:switch(e=e&&e.$$typeof){case u:case f:case h:case g:case s:return e;default:return t}}case o:return t}}}function x(e){return E(e)===d}t.AsyncMode=c,t.ConcurrentMode=d,t.ContextConsumer=u,t.ContextProvider=s,t.Element=r,t.ForwardRef=f,t.Fragment=a,t.Lazy=h,t.Memo=g,t.Portal=o,t.Profiler=l,t.StrictMode=i,t.Suspense=p,t.isAsyncMode=function(e){return x(e)||E(e)===c},t.isConcurrentMode=x,t.isContextConsumer=function(e){return E(e)===u},t.isContextProvider=function(e){return E(e)===s},t.isElement=function(e){return"object"==typeof e&&null!==e&&e.$$typeof===r},t.isForwardRef=function(e){return E(e)===f},t.isFragment=function(e){return E(e)===a},t.isLazy=function(e){return E(e)===h},t.isMemo=function(e){return E(e)===g},t.isPortal=function(e){return E(e)===o},t.isProfiler=function(e){return E(e)===l},t.isStrictMode=function(e){return E(e)===i},t.isSuspense=function(e){return E(e)===p},t.isValidElementType=function(e){return"string"==typeof e||"function"==typeof e||e===a||e===d||e===l||e===i||e===p||e===m||"object"==typeof e&&null!==e&&(e.$$typeof===h||e.$$typeof===g||e.$$typeof===s||e.$$typeof===u||e.$$typeof===f||e.$$typeof===b||e.$$typeof===v||e.$$typeof===w||e.$$typeof===y)},t.typeOf=E},296:(e,t,n)=>{"use strict";e.exports=n(103)},143:e=>{"use strict";e.exports=function(e,t,n,r,o,a,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 u=[n,r,o,a,i,l],c=0;(s=new Error(t.replace(/%s/g,(function(){return u[c++]})))).name="Invariant Violation"}throw s.framesToPop=1,s}}},962:function(e,t,n){var r,o;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 o,a,i,l,s,u=e.get_operator(n),c=n[u];if(Array.isArray(c)||(c=[c]),"if"===u||"?:"==u){for(o=0;o0){var d=String(u).split("."),f=t;for(o=0;o{"use strict";var r=n(414);function o(){}function a(){}a.resetWarningCache=o,e.exports=function(){function e(e,t,n,o,a,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:a,resetWarningCache:o};return n.PropTypes=n,n}},697:(e,t,n)=>{e.exports=n(703)()},414:e=>{"use strict";e.exports="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"},448:(e,t,n)=>{"use strict";var r=n(294),o=n(840);function a(e){for(var t="https://reactjs.org/docs/error-decoder.html?invariant="+e,n=1;n