appscms-tools-theme 3.7.0 → 3.7.1
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 +4 -4
- data/_data/feature/en/compress-pdf.json +14 -0
- data/_includes/infographics/infographics.html +200 -102
- data/assets/css/tools.css +6 -0
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 3788ca0629c1e0f87c36963e3619b806bcc36eb5675b978f195b3d9d0f4dc0f0
|
|
4
|
+
data.tar.gz: 29a45fc8b9c68c1200182bae96acc0078952edd7613035ac89a22a976957db1d
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 11a1384b943c1b47774e535a389c36c85e7dec373793629d26aa4b5dd872e785febddfb4055d28855e6d1032c541e65910bb5fd700c5d865ccf39dadc70f8df7
|
|
7
|
+
data.tar.gz: a1cd694412ff5299d248afa57b995c925666bb629dc2cfc940faed45199f75edde1a815f5bd924a2bdde8328bf6f8b47aa2930070930ac4f88391405c7ac7c7c
|
|
@@ -34,6 +34,18 @@
|
|
|
34
34
|
}
|
|
35
35
|
],
|
|
36
36
|
"infographics": [
|
|
37
|
+
{
|
|
38
|
+
"image": "https://imagestoolkit-develop.netlify.app/uploads/21_06_2023_1687326380390_How%20to%20safe%20imagekit%20(24).png",
|
|
39
|
+
"description": "How to use 1500x2100 image resizer"
|
|
40
|
+
},
|
|
41
|
+
{
|
|
42
|
+
"image": "https://imagestoolkit-develop.netlify.app/uploads/21_06_2023_1687326394649_sAFEIMAGEKIT%20(24).png",
|
|
43
|
+
"description": "Why you should use 1500x2100 image resizer"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
"image": "https://imagestoolkit-develop.netlify.app/uploads/21_06_2023_1687326405953_tips%20for%20using%20WhatsApp%20image%20resizer%20(25).png",
|
|
47
|
+
"description": "Tips for using 1500x2100 image resizer"
|
|
48
|
+
},
|
|
37
49
|
{
|
|
38
50
|
"image": "/assets/images/1.webp",
|
|
39
51
|
"description": "How to set alarm on wake me up at 4:45 am tool"
|
|
@@ -46,6 +58,8 @@
|
|
|
46
58
|
"image": "/assets/images/3.webp",
|
|
47
59
|
"description": "Additional features of wake me up at 4:45 am tool"
|
|
48
60
|
}
|
|
61
|
+
|
|
62
|
+
|
|
49
63
|
],
|
|
50
64
|
"TEXTUAL_CONTENT": [
|
|
51
65
|
{
|
|
@@ -1,123 +1,221 @@
|
|
|
1
1
|
<style>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
max-width: 800px;
|
|
2
|
+
.inforgraphics_section {
|
|
3
|
+
width: 100%;
|
|
4
|
+
padding: 50px 0px 50px 0px;
|
|
5
|
+
border-top: 1px solid rgb(224, 224, 224);
|
|
6
|
+
display: flex;
|
|
7
|
+
flex-direction: column;
|
|
8
|
+
align-items: center;
|
|
10
9
|
}
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
10
|
+
|
|
11
|
+
.inforgraphics_section .wrapper {
|
|
12
|
+
display: flex;
|
|
13
|
+
max-width: 700px;
|
|
14
|
+
position: relative;
|
|
14
15
|
}
|
|
15
16
|
|
|
16
|
-
.
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
17
|
+
.inforgraphics_section .wrapper i {
|
|
18
|
+
top: 50%;
|
|
19
|
+
height: 44px;
|
|
20
|
+
width: 44px;
|
|
21
|
+
color: #343F4F;
|
|
22
|
+
cursor: pointer;
|
|
23
|
+
font-size: 1.15rem;
|
|
24
|
+
position: absolute;
|
|
25
|
+
text-align: center;
|
|
26
|
+
line-height: 44px;
|
|
27
|
+
background: #eee;
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
transform: translateY(-50%);
|
|
30
|
+
transition: transform 0.1s linear;
|
|
21
31
|
}
|
|
22
32
|
|
|
23
|
-
.
|
|
24
|
-
|
|
25
|
-
margin-bottom: 10px;
|
|
33
|
+
.inforgraphics_section .wrapper i:active {
|
|
34
|
+
transform: translateY(-50%) scale(0.9);
|
|
26
35
|
}
|
|
27
36
|
|
|
28
|
-
.
|
|
29
|
-
|
|
37
|
+
.inforgraphics_section .wrapper i:hover {
|
|
38
|
+
background: #f2f2f2;
|
|
30
39
|
}
|
|
31
40
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
41
|
+
.inforgraphics_section .wrapper i:first-child {
|
|
42
|
+
left: 0px;
|
|
43
|
+
display: none;
|
|
44
|
+
z-index: 999;
|
|
45
|
+
}
|
|
36
46
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
47
|
+
.inforgraphics_section .wrapper i:last-child {
|
|
48
|
+
right: 0px;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.carousel {
|
|
52
|
+
display: flex;
|
|
53
|
+
max-width: 700px;
|
|
54
|
+
overflow-x: scroll;
|
|
55
|
+
scroll-snap-type: x mandatory;
|
|
56
|
+
scroll-behavior: smooth;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.carousel-inner {
|
|
60
|
+
display: flex;
|
|
61
|
+
flex-wrap: nowrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.slide {
|
|
65
|
+
flex: 0 0 calc(100% / 3);
|
|
66
|
+
scroll-snap-align: start;
|
|
67
|
+
padding: 20px;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.carousel img {
|
|
71
|
+
width: 100%;
|
|
72
|
+
object-fit: contain;
|
|
73
|
+
max-width: 100%;
|
|
74
|
+
height: auto;
|
|
75
|
+
border-radius: 8px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.carousel-inner p {
|
|
79
|
+
text-align: center;
|
|
80
|
+
margin: 10px 0;
|
|
81
|
+
font-size: 14px;
|
|
82
|
+
white-space: normal;
|
|
83
|
+
word-wrap: break-word;
|
|
41
84
|
}
|
|
42
|
-
</style>
|
|
43
|
-
<div class="infographics_section">
|
|
44
|
-
<h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
|
|
45
|
-
<div class="infographic">
|
|
46
|
-
{%- for item in featureData.infographics -%}
|
|
47
|
-
<div class="infographic-item">
|
|
48
|
-
<img src="{{item.image}}" alt="Image 1">
|
|
49
|
-
<p class="infographic-desc">{{item.description | capitalize }}</p>
|
|
50
|
-
</div>
|
|
51
|
-
{%- endfor -%}
|
|
52
|
-
</div>
|
|
53
85
|
|
|
86
|
+
@media screen and (max-width: 768px) {
|
|
87
|
+
.inforgraphics_section .wrapper {
|
|
88
|
+
max-width: 100%;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
.carousel-inner p {
|
|
93
|
+
font-size: 20px;
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.inforgraphics_section .wrapper i:first-child {
|
|
97
|
+
left: 0;
|
|
98
|
+
/* margin-left: 14px; */
|
|
99
|
+
z-index: 99;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
.inforgraphics_section .wrapper i:last-child {
|
|
103
|
+
right: 0;
|
|
104
|
+
z-index: 99;
|
|
105
|
+
display: block !important;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.carousel {
|
|
109
|
+
overflow-x: hidden;
|
|
110
|
+
}
|
|
111
|
+
.slide {
|
|
112
|
+
flex: 0 0 100%;
|
|
113
|
+
margin-right: 0;
|
|
114
|
+
}
|
|
115
|
+
}
|
|
116
|
+
</style>
|
|
54
117
|
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
{
|
|
118
|
+
<div class="inforgraphics_section">
|
|
119
|
+
<h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
|
|
120
|
+
<div class="wrapper">
|
|
121
|
+
<i id="left" class="fas fa-angle-left"></i>
|
|
122
|
+
<div class="carousel">
|
|
123
|
+
<div class="carousel-inner">
|
|
124
|
+
{% for item in featureData.infographics %}
|
|
125
|
+
<div class="slide">
|
|
126
|
+
<img src="{{ item.image }}" alt="img" draggable="false">
|
|
127
|
+
<p class="infographic-desc">{{ item.description | capitalize }}</p>
|
|
65
128
|
</div>
|
|
129
|
+
{% endfor %}
|
|
66
130
|
</div>
|
|
67
131
|
</div>
|
|
68
|
-
<
|
|
69
|
-
|
|
70
|
-
</div>
|
|
71
|
-
<div class="dots-container">
|
|
72
|
-
{%- for item in featureData.infographics -%}
|
|
73
|
-
<span class="dot active" data-slide="{{ forloop.index0 }}"></span>
|
|
74
|
-
{%- endfor -%}
|
|
75
|
-
</div> -->
|
|
132
|
+
<i id="right" class="fas fa-angle-right"></i>
|
|
133
|
+
</div>
|
|
76
134
|
</div>
|
|
77
135
|
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
const activeDot = function (slide) {
|
|
87
|
-
document.querySelectorAll('.dot').forEach(dot => dot.classList.remove('active'));
|
|
88
|
-
document.querySelector(`.dot[data-slide="${slide}"]`).classList.add('active');
|
|
89
|
-
};
|
|
90
|
-
activeDot(currentSlide);
|
|
91
|
-
|
|
92
|
-
const changeSlide = function (slides) {
|
|
93
|
-
carouselSlides.forEach((slide, index) => (slide.style.transform = `translateX(${100 * (index - slides)}%)`));
|
|
94
|
-
};
|
|
95
|
-
changeSlide(currentSlide);
|
|
96
|
-
|
|
97
|
-
btnNext.addEventListener('click', function () {
|
|
98
|
-
currentSlide++;
|
|
99
|
-
if (carouselSlides.length - 1 < currentSlide) {
|
|
100
|
-
currentSlide = 0;
|
|
101
|
-
};
|
|
102
|
-
changeSlide(currentSlide);
|
|
103
|
-
activeDot(currentSlide);
|
|
104
|
-
});
|
|
105
|
-
btnPrev.addEventListener('click', function () {
|
|
106
|
-
currentSlide--;
|
|
107
|
-
if (0 >= currentSlide) {
|
|
108
|
-
currentSlide = 0;
|
|
109
|
-
};
|
|
110
|
-
changeSlide(currentSlide);
|
|
111
|
-
activeDot(currentSlide);
|
|
112
|
-
});
|
|
136
|
+
<script>
|
|
137
|
+
const carousel = document.querySelector(".carousel-inner"),
|
|
138
|
+
firstImg = carousel.querySelectorAll("img")[0],
|
|
139
|
+
arrowIcons = document.querySelectorAll(".wrapper i")
|
|
140
|
+
|
|
141
|
+
const numImages = carousel.querySelectorAll("img").length;
|
|
142
|
+
const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
|
|
113
143
|
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
144
|
+
if (numImages > 3) {
|
|
145
|
+
arrowIcons[1].style.display = "block"
|
|
146
|
+
} else {
|
|
147
|
+
arrowIcons[0].style.display = "none";
|
|
148
|
+
arrowIcons[1].style.display = "none";
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
let isDragStart = false, isDragging = false, prevPageX, prevScrollLeft, positionDiff;
|
|
152
|
+
const showHideIcons = () => {
|
|
153
|
+
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
|
|
154
|
+
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
|
|
155
|
+
arrowIcons[1].style.display = carousel.scrollLeft == scrollWidth ? "none" : "block";
|
|
156
|
+
}
|
|
157
|
+
|
|
158
|
+
arrowIcons.forEach(icon => {
|
|
159
|
+
icon.addEventListener("click", () => {
|
|
160
|
+
let firstImgWidth = firstImg.clientWidth + 40;
|
|
161
|
+
const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
|
|
162
|
+
carousel.scrollBy({
|
|
163
|
+
left: scrollAmount,
|
|
164
|
+
behavior: "smooth",
|
|
165
|
+
});
|
|
166
|
+
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
|
|
120
167
|
});
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
|
|
168
|
+
});
|
|
169
|
+
|
|
170
|
+
// const autoSlide = () => {
|
|
171
|
+
// // if there is no image left to scroll then return from here
|
|
172
|
+
// if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
|
|
173
|
+
|
|
174
|
+
// positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
|
|
175
|
+
// let firstImgWidth = firstImg.clientWidth + 14;
|
|
176
|
+
// // getting difference value that needs to add or reduce from carousel left to take middle img center
|
|
177
|
+
// let valDifference = firstImgWidth - positionDiff;
|
|
178
|
+
|
|
179
|
+
// if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
|
|
180
|
+
// return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
181
|
+
// }
|
|
182
|
+
// // if user is scrolling to the left
|
|
183
|
+
// carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
184
|
+
// }
|
|
185
|
+
|
|
186
|
+
// const dragStart = (e) => {
|
|
187
|
+
// // updatating global variables value on mouse down event
|
|
188
|
+
// isDragStart = true;
|
|
189
|
+
// prevPageX = e.pageX || e.touches[0].pageX;
|
|
190
|
+
// prevScrollLeft = carousel.scrollLeft;
|
|
191
|
+
// }
|
|
192
|
+
|
|
193
|
+
// const dragging = (e) => {
|
|
194
|
+
// // scrolling images/carousel to left according to mouse pointer
|
|
195
|
+
// if (!isDragStart) return;
|
|
196
|
+
// e.preventDefault();
|
|
197
|
+
// isDragging = true;
|
|
198
|
+
// carousel.classList.add("dragging");
|
|
199
|
+
// positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
|
|
200
|
+
// carousel.scrollLeft = prevScrollLeft - positionDiff;
|
|
201
|
+
// showHideIcons();
|
|
202
|
+
// }
|
|
203
|
+
|
|
204
|
+
// const dragStop = () => {
|
|
205
|
+
// isDragStart = false;
|
|
206
|
+
// carousel.classList.remove("dragging");
|
|
207
|
+
|
|
208
|
+
// if (!isDragging) return;
|
|
209
|
+
// isDragging = false;
|
|
210
|
+
// autoSlide();
|
|
211
|
+
// }
|
|
212
|
+
|
|
213
|
+
// carousel.addEventListener("mousedown", dragStart);
|
|
214
|
+
// carousel.addEventListener("touchstart", dragStart);
|
|
215
|
+
|
|
216
|
+
// document.addEventListener("mousemove", dragging);
|
|
217
|
+
// carousel.addEventListener("touchmove", dragging);
|
|
218
|
+
|
|
219
|
+
// document.addEventListener("mouseup", dragStop);
|
|
220
|
+
// carousel.addEventListener("touchend", dragStop);
|
|
221
|
+
</script>
|
data/assets/css/tools.css
CHANGED
|
@@ -1692,6 +1692,12 @@ ol li::marker {
|
|
|
1692
1692
|
}
|
|
1693
1693
|
}
|
|
1694
1694
|
@media screen and (min-width: 1920px) {
|
|
1695
|
+
.feature-card-title, .faq-question{
|
|
1696
|
+
font-size: 22px;
|
|
1697
|
+
}
|
|
1698
|
+
.feature-card-desc,.how-to-list-item,.faq-answer{
|
|
1699
|
+
font-size: 18px;
|
|
1700
|
+
}
|
|
1695
1701
|
.appscms-sidebar-left {
|
|
1696
1702
|
left: 300px !important;
|
|
1697
1703
|
}
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: appscms-tools-theme
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 3.7.
|
|
4
|
+
version: 3.7.1
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- vivek-appscms
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2023-06-
|
|
11
|
+
date: 2023-06-27 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|