word-games-theme 3.1.0 → 3.1.2

data/_includes/wordgames/head/head.html

@@ -60,8 +60,6 @@
   <link rel="stylesheet" href="/assets/css/wordgames-variables.css" />
   <link rel="stylesheet" href="/assets/css/wordgames-theme.css" />
   <link rel="stylesheet" href="/assets/css/wordgames-home.css" />
-
-
   {%- if site.noResultPage or page.noResultPage -%}
   <link rel="stylesheet" href="/assets/css/wordgames-result.css" />
   {%- endif -%}

data/_includes/wordgames/header/new-header.html

@@ -29,6 +29,7 @@
                         <div class="row">
                             <div class="col-12 mx-auto">
                                 <div class="wordgames-toolbar-list">
+                                    
                                     {%- for item in dataToShow.megaMenu.dropdown -%}
                                     <div class="wordgames-toolbar-list-item">
                                         <span class="wordgames-toolbar-list-item-span d-flex justify-content-between">

data/_includes/wordgames/search-box/search-box.html

@@ -1,6 +1,7 @@
 {%- if site.noResultPage or page.noResultPage -%}
 
-<div class="serachSection" data-url="{{site.url}}" data-range="{{page.blanktilerange}}" data-letter="{{page.letter}}" data-ablank="{{page.ablank}}">
+<div class="serachSection" data-url="{{site.url}}" data-range="{{page.blanktilerange}}" data-letter="{{page.letter}}"
+    data-ablank="{{page.ablank}}">
     <div class="position-relative serachBox">
         <form id='form' method="GET">
             <div class="container-fluid" id="containerWd">
@@ -8,10 +9,10 @@
                     <input type="text"
                         placeholder="{% if page.size > 15 %}Enter up to {{page.size}} letters?{% else %}Enter up to 15 letters?{% endif %}"
                         class="textBoxes txtBox" name="search"
-                        maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}"
-                        autocomplete="off" value="{{page.value}}">
+                        maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}" autocomplete="off"
+                        value="{{page.value}}">
                     <div class="letter-close-button">
-                      <img width="40px" height="40px"  src="/assets/images/close-button.svg" alt="close-btn">
+                        <img width="40px" height="40px" src="/assets/images/close-button.svg" alt="close-btn">
                     </div>
                 </div>
                 <div class="search-btn-container">
@@ -25,9 +26,11 @@
                         <option value="wwf" id="wwf">Words With Friends (Enable)</option>
                     </select>
                 </div>
+                
             </div>
             <div class="container" id="result-page-data">
                 {%- include wordgames/advanced-filter/advanced-filter.html -%}
+                
             </div>
 
             {%- if page.wordle == 'solver' -%}
@@ -42,7 +45,7 @@
 
 {%- else -%}
 <div class="container-fluid" id="containerWd">
-  
+
     <div class="serachSection">
         <div class="position-relative serachBox">
             <form action="{% if page.url == '/' %}/result{% else %}{{page.url}}/result{% endif %}" id='form'
@@ -53,9 +56,6 @@
                         class="txtBox" value='' name="search"
                         maxlength="{% if page.size > 15 %}{{page.size}}{% else %}15?{% endif %}" required
                         autocomplete="off">
-                    <span class="d-none focus-border">
-                        <i></i>
-                    </span>
                     <div class="letter-close-button">
                         <svg width="40px" height="40px" viewBox="0 0 24 24" fill="none"
                             xmlns="http://www.w3.org/2000/svg">

data/_layouts/wordgames-home.html

@@ -4,7 +4,6 @@
 {%- include wordgames/head/head.html -%}
 
 {%- if site.noResultPage or page.noResultPage -%}
-
 {%- if page.letter -%}
 <style>
     .main-header {
@@ -28,9 +27,7 @@
         background-color: unset !important;
     }
 </style>
-
 {%- endif -%}
-
 {%- endif -%}
 
 
@@ -103,10 +100,9 @@
     {%- endif -%}
 
 
-    
     <script data-lang="{{page.lang}}" defer src="/assets/js/theme.js"></script>
     {%- if site.noResultPage -%}
-    <script defer src="/assets/js/wordfinder-home.js"></script>
+    <script data-url="{{site.url}}" data-blanktilerange="{{page.blanktilerange}}" defer src="/assets/js/wordfinder-home.js"></script>
     {%- else -%}
     <script defer src="/assets/js/wordgames-home.js"></script>
     {%- endif -%}

data/assets/css/wordgames-home.css

@@ -146,6 +146,15 @@ input[type="number"] {
   display: block;
 }
 
+.search-btn-container{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 1rem;
+  width: 100%;
+  text-align: center;
+}
+
 .serachSection .serachBox .serachBtn {
   color: transparent;
   background-color: var(--primary-color) !important;
@@ -157,9 +166,12 @@ input[type="number"] {
   position: absolute;
   top: 8px;
   right: 10px;
-  outline: none;
+  outline: 0;
   border-radius: 74px;
 }
+.serachSection .serachBox .serachBtn:focus{
+  box-shadow: unset;
+}
 
 .serachSection .serachBox .select_dropDown2 {
   height: 80px;
@@ -823,6 +835,7 @@ summary::-webkit-details-marker {
 
 
 @media (max-width: 768px) {
+ 
   .top_tool_bar {
     display: block !important;
   }
@@ -933,6 +946,7 @@ summary::-webkit-details-marker {
     right: 24px;
   }
 
+
   .serachSection .serachBox .select_dropDown2 {
     height: 50px;
     width: 22%;
@@ -1166,4 +1180,41 @@ summary::-webkit-details-marker {
   .wordgametheme-sidebar-right {
     right: 313px !important;
   }
+}
+
+
+/* //loader */
+
+
+.button-loader {
+  position: absolute;
+  top: 25px;
+  /* left: 100px; */
+  transform: translate(-50%, -50%);
+  border: 4px solid #ffffff;
+  border-top: 4px solid var(--primary-color);
+  border-radius: 50%;
+  width: 15px;
+  height: 15px;
+  animation: spin 1s linear infinite;
+  display: none;
+}
+
+@keyframes spin {
+  0% {
+    transform: translate(-50%, -50%) rotate(0deg);
+  }
+  100% {
+    transform: translate(-50%, -50%) rotate(360deg);
+  }
+}
+
+#download-button.loading .button-loader {
+  display: block; /* Show the loader when button has loading class */
+}
+#processing-btn {
+  position: relative;
+}
+#processing-btn .button-loader {
+  left: 9%;
 }

data/assets/css/wordgames-result.css

@@ -3,24 +3,58 @@
  ***************/
 
 
-/* show more button */
+/* placeholder loader css */
 
-.showmore_btn {
-  background: black;
-  padding: 1rem 2rem;
-  border-radius: 50px;
-  color: #fff;
-  font-size: 15px;
-  border: none;
+.placeholder-loader {
+  display: flex;
+  justify-content: center;
+}
+
+.skeleton-box {
+  display: inline-block;
+  height: 1em;
   position: relative;
-  z-index: 9;
+  overflow: hidden;
+  background-color: #DDDBDD;
 }
-.points{
-  position:relative; top:4px; font-size:12px
+
+.skeleton-box::after {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  transform: translateX(-100%);
+  background-image: linear-gradient(90deg,
+      rgba(255, 255, 255, 0) 0,
+      rgba(255, 255, 255, 0.2) 20%,
+      rgba(255, 255, 255, 0.5) 60%,
+      rgba(255, 255, 255, 0));
+  animation: shimmer 5s infinite;
+  content: '';
+}
+
+@keyframes shimmer {
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+.o-media {
+  display: flex;
+}
+
+.o-media__body {
+  flex-grow: 1;
+}
+
+.o-vertical-spacing>*+* {
+  margin-top: 0.75em;
 }
 
 
-/* common loader css */
+
+
 .loader {
   width: 100%;
   text-align: center;
@@ -55,9 +89,8 @@ input:-webkit-autofill:active {
 }
 
 /* .header_bars{
-  background-color: var(--black-color);
- } */
-
+    background-color: var(--black-color);
+   } */
 
 .result_navbar_section .mobile_bars {
   cursor: pointer;
@@ -145,6 +178,13 @@ input:-webkit-autofill:active {
 
 .serachSection {
   height: auto;
+  position: sticky;
+  top: 68px;
+  z-index: 99;
+  box-shadow: 0px 0px 30px #ffffff;
+  background: white;
+  padding: 4px;
+
 }
 
 
@@ -263,13 +303,13 @@ input:-webkit-autofill:active {
 
 
 /* .fillterWrapper .same {
-   margin-bottom: 10px;
- } */
+     margin-bottom: 10px;
+   } */
 /*  
- .tick {
-   background: url("/assets/images/close-btn.svg") no-repeat;
-   background-position: 95% 50%;
- } */
+   .tick {
+     background: url("/assets/images/close-btn.svg") no-repeat;
+     background-position: 95% 50%;
+   } */
 
 
 .sort-select,
@@ -345,13 +385,14 @@ input:-webkit-autofill:active {
 
 .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 {
   font-size: 20px;
   font-weight: 600;
@@ -359,6 +400,9 @@ input:-webkit-autofill:active {
 
 .wordList {
   padding: 15px;
+  display: inline-flex;
+  width: 100%;
+  flex-wrap: wrap;
 }
 
 .wordList>ul {
@@ -378,7 +422,6 @@ input:-webkit-autofill:active {
 }
 
 .wordList>ul li {
-
   padding: 8px 0;
   background: #f8f9fa;
   border-radius: 5px;
@@ -408,7 +451,8 @@ input:-webkit-autofill:active {
 
 .errorMsg {
   text-align: center;
-  font-size: 20px;
+  font-size: 25px;
+  margin-top: 1rem;
   color: red;
   font-weight: 800;
 }
@@ -528,25 +572,4 @@ input:-webkit-autofill:active {
     font-size: 1.3rem;
   }
 
-}
-
-.tbl {
-  margin-bottom: 50px;
-  width: 80%;
-  margin-left: 100px;
-}
-
-.table-striped {
-  background: #F6F6F6;
-}
-
-.table-striped tbody tr:nth-of-type(odd) {
-  background-color: white !important;
-}
-
-@media (max-width:992px) {
-  .tbl {
-    margin-left: 0 !important;
-    width: 100% !important;
-  }
 }

data/assets/js/X-letter.js

@@ -19,7 +19,6 @@ let includeValue = params.get('include')
 let lengthValue = params.get('length')
 let dictonary = params.get('dictionary')
 
-
 let tab_link_wrapper = document.querySelector('.tab_link_wrapper')
 tab_link_wrapper.style.display = "none"
 

data/assets/js/theme.js

@@ -2,7 +2,6 @@
 ---
 
 
-
   console.log(document.querySelectorAll('*').length);
 if ("{{ site.removeBootstrapJs }}" === "true") {
   const languagesModal = document.querySelector("#staticBackdrop");