benkyd/legolog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style

Browse Source 
Former-commit-id: aad14d70472dd4412e02e0870086a4c28f42792b
This commit is contained in:
Ben
2022-03-30 19:04:38 +01:00
parent 24feb8c0fa
commit f6667bbf92
17 changed files with 190 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/public/components/compact-listing.mjs
View File

@@ -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() {

45
client/public/components/css/navbar.css
View File

@@ -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 */

5
client/public/components/css/notificationbar.css
View File

@@ -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;
}

27
client/public/components/css/product-listing.css
View File

@@ -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%;
}
}

13
client/public/components/notificationbar.mjs
View File

@@ -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;
});
}
}

5
client/public/components/product-list.mjs
View File

@@ -33,14 +33,12 @@ class ProductList extends Component {
</div>
`,
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;

15
client/public/components/product-listing.mjs
View File

@@ -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'),

1
client/public/components/storefront.mjs
View File

@@ -18,6 +18,7 @@ class StoreFront extends Component {
`,
style: `
product-list-component {
z-index: 0;
display: block;
margin: 0 auto;
}`,

102
client/public/components/templates/navbar.html
View File

@@ -1,51 +1,53 @@
<nav class="navbar">
<div class="logo"><a href="/"><img src="res/logo.svg" height="80em" alt="logo"></a></div>
<div class="push-right">
<!-- https://jonsuh.com/hamburgers/ -->
<button id="menu-toggler" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<ul class="primary-menu nav-menu">
<li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
<!-- TODO: Going to need to dynamically generate this -->
<ul class = "sub-nav">
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Bricks▾</a>
<ul class="sub-nav" >
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
<li class="menu-item stock-mode" style="display: none;">
STOCK MODE
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
<ul class="secondary-menu push-down">
<span class="search-wrapper">
<input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
</span>
<img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="45px" stroke="#222" stroke-width="2px" alt="">
<div class="navbar-container">
<nav class="navbar">
<div class="logo"><a href="/"><img src="res/logo.svg" height="80em" alt="logo"></a></div>
<span id="cart-wrapper">
<img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="50px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-number" class="menu-item">5</span>
</span>
</ul>
</nav>
<div class="push-right">
<!-- https://jonsuh.com/hamburgers/ -->
<button id="menu-toggler" class="hamburger">
<span class="hamburger-line hamburger-line-top"></span>
<span class="hamburger-line hamburger-line-middle"></span>
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<ul class="primary-menu nav-menu">
<li class="menu-item current-menu-item"><a class="nav-link" href="#">New</a></li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Sets▾</a>
<!-- TODO: Going to need to dynamically generate this -->
<ul class = "sub-nav">
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item dropdown"><a class="nav-link" href="#">Bricks▾</a>
<ul class="sub-nav" >
<li><a class="sub-nav-link" href="#">1</a></li>
<li><a class="sub-nav-link" href="#">2</a></li>
<li><a class="sub-nav-link" href="#">3</a></li>
</ul>
</li>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
<li class="menu-item stock-mode" style="display: none;">
STOCK MODE
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</li>
</ul>
</div>
<ul class="secondary-menu push-down">
<span class="search-wrapper">
<input id="search-bar" class="menu-item" type="text" placeholder="search..."/>
</span>
<img id="fave-icon" class="menu-item" src="https://www.svgrepo.com/show/25921/heart.svg" width="45px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-wrapper">
<img id="cart-icon" class="menu-item" src="https://www.svgrepo.com/show/343743/cart.svg" width="50px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-number" class="menu-item">5</span>
</span>
</ul>
</nav>
</div>

3
client/public/components/templates/product-listing.html
View File

@@ -0,0 +1,3 @@
<div class="product-page">
penis
</div>

2
client/public/global.css
View File

@@ -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;

8
client/public/index.html
View File

@@ -22,12 +22,12 @@
</head>
<body>
<notificationbar-component></notificationbar-component>
<span id="current-open-listing" style="display: none;"></span>
<navbar-component></navbar-component>
<limited-margin>
<navbar-component></navbar-component>
<span id="current-open-listing" style="display: none;"></span>
<storefront-component></storefront-component>
<!-- <canvas id="webglviewer" width="300" height="300"></canvas> -->

3
db/schema.sql
View File

@@ -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,

8
docs/API.md
View File

@@ -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/

4
src/routes/api.js
View File

@@ -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/');

7
src/routes/bricks-router.js
View File

@@ -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,
};

23
src/routes/sets-router.js
View File

@@ -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,
};