diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs index 7eecb67..2919fea 100644 --- a/client/public/components/compact-listing.mjs +++ b/client/public/components/compact-listing.mjs @@ -28,15 +28,18 @@ class CompactProductListing extends Component { `, style: ` .product-listing { + position: relative; display: flex; flex-direction: column; margin: 7px; max-width: 320px; + z-index: 0; } .product-listing-image { display: block; margin: 0 auto; + margin-bottom: 7px; max-width: 100%; } @@ -103,7 +106,7 @@ class CompactProductListing extends Component { productListing.setAttribute('id', this.state.id); productListing.setAttribute('type', this.state.type); location.appendChild(productListing); - location.style.display = 'block'; + location.style.display = 'flex'; } OnRender() { diff --git a/client/public/components/css/navbar.css b/client/public/components/css/navbar.css index 5728f33..8cc7366 100644 --- a/client/public/components/css/navbar.css +++ b/client/public/components/css/navbar.css @@ -1,15 +1,45 @@ +.navbar-container { + display: block; + position: relative; + margin-left: auto; + margin-right: auto; + top:0px!important; + margin-top:-10px!important; + margin-bottom:0px!important; + width: 100%; + background-color: #D7C2FF; + box-shadow: #222 0px 0px 5px; + background-size: 100% 100%; + z-index: 0; +} + .navbar { - position: sticky; + justify-content: space-between; + position: relative; + width: 85%; + max-width: 1400px; display: flex; font-family: 'Josefin Sans', sans-serif; - justify-content: space-between; align-items: center; flex-direction: row; flex-wrap: wrap; font-size: 2.3em; margin: auto; - padding-top: 1em; - color: #222; + padding-top: 1.6em; + z-index: 10 !important; +} + +@media screen and (max-width: 900px) { + .navbar { + width: 90%; + } +} + +/* mobile */ +@media (pointer:none), (pointer:coarse) { + .navbar { + width: 95%; + } } .push-right { @@ -28,6 +58,7 @@ } .logo { + z-index: 51; flex-grow: 2; transform: translatey(-40%); } @@ -41,7 +72,7 @@ position: relative; height: 60px; width: 60px; - z-index: 200; + z-index: 100; } .hamburger-line { @@ -149,7 +180,7 @@ left: 0; transform: translatey(-100%); text-align: center; - z-index: 100; + z-index: 99; } .nav-menu .menu-item a { @@ -200,7 +231,7 @@ display: flex; min-width: 100px; /* margin-left: 8px; */ - z-index: 1; + z-index: 10; } /* Modified version of https://codepen.io/mihaeltomic/pen/vmwMdm */ diff --git a/client/public/components/css/notificationbar.css b/client/public/components/css/notificationbar.css index e1f61f1..56ed001 100644 --- a/client/public/components/css/notificationbar.css +++ b/client/public/components/css/notificationbar.css @@ -1,6 +1,7 @@ .notification-bar { display: inline-block; - position: absolute; + z-index: 50; + position: fixed; top: 0; left: 0; width: 100%; @@ -65,7 +66,7 @@ outline: none; height: 2em; width: 2em; - z-index: 100; + z-index: 50; transition: all 0.2s ease-in; } diff --git a/client/public/components/css/product-listing.css b/client/public/components/css/product-listing.css index e69de29..ab14f0f 100644 --- a/client/public/components/css/product-listing.css +++ b/client/public/components/css/product-listing.css @@ -0,0 +1,27 @@ +.product-page { + display: flex; + position: fixed; + margin-left: auto; + margin-right: auto; + top: 10%; + width: 85%; + height: 100%; + max-width: 1400px; + background-color: #DFE2E2; + box-shadow: #748181 0px 0px 5px; + z-index: 1; +} + +@media screen and (max-width: 900px) { + .product-page { + width: 90%; + } +} + +/* mobile */ +@media (pointer:none), (pointer:coarse) { + .product-page { + width: 95%; + } +} + diff --git a/client/public/components/notificationbar.mjs b/client/public/components/notificationbar.mjs index a83e84b..1a23ab3 100644 --- a/client/public/components/notificationbar.mjs +++ b/client/public/components/notificationbar.mjs @@ -32,6 +32,7 @@ class NotificationBar extends Component { endTime: data.data.end, timePretty: `${days}d ${hours}h ${minutes}m ${seconds}s`, }); + this.wasClosed = false; } Update() { @@ -56,13 +57,13 @@ class NotificationBar extends Component { const notificationToggler = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-toggler'); const notificationBar = document.querySelector('notificationbar-component').shadowRoot.querySelector('.notification-bar'); - notificationToggler.addEventListener('click', () => { - this.setState({ - ...this.getState, - isOpen: !this.getState.isOpen, - }); - + if (this.wasClosed) { notificationBar.classList.add('notification-toggled'); + } + + notificationToggler.addEventListener('click', () => { + notificationBar.classList.add('notification-toggled'); + this.wasClosed = true; }); } } diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs index 6cca3ab..a575d6e 100644 --- a/client/public/components/product-list.mjs +++ b/client/public/components/product-list.mjs @@ -33,14 +33,12 @@ class ProductList extends Component { `, style: ` - h2 { - margin-block-start: 0; - } .product-list { display: flex; justify-content: space-evenly; flex-wrap: wrap; margin: 0 auto; + z-index: 0; } .product-list-buttons { @@ -69,6 +67,7 @@ class ProductList extends Component { position: relative; width: 80px; height: 80px; + z-index: 0; } .lds-ellipsis div { position: absolute; diff --git a/client/public/components/product-listing.mjs b/client/public/components/product-listing.mjs index d6c4f69..a481511 100644 --- a/client/public/components/product-listing.mjs +++ b/client/public/components/product-listing.mjs @@ -7,14 +7,17 @@ class ProductListing extends Component { super(ProductListing); } - OnMount() { - console.log(this.state); + async OnMount() { + const getURL = new URL(`/api/${this.state.type}/${this.state.id}`, document.baseURI); + const data = await fetch(getURL).then(response => response.json()); + this.setState({ + ...this.getState, + ...data.data[0], + }); + console.log(this.getState); } - async Render() { - const route = this.getState.getroute; - // const productDetails = await fetch(route).then(response => response.json()); - + Render() { return { template: SideLoad('./components/templates/product-listing.html'), style: SideLoad('./components/css/product-listing.css'), diff --git a/client/public/components/storefront.mjs b/client/public/components/storefront.mjs index afb39e6..d278b0a 100644 --- a/client/public/components/storefront.mjs +++ b/client/public/components/storefront.mjs @@ -18,6 +18,7 @@ class StoreFront extends Component { `, style: ` product-list-component { + z-index: 0; display: block; margin: 0 auto; }`, diff --git a/client/public/components/templates/navbar.html b/client/public/components/templates/navbar.html index 196f3ce..3480ed5 100644 --- a/client/public/components/templates/navbar.html +++ b/client/public/components/templates/navbar.html @@ -1,51 +1,53 @@ - +
+ + + + +
+ + + \ No newline at end of file diff --git a/client/public/components/templates/product-listing.html b/client/public/components/templates/product-listing.html index e69de29..61038ff 100644 --- a/client/public/components/templates/product-listing.html +++ b/client/public/components/templates/product-listing.html @@ -0,0 +1,3 @@ +
+ penis +
\ No newline at end of file diff --git a/client/public/global.css b/client/public/global.css index ff543a8..d09ebc9 100644 --- a/client/public/global.css +++ b/client/public/global.css @@ -6,7 +6,7 @@ body { font-size: 16px; color: #222; text-decoration: none; - background-color: #D7C2FF; + background-color: #F5F6F6; display: block; margin-left: auto; margin-right: auto; diff --git a/client/public/index.html b/client/public/index.html index 7f10098..e0769af 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -22,12 +22,12 @@ - + + + + - - - diff --git a/db/schema.sql b/db/schema.sql index adf8df6..bb1730f 100644 --- a/db/schema.sql +++ b/db/schema.sql @@ -18,8 +18,9 @@ CREATE TABLE IF NOT EXISTS lego_brick_colour ( CREATE TABLE IF NOT EXISTS lego_set ( id VARCHAR (50) NOT NULL PRIMARY KEY, - catagory INT, + catagory INT, // this needs to be "tags" name VARCHAR (100), + description TEXT, date_released TIMESTAMP WITHOUT TIME ZONE, dimensions_x DECIMAL, dimensions_y DECIMAL, diff --git a/docs/API.md b/docs/API.md index 4ba2dea..6d54fa8 100644 --- a/docs/API.md +++ b/docs/API.md @@ -80,8 +80,6 @@ Response Object GET /api/search?params - - ### /api/bricks/ GET @@ -95,7 +93,13 @@ Response Object ### /api/sets/ ### /api/brick/:id/ + + + ### /api/set/:id/ + + + ### /api/cdn/:id/ ### /api/auth/login/ ### /api/auth/signup/ diff --git a/src/routes/api.js b/src/routes/api.js index 08a2f1d..0146c28 100644 --- a/src/routes/api.js +++ b/src/routes/api.js @@ -14,8 +14,8 @@ function Init() { Server.App.get('/api/bricks/', Bricks.Query); Server.App.get('/api/sets/'); Server.App.get('/api/sets/featured/', Sets.Featured); - Server.App.get('/api/brick/:id/'); - Server.App.get('/api/set/:id/'); + Server.App.get('/api/brick/:id/', Bricks.Get); + Server.App.get('/api/set/:id/', Sets.Get); Server.App.get('/api/cdn/:id/'); diff --git a/src/routes/bricks-router.js b/src/routes/bricks-router.js index 68d7fd2..4ac2445 100644 --- a/src/routes/bricks-router.js +++ b/src/routes/bricks-router.js @@ -1,5 +1,11 @@ const Controller = require('../controllers/brick-controller.js'); +function Get(req, res) { + res.send(JSON.stringify({ + message: 'Hello World!', + })); +} + function Query(req, res, next) { const query = req.query; @@ -29,5 +35,6 @@ function Query(req, res, next) { } module.exports = { + Get, Query, }; diff --git a/src/routes/sets-router.js b/src/routes/sets-router.js index a44015e..6013b0c 100644 --- a/src/routes/sets-router.js +++ b/src/routes/sets-router.js @@ -1,6 +1,26 @@ const Controller = require('../controllers/set-controller.js'); -function Featured(req, res, next) { +function Get(req, res) { + res.send(JSON.stringify({ + data: [ + { + id: '1', + name: 'Tail 4 x 1 x 3', + description: 'Tail 4 x 1 x 3', + price: '1.00', + discount: '0.50', + stock: '10', + release_date: '2020-01-01', + tags: ['tail', '4', '1', '3', '2020'], + dimensions: { width: '1', height: '1', depth: '1' }, + type: 'set', + image: 'https://via.placeholder.com/320x320', + }, + ], + })); +} + +function Featured(req, res) { const query = req.query; res.send(JSON.stringify({ @@ -82,5 +102,6 @@ function Featured(req, res, next) { } module.exports = { + Get, Featured, };