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

navbar improvements and mroe responsive on mobile

Browse Source 
Former-commit-id: e9ccecbc5798c3bf0c0987a08b0ad4a71688f9e1
This commit is contained in:
Benjamin Kyd
2022-03-26 14:03:49 +00:00
parent 8bb0b9bbaa
commit 362f5cf048
9 changed files with 83 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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: `
<div class="product-listing">
<div class="product-listing-image">
<img src="{this.state.image}">
</div>
<img class="product-image" src="{this.state.image}">
</div>
<div class="product-listing-info">
<div class="product-listing-name">{this.state.name}</div>
@@ -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%;
}
}
`,
};
}

8
client/public/components/components.mjs
View File

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

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

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

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

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

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

@@ -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 {
</div>
`,
style: `
h2 {
margin-block-start: 0;
}
.product-list {
display: flex;
justify-content: space-evenly;

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

@@ -9,7 +9,7 @@
<span class="hamburger-line hamburger-line-bottom"></span>
</button>
<ul class="primary-menu menu nav-menu">
<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 -->
@@ -27,20 +27,18 @@
</ul>
</li>
<li class="menu-item"><a class="nav-link" href="#">My Account</a>
</ul>
<ul class="nav-menu secondary-menu 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="27px" 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="30px" stroke="#222" stroke-width="2px" alt="">
<span id="cart-number" class="menu-item">5</span>
</span>
</ul>
</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>

16
client/public/global.css
View File

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

1
client/public/index.html
View File

@@ -1,6 +1,7 @@
<html>
<head>
<title>LegoLog Home!</title>
<meta name="viewport">
<link rel="icon" type="image/svg+xml" href="/res/favicon.svg">
<link rel="stylesheet" type="text/css" href="global.css">
<link rel="preconnect" href="https://fonts.googleapis.com">

13
docs/CLIENT-FRAMEWORK.md
View File

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