diff --git a/static/css/order-hardware.css b/static/css/order-hardware.css new file mode 100644 index 0000000..bf7c63d --- /dev/null +++ b/static/css/order-hardware.css @@ -0,0 +1,199 @@ +.mobileCloseMenu { + display: flex; + justify-content: flex-end; + padding: 1em 1em 0; +} + +/* + ##Device = Tablets, Ipads (portrait) + ##Screen = B/w 768px to 1024px +*/ +@media (min-width: 768px) and (max-width: 1024px) { + body { + font-size: .8rem; + } + + #root-shop .productItem { + padding: 2rem 1rem 1rem; + } + + #root-shop .productItem .content img { + height: 300px; + } + + #root-shop .productItem .content .price { + padding: .5rem; + } + + #root-shop .productItem .content h3 { + font-size: 1.5rem; + } + + #root-shop .productItem .content ul { + font-size: .6rem; + } + + #root-shop .panel .control { + flex-direction: column; + margin-bottom: 1.5rem; + } + + #root-shop .panel .control > .description, + #root-shop .panel .control > .crate-mode { + width: 100%; + } + + #root-shop .panel .control > .crate-mode { + text-align: left; + } + + #root-shop .panel .summary { + flex-direction: column; + } + + #root-shop .panel .summary>.summary-price table { + font-size: 1rem; + } + + #root-shop .panel .summary>.summary-form form { + width: 100%; + } + + #root-shop .panel { + padding: 1.5rem; + } + + #root-shop .mobileBtnDisplaySideMenu, + #root-shop .mobileCloseMenu { + display: none; + } +} +/* + ##Device = Tablets, Ipads (landscape) + ##Screen = B/w 768px to 1024px +*/ +@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) { + +} +/* + ##Device = Low Resolution Tablets, Mobiles (Landscape) + ##Screen = B/w 481px to 767px +*/ +@media (min-width: 481px) and (max-width: 767px) { + +} +/* + ##Device = Most of the Smartphones Mobiles (Portrait) + ##Screen = B/w 320px to 479px +*/ +@media (min-width: 320px) and (max-width: 480px) { + #root-shop .layout>aside.aside.menu-opened { + transform: translate3d(0, 0, 0); + transition: transform .3s; + width: 310px; + } + + #root-shop .layout>aside.aside.menu-opened + section.main { + transform: translate3d(310px, 0, 0); + transition: transform .3s; + } + + #root-shop .layout>aside.aside.menu-opened + section.main:after { + content: ''; + position: absolute; + height: 100%; + width: 100%; + background-color: rgba(0, 0, 0, .8); + top: 0; + bottom: 0; + } + + #root-shop .layout>aside.aside { + transform: translate3d(-310px, 0px, 0px); + transition: transform .3s; + position: fixed; + z-index: 1; + left: 0; + width: 310px; + height: 100%; + } + + #root-shop .layout>aside.aside:after { + width: 0; + } + + #root-shop .layout>aside.aside + section.main { + transform: translate3d(0, 0, 0); + transition: transform .3s; + } + + #root-shop .layout>section.main { + flex: 1; + max-width: 100%; + } + + #root-shop .productItem { + padding: 2rem 1rem 1rem; + } + + #root-shop .productItem .content img { + height: 300px; + } + + #root-shop .productItem .content .price { + padding: .5rem; + } + + #root-shop .panel { + padding: 1.3rem; + } + + #root-shop .panel .control { + flex-direction: column; + margin-bottom: 1.5rem; + } + + #root-shop .panel .control > .description, + #root-shop .panel .control > .crate-mode { + width: 100%; + } + + #root-shop .panel .control > .crate-mode { + text-align: left; + } + + #root-shop .panel .summary { + flex-direction: column; + } + + #root-shop .panel .summary>.summary-price table { + font-size: .7rem; + } + + #root-shop .panel .summary>.summary-form form { + width: 100%; + } + + #root-shop .panel .summary>.summary-price tfoot { + font-size: .85rem; + } + + #root-shop .panel .summary>.summary-form form input[type="submit"] { + margin-bottom: 1em; + } + + #root-shop .mobileBtnDisplaySideMenu { + background-color: #0d3547; + border-bottom-right-radius: 30px; + border-top-right-radius: 30px; + width: 80px; + padding: 5px 0 5px 10px; + margin-bottom: 15px; + margin-left: -1.3rem; + } + + #root-shop table tfoot > tr { + display: flex !important; + justify-content: space-between; + } +} \ No newline at end of file diff --git a/static/images/shop/icon-close-white.svg b/static/images/shop/icon-close-white.svg new file mode 100644 index 0000000..3d03769 --- /dev/null +++ b/static/images/shop/icon-close-white.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/static/js/shop.jsx b/static/js/shop.jsx index 735b560..90d2e2d 100644 --- a/static/js/shop.jsx +++ b/static/js/shop.jsx @@ -136,6 +136,14 @@ class Layout extends React.PureComponent { return { aside: PropTypes.any, main: PropTypes.any, + mobileSideMenuShouldOpen: PropTypes.bool, + onClickToggleMobileSideMenu: PropTypes.func, + }; + } + + static get defaultProps() { + return { + mobileSideMenuShouldOpen: false, }; } @@ -143,14 +151,20 @@ class Layout extends React.PureComponent { const { aside, main, + mobileSideMenuShouldOpen, + onClickToggleMobileSideMenu } = this.props; return (
- + -
{main}
+ {mobileSideMenuShouldOpen ? ( +
{main}
+ ) : ( +
{main}
+ )}
); @@ -722,6 +736,8 @@ class OrderPanel extends React.PureComponent { crate: PropTypes.element, summaryPrice: PropTypes.element, form: PropTypes.element, + isMobile: PropTypes.bool, + onClickToggleMobileSideMenu: PropTypes.func, }; } @@ -733,11 +749,21 @@ class OrderPanel extends React.PureComponent { crate, summaryPrice, form, + isMobile, + onClickToggleMobileSideMenu } = this.props; return (
+ {isMobile ? ( +
+ +
+ ) : null} +

{title}

@@ -1026,7 +1052,9 @@ class Backlog extends React.PureComponent { currency: PropTypes.string, data: PropTypes.object.isRequired, items: PropTypes.object, + isMobile: PropTypes.bool, onClickAddItem: PropTypes.func, + onClickToggleMobileSideMenu: PropTypes.func, }; } @@ -1042,6 +1070,8 @@ class Backlog extends React.PureComponent { data, items, onClickAddItem, + onClickToggleMobileSideMenu, + isMobile, } = this.props; const ordered_items = data.itemIds.map(itemId => items[itemId]); @@ -1072,6 +1102,14 @@ class Backlog extends React.PureComponent { ref={provided.innerRef} {...provided.droppableProps}> + {isMobile ? ( +
+ +
+ ) : null} + {products} {provided.placeholder && ( @@ -1115,6 +1153,7 @@ class Shop extends React.PureComponent { this.handleClickSelectItem = this.handleClickSelectItem.bind(this); this.handleClickSubmit = this.handleClickSubmit.bind(this); this.handleToggleOverlayRemove = this.handleToggleOverlayRemove.bind(this); + this.handleClickToggleMobileSideMenu = this.handleClickToggleMobileSideMenu.bind(this); } componentDidMount() { @@ -1401,6 +1440,13 @@ class Shop extends React.PureComponent { } } + handleClickToggleMobileSideMenu() { + this.setState({ + ...this.state, + mobileSideMenuShouldOpen: !this.state.mobileSideMenuShouldOpen, + }); + } + checkAlerts(prevItems, newItems) { console.log('--- START CHECKING CRATE WARNING ---'); @@ -1684,6 +1730,7 @@ class Shop extends React.PureComponent { items, columns, rules, + mobileSideMenuShouldOpen, } = this.state; return ( @@ -1691,16 +1738,22 @@ class Shop extends React.PureComponent { + onClickAddItem={this.handleClickAddItem} + onClickToggleMobileSideMenu={this.handleClickToggleMobileSideMenu} + isMobile={window.deviceIsMobile()}> } main={( +{% endblock %} + + {% block hero %}{% endblock %} @@ -24,6 +30,9 @@ return (typeof window.orientation !== 'undefined') || (navigator.userAgent.indexOf('IEMobile') !== -1); }; + window.deviceIsMobile = deviceIsMobile; + + return; if (deviceIsMobile()) { alert('The online crate configuration tool is not available for mobile browsers yet. Please use a desktop computer or email us at sales@m-l****.hk to get a quote.'); }