appscms-tools-theme 3.7.0 → 3.7.3
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/_data/home/en/en.json +14 -8
- data/_includes/authors/authors.html +117 -83
- data/_includes/featurePageAuthors/featurePageAuthors.html +88 -108
- data/_includes/head/index.html +517 -223
- data/_includes/infographics/infographics.html +200 -102
- data/assets/.DS_Store +0 -0
- data/assets/css/tools.css +63 -2
- data/assets/images/contributor.webp +0 -0
- metadata +4 -3
|
@@ -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/.DS_Store
CHANGED
|
Binary file
|
data/assets/css/tools.css
CHANGED
|
@@ -1628,7 +1628,7 @@ ol li::marker {
|
|
|
1628
1628
|
transition: transform 1s;
|
|
1629
1629
|
}
|
|
1630
1630
|
|
|
1631
|
-
.infographics_section
|
|
1631
|
+
.infographics_section .slide img {
|
|
1632
1632
|
width: 200px;
|
|
1633
1633
|
height: 100%;
|
|
1634
1634
|
/* object-fit: contain; */
|
|
@@ -1640,7 +1640,7 @@ ol li::marker {
|
|
|
1640
1640
|
}
|
|
1641
1641
|
|
|
1642
1642
|
.infographics_section button .fas {
|
|
1643
|
-
color
|
|
1643
|
+
color: #000;
|
|
1644
1644
|
}
|
|
1645
1645
|
|
|
1646
1646
|
.infographics_section .btn-slide {
|
|
@@ -1692,6 +1692,15 @@ ol li::marker {
|
|
|
1692
1692
|
}
|
|
1693
1693
|
}
|
|
1694
1694
|
@media screen and (min-width: 1920px) {
|
|
1695
|
+
.feature-card-title,
|
|
1696
|
+
.faq-question {
|
|
1697
|
+
font-size: 22px;
|
|
1698
|
+
}
|
|
1699
|
+
.feature-card-desc,
|
|
1700
|
+
.how-to-list-item,
|
|
1701
|
+
.faq-answer {
|
|
1702
|
+
font-size: 18px;
|
|
1703
|
+
}
|
|
1695
1704
|
.appscms-sidebar-left {
|
|
1696
1705
|
left: 300px !important;
|
|
1697
1706
|
}
|
|
@@ -1754,3 +1763,55 @@ ol li::marker {
|
|
|
1754
1763
|
.share-modal-social a i {
|
|
1755
1764
|
font-size: 30px;
|
|
1756
1765
|
}
|
|
1766
|
+
.authors-list {
|
|
1767
|
+
border-top: 1px solid rgb(224, 224, 224);
|
|
1768
|
+
margin-top: 100px;
|
|
1769
|
+
padding: 100px;
|
|
1770
|
+
}
|
|
1771
|
+
|
|
1772
|
+
.featurePageAuthor {
|
|
1773
|
+
display: flex;
|
|
1774
|
+
flex-direction: column;
|
|
1775
|
+
width: 100%;
|
|
1776
|
+
justify-content: center;
|
|
1777
|
+
}
|
|
1778
|
+
|
|
1779
|
+
.featurePageAuthor .author-meta {
|
|
1780
|
+
width: 500px;
|
|
1781
|
+
margin: 0 auto;
|
|
1782
|
+
padding-bottom: 5rem;
|
|
1783
|
+
}
|
|
1784
|
+
|
|
1785
|
+
.featurePageAuthor .author-meta .authorName {
|
|
1786
|
+
font-size: 20px;
|
|
1787
|
+
padding: 1rem 0px;
|
|
1788
|
+
font-weight: 900;
|
|
1789
|
+
}
|
|
1790
|
+
|
|
1791
|
+
.featurePageAuthor .author-img {
|
|
1792
|
+
width: 100px;
|
|
1793
|
+
height: 100px;
|
|
1794
|
+
border-radius: 100%;
|
|
1795
|
+
}
|
|
1796
|
+
|
|
1797
|
+
.featurePageAuthor .author_bio {
|
|
1798
|
+
font-size: 16px;
|
|
1799
|
+
}
|
|
1800
|
+
|
|
1801
|
+
@media (max-width: 768px) {
|
|
1802
|
+
.authors-list {
|
|
1803
|
+
padding: 25px;
|
|
1804
|
+
}
|
|
1805
|
+
|
|
1806
|
+
.featurePageAuthor .author-meta {
|
|
1807
|
+
width: 100%;
|
|
1808
|
+
}
|
|
1809
|
+
}
|
|
1810
|
+
.contributor {
|
|
1811
|
+
width: 100px;
|
|
1812
|
+
}
|
|
1813
|
+
.contributor .contributor-name {
|
|
1814
|
+
font-size: 13px;
|
|
1815
|
+
margin-top: 8px;
|
|
1816
|
+
text-transform: capitalize;
|
|
1817
|
+
}
|
|
Binary file
|
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.3
|
|
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-
|
|
11
|
+
date: 2023-07-05 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: jekyll
|
|
@@ -347,6 +347,7 @@ files:
|
|
|
347
347
|
- assets/images/bunnies.png
|
|
348
348
|
- assets/images/cloud-computing.png
|
|
349
349
|
- assets/images/cloud_new.svg
|
|
350
|
+
- assets/images/contributor.webp
|
|
350
351
|
- assets/images/convert.png
|
|
351
352
|
- assets/images/convert.svg
|
|
352
353
|
- assets/images/cross.svg
|
|
@@ -476,7 +477,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
|
476
477
|
- !ruby/object:Gem::Version
|
|
477
478
|
version: '0'
|
|
478
479
|
requirements: []
|
|
479
|
-
rubygems_version: 3.
|
|
480
|
+
rubygems_version: 3.4.10
|
|
480
481
|
signing_key:
|
|
481
482
|
specification_version: 4
|
|
482
483
|
summary: Appscms theme for all tools
|