appscms-tools-theme 4.4.8 → 4.4.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a70db1174d77f80b4cbb6586ec8c1ed873949bc34332bb229454a661410acfe4
-  data.tar.gz: 1492c33eb63a6b33ad094c3246e1c1113352e753d8d4e7074c403c7157bff950
+  metadata.gz: d1e09ee11b58d99d030509cdee4f469c3d347d2eddefa19357163e1e9111145b
+  data.tar.gz: b4720267a49d93b3d0fb277e638f851ba82320dd953568900aaecb43ddb13be0
 SHA512:
-  metadata.gz: f9d6b8dadd0926771d65a306358aae1e74a92c1a85471c037fdc8b4e24bb29270d88781b462aa83df31e61ff1c06dcdb3ad84c0e6e2bbdd4adc3722b515c7673
-  data.tar.gz: d231dbc97295dd9a29dddc03749ef40fbb4395a2b611d6de557381d461a18ef7638ea68d3fbea5d7f8037bbd519bc29c684815be2af8421ffc7f396d2d7e1c34
+  metadata.gz: ad27b87fcef8697a0b908f47b4ee2fd395125ccea86a2131d474e306d87e2bb825bafa2733ea22e75280f2a8259be4f4de64c1f3c685271c64ea7b894b3fc47c
+  data.tar.gz: 3530b11e21573a716e215dc87580d681f0352740a8e197567eea1238d6559ff814db960d256fd6927e0e6383d899ebd93e943d8826e0f87833f06906e6e24a1f

data/_includes/appscms/infographics/infographics.html

@@ -1,3 +1,38 @@
+<style>
+  .modal {
+    display: none;
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.9);
+  }
+  .modal-content {
+    margin: auto;
+    display: block;
+    width: 80%;
+    max-width: 800px;
+    margin-top: 20px;
+  }
+  .modal-body img {
+    width: 100%;
+    height: auto;
+  }
+  .close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+}
+.close:hover {
+  color: #ccc;
+}
+</style>
 <div class="inforgraphics_section">
   <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
   <div class="wrapper">
@@ -11,6 +46,8 @@
             src="{{ item.image }}"
             alt="img"
             draggable="false"
+            class="infographic-img"
+            onclick="openModal('{{ item.image }}')"
           />
           <p class="infographic-desc">{{ item.description | capitalize }}</p>
         </div>
@@ -20,22 +57,42 @@
     <i id="right" class="fas fa-angle-right"></i>
   </div>
 </div>
-
+<div id="imageModal" class="modal" onclick="closeModal()">
+  <span class="close" onclick="closeModal()">&times;</span>
+  <div class="modal-content">
+    <div class="modal-body">
+      <img id="modalImage" src="" alt="Image">
+    </div>
+  </div>
+</div>
 <script>
+   function openModal(imageSrc) {
+    var modal = document.getElementById('imageModal');
+    var modalImg = document.getElementById('modalImage');
+    modal.style.display = "block";
+    modalImg.src = imageSrc;
+  }
+  function closeModal() {
+    var modal = document.getElementById('imageModal');
+    modal.style.display = "none";
+  }
+  document.addEventListener('click', function(event) {
+    var modal = document.getElementById('imageModal');
+    if (event.target === modal) {
+      closeModal();
+    }
+  });
   const carousel = document.querySelector(".carousel-inner"),
     firstImg = carousel.querySelectorAll("img")[0],
     arrowIcons = document.querySelectorAll(".wrapper i");
-
   const numImages = carousel.querySelectorAll("img").length;
   const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
-
   if (numImages > 3) {
     arrowIcons[1].style.display = "block";
   } else {
     arrowIcons[0].style.display = "none";
     arrowIcons[1].style.display = "none";
   }
-
   let isDragStart = false,
     isDragging = false,
     prevPageX,
@@ -47,7 +104,6 @@
     arrowIcons[1].style.display =
       carousel.scrollLeft == scrollWidth ? "none" : "block";
   };
-
   arrowIcons.forEach((icon) => {
     icon.addEventListener("click", () => {
       let firstImgWidth = firstImg.clientWidth + 40;
@@ -59,30 +115,25 @@
       setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
     });
   });
-
   // const autoSlide = () => {
   //   // if there is no image left to scroll then return from here
   //   if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
-
   //   positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
   //   let firstImgWidth = firstImg.clientWidth + 14;
   //   // getting difference value that needs to add or reduce from carousel left to take middle img center
   //   let valDifference = firstImgWidth - positionDiff;
-
   //   if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
   //     return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
   //   }
   //   // if user is scrolling to the left
   //   carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
   // }
-
   // const dragStart = (e) => {
   //   // updatating global variables value on mouse down event
   //   isDragStart = true;
   //   prevPageX = e.pageX || e.touches[0].pageX;
   //   prevScrollLeft = carousel.scrollLeft;
   // }
-
   // const dragging = (e) => {
   //   // scrolling images/carousel to left according to mouse pointer
   //   if (!isDragStart) return;
@@ -93,22 +144,17 @@
   //   carousel.scrollLeft = prevScrollLeft - positionDiff;
   //   showHideIcons();
   // }
-
   // const dragStop = () => {
   //   isDragStart = false;
   //   carousel.classList.remove("dragging");
-
   //   if (!isDragging) return;
   //   isDragging = false;
   //   autoSlide();
   // }
-
   // carousel.addEventListener("mousedown", dragStart);
   // carousel.addEventListener("touchstart", dragStart);
-
   // document.addEventListener("mousemove", dragging);
   // carousel.addEventListener("touchmove", dragging);
-
   // document.addEventListener("mouseup", dragStop);
   // carousel.addEventListener("touchend", dragStop);
-</script>
+</script>

data/_includes/appscms/searchbar/searchbar.html

@@ -1,3 +1,4 @@
+{%- if page.searchbar != true -%}
 <div class="container">
   <div class="row justify-content-center">
     <div class="col-lg-6 col-md-8 col-10">
@@ -12,4 +13,5 @@
       </form>
     </div>
   </div>
-</div>
+</div>
+{%- endif -%}

data/assets/css/appscms-theme.css

@@ -1287,8 +1287,9 @@ body {
   transition-duration: 0.27s;
 }
 .slide img:hover {
-  transform: scale(1.1);
+  transform: scale(1.02);
   box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
+  cursor: pointer;
 }
 .no-result-found-msg {
   font-size: 20px;

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 4.4.8
+  version: 4.4.9
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-14 00:00:00.000000000 Z
+date: 2024-03-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll