word-games-theme 3.1.6 → 3.1.7

Sign up to get free protection for your applications and to get access to all the features.
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