appscms-tools-theme 4.6.3 → 4.6.4

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: a5f6a95de967871083445ecddb7d4608160a54bfaed72ada0ca405e8fbfa54b3
4
- data.tar.gz: a14041ae59eb6584ebece3a1b7afa6f480316b3d92f9592698d68291837214ab
3
+ metadata.gz: 4aea7884a301df8c0e6e3ff5664fb2c61b16e44394eb6a74d47a0372f621e7e8
4
+ data.tar.gz: 7c62873b75bbcfef31aca661a1a59f44e21dd8da0524acfc61a2fa87faa5a01e
5
5
  SHA512:
6
- metadata.gz: 7d6b09481d0c4096c23b484486fed59c77a45e3788f01adb3021fa5293c580cc0289570136349c35434985c467843871a522de6b5b93e0a8fb7b0af44e225851
7
- data.tar.gz: ea89a40d775ee7ceddf3ca1a4b6092aeb389cf793e4acbffa0f3f7c71acfc83c4f3f4d7aa70b9f2a5858d40740f3e4c98f90711857c6990690ee188c4e7f86b2
6
+ metadata.gz: c4cc84e13da968b2bd5b69605468c937e83bf81671aa60a09e5d7207fffe7f010c1672154175bc570471f3ce123c1489e494268987ba0e585d7bab74d2aeac3c
7
+ data.tar.gz: b182143b4db87882ac62273f4a99365decb5d25aee59f484ddbf5d539e4356f720968136e2ddfe641bd39c675c3e67f1002246b5529f2337c8c0a402134b1e94
@@ -108,7 +108,20 @@
108
108
  "jscdns": [
109
109
  "<script crossorigin='anonymous' src=\"/assets/js/googledrive.js\"></script>"
110
110
  ],
111
- "infographics": [],
111
+ "infographics": [
112
+ {
113
+ "image": "/assets/images/1.webp",
114
+ "description": "How to set alarm on wake me up at 4:45 am tool"
115
+ },
116
+ {
117
+ "image": "/assets/images/2.webp",
118
+ "description": "5 benefits of using wake me up at 4:45 am tool"
119
+ },
120
+ {
121
+ "image": "/assets/images/3.webp",
122
+ "description": "Additional features of wake me up at 4:45 am tool"
123
+ }
124
+ ],
112
125
  "posts": [
113
126
  {
114
127
  "tags": ["ok"],
@@ -18,25 +18,46 @@
18
18
  margin-top: 20px;
19
19
  }
20
20
  .modal1-body img {
21
- width: 100%;
22
21
  height: auto;
23
22
  }
24
23
  .close1 {
25
- position: absolute;
26
- top: 10px;
27
- right: 10px;
28
- font-size: 24px;
29
- color: #fff;
30
- cursor: pointer;
31
- }
32
- .close1:hover {
33
- color: #ccc;
34
- }
24
+ position: absolute;
25
+ top: 10px;
26
+ right: 10px;
27
+ font-size: 24px;
28
+ color: #fff;
29
+ cursor: pointer;
30
+ }
31
+ .close1:hover {
32
+ color: #ccc;
33
+ }
35
34
  </style>
36
35
  <div class="inforgraphics_section">
37
36
  <h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
38
37
  <div class="wrapper">
39
- <i id="left" class="fas fa-angle-left"></i>
38
+ <svg
39
+ id="left"
40
+ viewBox="0 0 24 24"
41
+ fill="none"
42
+ xmlns="http://www.w3.org/2000/svg"
43
+ >
44
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
45
+ <g
46
+ id="SVGRepo_tracerCarrier"
47
+ stroke-linecap="round"
48
+ stroke-linejoin="round"
49
+ ></g>
50
+ <g id="SVGRepo_iconCarrier">
51
+ <path
52
+ d="M15 19.9201L8.47997 13.4001C7.70997 12.6301 7.70997 11.3701 8.47997 10.6001L15 4.08008"
53
+ stroke="#292D32"
54
+ stroke-width="1.5"
55
+ stroke-miterlimit="10"
56
+ stroke-linecap="round"
57
+ stroke-linejoin="round"
58
+ ></path>
59
+ </g>
60
+ </svg>
40
61
  <div class="carousel">
41
62
  <div class="carousel-inner">
42
63
  {%- if pageData.infographics -%} {% for item in pageData.infographics %}
@@ -54,44 +75,65 @@
54
75
  {% endfor %} {%- endif -%}
55
76
  </div>
56
77
  </div>
57
- <i id="right" class="fas fa-angle-right"></i>
78
+ <svg
79
+ id="right"
80
+ viewBox="0 0 24 24"
81
+ fill="none"
82
+ xmlns="http://www.w3.org/2000/svg"
83
+ >
84
+ <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
85
+ <g
86
+ id="SVGRepo_tracerCarrier"
87
+ stroke-linecap="round"
88
+ stroke-linejoin="round"
89
+ ></g>
90
+ <g id="SVGRepo_iconCarrier">
91
+ <path
92
+ d="M9 5L14.15 10C14.4237 10.2563 14.6419 10.5659 14.791 10.9099C14.9402 11.2539 15.0171 11.625 15.0171 12C15.0171 12.375 14.9402 12.7458 14.791 13.0898C14.6419 13.4339 14.4237 13.7437 14.15 14L9 19"
93
+ stroke="#000000"
94
+ stroke-width="1.5"
95
+ stroke-linecap="round"
96
+ stroke-linejoin="round"
97
+ ></path>
98
+ </g>
99
+ </svg>
58
100
  </div>
59
101
  </div>
60
102
  <div id="imageModal1" class="modal1" onclick="closeModal1()">
61
103
  <span class="close1" onclick="closeModal1()">&times;</span>
62
104
  <div class="modal1-content1">
63
105
  <div class="modal1-body">
64
- <img id="modal1Image" src="" alt="Image">
106
+ <img id="modal1Image" src="" alt="Image" />
65
107
  </div>
66
108
  </div>
67
109
  </div>
68
110
  <script>
69
- function openModal1(imageSrc) {
70
- var modal1 = document.getElementById('imageModal1');
71
- var modal1Img = document.getElementById('modal1Image');
111
+ function openModal1(imageSrc) {
112
+ var modal1 = document.getElementById("imageModal1");
113
+ var modal1Img = document.getElementById("modal1Image");
72
114
  modal1.style.display = "block";
73
115
  modal1Img.src = imageSrc;
74
116
  }
75
117
  function closeModal1() {
76
- var modal1 = document.getElementById('imageModal1');
118
+ var modal1 = document.getElementById("imageModal1");
77
119
  modal1.style.display = "none";
78
120
  }
79
- document.addEventListener('click', function(event) {
80
- var modal1 = document.getElementById('imageModal1');
121
+ document.addEventListener("click", function (event) {
122
+ var modal1 = document.getElementById("imageModal1");
81
123
  if (event.target === modal1) {
82
124
  closeModal1();
83
125
  }
84
126
  });
85
127
  const carousel = document.querySelector(".carousel-inner"),
86
128
  firstImg = carousel.querySelectorAll("img")[0],
87
- arrowIcons = document.querySelectorAll(".wrapper i");
129
+ arrowIcons = document.querySelectorAll(".wrapper svg");
88
130
  const numImages = carousel.querySelectorAll("img").length;
89
131
  const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
90
132
  if (numImages > 3) {
91
133
  arrowIcons[1].style.display = "block";
92
134
  } else {
93
- arrowIcons[0].style.display = "none";
94
- arrowIcons[1].style.display = "none";
135
+ // arrowIcons[0].style.display = "none";
136
+ // arrowIcons[1].style.display = "none";
95
137
  }
96
138
  let isDragStart = false,
97
139
  isDragging = false,
@@ -106,7 +148,7 @@
106
148
  };
107
149
  arrowIcons.forEach((icon) => {
108
150
  icon.addEventListener("click", () => {
109
- let firstImgWidth = firstImg.clientWidth + 40;
151
+ let firstImgWidth = firstImg.clientWidth + 250;
110
152
  const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
111
153
  carousel.scrollBy({
112
154
  left: scrollAmount,
@@ -158,9 +200,3 @@
158
200
  // document.addEventListener("mouseup", dragStop);
159
201
  // carousel.addEventListener("touchend", dragStop);
160
202
  </script>
161
-
162
-
163
-
164
-
165
-
166
-
@@ -65,12 +65,15 @@
65
65
  flex: 0 0 calc(100% / 3);
66
66
  scroll-snap-align: start;
67
67
  padding: 20px;
68
+ display: flex;
69
+ flex-direction: column;
70
+ align-items: center;
71
+ justify-content: center;
68
72
  }
69
73
 
70
74
  .carousel img {
71
- width: 100%;
72
75
  object-fit: contain;
73
- max-width: 100%;
76
+
74
77
  height: auto;
75
78
  border-radius: 8px;
76
79
  }
@@ -159,8 +162,8 @@
159
162
  if (numImages > 3) {
160
163
  arrowIcons[1].style.display = "block";
161
164
  } else {
162
- arrowIcons[0].style.display = "none";
163
- arrowIcons[1].style.display = "none";
165
+ // arrowIcons[0].style.display = "none";
166
+ // arrowIcons[1].style.display = "none";
164
167
  }
165
168
 
166
169
  let isDragStart = false,
@@ -180,7 +183,7 @@
180
183
  let firstImgWidth = firstImg.clientWidth + 40;
181
184
  const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
182
185
  carousel.scrollBy({
183
- left: scrollAmount,
186
+ left: "100vw",
184
187
  behavior: "smooth",
185
188
  });
186
189
  setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
@@ -291,6 +291,7 @@
291
291
  display: flex;
292
292
  max-width: 90%;
293
293
  position: relative;
294
+ align-items: center;
294
295
  }
295
296
 
296
297
  .inforgraphics_section .wrapper i {
@@ -349,12 +350,14 @@
349
350
  flex: 0 0 calc(100% / 3);
350
351
  scroll-snap-align: start;
351
352
  padding: 20px;
353
+ display: flex;
354
+ align-items: center;
355
+ justify-content: center;
356
+ flex-direction: column;
352
357
  }
353
358
 
354
359
  .carousel img {
355
- width: 100%;
356
360
  object-fit: contain;
357
- max-width: 100%;
358
361
  height: auto;
359
362
  border-radius: 8px;
360
363
  }
@@ -396,3 +399,16 @@
396
399
  margin-right: 0;
397
400
  }
398
401
  }
402
+
403
+ .modal1-body {
404
+ display: flex;
405
+ align-items: center;
406
+ justify-content: center;
407
+ height: 100vh;
408
+ }
409
+
410
+ .inforgraphics_section #right,
411
+ .inforgraphics_section #left {
412
+ height: 35px;
413
+ width: 200px;
414
+ }
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: appscms-tools-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 4.6.3
4
+ version: 4.6.4
5
5
  platform: ruby
6
6
  authors:
7
7
  - vivek-appscms