lol

Former-commit-id: f894a48b26a8f7c91e2b8a604018ed2d1de4c0e7
2022-03-28 19:30:38 +01:00
parent c28f774918
commit 01c624e1b5
8 changed files with 168 additions and 10 deletions
--- 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: `
                <div class="product-listing">
+                    <a href="{this.state.listing}">
                    <div class="product-listing-image">
-                        <img class="product-image" src="{this.state.image}">
-                    </div>    
+                        <img class="product-image" 
+                            title="Image of {this.state.name}" 
+                            alt="Image of {this.state.name}"     
+                            src="{this.state.image}">
+                    </div>
                    <div class="product-listing-info">
                        <div class="product-listing-name">{this.state.name}</div>
-
+                        </a>
                        ${this.state.discount
                            ? '<span class="product-listing-price-full">£{this.state.price}</span><span class="product-listing-price-new">£{this.state.discount}</span>'
-                             : '<span class="product-listing-price">£{this.state.price}</span>'}
-
+                            : '<span class="product-listing-price">£{this.state.price}</span>'}
                    </div>
                </div>
            `,
            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;
--- 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%;
+}
--- 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 {
--- a/client/public/components/product-list.mjs
+++ b/client/public/components/product-list.mjs
@@ -17,12 +17,18 @@ class ProductList extends Component {
                <div class="product-list">
                    ${products.data.map(product => {
                        return `<compact-listing-component name="${product.name}"
+                                    id="${product.id}"
+                                    listing="${product.listing}"
                                    image="${product.image}"
                                    price="${product.price}"
                                    discount="${product.discount || ''}"></compact-listing-component>
                        `;
                    }).join('')}
                </div>
+                <!--Infinite Loading-->
+                <div class="product-list-loader">
+                <div class="lds-ring"><div></div><div></div><div></div><div></div></div>
+                </div>
            `,
            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,
--- a/client/public/components/templates/navbar.html
+++ b/client/public/components/templates/navbar.html
@@ -27,6 +27,13 @@
                </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">
--- a/docs/API.md
+++ b/docs/API.md
@@ -36,14 +36,21 @@ a subset for product listing pages
 For all endpoints that query, the following parameters are supported:

 tags: tags to include in search
+
 page: starting page
+
 pages: pages to return starting from page
+
 q: string to search for (fuzzy)
+
 brick: brick to search for (absolute)
+
 set: brick to search for (absolute)

 ### /api/search/

+GET /api/search?params
+


 ### /api/bricks/
--- a/src/routes/helpers.js
+++ b/src/routes/helpers.js
--- a/src/routes/sets-router.js
+++ b/src/routes/sets-router.js
@@ -33,7 +33,7 @@ function Featured(req, res, next) {
            },
            {
                id: '3',
-                name: 'Arch 1 x 2 Inverted',
+                name: 'Train Wheel RC, Holder with 2 Black Train Wheel and Chrome Silver Train Wheel, Metal Axle with Slots (2878 / 2879 / bb0837)',
                price: '3.00',
                image: 'https://via.placeholder.com/320x320',
            },