appscms-tools-theme 4.4.7 → 4.4.9

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: c6f9f39efde8fe6231b611162ca4d610196aa5e46c7fe3d333e5509b1194c239
-  data.tar.gz: ad0af2f3a3b95c7871e69d15712efa0890567c13e5c8044140d08bf74d2b2344
+  metadata.gz: d1e09ee11b58d99d030509cdee4f469c3d347d2eddefa19357163e1e9111145b
+  data.tar.gz: b4720267a49d93b3d0fb277e638f851ba82320dd953568900aaecb43ddb13be0
 SHA512:
-  metadata.gz: be4d839a889a0c92044f20d980a5613d411067e65c0993b5673241db966e0918711b176ebbea0d39455fc0cf17c34974e1cc58457e3e3f22bb2e0ed25d3ba743
-  data.tar.gz: f7bfd47bc85ba74483842c8bca0a025318b9fc1365077e216f4cf1965288f69bc8e15e00718636d231c5952523069ab0d7162c8b88bcd74c66a6d7ce686b038c
+  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

@@ -92,15 +92,14 @@ body {
 .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:first-child {
   padding-right: 0px;
 }
+
 .appscms-toolbar
   .appscms-toolbar-list
   .appscms-toolbar-list-item:hover
   > .list-item-dropdown {
-  visibility: visible;
-  height: inherit;
-  height: 500px;
-  white-space: nowrap;
+  display: block;
   opacity: 1;
+  white-space: nowrap;
 }
 
 .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item:hover {
@@ -1288,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.7
+  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