word-games-theme 2.6.4 → 2.6.5

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7866c679bbfccf00e0a6522110f4c4baacd0bd6740c1d334e88213d549f2cce7
-  data.tar.gz: f3db02b46af6232f59daf9b653d5638c7b040692219e4fb1bfa06a5b25d3f291
+  metadata.gz: 583d8660aa57700a56401d24ea111b9eee67f0a8be6af0b172477aab3ffd0959
+  data.tar.gz: 43337bc3fec456ef29888e512a532b5bf3f432cc0d0da51c28ae31f71103734d
 SHA512:
-  metadata.gz: 6fa0f9a8e730893fa840979c67daa95e8d6d74c533966739d8cc197db3648e2f3fe1e13ba2cc80e3778f8f9bc3ec8dc3b2f215c320bb9487d6637727f0e9eba8
-  data.tar.gz: 86238d45f266c2921d6d5448ef66cd72b37ad818012fe2c90a8f16dbe52e40c9d1d2f1341eec3908fe9d2848a05673f8d33e6dfb73daceff52e9399af84f324a
+  metadata.gz: 652b32c88d0d1b8065a27f07bde1c357655c168f495c68cfc41ea008b8bd87787726e42d03a63c1508be36edbda337a46e4927c230e42e6d1f4277d85a4186df
+  data.tar.gz: 1535ded04c79f347be83f1846fa277236f6c439663f15832153349ab8a548b808f1eb2996207b60017c75c66dae68ab50037bcef61d0a031fb8e66cae436d4d2

data/_includes/wordgames/faqs/faqs.html

@@ -1,7 +1,7 @@
 {% assign file = page.fileName %}
 {% assign lang = page.lang %}
 {% assign dataToShow = site.data.[page.folderName][lang][file] %}
-<div class="container my-5">
+<div class="container my-5" id="faqsContainer">
     <p class="feature-highlight-title mb-0">FAQ</p>
     {%- if site.ezoicAds -%}
     <div class="container">

data/_includes/wordgames/featurehighlights/featurehighlights.html

@@ -4,7 +4,7 @@
 
 {%- if dataToShow.featureList.first.feature_heading !='' -%}
 
-<div class="container" style="margin-top:7rem;">
+<div class="container" id="featureContainer" style="margin-top:7rem;">
     <div class="row">
         <p class="feature-highlight-title mb-0">Features</p>
         {%- if dataToShow.feature_description -%}

data/_includes/wordgames/header/header.html

@@ -21,10 +21,10 @@
             data-target="#navbarSupportedContent" aria-label="bars-toggle-icon">
             <img src="/assets/images/hamburger-menu.svg" alt="hamburger-menu">
         </button>
-        <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
+        <div class="mobile-top-bar collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
             <div class="navbar-nav">
                 <div class="nav-item">
-                    <a class="nav-link" href="/blog">Blog</a>
+                    <a class="blog-link nav-link" href="/blog">Blog</a>
                 </div>
                 <div class="nav-item dropdown" id="navbarDropdown">
                     <span class="nav-link dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">

data/_includes/wordgames/headings/headings.html

@@ -9,7 +9,7 @@
         <h1 class="heading pb-0 mb-3">
             {{dataToShow.h1}}</h1>
         {%- if dataToShow.h2 != "" -%}
-        <h2>
+        <h2 class="heading-h2">
             {{dataToShow.h2}}</h2>
         {%- endif -%}
     </div>

data/_includes/wordgames/howto/howto.html

@@ -1,5 +1,5 @@
 {%- if dataToShow.HOW_TO_CONTENT -%}
-<div class="container">
+<div class="container" id="howContainer">
     <p class="howto mb-0">How to</p>
     <div class="how-to-section mt-5 align-items-center row pt-5 justify-content-center">
         {%- if site.ezoicAds -%}

data/_includes/wordgames/infographics/infographics.html

@@ -1,6 +1,5 @@
-<div class="container">
+<div class="container" id="infographicsContainer">
     <h3 class="mb-5 infographics-title"><b>Other useful information</b></h3>
-</div>
 
 <div class="inforgraphics_section">
     <div class="wrapper">
@@ -35,6 +34,8 @@
     </div>
 </div>
 
+</div>
+
 <script>
     const carousel = document.querySelector(".carousel"),
         firstImg = carousel.querySelectorAll("img")[0],

data/assets/css/wordfinder-result.css

@@ -175,7 +175,14 @@
    }
    
    .serachSection {
-     height: auto;
+    height: auto;
+    position: sticky;
+    top: 68px;
+    z-index: 99;
+    box-shadow: 0px 0px 30px #ffffff;
+    background: white;
+    padding: 4px;
+     
    }
    
    
@@ -374,10 +381,12 @@
    
    .allGroupWords>.wordListHeading {
      background: var(--black-color);
-     padding: 10px 0px 5px 25px;
+     padding: 10px 0px 10px 25px;
      border-top-right-radius: 13px;
      border-top-left-radius: 13px;
      color: #fff;
+     font-size: 20px;
+     font-weight: 600;
    }
    
    .wordListHeading>h3 {
@@ -387,6 +396,9 @@
    
    .wordList {
      padding: 15px;
+     display: inline-flex;
+     width: 100%;
+     flex-wrap: wrap;
    }
    
    .wordList>ul {
@@ -404,7 +416,6 @@
    }
    
    .wordList>ul li {
-    
      padding: 8px 0;
      background: #f8f9fa;
      border-radius: 5px;
@@ -422,6 +433,15 @@
      text-decoration: none !important;
      font-weight: 600;
      list-style: none;
+     padding: 8px 0;
+     background: #f8f9fa;
+     border-radius: 5px;
+     margin: 6px 6px;
+     width: auto;
+     min-width: 100px;
+     text-align: center;
+     border: solid 1px var(--black-color);
+     box-shadow: 2px 2px 1px 0px var(--black-color);
    }
    
    .wordList .anchor__style .highlight {

data/assets/css/wordgames-home.css

@@ -76,7 +76,7 @@ input[type="number"] {
 
 #containerWd {
   max-width: 100%;
-  width: 800px !important;
+  width: 900px !important;
   padding: 0px;
   position: relative;
 }
@@ -271,6 +271,7 @@ input:focus-visible {
   position: absolute;
   right: 13px;
 }
+
 .fillterWrapper input {
   border-radius: 74px;
   border: solid 2px #313131;
@@ -803,6 +804,42 @@ summary::-webkit-details-marker {
 
 
 @media (max-width: 768px) {
+  .top_tool_bar {
+    display: block !important;
+  }
+
+  .blog-link,
+  #navbarDropdown {
+    display: none;
+  }
+
+  .navbar-toggler{
+    position: absolute;
+    right: 10px;
+    z-index: 999999;
+    top: 10px;
+    width: 50px;
+    height: 50px;
+    padding: 0;
+  }
+
+  .navbar-toggler img{
+    height: 50px;
+  }
+
+  .mobile-top-bar {
+    display: block;
+    position: absolute;
+    right: 0;
+    width: 100%;
+    top: 0;
+  }
+
+  .navbar-nav .top_tool_bar {
+    max-height: 100vh;
+    padding: 3rem;
+  }
+
   .advancedFilterOptions {
     display: block;
   }
@@ -811,10 +848,11 @@ summary::-webkit-details-marker {
     display: none;
   }
 
-  .fillterWrapper{
+  .fillterWrapper {
     gap: 10px;
     margin: 1rem 0px !important;
   }
+
   .overlay {
     display: none;
   }

data/assets/images/close-menu.svg

@@ -0,0 +1,14 @@
+ <svg height="50px" width="1em" style="font-size: 25px" viewBox="0 0 24 24" fill="#000" xmlns="http://www.w3.org/2000/svg" stroke="#000">
+                    <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                    <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g>
+                    <g id="SVGRepo_iconCarrier">
+                      <g clip-path="url(#clip0_429_11083)">
+                        <path d="M7 7.00006L17 17.0001M7 17.0001L17 7.00006" stroke="#000" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                      </g>
+                      <defs>
+                        <clipPath id="clip0_429_11083">
+                          <rect width="24" height="24" fill="white"></rect>
+                        </clipPath>
+                      </defs>
+                    </g>
+                  </svg>

data/assets/js/theme.js

@@ -49,16 +49,23 @@ navbarDropdown.addEventListener("click", () => {
      
     }
 });
-const navbarToggler = document.querySelector('.navbar-toggler')
-const navBar = document.querySelector('#navbarSupportedContent')
+const navbarToggler = document.querySelector('.navbar-toggler');
+const navBar = document.querySelector('#navbarSupportedContent');
+const menuIcon = '/assets/images/hamburger-menu.svg';
+const closeIcon = '/assets/images/close-menu.svg';
+const imgElement = navbarToggler.querySelector('img');
+
 navbarToggler.addEventListener('click', () => {
-    if (navBar.classList.contains("show")) {
-      navBar.classList.remove("show");
-      navBar.style.display = "none"
+    if (navBar.classList.contains('show')) {
+        navBar.classList.remove('show');
+        navBar.style.display = 'none';
+        imgElement.src = menuIcon; // Change to hamburger menu icon when closing
     } else {
-      navBar.classList.add("show");
-      navBar.style.display = "block"
+        navBar.classList.add('show');
+        navBar.style.display = 'block';
+        imgElement.src = closeIcon; // Change to close icon when opening
     }
-})
+});
+
 
 }

data/assets/js/wordfinder.js

@@ -3,7 +3,6 @@
 ***************/
 console.log(true);
 const getScript = document.currentScript;
-console.log(getScript);
 let form = document.querySelector("#form");
 let wordCount = document.querySelector(".wordCount");
 let main = document.querySelector(".main");
@@ -39,6 +38,12 @@ const siteUrl = getScript.dataset.url;
 var sortValue;
 var sortBool = false;
 
+let featureContainer = document.querySelector("#featureContainer")
+let howContainer = document.querySelector("#howContainer")
+let faqsContainer = document.querySelector("#faqsContainer")
+let infographicsContainer = document.querySelector("#infographicsContainer")
+
+
 // let letterCloseButton = document.querySelector(
 //     ".letter-close-button-commonPage"
 // );
@@ -208,9 +213,18 @@ const getDiff = (text1, text2) => {
     return diffRange;
 };
 
+let authorsLists = document.querySelector(".authors-list")
+
 // getWords define...
 const getData = async (serachValue) => {
     try {
+        document.querySelector(".main-header").style.background = "#fff"
+        document.querySelector(".heading-h2").style.display = "none"
+        featureContainer.remove()
+        howContainer.remove()
+        faqsContainer.remove()
+        infographicsContainer.remove()
+        authorsLists.remove()
         errorMsg.innerHTML = "";
         wordCount.innerHTML = "";
         let selectedDictionary = document.querySelector(".select_dropDown2").value;
@@ -227,17 +241,17 @@ const getData = async (serachValue) => {
           </li>
           <li class="blog-post o-media">
             <div class="o-media__figure">
-              <span class="skeleton-box" style="width:800px;height:140px;"></span>
+              <span class="skeleton-box" style="width:900px;height:140px;"></span>
             </div>
           </li>
           <li class="blog-post o-media">
             <div class="o-media__figure">
-              <span class="skeleton-box" style="width:800px;height:140px;"></span>
+              <span class="skeleton-box" style="width:900px;height:140px;"></span>
             </div>
           </li>
           <li class="blog-post o-media">
           <div class="o-media__figure">
-            <span class="skeleton-box" style="width:800px;height:140px;"></span>
+            <span class="skeleton-box" style="width:900px;height:140px;"></span>
           </div>
         </li>
         </ul>
@@ -343,7 +357,7 @@ function getWords(data) {
     main.innerHTML = "";
     // tab_container.innerHTML = "";
     lengthSelect.innerHTML = ""
-    document.querySelector(".sortingFilters").style.display="flex"
+    document.querySelector(".sortingFilters").style.display = "flex"
     if (typeof data === "string") {
         errorMsg.innerHTML = "no words found";
         wordCount.innerHTML = `<strong>Found 0 words with letters ${serachValue.split(
@@ -483,10 +497,12 @@ function getWords(data) {
                             sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
                         }
                         dataArr.push(item);
-                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
-            <li>${itemHtml}
-          <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
-            </li></a>`;
+                        return `
+                        <a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+                        ${itemHtml}
+                        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px">${sum}</span>
+                        </a>
+                        `;
                     }
                 });
 
@@ -505,13 +521,9 @@ function getWords(data) {
                     //             tabs[0] ? tabs[0].classList.add("active-tab") : "";
                     main.innerHTML += `
           <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-              <div class="wordListHeading">
-                  <h3 class="lead">${i} Letter Words</h3>
-              </div>
+                  <h3 class="wordListHeading lead">${i} Letter Words</h3>
               <div class="wordList">
-                  <ul class="ul list-unstyled">
                    ${result.join("")}
-                  </ul>
               </div>
           </div>
           `;
@@ -579,7 +591,6 @@ function sortPointsby(sortValue, data) {
                         newArray.push(value);
                     }
                 });
-
                 newArray.sort(function (a, b) {
                     return b.points - a.points;
                 });
@@ -618,42 +629,42 @@ function sortPointsby(sortValue, data) {
                             itemHtml += `<span class='highlight'>${itemValue}</span>`;
                         }
                     });
-                    return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
-          <li>${itemHtml}
-        <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
-          </li></a>`;
+                    return `
+                    <a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
+                    ${itemHtml}
+                    <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
+                    </a>
+                    `;
                 });
-
                 main.innerHTML += `
-        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-            <div class="wordListHeading">
-                <h3 class="lead">${i} Letter Words</h3>
-            </div>
-            <div class="wordList">
-                <ul class="ul list-unstyled">
-                 ${result.join("")}
-                </ul>
-            </div>
-        </div>
-        `;
+                <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+                        <h3 class="wordListHeading lead">${i} Letter Words</h3>
+                    <div class="wordList">
+                         ${result.join("")}
+                    </div>
+                </div>
+                `;
             }
         }
     }
 }
+
+// document.querySelector(".sortingFilters").style.display = "flex"
+// document.querySelector(".wordCount").style.display = "block"
+
 // sort by aplhabets
 function sortby(sortBool, data) {
+    main.innerHTML = "";
     if (sortBool) {
-        main.innerHTML = "";
         data.reverse();
+        console.log(data)
         let newWordsLength = 0;
         for (let i = serachValue.length; i >= 1; i--) {
             var newdata = data.filter((item) => item.length === i);
-
             if (newdata.length === 0) {
                 main.innerHTML += "";
             } else {
                 newWordsLength += newdata.length;
-
                 const result = newdata.map((item) => {
                     var text1 = serachValue.replace("?", "");
                     var text2 = item;
@@ -689,28 +700,29 @@ function sortby(sortBool, data) {
                             sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
                         }
 
-                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
-            <li>${itemHtml}
-        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
-          </li></a>`;
+                        return `
+                        <a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+                        ${itemHtml}
+                        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px">${sum}</span>
+                        </a>
+                        `;
                     }
                 });
 
+
+
                 main.innerHTML += `
-        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-            <div class="wordListHeading">
-                <h3 class="lead">${i} Letter Words</h3>
-            </div>
-            <div class="wordList">
-                <ul class="ul list-unstyled">
-                 ${result.join("")}
-                </ul>
-            </div>
-        </div>
-        `;
+                <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+                        <h3 class="wordListHeading lead">${i} Letter Words</h3>
+                    <div class="wordList">
+                         ${result.join("")}
+                    </div>
+                </div>
+                `;
             }
         }
-    } else {
+    }
+    else {
         main.innerHTML = "";
         data.sort();
         for (let i = serachValue.length; i >= 1; i--) {
@@ -752,24 +764,22 @@ function sortby(sortBool, data) {
                             sum += ScrabbleLetterScore[item[i]] || 0; // for unknown characters
                         }
 
-                        return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
-            <li>${itemHtml}
-        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
-          </li></a>`;
+                        return `
+                        <a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.toLowerCase()}">
+                        ${itemHtml}
+                        <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px">${sum}</span>
+                        </a>
+                        `;
                     }
                 });
                 main.innerHTML += `
-        <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-            <div class="wordListHeading">
-                <h3 class="lead">${i} Letter Words</h3>
-            </div>
-            <div class="wordList">
-                <ul class="ul list-unstyled">
-                 ${result.join("")}
-                </ul>
-            </div>
-        </div>
-        `;
+          <div class="allGroupWords wordlistContainer" id="alpha_${i}">
+                  <h3 class="wordListHeading lead">${i} Letter Words</h3>
+              <div class="wordList">
+                   ${result.join("")}
+              </div>
+          </div>
+          `;
             }
         }
     }

data/assets/js/xletter-result.js

@@ -505,26 +505,21 @@ function x_with_letters(data) {
 
                 dataArr.push(item)
                 return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-        <li>${itemHtml}
+        ${itemHtml}
           <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
-            </li></a>`
+           </a>`
             })
             home_page_search_result.href = homePageSearchResult
             home_page_search_result.innerHTML = `See words of any length with letters ${serachValue.split("")}`
 
-
             main.innerHTML += `
-        <div class="allGroupWords">
-          <div class="wordListHeading">
-          <h3 class="lead">${itemLength} Letter Words</h3>
-           </div>
-      <div class="wordList">
-          <ul class="ul list-unstyled">
-           ${result.join('')}
-          </ul>
-      </div>
-  </div>
-  `
+            <div class="allGroupWords">
+                    <h3 class="wordListHeading lead">${itemLength} Letter Words</h3>
+                <div class="wordList">
+                     ${result.join("")}
+                </div>
+            </div>
+            `;
 
             // sort eventlistener
             theSelect.addEventListener('change', () => {
@@ -644,20 +639,16 @@ function sortPointsby(sortValue, data, i) {
                 }
             })
             return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item.words}">
-      <li>${itemHtml}
+      ${itemHtml}
     <span class="points" value="${item.points}" style="position:relative; top:4px; font-size:12px"> ${item.points}</span>
-      </li></a>`
+     </a>`
         })
 
         main.innerHTML += `
     <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-        <div class="wordListHeading">
-            <h3 class="lead">${i} Letter Words</h3>
-        </div>
+            <h3 class="wordListHeading lead">${i} Letter Words</h3>
         <div class="wordList">
-            <ul class="ul list-unstyled">
              ${result.join('')}
-            </ul>
         </div>
     </div>
     `
@@ -712,20 +703,16 @@ function sortby(sortBool, data, i) {
             })
 
             return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-            <li>${itemHtml}
+            ${itemHtml}
         <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
-          </li></a>`
+         </a>`
         })
 
         main.innerHTML += `
         <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-            <div class="wordListHeading">
-                <h3 class="lead">${i} Letter Words</h3>
-            </div>
+                <h3 class="wordListHeading lead">${i} Letter Words</h3>
             <div class="wordList">
-                <ul class="ul list-unstyled">
                  ${result.join('')}
-                </ul>
             </div>
         </div>
      
@@ -777,20 +764,16 @@ function sortby(sortBool, data, i) {
             })
 
             return `<a class="anchor__style" title="Lookup ${item} in Dictionary" target="_blank" href="/word-meaning?search=${item}">
-              <li>${itemHtml}
+             ${itemHtml}
           <span class="points" value="${sum}" style="position:relative; top:4px; font-size:12px"> ${sum}</span>
-            </li></a>`
+           </a>`
         })
 
         main.innerHTML += `
           <div class="allGroupWords wordlistContainer" id="alpha_${i}">
-              <div class="wordListHeading">
-                  <h3 class="lead">${i} Letter Words</h3>
-              </div>
+                  <h3 class="wordListHeading lead">${i} Letter Words</h3>
               <div class="wordList">
-                  <ul class="ul list-unstyled">
                    ${result.join('')}
-                  </ul>
               </div>
           </div>
        

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: word-games-theme
 version: !ruby/object:Gem::Version
-  version: 2.6.4
+  version: 2.6.5
 platform: ruby
 authors:
 - manpreet-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2024-03-04 00:00:00.000000000 Z
+date: 2024-03-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -287,6 +287,7 @@ files:
 - assets/images/check.svg
 - assets/images/close-btn.svg
 - assets/images/close-button.svg
+- assets/images/close-menu.svg
 - assets/images/close.png
 - assets/images/copy.svg
 - assets/images/debosmita.jpeg