appscms-tools-theme 4.0.3 → 4.0.4

data/_includes/appscms/infographics/infographics.html

@@ -1,109 +1,109 @@
-<div class="inforgraphics_section">
-  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
-  <div class="wrapper">
-    <i id="left" class="fas fa-angle-left"></i>
-    <div class="carousel">
-      <div class="carousel-inner">
-        {%- if pageData.infographics -%} {% for item in pageData.infographics %}
-        <div class="slide">
-          <img src="{{ item.image }}" alt="img" draggable="false" />
-          <p class="infographic-desc">{{ item.description | capitalize }}</p>
-        </div>
-        {% endfor %} {%- endif -%}
-      </div>
-    </div>
-    <i id="right" class="fas fa-angle-right"></i>
-  </div>
-</div>
-
-<script>
-  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
-    });
-  });
-
-  // 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;
-  //   e.preventDefault();
-  //   isDragging = true;
-  //   carousel.classList.add("dragging");
-  //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
-  //   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>
+<div class="inforgraphics_section">
+  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
+  <div class="wrapper">
+    <i id="left" class="fas fa-angle-left"></i>
+    <div class="carousel">
+      <div class="carousel-inner">
+        {%- if pageData.infographics -%} {% for item in pageData.infographics %}
+        <div class="slide">
+          <img src="{{ item.image }}" alt="img" draggable="false" />
+          <p class="infographic-desc">{{ item.description | capitalize }}</p>
+        </div>
+        {% endfor %} {%- endif -%}
+      </div>
+    </div>
+    <i id="right" class="fas fa-angle-right"></i>
+  </div>
+</div>
+
+<script>
+  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
+    });
+  });
+
+  // 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;
+  //   e.preventDefault();
+  //   isDragging = true;
+  //   carousel.classList.add("dragging");
+  //   positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
+  //   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>

data/_includes/appscms/recent-posts/recent_posts.html

@@ -1,90 +1,92 @@
-<section class="related-posts-section container">
-  <div class="mx-auto col-md-11 col-lg-11 col-sm-10 p-3 pb-3">
-    <div class="relatedPosts">
-      {%- if site.posts.size>0 -%} {%- if site.monumetricId and page.url != '/'
-      and page.lang == "en" -%}
-
-      <div class="row">
-        <div class="col-md-9 mx-auto">
-          {%- endif -%}
-          <div class="heading">
-            <div class="row">
-              <div class="col-md-12 col-sm-12 mx-auto">
-                <div
-                  class="d-flex align-items-center justify-content-center mb-5"
-                >
-                  <hr
-                    class="flex-grow-1 mx-4 mb-0"
-                    style="height: 2px; background-color: #000"
-                  />
-                  <h4 class="text-center appscms-h3 my-5">Recent posts</h4>
-                  <hr
-                    class="flex-grow-1 mx-4 mb-0"
-                    style="height: 2px; background-color: #000"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-          {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
-        </div>
-      </div>
-      {%- endif -%} {%- endif -%}
-      <div class="row allblogs shadow appscms-blogs">
-        <div class="row px-4">
-          {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
-
-          <div class="col-md-9 mx-auto">
-            <div class="row">
-              {%- endif -%} {% assign posts = site.posts |
-              where_exp:"post","post.url != page.url" %} {% for post in posts
-              limit: 6%} {%- include /authors/authors.html -%}
-              <div class="col-xl-4 col-lg-6 col-md-6 mb-4">
-                <div class="card h-100 appscms-blog-cards">
-                  <a
-                    class="text-decoration-none text-dark"
-                    href="{{ post.url }}"
-                  >
-                    <img
-                      class="card-img-top"
-                      src="{{ post.image }}"
-                      alt="Video thumbnail"
-                    />
-                    <div class="card-body">
-                      <h5 class="card-title">{{post.title}}</h5>
-                      <div class="wrapfooter">
-                        <span class="meta-footer-thumb"
-                          ><img
-                            class="author-thumb ezlazyloaded"
-                            loading="lazy"
-                            src="{{image}}"
-                            alt="{{authorName}}"
-                            ezimgfmt="rs rscb1 src ng ngcb1"
-                            data-ezsrc="https://safeimagekit.com/ezoimgfmt/d33wubrfki0l68.cloudfront.net/6ec825fe5d7100e36db90bc00382e77e2e242a20/f5cec/assets/images/udit.jpg?ezimgfmt=rs:35x35/rscb1/ng:webp/ngcb1"
-                            ezoid="0.04631063861662277"
-                        /></span>
-                        <div class="author-meta">
-                          <span class="post-name"
-                            ><a target="_blank" href="/blog"
-                              >{{authorName}}</a
-                            ></span
-                          ><br />
-                          <p class="post-date mb-0">
-                            {{post.date | date_to_string }}
-                          </p>
-                        </div>
-                      </div>
-                    </div>
-                  </a>
-                </div>
-              </div>
-              {% endfor %} {%- if site.monumetricId and page.url != '/' and
-              page.lang == "en" -%}
-            </div>
-          </div>
-          {%- endif -%}
-        </div>
-      </div>
-    </div>
-  </div>
-</section>
+<section class="related-posts-section container">
+  <div class="mx-auto col-md-11 col-lg-11 col-sm-10 p-3 pb-3">
+    <div class="relatedPosts">
+      {%- if site.posts.size>0 -%} {%- if site.monumetricId and page.url != '/'
+      and page.lang == "en" -%}
+
+      <div class="row">
+        <div class="col-md-9 mx-auto">
+          {%- endif -%}
+          <div class="heading">
+            <div class="row">
+              <div class="col-md-12 col-sm-12 mx-auto">
+                <div
+                  class="d-flex align-items-center justify-content-center mb-5"
+                >
+                  <hr
+                    class="flex-grow-1 mx-4 mb-0"
+                    style="height: 2px; background-color: #000"
+                  />
+                  <h4 class="text-center appscms-h3 my-5">Recent posts</h4>
+                  <hr
+                    class="flex-grow-1 mx-4 mb-0"
+                    style="height: 2px; background-color: #000"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+          {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
+        </div>
+      </div>
+      {%- endif -%} {%- endif -%}
+      <div class="row allblogs shadow appscms-blogs">
+        <div class="row px-4">
+          {%- if site.monumetricId and page.url != '/' and page.lang == "en" -%}
+
+          <div class="col-md-9 mx-auto">
+            <div class="row">
+              {%- endif -%} {% assign posts = site.posts |
+              where_exp:"post","post.url != page.url" %} {% for post in posts
+              limit: 6%} {%- include /authors/authors.html -%}
+              <div class="col-xl-4 col-lg-6 col-md-6 mb-4">
+                <div class="card h-100 appscms-blog-cards">
+                  <a
+                    class="text-decoration-none text-dark"
+                    href="{{ post.url }}"
+                  >
+                    <img
+                      class="card-img-top"
+                      src="{{ post.image }}"
+                      alt="Video thumbnail"
+                      loading="lazy"
+                      style="height: 100%; width: 100%"
+                    />
+                    <div class="card-body">
+                      <h5 class="card-title">{{post.title}}</h5>
+                      <div class="wrapfooter">
+                        <span class="meta-footer-thumb"
+                          ><img
+                            class="author-thumb ezlazyloaded"
+                            loading="lazy"
+                            src="{{image}}"
+                            alt="{{authorName}}"
+                            ezimgfmt="rs rscb1 src ng ngcb1"
+                            data-ezsrc="https://safeimagekit.com/ezoimgfmt/d33wubrfki0l68.cloudfront.net/6ec825fe5d7100e36db90bc00382e77e2e242a20/f5cec/assets/images/udit.jpg?ezimgfmt=rs:35x35/rscb1/ng:webp/ngcb1"
+                            ezoid="0.04631063861662277"
+                        /></span>
+                        <div class="author-meta">
+                          <span class="post-name"
+                            ><a target="_blank" href="/blog"
+                              >{{authorName}}</a
+                            ></span
+                          ><br />
+                          <p class="post-date mb-0">
+                            {{post.date | date_to_string }}
+                          </p>
+                        </div>
+                      </div>
+                    </div>
+                  </a>
+                </div>
+              </div>
+              {% endfor %} {%- if site.monumetricId and page.url != '/' and
+              page.lang == "en" -%}
+            </div>
+          </div>
+          {%- endif -%}
+        </div>
+      </div>
+    </div>
+  </div>
+</section>