diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs index 72e9e21..1dacf61 100644 --- a/client/public/components/compact-listing.mjs +++ b/client/public/components/compact-listing.mjs @@ -1,4 +1,4 @@ -import { RegisterComponent, Component, SideLoad } from './components.mjs'; +import { RegisterComponent, Component } from './components.mjs'; class CompactProductListing extends Component { static __IDENTIFY() { return 'compact-listing'; } @@ -8,12 +8,13 @@ class CompactProductListing extends Component { } Render() { + console.log(this.state); return { template: `
- -
+ +
{this.state.name}
@@ -34,13 +35,13 @@ class CompactProductListing extends Component { .product-listing-image { display: block; margin: 0 auto; - max-width: 320px; + max-width: 100%; } .product-listing-info { display: flex; align-items: flex-start; flex-direction: column; - max-width: 320px; + max-width: 100%; } .product-listing-name { font-size: 1.2em; @@ -58,6 +59,20 @@ class CompactProductListing extends Component { color: red; font-size: 1.1em; } + + @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { + .product-listing { + margin: 3px; + width: 400px; + } + .product-listing-image { + display: block; + } + .product-image { + max-width: 100%; + max-height: 100%; + } + } `, }; } diff --git a/client/public/components/components.mjs b/client/public/components/components.mjs index 9d3eb84..d14d12b 100644 --- a/client/public/components/components.mjs +++ b/client/public/components/components.mjs @@ -25,13 +25,10 @@ export class Component extends HTMLElement { this.root = this.attachShadow({ mode: 'open' }); this.state = {}; this.child = child; - - // give components a unique identifier - // TODO: Make this unique - // Components[child.__IDENTIFY()] = this; } // Override these + Update() { } Render() { Component.__WARN('Render'); } OnceRendered() { Component.__WARN('Render'); } static __IDENTIFY() { Component.__WARN('identify'); } @@ -49,6 +46,8 @@ export class Component extends HTMLElement { } this.setState(stateUpdateQueue); + this.Update(); + if (this.attributes.length === 0) { this.__INVOKE_RENDER(); } @@ -73,6 +72,7 @@ export class Component extends HTMLElement { attributeChangedCallback(name, newValue) { console.log(`attribute changed: ${name} ${newValue}`); this.setState({ ...this.state, [name]: newValue }); + this.Update(); this.__INVOKE_RENDER(); } diff --git a/client/public/components/css/navbar.css b/client/public/components/css/navbar.css index e790bd9..8e5784a 100644 --- a/client/public/components/css/navbar.css +++ b/client/public/components/css/navbar.css @@ -20,7 +20,9 @@ } .push-down { - align-self: flex-end; + display: flex; + align-self: flex-start; + padding-inline-start: 0px; flex-basis: 100%; margin-top: auto; } @@ -139,7 +141,7 @@ background: #e4d6ffde; flex-direction: column; justify-content: center; - opacity: 0; + opacity: 50; top: 0; right: 0; bottom: 0; @@ -148,15 +150,10 @@ text-align: center; z-index: 100; } - - .secondary-menu { - top: 0; - height: auto; - } .nav-menu .menu-item a { font-size: 1.5em; - margin: 8px; + margin: 0.5em; } .menu-active .nav-menu { @@ -196,7 +193,7 @@ } .search-wrapper { - flex-basis: 75%; + flex-basis: 83%; height: 100%; position: relative; display: flex; @@ -250,7 +247,7 @@ #cart-wrapper { display: flex; - flex-basis: 10%; + flex-basis: 4%; justify-content: space-between; padding-bottom: 2px; } @@ -261,6 +258,18 @@ #cart-number { padding-top: 9px; - font-size: 1em; + font-size: 37px; font-weight: 100; } + +@media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { + .search-wrapper { + flex-basis: 80%; + } + + #search-bar { + width: 100%; + margin: 0; + height: 2em; + } +} diff --git a/client/public/components/css/notificationbar.css b/client/public/components/css/notificationbar.css index 8c22ff4..1da6d57 100644 --- a/client/public/components/css/notificationbar.css +++ b/client/public/components/css/notificationbar.css @@ -18,7 +18,7 @@ padding: 0px 1em; height: 100%; line-height: 35px; - font-size: 1.3em; + font-size: 1em; font-weight: bold; text-align: center; } @@ -94,12 +94,12 @@ /* move it further up the screen than the mobile toggler would */ .notification-toggled { - transform: translatey(-200%); + transform: translatey(-300%); } /* don's show on mobile or 'small mode' */ @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { .notification-bar { - transform: translatey(-200%); + transform: translatey(-300%); } } diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs index 0749b6b..da74c28 100644 --- a/client/public/components/product-list.mjs +++ b/client/public/components/product-list.mjs @@ -5,7 +5,7 @@ class ProductList extends Component { constructor() { super(ProductList); - } + } async Render() { const route = this.state.getroute; @@ -25,6 +25,9 @@ class ProductList extends Component {
`, style: ` + h2 { + margin-block-start: 0; + } .product-list { display: flex; justify-content: space-evenly; diff --git a/client/public/components/templates/navbar.html b/client/public/components/templates/navbar.html index 8ee512e..98cfdf0 100644 --- a/client/public/components/templates/navbar.html +++ b/client/public/components/templates/navbar.html @@ -9,7 +9,7 @@ - - + + diff --git a/client/public/global.css b/client/public/global.css index 47e70dd..5f729a9 100644 --- a/client/public/global.css +++ b/client/public/global.css @@ -3,7 +3,7 @@ body { /* all EM in the document is based off this DONT TOUCH */ /* it's also kinda the default so you can touch it if you want */ /* BODY TEXT SHOULD BE 1EM */ - font-size: 18px; + font-size: 16px; color: #222; text-decoration: none; background-color: #D7C2FF; @@ -22,19 +22,13 @@ limited-margin { max-width: 1400px; } -content-margin { - position: relative; - display: inherit; - margin-left: auto; - margin-right: auto; - width: 80%; - max-width: 1300px; -} - - /* responsive sidebar stop scrolling */ /* also making sure this is applied any time it's on a mobile device */ @media (pointer:none), (pointer:coarse), screen and (max-width: 900px) { + body { + font-size: 25px; + } + limited-margin { width: 90%; /* padding-left: 1em; diff --git a/client/public/index.html b/client/public/index.html index 9141468..68d06db 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -1,6 +1,7 @@ LegoLog Home! + diff --git a/docs/CLIENT-FRAMEWORK.md b/docs/CLIENT-FRAMEWORK.md index a11a6ce..72e786e 100644 --- a/docs/CLIENT-FRAMEWORK.md +++ b/docs/CLIENT-FRAMEWORK.md @@ -60,6 +60,15 @@ class MyComponent extends Component { super(MyComponent); } + Update() { + return new Promise((resolve, reject) => { + setTimeout(() => { + this.state.name = 'Hello World'; + resolve(); + }, 1000); + }); + } + Render() { return { template: SideLoad('MyComponent.html'), @@ -81,4 +90,8 @@ State is updated with `setState()`. Within the HTML, any instance of `{this.state.}` will be replaced with the internal state of the component. +The `Update` method is called when the global state or the attribute +state changes, and is expected to modify the internal state before +rendering. + TODO: Global state