appscms-tools-theme 4.8.1 → 4.8.2

data/assets/css/appscms-theme.css

@@ -2135,7 +2135,246 @@ select:focus {
     font-size: 12px;
   }
 }
+.mobile-search-bar {
+  position: relative;
+  height: 100px;
+  width: 100%;
+  display: none;
+}
+
+.mobile-search-container {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 38px;
+  margin: 20px 0px 20px 0px;
+  background-color: white;
+  position: relative;
+}
+
+.mobile-search-input {
+  flex: 1;
+  border: none;
+  padding: 12px 16px;
+  font-size: 16px;
+  outline: none;
+}
+
+.mobile-search-input::placeholder {
+  color: #888;
+}
+
+.mobile-search-button {
+  background-color: #000;
+  border: none;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.mobile-search-button svg {
+  /* fill: #fff; */
+  height: 20px;
+}
+
+.mobile-search-button:active {
+  background-color: #555;
+}
+
+.mobile-nav-search {
+  position: relative;
+}
+
+.mobile-result-item {
+  padding: 9px 12px;
+}
+
+.mobile-result-item a {
+  color: #222325;
+}
+
+.mobile-searchbarResults {
+  background-color: #fff;
+  border: 1px solid #e4e5e7;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #74767e;
+  cursor: default;
+  margin-top: 8px;
+  padding: 12px;
+  position: fixed;
+  margin-top: 42px;
+  width: 244px;
+  height: 400px;
+  overflow-y: scroll;
+  z-index: 101;
+  display: none;
+}
+
+.scroll-container {
+  display: flex;
+  align-items: center;
+  background-color: #333;
+  position: relative;
+}
+
+.scroll-left,
+.scroll-right {
+  background-color: #4456f6f7;
+  color: white;
+  border: none;
+  height: 40px;
+  cursor: pointer;
+  position: absolute;
+  width: 40px;
+  top: 50%;
+  z-index: 100;
+  transform: translateY(-50%);
+}
+
+.scroll-left {
+  left: 0;
+}
+
+.scroll-right {
+  right: 0;
+}
+
+.scroll-left:hover,
+.scroll-right:hover {
+  background-color: #8691f6f7;
+}
 
+.navbar {
+  /* overflow-x: auto; */
+  white-space: nowrap;
+  flex-grow: 1;
+  scroll-behavior: smooth;
+  display: flex;
+}
+
+.navbar ul {
+  padding: 0;
+  margin: 0;
+  display: flex;
+  list-style-type: none;
+}
+
+.navbar li {
+  display: inline;
+}
+
+.search-container {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  overflow: hidden;
+  height: 38px;
+  width: 400px;
+  background-color: white;
+  position: relative;
+}
+
+.search-input {
+  flex: 1;
+  border: none;
+  padding: 12px 16px;
+  font-size: 16px;
+  outline: none;
+}
+
+.search-input::placeholder {
+  color: #888;
+}
+
+.search-button {
+  background-color: #1a2ee7;
+  border: none;
+  padding: 0 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  outline: none;
+}
+
+.search-button svg {
+  /* fill: #fff; */
+  height: 20px;
+}
+
+.search-button:active {
+  background-color: #555;
+}
+.nav-search {
+  position: relative;
+}
+.result-item {
+  padding: 9px 12px;
+}
+.result-item a {
+  color: #222325;
+}
+.searchbarResults {
+  overflow: scroll;
+  height: 60vh;
+  background-color: #fff;
+  border: 1px solid #e4e5e7;
+  border-radius: 6px;
+  -webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  box-shadow: 0 17px 58px rgba(0, 0, 0, 0.08);
+  -webkit-box-sizing: border-box;
+  box-sizing: border-box;
+  color: #74767e;
+  cursor: default;
+  margin-top: 8px;
+  padding: 12px;
+  position: absolute;
+  width: 100%;
+  z-index: 101;
+  display: none;
+}
+
+.modal1 {
+  display: none;
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background-color: rgba(59, 58, 58, 0.9);
+}
+.modal1-content1 {
+  margin: auto;
+  display: block;
+  width: 80%;
+  max-width: 800px;
+  margin-top: 20px;
+}
+.modal1-body img {
+  width: 100%;
+  height: auto;
+}
+.close1 {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  font-size: 24px;
+  color: #fff;
+  cursor: pointer;
+}
+.close1:hover {
+  color: #ccc;
+}
 /* Large devices (desktops) */
 @media (min-width: 992px) and (max-width: 1199.98px) {
   /* Insert CSS code here */

data/assets/js/appscms-infographics.js

@@ -0,0 +1,49 @@
+function openModal1(imageSrc) {
+  var modal1 = document.getElementById("imageModal1");
+  var modal1Img = document.getElementById("modal1Image");
+  modal1.style.display = "block";
+  modal1Img.src = imageSrc;
+}
+function closeModal1() {
+  var modal1 = document.getElementById("imageModal1");
+  modal1.style.display = "none";
+}
+document.addEventListener("click", function (event) {
+  var modal1 = document.getElementById("imageModal1");
+  if (event.target === modal1) {
+    closeModal1();
+  }
+});
+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,
+  prevScrollLeft,
+  positionDiff;
+const showHideIcons = () => {
+  let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
+  arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
+  arrowIcons[1].style.display =
+    carousel.scrollLeft == scrollWidth ? "none" : "block";
+};
+arrowIcons.forEach((icon) => {
+  icon.addEventListener("click", () => {
+    let firstImgWidth = firstImg.clientWidth + 40;
+    const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
+    carousel.scrollBy({
+      left: scrollAmount,
+      behavior: "smooth",
+    });
+    setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
+  });
+});

data/assets/js/appscms-theme.js

@@ -129,48 +129,6 @@ if ("{{ site.removeBootstrapJs }}" === "true") {
   }
 }
 
-// document.querySelector('.scroll-left').addEventListener('click', function() {
-//   const toolbarList = document.querySelector('.appscms-toolbar-list');
-//   toolbarList.scrollBy({
-//     left: -100,
-//     behavior: 'smooth'
-//   });
-//   updateButtonStatus(toolbarList);
-// });
-
-// document.querySelector('.scroll-right').addEventListener('click', function() {
-//   const toolbarList = document.querySelector('.appscms-toolbar-list');
-//   toolbarList.scrollBy({
-//     left: 100,
-//     behavior: 'smooth'
-//   });
-//   updateButtonStatus(toolbarList);
-// });
-
-// function updateButtonStatus(toolbarList) {
-//   const scrollLeft = toolbarList.scrollLeft;
-//   const scrollWidth = toolbarList.scrollWidth;
-//   const clientWidth = toolbarList.clientWidth;
-
-//   const scrollRightButton = document.querySelector('.scroll-right');
-//   const scrollLeftButton = document.querySelector('.scroll-left');
-
-//   if (scrollLeft === 0) {
-//     scrollLeftButton.disabled = true;
-//   } else {
-//     scrollLeftButton.disabled = false;
-//   }
-
-//   if (scrollLeft + clientWidth >= scrollWidth) {
-//     scrollRightButton.disabled = true;
-//   } else {
-//     scrollRightButton.disabled = false;
-//   }
-// }
-
-// // Initial button status update
-// updateButtonStatus(document.querySelector('.appscms-toolbar-list'));
-
 document.addEventListener("DOMContentLoaded", function() {
   const downloadButton = document.getElementById("download-button");
   
@@ -299,10 +257,35 @@ if ("{{ site.navigationSearch }}" === "true" ) {
       mobileResultsContainer.style.display = 'none';
     }
     }
-
-    
   });
-  
- 
+}
+  document.addEventListener("DOMContentLoaded", function () {
+    const scrollContainer = document.querySelector(".appscms-toolbar-list");
+    const scrollLeft = document.querySelector(".scroll-left");
+    const scrollRight = document.querySelector(".scroll-right");
+
+    function updateScrollButtons() {
+      scrollLeft.style.display =
+        scrollContainer.scrollLeft > 0 ? "block" : "none";
+      scrollRight.style.display =
+        scrollContainer.scrollWidth >
+          scrollContainer.clientWidth + scrollContainer.scrollLeft
+          ? "block"
+          : "none";
+    }
+
+    scrollLeft.addEventListener("click", function () {
+      scrollContainer.scrollLeft -= 120; // Adjust this value as needed
+      updateScrollButtons();
+    });
+
+    scrollRight.addEventListener("click", function () {
+      scrollContainer.scrollLeft += 120; // Adjust this value as needed
+      updateScrollButtons();
+    });
+
+    scrollContainer.addEventListener("scroll", updateScrollButtons);
 
-}
+    // Initial check to hide buttons if necessary
+    updateScrollButtons();
+  });

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 4.8.1
+  version: 4.8.2
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-08-03 00:00:00.000000000 Z
+date: 2024-08-07 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -528,6 +528,7 @@ files:
 - assets/js/adBlocker.js
 - assets/js/ads.js
 - assets/js/append-div.js
+- assets/js/appscms-infographics.js
 - assets/js/appscms-search.js
 - assets/js/appscms-theme.js
 - assets/js/batch.js