diff --git a/client/public/components/compact-listing.mjs b/client/public/components/compact-listing.mjs
index 1dacf61..710d284 100644
--- a/client/public/components/compact-listing.mjs
+++ b/client/public/components/compact-listing.mjs
@@ -8,24 +8,35 @@ class CompactProductListing extends Component {
}
Render() {
- console.log(this.state);
return {
template: `
{this.state.name}
-
+
${this.state.discount
? '
£{this.state.price}£{this.state.discount}'
- : '
£{this.state.price}'}
-
+ : '
£{this.state.price}'}
`,
style: `
+ a {
+ text-decoration: none;
+ color: inherit;
+ }
+
+ a:hover {
+ text-decoration: underline;
+ }
+
.product-listing {
display: flex;
flex-direction: column;
@@ -47,9 +58,11 @@ class CompactProductListing extends Component {
font-size: 1.2em;
font-weight: bold;
}
+
.product-listing-price {
font-size: 1.1em;
}
+
.product-listing-price-full {
text-decoration: line-through;
font-size: 0.9em;
diff --git a/client/public/components/css/navbar.css b/client/public/components/css/navbar.css
index 8e5784a..5728f33 100644
--- a/client/public/components/css/navbar.css
+++ b/client/public/components/css/navbar.css
@@ -91,6 +91,7 @@
.nav-menu {
font-family: 'Londrina Solid', cursive;
display: flex;
+ align-items: center;
list-style: none;
margin: 0;
padding: 0;
@@ -215,7 +216,7 @@
background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3Cpath d='M0 0h24v24H0z' fill='none'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 27px 27px;
- background-position: 95% center;
+ background-position: 97.5% center;
border-radius: 10px;
border: 2px solid #222;
transition: all 250ms ease-in-out;
@@ -258,7 +259,7 @@
#cart-number {
padding-top: 9px;
- font-size: 37px;
+ font-size: 1em;
font-weight: 100;
}
@@ -273,3 +274,75 @@
height: 2em;
}
}
+
+/*switch, from https://www.w3schools.com/howto/howto_css_switch.asp*/
+/* The switch - the box around the slider */
+
+.stock-mode {
+ display: flex;
+ font-size: 0.8em;
+ align-items: center;
+ color: #e55744;
+}
+
+.switch {
+ position: relative;
+ display: inline-block;
+ width: 60px;
+ height: 34px;
+}
+
+/* Hide default HTML checkbox */
+.switch input {
+ opacity: 0;
+ width: 0;
+ height: 0;
+}
+
+/* The slider */
+.slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background-color: #ccc;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+.slider:before {
+ position: absolute;
+ content: "";
+ height: 26px;
+ width: 26px;
+ left: 4px;
+ bottom: 4px;
+ background-color: white;
+ -webkit-transition: .4s;
+ transition: .4s;
+}
+
+input:checked + .slider {
+ background-color: #e55744;
+}
+
+input:focus + .slider {
+ box-shadow: 0 0 1px #e55744;
+}
+
+input:checked + .slider:before {
+ -webkit-transform: translateX(26px);
+ -ms-transform: translateX(26px);
+ transform: translateX(26px);
+}
+
+/* Rounded sliders */
+.slider.round {
+ border-radius: 34px;
+}
+
+.slider.round:before {
+ border-radius: 50%;
+}
diff --git a/client/public/components/css/notificationbar.css b/client/public/components/css/notificationbar.css
index 1da6d57..3c68835 100644
--- a/client/public/components/css/notificationbar.css
+++ b/client/public/components/css/notificationbar.css
@@ -24,6 +24,7 @@
}
.notification-bar-close {
+ font-family: 'Open Sans', sans-serif;
display: inline-block;
padding: 0px 1em;
height: 100%;
@@ -32,7 +33,6 @@
font-size: 1.5em;
font-weight: bold;
text-align: center;
- font-family: 'Open Sans', sans-serif;
}
.notification-bar-close:hover {
diff --git a/client/public/components/product-list.mjs b/client/public/components/product-list.mjs
index da74c28..af064be 100644
--- a/client/public/components/product-list.mjs
+++ b/client/public/components/product-list.mjs
@@ -17,12 +17,18 @@ class ProductList extends Component {
${products.data.map(product => {
return `
`;
}).join('')}
+
+
`,
style: `
h2 {
@@ -34,6 +40,58 @@ class ProductList extends Component {
flex-wrap: wrap;
margin: 0 auto;
}
+
+ .product-list-buttons {
+ display: flex;
+ justify-content: space-evenly;
+ margin: 0 auto;
+ }
+
+ .product-list-button {
+ max-width: 100px;
+ padding: 5px;
+ font-size: 1em;
+ font-weight: bold;
+ background-color: #85DEFF;
+ color: #fff;
+ border: none;
+ }
+
+ .lds-ring {
+ display: inline-block;
+ position: relative;
+ width: 80px;
+ height: 80px;
+ }
+ .lds-ring div {
+ box-sizing: border-box;
+ display: block;
+ position: absolute;
+ width: 64px;
+ height: 64px;
+ margin: 8px;
+ border: 8px solid #fff;
+ border-radius: 50%;
+ animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+ border-color: #fff transparent transparent transparent;
+ }
+ .lds-ring div:nth-child(1) {
+ animation-delay: -0.45s;
+ }
+ .lds-ring div:nth-child(2) {
+ animation-delay: -0.3s;
+ }
+ .lds-ring div:nth-child(3) {
+ animation-delay: -0.15s;
+ }
+ @keyframes lds-ring {
+ 0% {
+ transform: rotate(0deg);
+ }
+ 100% {
+ transform: rotate(360deg);
+ }
+ }
`,
state: {
...this.getState,
diff --git a/client/public/components/templates/navbar.html b/client/public/components/templates/navbar.html
index 98cfdf0..196f3ce 100644
--- a/client/public/components/templates/navbar.html
+++ b/client/public/components/templates/navbar.html
@@ -27,6 +27,13 @@
-