word-games-theme 3.1.6 → 3.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f5a3ee85b4117adf5dfb61c935d85e42797072e0d88260bedf911be60203f8f8
4
- data.tar.gz: 368c661dedab31a6cbc017a31b7a9eaa27b1cb5f00079cc0cd6555068349df56
3
+ metadata.gz: 7fa2406055437122d81742761683b7db80529e7f9d184938d7092013abd50dc5
4
+ data.tar.gz: 67415bbf7fc661a25fa34160efcf755ec0ce21fccd70edb3fac7451418479b0f
5
5
  SHA512:
6
- metadata.gz: ec348039e2e3c9ca412cdee09f900eeeb36a6a43a100004d85707c62d0c0081b332d385475250f03e86ad4df8974e907c747dd86af2a735f4394abd51c908116
7
- data.tar.gz: 44263306fe7867366235b84bdd77ced77ca915cb1f77f4a3a67e722d52031fdec32481baefd48a786fbe3814c3a1c43e6d684d5428844a060cb807628480fd09
6
+ metadata.gz: 481366818601e894397279fd9b79e541be45ce6354b113c616700d82b944247ebe08354375e5eaa3769753ac5185675d9a2376e54e2b13fd03dc93b968deec5b
7
+ data.tar.gz: 740f6d7bb98fe1e93ae515c3daafb37082da11aa2ea2a7d9b7b05fad00a965ef0e99b04e565ce3db17f4a5a0650b770ef265e114502993c47df339e20ae5a67f
@@ -1,71 +1,308 @@
1
+ <style>
2
+ .filter_val {
3
+ width: 150px;
4
+ padding: 10px;
5
+ border: 1px solid #ccc;
6
+ border-radius: 4px;
7
+ }
8
+
9
+ .filter-tooltip {
10
+ cursor: pointer;
11
+ margin-left: 5px;
12
+ }
13
+
14
+ .dropdown-content {
15
+ display: none;
16
+ /* position: absolute; */
17
+ background-color: #fff;
18
+ min-width: 150px;
19
+ box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
20
+ z-index: 1;
21
+ max-height: 300px;
22
+ height: auto;
23
+ overflow-y: scroll;
24
+ border-radius: 8px;
25
+ }
26
+
27
+ .dropdown-content a {
28
+ color: black;
29
+ padding: 12px;
30
+ text-decoration: underline;
31
+ display: block;
32
+ font-size: 16px;
33
+ font-weight: 900;
34
+ }
35
+
36
+ .dropdown-content a:hover {
37
+ background-color: #f1f1f1;
38
+ }
39
+ .show {
40
+ display: block;
41
+ }
42
+ .tooltip-container {
43
+ position: relative;
44
+ display: inline-block;
45
+ }
46
+ .startsWith {
47
+ position: relative;
48
+ display: inline-block;
49
+ }
50
+ .arrow-down {
51
+ display: none;
52
+ width: 0;
53
+ height: 0;
54
+ border-left: 10px solid transparent;
55
+ /* Increased size */
56
+ border-right: 10px solid transparent;
57
+ /* Increased size */
58
+ border-top: 10px solid #000;
59
+ /* Increased size and color */
60
+ position: absolute;
61
+ bottom: -8px;
62
+ /* Adjust vertical positioning */
63
+ left: calc(50% - 10px);
64
+ /* Center the larger arrow */
65
+ }
66
+ @media (max-width: 768px) {
67
+ .dropdown-content, .arrow-down {
68
+ display: none !important;
69
+ }
70
+ }
71
+
72
+ </style>
73
+
1
74
  <div class="advancedFilterOptions" onclick="advancedFilterToggle()">
2
75
  <button type="button" value="Advanced Filter" class="filtersOptions">
3
76
  Advanced Options
4
- <img width="22" height="22" src="/assets/images/filter.svg" alt="filter-icon">
77
+ <img width="22" height="22" src="/assets/images/filter.svg" alt="filter-icon">
5
78
  </button>
6
79
  </div>
7
80
 
81
+ <div class="fillterWrapper my-5 filterShow">
8
82
 
9
-
10
- <div class="fillterWrapper my-4 filterShow">
11
83
  <div class="startsWith">
12
- <input class="filter_val textBoxes" autocomplete="off" type="text" id="startsWith" placeholder="Starts with" value=""
13
- name="prefix">
84
+ <input onclick="showDropdown('startsWithDropdown', this)" onkeyup="filterDropdown('startsWithDropdown', this.value)"
85
+ class="filter_val textBoxes" autocomplete="off" type="text" id="startsWith" placeholder="Starts with"
86
+ value="" name="prefix">
14
87
  <div class="filter-tooltip" data-tip="Find words that start with these letters(AB-&gt; Able)"
15
88
  id="Find words that start with these letters(AB-&gt; Able)">
16
89
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
17
90
  </div>
91
+ <div class="arrow-down"></div>
18
92
  </div>
19
93
  <div class="endsWith">
20
- <input class="filter_val textBoxes" autocomplete="off" type="text" id="endsWith" placeholder="Ends with" name="suffix">
94
+ <input onclick="showDropdown('endsWithDropdown', this)" onkeyup="filterDropdown('endsWithDropdown', this.value)"
95
+ class="filter_val textBoxes" autocomplete="off" type="text" id="endsWith" placeholder="Ends with"
96
+ name="suffix">
21
97
  <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
22
98
  data-tip="Filter for words that ends with these letters" id="Filter for words that ends with these letters">
23
99
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
24
100
  </div>
101
+ <div class="arrow-down"></div>
25
102
  </div>
26
103
  <div class="mustInclude">
27
- <input class="filter_val textBoxes" autocomplete="off" type="text" id="mustInclude" placeholder="Contains"
104
+ <input onclick="showDropdown('mustIncludeDropdown', this)" onkeyup="filterDropdown('mustIncludeDropdown', this.value)"
105
+ class="filter_val textBoxes" autocomplete="off" type="text" id="mustInclude" placeholder="Contains"
28
106
  name="contains">
29
107
  <div class="filter-tooltip" data-tip="Words that contain letters in this order(ab)"
30
108
  id="Words that contain letters in this order(ab)">
31
109
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
32
110
  </div>
33
-
111
+ <div class="arrow-down"></div>
34
112
  </div>
35
113
  <div class="wordLength same">
36
- <input autocomplete="off" type="number" class="filter_val textBoxes" id="wordLength" placeholder="Length" name="length"
37
- value="{{page.letter}}">
114
+ <input onclick="showDropdown('wordLengthDropdown',this)" onkeyup="filterDropdown('wordLengthDropdown', this.value)"
115
+ autocomplete="off" type="number" class="filter_val textBoxes" id="wordLength" placeholder="Length"
116
+ name="length" value="{{page.letter}}">
38
117
 
39
118
  <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
40
119
  data-tip="Filter for words with this length" id="Filter for words with this length">
41
120
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
42
121
  </div>
122
+ <div class="arrow-down"></div>
43
123
  </div>
44
124
  <div class="inculdeWith">
45
- <input class="filter_val textBoxes" autocomplete="off" type="text" id="inculdeWith" placeholder="Include" value=""
125
+ <input onclick="showDropdown('inculdeWithDropdown',this)" onkeyup="filterDropdown('inculdeWithDropdown', this.value)"
126
+ class="filter_val textBoxes" autocomplete="off" type="text" id="inculdeWith" placeholder="Include" value=""
46
127
  name="include">
47
128
  <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
48
129
  data-tip="Only words that contain the letters you enter here"
49
130
  id="Only words that contain the letters you enter here">
50
131
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
51
132
  </div>
52
- </div>
53
-
133
+ <div class="arrow-down"></div>
54
134
 
135
+ </div>
55
136
  <div class="exculdeWith">
56
- <input class="filter_val textBoxes" autocomplete="off" type="text" id="exculdeWith" placeholder="Exclude" value=""
137
+ <input onclick="showDropdown('exculdeWithDropdown',this)" onkeyup="filterDropdown('exculdeWithDropdown', this.value)"
138
+ class="filter_val textBoxes" autocomplete="off" type="text" id="exculdeWith" placeholder="Exclude" value=""
57
139
  name="exclude">
58
140
  <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
59
141
  data-tip="Only words that not contain the letters you enter here"
60
142
  id="Only words that not contain the letters you enter here">
61
143
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
62
144
  </div>
63
- </div>
64
-
65
-
145
+ <div class="arrow-down"></div>
66
146
 
147
+ </div>
67
148
 
68
149
 
150
+ <div id="startsWithDropdown" class="dropdown-content">
151
+ <a href="#A" data-value="A">A</a>
152
+ <a href="#B" data-value="B">B</a>
153
+ <a href="#C" data-value="C">C</a>
154
+ <a href="#D" data-value="D">D</a>
155
+ <a href="#E" data-value="E">E</a>
156
+ <a href="#F" data-value="F">F</a>
157
+ <a href="#G" data-value="G">G</a>
158
+ <a href="#H" data-value="H">H</a>
159
+ <a href="#I" data-value="I">I</a>
160
+ <a href="#J" data-value="J">J</a>
161
+ <a href="#K" data-value="K">K</a>
162
+ <a href="#L" data-value="L">L</a>
163
+ <a href="#M" data-value="M">M</a>
164
+ <a href="#N" data-value="N">N</a>
165
+ <a href="#O" data-value="O">O</a>
166
+ <a href="#P" data-value="P">P</a>
167
+ <a href="#Q" data-value="Q">Q</a>
168
+ <a href="#R" data-value="R">R</a>
169
+ <a href="#S" data-value="S">S</a>
170
+ <a href="#T" data-value="T">T</a>
171
+ <a href="#U" data-value="U">U</a>
172
+ <a href="#V" data-value="V">V</a>
173
+ <a href="#W" data-value="W">W</a>
174
+ <a href="#X" data-value="X">X</a>
175
+ <a href="#Y" data-value="Y">Y</a>
176
+ <a href="#Z" data-value="Z">Z</a>
177
+ </div>
178
+ <div id="endsWithDropdown" class="dropdown-content">
179
+ <a href="#A" data-value="A">A</a>
180
+ <a href="#B" data-value="B">B</a>
181
+ <a href="#C" data-value="C">C</a>
182
+ <a href="#D" data-value="D">D</a>
183
+ <a href="#E" data-value="E">E</a>
184
+ <a href="#F" data-value="F">F</a>
185
+ <a href="#G" data-value="G">G</a>
186
+ <a href="#H" data-value="H">H</a>
187
+ <a href="#I" data-value="I">I</a>
188
+ <a href="#J" data-value="J">J</a>
189
+ <a href="#K" data-value="K">K</a>
190
+ <a href="#L" data-value="L">L</a>
191
+ <a href="#M" data-value="M">M</a>
192
+ <a href="#N" data-value="N">N</a>
193
+ <a href="#O" data-value="O">O</a>
194
+ <a href="#P" data-value="P">P</a>
195
+ <a href="#Q" data-value="Q">Q</a>
196
+ <a href="#R" data-value="R">R</a>
197
+ <a href="#S" data-value="S">S</a>
198
+ <a href="#T" data-value="T">T</a>
199
+ <a href="#U" data-value="U">U</a>
200
+ <a href="#V" data-value="V">V</a>
201
+ <a href="#W" data-value="W">W</a>
202
+ <a href="#X" data-value="X">X</a>
203
+ <a href="#Y" data-value="Y">Y</a>
204
+ <a href="#Z" data-value="Z">Z</a>
205
+ </div>
206
+ <div id="mustIncludeDropdown" class="dropdown-content">
207
+ <a href="#A" data-value="A">A</a>
208
+ <a href="#B" data-value="B">B</a>
209
+ <a href="#C" data-value="C">C</a>
210
+ <a href="#D" data-value="D">D</a>
211
+ <a href="#E" data-value="E">E</a>
212
+ <a href="#F" data-value="F">F</a>
213
+ <a href="#G" data-value="G">G</a>
214
+ <a href="#H" data-value="H">H</a>
215
+ <a href="#I" data-value="I">I</a>
216
+ <a href="#J" data-value="J">J</a>
217
+ <a href="#K" data-value="K">K</a>
218
+ <a href="#L" data-value="L">L</a>
219
+ <a href="#M" data-value="M">M</a>
220
+ <a href="#N" data-value="N">N</a>
221
+ <a href="#O" data-value="O">O</a>
222
+ <a href="#P" data-value="P">P</a>
223
+ <a href="#Q" data-value="Q">Q</a>
224
+ <a href="#R" data-value="R">R</a>
225
+ <a href="#S" data-value="S">S</a>
226
+ <a href="#T" data-value="T">T</a>
227
+ <a href="#U" data-value="U">U</a>
228
+ <a href="#V" data-value="V">V</a>
229
+ <a href="#W" data-value="W">W</a>
230
+ <a href="#X" data-value="X">X</a>
231
+ <a href="#Y" data-value="Y">Y</a>
232
+ <a href="#Z" data-value="Z">Z</a>
233
+ </div>
234
+ <div id="inculdeWithDropdown" class="dropdown-content">
235
+ <a href="#A" data-value="A">A</a>
236
+ <a href="#B" data-value="B">B</a>
237
+ <a href="#C" data-value="C">C</a>
238
+ <a href="#D" data-value="D">D</a>
239
+ <a href="#E" data-value="E">E</a>
240
+ <a href="#F" data-value="F">F</a>
241
+ <a href="#G" data-value="G">G</a>
242
+ <a href="#H" data-value="H">H</a>
243
+ <a href="#I" data-value="I">I</a>
244
+ <a href="#J" data-value="J">J</a>
245
+ <a href="#K" data-value="K">K</a>
246
+ <a href="#L" data-value="L">L</a>
247
+ <a href="#M" data-value="M">M</a>
248
+ <a href="#N" data-value="N">N</a>
249
+ <a href="#O" data-value="O">O</a>
250
+ <a href="#P" data-value="P">P</a>
251
+ <a href="#Q" data-value="Q">Q</a>
252
+ <a href="#R" data-value="R">R</a>
253
+ <a href="#S" data-value="S">S</a>
254
+ <a href="#T" data-value="T">T</a>
255
+ <a href="#U" data-value="U">U</a>
256
+ <a href="#V" data-value="V">V</a>
257
+ <a href="#W" data-value="W">W</a>
258
+ <a href="#X" data-value="X">X</a>
259
+ <a href="#Y" data-value="Y">Y</a>
260
+ <a href="#Z" data-value="Z">Z</a>
261
+ </div>
262
+ <div id="exculdeWithDropdown" class="dropdown-content">
263
+ <a href="#A" data-value="A">A</a>
264
+ <a href="#B" data-value="B">B</a>
265
+ <a href="#C" data-value="C">C</a>
266
+ <a href="#D" data-value="D">D</a>
267
+ <a href="#E" data-value="E">E</a>
268
+ <a href="#F" data-value="F">F</a>
269
+ <a href="#G" data-value="G">G</a>
270
+ <a href="#H" data-value="H">H</a>
271
+ <a href="#I" data-value="I">I</a>
272
+ <a href="#J" data-value="J">J</a>
273
+ <a href="#K" data-value="K">K</a>
274
+ <a href="#L" data-value="L">L</a>
275
+ <a href="#M" data-value="M">M</a>
276
+ <a href="#N" data-value="N">N</a>
277
+ <a href="#O" data-value="O">O</a>
278
+ <a href="#P" data-value="P">P</a>
279
+ <a href="#Q" data-value="Q">Q</a>
280
+ <a href="#R" data-value="R">R</a>
281
+ <a href="#S" data-value="S">S</a>
282
+ <a href="#T" data-value="T">T</a>
283
+ <a href="#U" data-value="U">U</a>
284
+ <a href="#V" data-value="V">V</a>
285
+ <a href="#W" data-value="W">W</a>
286
+ <a href="#X" data-value="X">X</a>
287
+ <a href="#Y" data-value="Y">Y</a>
288
+ <a href="#Z" data-value="Z">Z</a>
289
+ </div>
290
+ <div id="wordLengthDropdown" class="dropdown-content">
291
+ <a href="#2" data-value="2">2</a>
292
+ <a href="#3" data-value="3">3</a>
293
+ <a href="#4" data-value="4">4</a>
294
+ <a href="#5" data-value="5">5</a>
295
+ <a href="#6" data-value="6">6</a>
296
+ <a href="#7" data-value="7">7</a>
297
+ <a href="#8" data-value="8">8</a>
298
+ <a href="#9" data-value="9">9</a>
299
+ <a href="#10" data-value="10">10</a>
300
+ <a href="#11" data-value="11">11</a>
301
+ <a href="#12" data-value="12">12</a>
302
+ <a href="#13" data-value="13">13</a>
303
+ <a href="#14" data-value="14">14</a>
304
+ <a href="#15" data-value="15">15</a>
305
+ </div>
69
306
  </div>
70
307
 
71
308
  <script>
@@ -74,4 +311,53 @@
74
311
  filterShow.classList.toggle("d-flex")
75
312
  }
76
313
 
314
+ function showDropdown(id,input) {
315
+ document.querySelectorAll('.dropdown-content').forEach(function (dropdown) {
316
+ dropdown.style.display = 'none';
317
+ });
318
+ document.querySelectorAll('.arrow-down').forEach(function (arrow) {
319
+ arrow.style.display = 'none';
320
+ });
321
+ let dropdown = document.getElementById(id);
322
+
323
+ let arrow = input.parentElement.querySelector('.arrow-down');
324
+
325
+ if (arrow) {
326
+ arrow.style.display = "block"
327
+ }
328
+ if (dropdown) {
329
+ dropdown.style.display = 'flex';
330
+ }
331
+ }
332
+
333
+ function filterDropdown(dropdownId, filterValue) {
334
+ const dropdown = document.getElementById(dropdownId);
335
+ dropdown.style.display = "none"
336
+ document.querySelectorAll('.arrow-down').forEach(function (arrow) {
337
+ arrow.style.display = 'none';
338
+ });
339
+ }
340
+
341
+ function handleItemClick(event) {
342
+ event.preventDefault();
343
+ const selectedValue = event.target.getAttribute('data-value');
344
+ console.log(selectedValue);
345
+ const dropdownId = event.target.closest('.dropdown-content').id;
346
+ const inputId = dropdownId.replace('Dropdown', '');
347
+ document.getElementById(inputId).value = selectedValue;
348
+ document.getElementById(dropdownId).classList.remove('show');
349
+ document.getElementById(dropdownId).style.display = "none"
350
+ let arrow = document.getElementById(inputId).parentElement.querySelector('.arrow-down');
351
+ arrow.style.display = "none"
352
+ logSubmit(event);
353
+ }
354
+ document.querySelectorAll('.dropdown-content a').forEach(item => {
355
+ item.addEventListener('click', handleItemClick);
356
+ });
357
+
358
+
359
+
360
+
361
+ </script>
362
+
77
363
  </script>
@@ -150,7 +150,7 @@ input[type="number"] {
150
150
  display: flex;
151
151
  justify-content: center;
152
152
  align-items: center;
153
- margin-top: 1rem;
153
+ /* margin-top: 1rem; */
154
154
  width: 100%;
155
155
  text-align: center;
156
156
  }
@@ -446,8 +446,8 @@ input:-webkit-autofill:active {
446
446
 
447
447
  .points {
448
448
  position: relative;
449
- top: 4px;
450
- font-size: 12px;
449
+ top: 4px;
450
+ font-size: 12px;
451
451
  color: #73716e;
452
452
  font-weight: 600;
453
453
  }
@@ -465,6 +465,12 @@ input:-webkit-autofill:active {
465
465
 
466
466
  @media (max-width: 768px) {
467
467
 
468
+ .sort-select,
469
+ #select_dropDown,
470
+ .length-select {
471
+ width: 170px;
472
+ }
473
+
468
474
  /* result page navbar, closebtn, heading css for mobile */
469
475
  .allGroupWords,
470
476
  .allGroupWords>.wordListHeading {
@@ -573,6 +579,7 @@ input:-webkit-autofill:active {
573
579
 
574
580
  .wordCount {
575
581
  font-size: 1.3rem;
582
+ text-align: center;
576
583
  }
577
584
 
578
585
  }
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: word-games-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 3.1.6
4
+ version: 3.1.7
5
5
  platform: ruby
6
6
  authors:
7
7
  - manpreet-appscms
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-09-16 00:00:00.000000000 Z
11
+ date: 2024-09-19 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll