word-games-theme 2.4.1 → 2.4.2

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: b1863de17112033ab8e3a5a3e5a42a3f6c6673f0527afdd73a66e62e667316b6
4
- data.tar.gz: f5e3ba18131c39a822d50a02c9307f2efc6f6eeac7bccf75f7f5c885bfda043f
3
+ metadata.gz: 85db30ff5ad7658d247b6fc5bf3dfab8faeab685f547474e5bcd2ff48032d609
4
+ data.tar.gz: c49025f748854611f5cf133f216c1d441cf9df3830aafe79799e174048fcc668
5
5
  SHA512:
6
- metadata.gz: 77ecf762b9b69ef66bbea7b307b9632aada4112b624acd8cf951dd37d1953a9277e4166c99f9ac94beeadcbb665cf1a3084487cbe3d05d6f816665359f1ca50a
7
- data.tar.gz: 7d62aefb7bee60f971c4281b0bb91793dbe56775a28b1854c54afb66ddeac70ebe22f7088f2d05088d6687f676ffde9b0ef5277218ff3403920d586d0afc89f7
6
+ metadata.gz: 631360d5ed26b005b962c32d3857b935ef8e63230da7a82fe91045b57d98ac4ce6871b824a57f5d1a26a0c47bb9f1cdb25d77bcf25c60408811736fea503fef4
7
+ data.tar.gz: fe56dc40f6f146c743a07cbdfd40a85eae870054773eef804d5d5afdf689e0373871dc0422952f498081ee54787b472b1e809a7788d978cb4a349457da23b846
@@ -1,9 +1,22 @@
1
- <div class="d-flex fillterWrapper my-5 hide">
1
+ <div class="advancedFilterOptions" onclick="advancedFilterToggle()">
2
+ <button type="button" value="Advanced Filter" class="filtersOptions">
3
+ Advanced Options
4
+ <svg width="22" height="22" viewBox="0 0 19 20" fill="none" xmlns="http://www.w3.org/2000/svg"
5
+ class="w-5 h-5 ml-1.5 mb-1">
6
+ <path
7
+ d="M12.9993 5.33203L2.99925 5.33203C2.07842 5.33203 1.31092 6.09036 1.53842 6.98203C1.78061 7.92694 2.22676 8.80737 2.84552 9.56146C3.46428 10.3155 4.24065 10.925 5.12008 11.347C5.80592 11.6754 6.33258 12.3204 6.33258 13.0804V18.1504C6.33266 18.2924 6.36902 18.432 6.4382 18.556C6.50739 18.68 6.60712 18.7842 6.72791 18.8589C6.84871 18.9335 6.98657 18.976 7.12842 18.9824C7.27027 18.9888 7.4114 18.9588 7.53842 18.8954L9.20508 18.062C9.34349 17.9929 9.4599 17.8865 9.54129 17.755C9.62268 17.6234 9.66584 17.4717 9.66592 17.317V13.0804C9.66592 12.3204 10.1926 11.6754 10.8776 11.347C11.7574 10.9252 12.5341 10.3159 13.1532 9.56178C13.7722 8.80767 14.2186 7.92712 14.4609 6.98203C14.6868 6.09036 13.9184 5.33203 12.9993 5.33203Z"
8
+ stroke="white" stroke-width="1.5"></path>
9
+ </svg>
10
+ </button>
11
+ </div>
12
+
13
+ <div class="fillterWrapper my-5 filterShow">
2
14
  <span class="d-none m,filter_count" style="display: none;"></span>
3
15
  <div class="startsWith">
4
16
  <input class="filter_val" autocomplete="off" type="text" id="startsWith" placeholder="Starts with" value=""
5
17
  name="prefix">
6
- <div class="filter-tooltip" data-tip="Find words that start with these letters(AB-&gt; Able)" id="Find words that start with these letters(AB-&gt; Able)">
18
+ <div class="filter-tooltip" data-tip="Find words that start with these letters(AB-&gt; Able)"
19
+ id="Find words that start with these letters(AB-&gt; Able)">
7
20
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
8
21
  </div>
9
22
  </div>
@@ -27,14 +40,16 @@
27
40
  <input class="filter_val" autocomplete="off" type="text" id="inculdeWith" placeholder="Inculde" value=""
28
41
  name="include">
29
42
  <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
30
- data-tip="Only words that contain the letters you enter here" id="Only words that contain the letters you enter here">
43
+ data-tip="Only words that contain the letters you enter here"
44
+ id="Only words that contain the letters you enter here">
31
45
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
32
46
  </div>
33
47
  </div>
34
48
  <div class="mustInclude">
35
49
  <input class="filter_val" autocomplete="off" type="text" id="mustInclude" placeholder="Contains"
36
50
  name="contains">
37
- <div class="filter-tooltip" data-tip="Words that contain letters in this order(ab)" id="Words that contain letters in this order(ab)">
51
+ <div class="filter-tooltip" data-tip="Words that contain letters in this order(ab)"
52
+ id="Words that contain letters in this order(ab)">
38
53
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
39
54
  </div>
40
55
 
@@ -44,7 +59,8 @@
44
59
  <input class="filter_val" autocomplete="off" type="text" id="exculdeWith" placeholder="Exculde" value=""
45
60
  name="exclude">
46
61
  <div class="filter-tooltip" data-toggle="tooltip" data-placement="top"
47
- data-tip="Only words that not contain the letters you enter here" id="Only words that not contain the letters you enter here">
62
+ data-tip="Only words that not contain the letters you enter here"
63
+ id="Only words that not contain the letters you enter here">
48
64
  <img width="30px" height="30px" src="/assets/images/questionmark.svg" alt="Question Mark" />
49
65
  </div>
50
66
  </div>
@@ -53,4 +69,12 @@
53
69
 
54
70
 
55
71
 
56
- </div>
72
+ </div>
73
+
74
+ <script>
75
+ let filterShow = document.querySelector(".filterShow")
76
+ function advancedFilterToggle(){
77
+ filterShow.classList.toggle("d-flex")
78
+ }
79
+
80
+ </script>
@@ -85,6 +85,7 @@
85
85
  <option value="wwf" id="wwf">Enable (Words With Friends)</option>
86
86
  </select>
87
87
  </div>
88
+
88
89
  {%- include wordgames/advanced-filter/advanced-filter.html -%}
89
90
 
90
91
  {%- if page.wordle == 'solver' -%}
@@ -0,0 +1,552 @@
1
+ /***************
2
+ Result page css
3
+ ***************/
4
+
5
+
6
+ /* placeholder loader css */
7
+
8
+ .placeholder-loader{
9
+ display: flex;
10
+ justify-content: center;
11
+ }
12
+
13
+ .skeleton-box {
14
+ display: inline-block;
15
+ height: 1em;
16
+ position: relative;
17
+ overflow: hidden;
18
+ background-color: #DDDBDD;
19
+ }
20
+
21
+ .skeleton-box::after {
22
+ position: absolute;
23
+ top: 0;
24
+ right: 0;
25
+ bottom: 0;
26
+ left: 0;
27
+ transform: translateX(-100%);
28
+ background-image: linear-gradient(90deg,
29
+ rgba(255, 255, 255, 0) 0,
30
+ rgba(255, 255, 255, 0.2) 20%,
31
+ rgba(255, 255, 255, 0.5) 60%,
32
+ rgba(255, 255, 255, 0));
33
+ animation: shimmer 5s infinite;
34
+ content: '';
35
+ }
36
+
37
+ @keyframes shimmer {
38
+ 100% {
39
+ transform: translateX(100%);
40
+ }
41
+ }
42
+
43
+ .o-media {
44
+ display: flex;
45
+ }
46
+
47
+ .o-media__body {
48
+ flex-grow: 1;
49
+ }
50
+
51
+ .o-vertical-spacing>*+* {
52
+ margin-top: 0.75em;
53
+ }
54
+
55
+
56
+
57
+
58
+ .loader {
59
+ width: 100%;
60
+ text-align: center;
61
+ }
62
+
63
+ .loader img {
64
+ height: 100px;
65
+ }
66
+
67
+
68
+ input:-webkit-autofill,
69
+ input:-webkit-autofill:hover,
70
+ input:-webkit-autofill:focus,
71
+ input:-webkit-autofill:active {
72
+ transition: background-color 5000s ease-in-out 0s;
73
+ }
74
+
75
+ .btn-info:not(:disabled):not(.disabled).active:focus,
76
+ .btn-info:not(:disabled):not(.disabled):active:focus,
77
+ .show>.btn-info.dropdown-toggle:focus {
78
+ box-shadow: unset;
79
+ border-color: rgba(0, 0, 0, 0.1);
80
+ }
81
+
82
+ /* navbar css for result page */
83
+ .result_navbar_section {
84
+ width: 100%;
85
+ padding: .8rem 9% !important;
86
+ position: sticky;
87
+ top: 0;
88
+ z-index: 99999;
89
+ }
90
+ .header_bars{
91
+ background-color: var(--black-color);
92
+ }
93
+
94
+ .result_navbar_section .mobile_bars {
95
+ cursor: pointer;
96
+ position: absolute;
97
+ top: 13px;
98
+ /* margin: 0 40px; */
99
+ left: 110px;
100
+ }
101
+
102
+ .mobile_bars .bars {
103
+ position: relative;
104
+ color: #000;
105
+ font-size: 35px;
106
+ }
107
+
108
+ .fillterWrapper .filter-tooltip{
109
+ top: 8px !important
110
+ }
111
+ .result_navbar_section #open_list_bar {
112
+ position: fixed;
113
+ top: 0px;
114
+ left: -100%;
115
+ z-index: 999;
116
+ height: 100vh;
117
+ transition: all .5s ease-in-out;
118
+ list-style: none;
119
+ box-shadow: 0 0 5px grey;
120
+ background: #f8f9fa;
121
+ overflow-y: scroll;
122
+ }
123
+
124
+ #open_list_bar .cat_bar_logo_link {
125
+ padding: 0 15px;
126
+ }
127
+
128
+ #open_list_bar .cat_bar_logo_link .cat_bar_img {
129
+ width: 30px;
130
+ }
131
+
132
+ #open_list_bar .cat_title {
133
+ color: #000;
134
+ font-weight: 900;
135
+ font-size: 14px;
136
+ position: relative;
137
+ left: 10px;
138
+ top: 3px;
139
+ }
140
+
141
+ #open_list_bar .close_bar_btn {
142
+ position: absolute;
143
+ right: 8px;
144
+ font-size: 28px;
145
+ top: 15px;
146
+ cursor: pointer;
147
+ }
148
+
149
+ .list-items-container .list_cat_heading {
150
+ padding: 8px 15px;
151
+ background-color: var(--primary-color);
152
+ color: #fff;
153
+ font-size: 13px;
154
+ }
155
+
156
+ .list-items-container .list_cat_name {
157
+ padding: 8px 15px;
158
+ font-size: 12px;
159
+ border-bottom: 1px solid rgb(209, 213, 219)
160
+ }
161
+
162
+ .list-items-container .list_cat_name:active {
163
+ color: #000 !important
164
+ }
165
+
166
+ .list-items-container .list_cat_name:hover {
167
+ background-color: #e9ecef;
168
+ }
169
+
170
+ /* h1,h2 for result page , searchbox and length selector css*/
171
+ .pageHeading>.result_heading {
172
+ font-size: 22px;
173
+ font-weight: 600;
174
+ color: #000;
175
+ }
176
+
177
+ .serachSection {
178
+ height: auto;
179
+ }
180
+
181
+
182
+ .letter-close-button-commonPage {
183
+ position: absolute;
184
+ right: 300px;
185
+ top: 24px;
186
+ font-size: 15px;
187
+ cursor: pointer;
188
+ display: none;
189
+ }
190
+
191
+ .ltr-cls-btn-commonPage {
192
+ display: block;
193
+ }
194
+
195
+ .tab_link_wrapper {
196
+ display: flex;
197
+ width: 100%;
198
+ justify-content: center;
199
+ background: var(--black-color);
200
+ border-radius: 40px;
201
+ margin: 10px 0px;;
202
+ padding: 10px;
203
+ /* border: 2px solid var(--black-color); */
204
+ }
205
+
206
+ .tab_link_wrapper .flex-row {
207
+ -ms-flex-direction: row !important;
208
+ flex-direction: row !important;
209
+ display: flex;
210
+ overflow: hidden;
211
+ margin: 0 25px;
212
+ }
213
+
214
+ .tab_link_wrapper #next {
215
+ background: url('/assets/images/next.webp');
216
+ background-size: cover;
217
+ width: 21px;
218
+ height: 21px;
219
+ object-fit: cover;
220
+ padding: 3px;
221
+ border: none;
222
+ position: absolute;
223
+ top: 6px;
224
+ right: 10px;
225
+ }
226
+
227
+ .tab_link_wrapper #prev {
228
+ background: url('/assets/images/prev.webp');
229
+ background-size: cover;
230
+ width: 21px;
231
+ height: 21px;
232
+ object-fit: cover;
233
+ padding: 3px;
234
+ border: none;
235
+ position: absolute;
236
+ top: 6px;
237
+ left: 10px;
238
+ }
239
+
240
+ .active-tab {
241
+ border-bottom: solid 3px var(--primary-color) !important;
242
+ }
243
+
244
+ .tab_link_wrapper .tab_link {
245
+ font-size: 15px;
246
+ font-weight: 900;
247
+ margin: 0 5px;
248
+ padding-top: 5px;
249
+ border: none;
250
+ outline: none;
251
+ background-color: inherit;
252
+ color: white
253
+ }
254
+
255
+ /* advanced filter and sorting css */
256
+ .Advancedbtn .filter_count {
257
+ width: 20px;
258
+ color: white;
259
+ height: 20px;
260
+ text-align: center;
261
+ background-color: #808080;
262
+ padding-top: 2px;
263
+ border-radius: 50%;
264
+ margin-right: 1px;
265
+ position: relative;
266
+ left: 150px;
267
+ }
268
+
269
+ .Advancedbtn .filterButton {
270
+ background: #f8f9fa;
271
+ box-shadow: 0 0 3px #343a4063;
272
+ width: 190px;
273
+ border-radius: 10px;
274
+ border: none;
275
+ outline: none;
276
+ font-weight: 900;
277
+ font-size: 13px;
278
+ padding: 8.5px;
279
+ text-align: left;
280
+ }
281
+
282
+ .Advancedbtn .angle-arrow {
283
+ background: url(../images/angle-arrow-down.svg) no-repeat;
284
+ background-size: contain;
285
+ width: 10px;
286
+ height: 20px;
287
+ font-weight: 900;
288
+ position: absolute;
289
+ top: 20px;
290
+ right: 5px;
291
+ margin: -3px 0;
292
+ }
293
+
294
+
295
+ /* .fillterWrapper .same {
296
+ margin-bottom: 10px;
297
+ } */
298
+ /*
299
+ .tick {
300
+ background: url("/assets/images/close-btn.svg") no-repeat;
301
+ background-position: 95% 50%;
302
+ } */
303
+
304
+
305
+ .sort-select,
306
+ #select_dropDown {
307
+ background: #f8f9fa;
308
+ border: solid 1px var(--black-color);
309
+ box-shadow: 2px 2px 1px 0px var(--black-color);
310
+ word-wrap: normal;
311
+ width: 190px;
312
+ border-radius: 10px;
313
+ cursor: pointer;
314
+ padding: 10px;
315
+ text-align: left;
316
+ color: #1c1107;
317
+ font-size: 13px;
318
+ font-weight: 600;
319
+ font-stretch: normal;
320
+ font-style: normal;
321
+ outline: none;
322
+ }
323
+ .length-select{
324
+ background: #f8f9fa;
325
+ border: solid 1px var(--black-color);
326
+ box-shadow: 2px 2px 1px 0px var(--black-color);
327
+ word-wrap: normal;
328
+ width: 190px;
329
+ border-radius: 10px;
330
+ cursor: pointer;
331
+ padding: 10px;
332
+ text-align: left;
333
+ color: #1c1107;
334
+ font-size: 13px;
335
+ font-weight: 600;
336
+ font-stretch: normal;
337
+ font-style: normal;
338
+ outline: none;
339
+ }
340
+
341
+ /* result data css */
342
+ #home_page_search_result {
343
+ padding: 10px;
344
+ font-size: 12px;
345
+ }
346
+
347
+ #home_page_search_result:hover {
348
+ text-decoration: underline !important;
349
+ }
350
+
351
+ .wordCount {
352
+ text-indent: 10px;
353
+ font-size: 18px;
354
+ }
355
+
356
+ .filterSortedIcons {
357
+ flex-basis: 11%;
358
+ display: flex;
359
+ font-size: 20px;
360
+ gap: 20px;
361
+ cursor: pointer;
362
+ display: none
363
+ }
364
+
365
+ .allGroupWords {
366
+ background-color: white !important;
367
+ width: auto;
368
+ height: auto;
369
+ border-radius: 15px;
370
+ box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
371
+ margin: 10px 0;
372
+ border:2px solid var(--black-color)
373
+ }
374
+
375
+ .allGroupWords>.wordListHeading {
376
+ background: var(--black-color);
377
+ padding: 10px 0px 5px 25px;
378
+ border-top-right-radius: 13px;
379
+ border-top-left-radius: 13px;
380
+ color: #fff;
381
+ }
382
+
383
+ .wordListHeading>h3 {
384
+ font-size: 20px;
385
+ font-weight: 600;
386
+ }
387
+
388
+ .wordList {
389
+ padding: 15px;
390
+ }
391
+
392
+ .wordList>ul {
393
+ display: inline-flex;
394
+ width: 100%;
395
+ flex-wrap: wrap;
396
+ }
397
+ .fillterWrapper input{
398
+ padding: 10px !important;
399
+ font-size: 14px;
400
+ width: 140px;
401
+ }
402
+ .fillterWrapper .filter-tooltip img{
403
+ width: 22px;
404
+ }
405
+
406
+ .wordList>ul li {
407
+
408
+ padding: 8px 0;
409
+ background: #f8f9fa;
410
+ border-radius: 5px;
411
+ margin: 6px 6px;
412
+ width: auto;
413
+ min-width: 100px;
414
+ text-align: center;
415
+ border: solid 1px var(--black-color);
416
+ box-shadow: 2px 2px 1px 0px var(--black-color);
417
+ }
418
+
419
+ .wordList .anchor__style {
420
+ color: #000 !important;
421
+ font-size: 15px;
422
+ text-decoration: none !important;
423
+ font-weight: 600;
424
+ list-style: none;
425
+ }
426
+
427
+ .wordList .anchor__style .highlight {
428
+ color: #ff0000 !important;
429
+ }
430
+
431
+ .points {
432
+ color: #73716e;
433
+ font-weight: 600;
434
+ }
435
+
436
+ .errorMsg {
437
+ text-align: center;
438
+ font-size: 20px;
439
+ color: red;
440
+ font-weight: 800;
441
+ }
442
+
443
+ /* close */
444
+
445
+
446
+ @media (max-width: 768px) {
447
+
448
+ /* result page navbar, closebtn, heading css for mobile */
449
+ .allGroupWords,.allGroupWords>.wordListHeading{
450
+ border-radius: 0px;
451
+ border: none;
452
+ }
453
+ .result_navbar_section {
454
+ padding: 1.2rem 15px !important;
455
+ }
456
+
457
+ .nav_menu_bar {
458
+ display: none;
459
+ }
460
+
461
+ .result_navbar_section .mobile_bars {
462
+ display: block;
463
+ position: absolute;
464
+ top: 0px;
465
+ margin: 0;
466
+ left: 30px;
467
+ z-index: 99;
468
+ }
469
+
470
+ .letter-close-button-commonPage {
471
+ right: 45%;
472
+ top: 17px;
473
+ font-size: 15px;
474
+ }
475
+ .letter-close-button-commonPage svg{
476
+ width: 30px;
477
+ }
478
+
479
+ .pageHeading>.result_heading {
480
+ font-size: 1.8rem;
481
+ padding-left: 25px;
482
+ }
483
+
484
+ /* length selector css for mobile */
485
+
486
+ .tab_link_wrapper .flex-row {
487
+ margin: 0 15px;
488
+ }
489
+
490
+ .tab_link_wrapper .tab_link {
491
+ font-size: 12px;
492
+ }
493
+
494
+ .tab_link_wrapper #prev {
495
+ top: 6px;
496
+ left: 5px;
497
+ width: 16px;
498
+ height: 16px;
499
+ }
500
+
501
+ .tab_link_wrapper #next {
502
+ top: 6px;
503
+ right: 5px;
504
+ width: 16px;
505
+ height: 16px;
506
+ }
507
+
508
+ /* advanced filter and sorting css for mobile */
509
+ .angle-arrow {
510
+ display: none;
511
+ }
512
+
513
+ .Advancedbtn .filterButton {
514
+ display: none;
515
+ }
516
+
517
+ .fillterWrapper {
518
+ right: auto;
519
+ position: fixed;
520
+ left: 0px;
521
+ top: 135px;
522
+ width: 100%;
523
+ }
524
+
525
+ .Advancedbtn .filter_count {
526
+ display: none !important;
527
+ }
528
+
529
+ .filterSortedIcons {
530
+ display: flex;
531
+ gap: 8px;
532
+ }
533
+ .fillterWrapper{
534
+ position: static;
535
+ }
536
+ .filters{
537
+ flex-direction: column;
538
+ }
539
+ #sort-select{
540
+ margin-top: 1rem;
541
+ }
542
+
543
+ /* result data css for mobile */
544
+ .pad {
545
+ padding-bottom: 50px;
546
+ }
547
+
548
+ .wordCount {
549
+ font-size: 1.3rem;
550
+ }
551
+
552
+ }
@@ -37,17 +37,19 @@ input[type="number"] {
37
37
  }
38
38
 
39
39
 
40
- .overlay{
40
+ .overlay {
41
41
  position: absolute;
42
42
  width: 100%;
43
- top:0px;
43
+ top: 0px;
44
44
  }
45
- #header-img{
45
+
46
+ #header-img {
46
47
  width: 100%;
47
48
  }
49
+
48
50
  /* headings css */
49
51
  .main-header {
50
- height: 90vh;
52
+ margin-bottom: 45vh;
51
53
  width: 100%;
52
54
  display: flex;
53
55
  flex-direction: column;
@@ -228,6 +230,31 @@ input:focus-visible {
228
230
  gap: 5px;
229
231
  }
230
232
 
233
+ .advancedFilterOptions {
234
+ position: relative;
235
+ width: 100%;
236
+ text-align: center;
237
+ display: none;
238
+ }
239
+
240
+ .filtersOptions {
241
+ cursor: pointer;
242
+ background-color: #000;
243
+ color: #fff;
244
+ width: 300px;
245
+ border: none;
246
+ outline: none;
247
+ padding: 1rem;
248
+ font-size: 16px;
249
+ border-end-start-radius: 30px;
250
+ border-bottom-right-radius: 30px;
251
+ }
252
+
253
+ .filterShow {
254
+ display: flex;
255
+ }
256
+
257
+
231
258
  .fillterWrapper {
232
259
  flex-wrap: wrap;
233
260
  gap: 20px;
@@ -235,6 +262,15 @@ input:focus-visible {
235
262
  justify-content: center;
236
263
  }
237
264
 
265
+ .highlight_filter::before {
266
+ content: "";
267
+ width: 8px;
268
+ height: 8px;
269
+ background: red;
270
+ border-radius: 5px;
271
+ position: absolute;
272
+ right: 13px;
273
+ }
238
274
  .fillterWrapper input {
239
275
  border-radius: 74px;
240
276
  border: solid 2px #313131;
@@ -765,12 +801,26 @@ summary::-webkit-details-marker {
765
801
 
766
802
 
767
803
  @media (max-width: 768px) {
804
+ .advancedFilterOptions {
805
+ display: block;
806
+ }
807
+
808
+ .filterShow {
809
+ display: none;
810
+ }
811
+
812
+ .fillterWrapper{
813
+ gap: 10px;
814
+ margin: 1rem 0px !important;
815
+ }
768
816
  .overlay {
769
817
  display: none;
770
818
  }
771
- #header-img{
819
+
820
+ #header-img {
772
821
  display: none;
773
822
  }
823
+
774
824
  .txt-box-container {
775
825
  padding: 0 1rem;
776
826
  }
@@ -1023,14 +1073,17 @@ summary::-webkit-details-marker {
1023
1073
  }
1024
1074
 
1025
1075
  @media (max-width:1024px) {
1026
- .overlay{
1076
+ .overlay {
1027
1077
  display: none;
1028
1078
  }
1079
+
1029
1080
  .main-header {
1081
+ margin-bottom: 0vh;
1082
+ padding-bottom: 3rem;
1030
1083
  background: var(--primary-color);
1031
1084
  height: auto !important;
1032
1085
  }
1033
-
1086
+
1034
1087
  }
1035
1088
 
1036
1089
  @media screen and (min-width: 1450px) {
@@ -18,56 +18,6 @@ body {
18
18
  overflow-x: hidden !important;
19
19
  }
20
20
 
21
- /* placeholder loader css */
22
-
23
- .placeholder-loader{
24
- display: flex;
25
- justify-content: center;
26
- }
27
-
28
- .skeleton-box {
29
- display: inline-block;
30
- height: 1em;
31
- position: relative;
32
- overflow: hidden;
33
- background-color: #DDDBDD;
34
- }
35
-
36
- .skeleton-box::after {
37
- position: absolute;
38
- top: 0;
39
- right: 0;
40
- bottom: 0;
41
- left: 0;
42
- transform: translateX(-100%);
43
- background-image: linear-gradient(90deg,
44
- rgba(255, 255, 255, 0) 0,
45
- rgba(255, 255, 255, 0.2) 20%,
46
- rgba(255, 255, 255, 0.5) 60%,
47
- rgba(255, 255, 255, 0));
48
- animation: shimmer 5s infinite;
49
- content: '';
50
- }
51
-
52
- @keyframes shimmer {
53
- 100% {
54
- transform: translateX(100%);
55
- }
56
- }
57
-
58
- .o-media {
59
- display: flex;
60
- }
61
-
62
- .o-media__body {
63
- flex-grow: 1;
64
- }
65
-
66
- .o-vertical-spacing>*+* {
67
- margin-top: 0.75em;
68
- }
69
-
70
-
71
21
  /* header && navbar css */
72
22
  header {
73
23
  width: 100%;
@@ -69,54 +69,50 @@ Array.from(filterInputs).forEach((item) => {
69
69
  })
70
70
 
71
71
 
72
- // Define the loadScript function first
73
- const loadScript = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
72
+ const loadResource = (FILE_URL, data = {}, async = true, type = "text/javascript") => {
74
73
  return new Promise((resolve, reject) => {
75
- const scriptEle = document.createElement("script");
76
- scriptEle.type = type;
77
- scriptEle.async = async;
78
- scriptEle.src = FILE_URL;
74
+ let resourceEle;
75
+
76
+ if (type === "text/javascript") {
77
+ resourceEle = document.createElement("script");
78
+ } else if (type === "text/css") {
79
+ resourceEle = document.createElement("link");
80
+ resourceEle.rel = "stylesheet";
81
+ } else {
82
+ reject({
83
+ status: false,
84
+ message: `Unsupported resource type: ${type}`,
85
+ });
86
+ return;
87
+ }
88
+
89
+ resourceEle.type = type;
90
+ resourceEle.async = async;
91
+ resourceEle.href = FILE_URL;
79
92
 
80
- // Set additional data as attributes on the script element
81
93
  Object.keys(data).forEach((key) => {
82
- scriptEle.setAttribute(`data-${key}`, data[key]);
94
+ resourceEle.setAttribute(`data-${key}`, data[key]);
83
95
  });
84
96
 
85
- scriptEle.addEventListener("load", () => {
97
+ resourceEle.addEventListener("load", () => {
86
98
  resolve({ status: true });
87
99
  });
88
100
 
89
- scriptEle.addEventListener("error", () => {
101
+ resourceEle.addEventListener("error", () => {
90
102
  reject({
91
103
  status: false,
92
- message: `Failed to load the script ${FILE_URL}`,
104
+ message: `Failed to load the resource ${FILE_URL}`,
93
105
  });
94
106
  });
95
107
 
96
- document.body.appendChild(scriptEle);
108
+ if (type === "text/javascript") {
109
+ document.body.appendChild(resourceEle);
110
+ } else if (type === "text/css") {
111
+ document.head.appendChild(resourceEle);
112
+ }
97
113
  });
98
114
  };
99
115
 
100
- // Now you can use the loadScript function with additional data
101
- function checkQueryParam() {
102
- const urlParams = new URLSearchParams(window.location.search);
103
- const paramName = 'search';
104
- if (urlParams.has(paramName)) {
105
- const additionalData = {
106
- url: "{{site.url}}",
107
- range: "{{page.blanktilerange}}"
108
- };
109
- var p1 = loadScript("/assets/js/wordfinder.js", additionalData)
110
- .then((data) => {
111
- console.log(data);
112
- })
113
- .catch((error) => {
114
- console.error(error);
115
- });
116
- }
117
- }
118
- checkQueryParam();
119
-
120
116
  const formElement = document.querySelector("#form");
121
117
  formElement.addEventListener("submit", function (e) {
122
118
  e.preventDefault();
@@ -180,19 +176,55 @@ formElement.addEventListener("submit", function (e) {
180
176
 
181
177
  const paramName = 'search';
182
178
  if (new URLSearchParams(window.location.search).has(paramName)) {
183
- // Additional data to pass to the script
184
179
  const additionalData = {
185
180
  url: "{{site.url}}",
186
181
  range: "{{page.blanktilerange}}"
187
- };
188
-
189
- var p1 = loadScript("/assets/js/wordfinder.js", additionalData)
182
+ }
183
+ loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
190
184
  .then((data) => {
191
- console.log(data);
192
- getData(txtBox.value.toLowerCase());
185
+ console.log("CSS loaded:", data);
186
+ // Once the CSS is loaded, create the script element for JavaScript
187
+ const jsScript = document.createElement("script");
188
+ jsScript.src = "/assets/js/wordfinder.js";
189
+ jsScript.onload = () => {
190
+ getData(txtBox.value.toLowerCase());
191
+ };
192
+ document.body.appendChild(jsScript);
193
193
  })
194
194
  .catch((error) => {
195
- console.error(error);
195
+ console.error("Error loading resource:", error);
196
196
  });
197
197
  }
198
198
  });
199
+
200
+
201
+
202
+ // Now you can use the loadScript function with additional data
203
+ function checkQueryParam() {
204
+ const urlParams = new URLSearchParams(window.location.search);
205
+ const paramName = 'search';
206
+ if (urlParams.has(paramName)) {
207
+ const additionalData = {
208
+ url: "{{site.url}}",
209
+ range: "{{page.blanktilerange}}"
210
+ };
211
+ loadResource("/assets/css/wordfinder-result.css", additionalData, true, "text/css")
212
+ .then((data) => {
213
+ console.log("CSS loaded:", data);
214
+ // Once the CSS is loaded, create the script element for JavaScript
215
+ const jsScript = document.createElement("script");
216
+ jsScript.src = "/assets/js/wordfinder.js";
217
+ jsScript.onload = () => {
218
+ console.log("JS loaded");
219
+ getData(txtBox.value.toLowerCase());
220
+ };
221
+ document.body.appendChild(jsScript);
222
+ })
223
+ .catch((error) => {
224
+ console.error("Error loading resource:", error);
225
+ });
226
+ }
227
+ }
228
+ checkQueryParam();
229
+
230
+
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: 2.4.1
4
+ version: 2.4.2
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-01-19 00:00:00.000000000 Z
11
+ date: 2024-01-23 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -252,6 +252,7 @@ files:
252
252
  - assets/css/resultWordleSolver.css
253
253
  - assets/css/style.css
254
254
  - assets/css/wordGroup.css
255
+ - assets/css/wordfinder-result.css
255
256
  - assets/css/wordgames-autogencontent.css
256
257
  - assets/css/wordgames-blog.css
257
258
  - assets/css/wordgames-game.css