From 01c624e1b5d5dafedf2a44121f0dfeea30a3c808 Mon Sep 17 00:00:00 2001 From: Ben <36240171+benkyd@users.noreply.github.com> Date: Mon, 28 Mar 2022 19:30:38 +0100 Subject: [PATCH] lol Former-commit-id: f894a48b26a8f7c91e2b8a604018ed2d1de4c0e7 --- client/public/components/compact-listing.mjs | 25 ++++-- client/public/components/css/navbar.css | 77 ++++++++++++++++++- .../public/components/css/notificationbar.css | 2 +- client/public/components/product-list.mjs | 58 ++++++++++++++ .../public/components/templates/navbar.html | 7 ++ docs/API.md | 7 ++ src/routes/helpers.js | 0 src/routes/sets-router.js | 2 +- 8 files changed, 168 insertions(+), 10 deletions(-) create mode 100644 src/routes/helpers.js 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: `
+
- -
+ Image of {this.state.name} +
{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 @@
  • My Account +