Upgrade responsiveness, forms, tooltips

houby-studio · Oct 21, 2023 · ff327a3 · ff327a3
1 parent 62cfb5f
commit ff327a3
Show file tree

Hide file tree

Showing 20 changed files with 295 additions and 210 deletions.
diff --git a/public/javascripts/add_products_imageLoad.js b/public/javascripts/add_products_imageLoad.js
@@ -1,15 +1,19 @@
 function loadProductImage() {
   var imageId = document.getElementById('product_id').value
-  var indexnumber = json_data.product_id.findIndex((id) => id === imageId)
   var _img = document.getElementById('product_img')
   var newImg = new Image()
   newImg.onload = function () {
     _img.src = this.src
   }
-  newImg.src = json_data.product_image[indexnumber]
+  if (imageId === '') {
+    newImg.src = '/images/preview.png'
+  } else {
+    var indexnumber = json_data.product_id.findIndex((id) => id === imageId)
+    newImg.src = json_data.product_image[indexnumber]
+  }
 }
 
-window.onload = function (event) {
+window.onload = function (_event) {
   if (document.getElementById('product_id').value) {
     loadProductImage()
   }

diff --git a/public/javascripts/invoice.js b/public/javascripts/invoice.js
@@ -1,3 +1,10 @@
+const tooltipTriggerList = document.querySelectorAll(
+  '[data-bs-toggle="tooltip"]'
+)
+const tooltipList = [...tooltipTriggerList].map(
+  (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+)
+
 // User graph swapper - changes between 'Spent amount in Kč and bought amount'
 $('#user-swap').click(function () {
   var clicks = $(this).data('clicks')
@@ -116,11 +123,6 @@ var perProductSpent = new Chart(ctx, {
   }
 })
 
-// Bootstrap tooltip on hover
-$(function () {
-  $('[data-toggle="tooltip"]').tooltip()
-})
-
 // Bootstrap table customization
 $(document).ready(function () {
   $('#table-orders').DataTable({

diff --git a/public/javascripts/payments.js b/public/javascripts/payments.js
@@ -1,3 +1,10 @@
+const tooltipTriggerList = document.querySelectorAll(
+  '[data-bs-toggle="tooltip"]'
+)
+const tooltipList = [...tooltipTriggerList].map(
+  (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+)
+
 // Bootstrap table customization
 $(document).ready(function () {
   $('#table-invoices').DataTable({
@@ -13,5 +20,4 @@ $(document).ready(function () {
     ],
     stateSave: true
   })
-  $('.dataTables_length').addClass('bs-select')
 })
diff --git a/public/javascripts/user_update_realtime.js → public/javascripts/profile.js b/public/javascripts/user_update_realtime.js → public/javascripts/profile.js
@@ -1,3 +1,10 @@
+const tooltipTriggerList = document.querySelectorAll(
+  '[data-bs-toggle="tooltip"]'
+)
+const tooltipList = [...tooltipTriggerList].map(
+  (tooltipTriggerEl) => new bootstrap.Tooltip(tooltipTriggerEl)
+)
+
 $('.realtime-checkbox').change(function () {
   $.post('/profile', {
     name: this.id,

diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
@@ -1,4 +1,4 @@
-html {
+/* html {
   height: 100%;
 }
 
@@ -8,50 +8,53 @@ body {
 
 body {
   font-family: 'Muli', sans-serif;
-}
+} */
 
-.container-fluid {
+/* .container-fluid {
   max-height: 100%;
   padding-left: 0px;
   padding-right: 0px;
-}
+} */
 
+/*
 .row {
   margin-left: 0px;
   margin-right: 0px;
-}
+} */
 
-.cover {
+/* .cover {
   object-fit: cover;
   height: 25rem;
   width: 100%;
-}
+} */
 
+/* Limit image max height in add_product/new_product page */
 .form-image-thumbnail {
-  max-height: 11rem !important;
+  max-height: 15rem !important;
 }
 
+/* Limit image max height in shop page */
 .shop-image-thumbnail {
   max-height: 13rem !important;
 }
 
-.link-no-style {
+/* .link-no-style {
   text-decoration: none;
   color: inherit;
-}
+} */
 
-.link-no-style:hover {
+/* .link-no-style:hover {
   text-decoration: none;
   color: inherit;
-}
+} */
 
-.text-button {
+/* .text-button {
   color: white;
-}
+} */
 
-.text-button:hover {
+/* .text-button:hover {
   text-decoration: none;
-}
+} */
 
 input[type=number]::-webkit-inner-spin-button,
 input[type=number]::-webkit-outer-spin-button {
@@ -64,41 +67,123 @@ input[type=number] {
   /* Firefox */
 }
 
-.old-record {
+/* Primarily to darken unimportant table rows */
+.subdue-50 {
   filter: brightness(50%);
 }
 
+/* Might form buttons later with block spacing */
 .keypad {
   margin-top: 0.5em;
 }
 
-@media screen and (max-width: 991px) {
-  .float-right {
-    float: none !important;
+/* Add viewport based width */
+/* sm */
+@media (min-width: 576px) {
+  .w-sm-25 {
+    width: 25% !important;
+  }
+
+  .w-sm-50 {
+    width: 50% !important;
+  }
+
+  .w-sm-75 {
+    width: 75% !important;
   }
 
-  .w-100-lg {
+  .w-sm-100 {
     width: 100% !important;
   }
 }
 
-@media screen and (max-width: 1199px) {
-  .btn {
+/* md */
+@media (min-width: 768px) {
+  .w-md-25 {
+    width: 25% !important;
+  }
+
+  .w-md-50 {
+    width: 50% !important;
+  }
+
+  .w-md-75 {
+    width: 75% !important;
+  }
+
+  .w-md-100 {
+    width: 100% !important;
+  }
+}
+
+/* lg */
+@media (min-width: 992px) {
+  .w-lg-25 {
+    width: 25% !important;
+  }
+
+  .w-lg-50 {
+    width: 50% !important;
+  }
+
+  .w-lg-75 {
+    width: 75% !important;
+  }
+
+  .w-lg-100 {
     width: 100% !important;
   }
 }
 
+/* xl */
+@media (min-width: 1200px) {
+  .w-xl-25 {
+    width: 25% !important;
+  }
+
+  .w-xl-50 {
+    width: 50% !important;
+  }
+
+  .w-xl-75 {
+    width: 75% !important;
+  }
 
-@media screen and (min-width: 1200px) {
+  .w-xl-100 {
+    width: 100% !important;
+  }
+
+  /* TODO: Invoice two tables non-sense, should rework */
   .hide-xl {
     display: none;
   }
 
+  /* TODO: Invoice two tables non-sense, should rework */
   .pr-xl-none {
     padding-right: 0;
   }
 
+  /* TODO: Invoice two tables non-sense, should rework */
   .pl-xl-none {
     padding-left: 0;
   }
+}
+
+/* xxl */
+@media (min-width: 1400px) {
+  .w-xxl-25 {
+    width: 25% !important;
+  }
+
+  .w-xxl-50 {
+    width: 50% !important;
+  }
+
+  .w-xxl-75 {
+    width: 75% !important;
+  }
+
+  .w-xxl-100 {
+    width: 100% !important;
+  }
 }
diff --git a/routes/add_products.js b/routes/add_products.js
@@ -99,18 +99,18 @@ router.post('/', ensureAuthenticated, function (req, res) {
 
       newDelivery
         .save()
-        .then((res) => {
+        .then((result) => {
           logger.info(
             `server.routes.addproducts.post__Successfully added product:[${prod.displayName}] amount:[${req.body.product_amount}] price:${req.body.product_price}.`,
             {
               metadata: {
-                result: res
+                result: result
               }
             }
           )
-          alert = {
+          const alert = {
             type: 'success',
-            message: `${prod.displayName} přidán v počtu ${req.body.product_amount}ks za ${req.body.product_price}Kč.`,
+            message: `Produkt ${prod.displayName} přidán v počtu ${req.body.product_amount}ks za ${req.body.product_price}Kč.`,
             success: 1
           }
           req.session.alert = alert

diff --git a/routes/invoice.js b/routes/invoice.js
@@ -583,12 +583,12 @@ router.post('/', ensureAuthenticated, function (req, res, _next) {
         }
         newInvoice
           .save()
-          .then((res) => {
+          .then((result) => {
             logger.debug(
               `server.routes.invoice.post__Successfully saved invoice ${res._id} to database.`,
               {
                 metadata: {
-                  result: res
+                  result: result
                 }
               }
             )
@@ -605,7 +605,7 @@ router.post('/', ensureAuthenticated, function (req, res, _next) {
           })
         bulk
           .execute()
-          .then((res) => {
+          .then((result) => {
             generateQR(
               req.user.IBAN,
               docs[i].total_user_sum_orders_notinvoiced,
@@ -616,7 +616,7 @@ router.post('/', ensureAuthenticated, function (req, res, _next) {
                   `server.routes.invoice.post__QR code generated, sending invioce e-mail to customer.`,
                   {
                     metadata: {
-                      result: res
+                      result: result
                     }
                   }
                 )

diff --git a/routes/new_product.js b/routes/new_product.js
@@ -84,12 +84,12 @@ router.post(
     })
     newProduct
       .save()
-      .then((res) => {
+      .then((result) => {
         logger.info(
           `server.routes.newproduct.post__User:[${req.user.email}] added new product:[${req.body.product_name}] to database.`,
           {
             metadata: {
-              result: res
+              result: result
             }
           }
         )

diff --git a/views/shop/about.hbs b/views/shop/about.hbs
@@ -1,6 +1,6 @@
 <div class='row'>
   <div class='col'>
-    <div class='card text-center w-50 mx-auto w-100-lg'>
+    <div class='card text-center mx-3 mx-lg-auto w-lg-75 w-xxl-50'>
       <div class='card-header h4'>
         O aplikaci
       </div>