appscms-tools-theme 4.8.1 → 4.8.2
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/_includes/appscms/featurehighlight/featurehighlight.html +40 -28
- data/_includes/appscms/infographics/infographics.html +2 -130
- data/_includes/appscms/navbars/navbar.html +75 -129
- data/_includes/appscms/navbars/toolbar.html +139 -326
- data/_includes/appscms/scripts/script.html +9 -16
- data/assets/css/appscms-theme.css +239 -0
- data/assets/js/appscms-infographics.js +49 -0
- data/assets/js/appscms-theme.js +30 -47
- metadata +3 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 121ca63431427e1cec9b9764e6f5e6dc370bb97085f34ea6a5de4bf166eadb93
|
|
4
|
+
data.tar.gz: b75b8785d7b6bd6188d7826ac40f91dbdc1ce77bc87e346f7e734c0f584ab810
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: d2f33cbdbe8ad0bd3a14fc2b84ae1615f56a3cfa853c3ecf36fdcda92e00c659e71bfca89c02514d2ec1cd3290d0ca21a72c1e4ff80e9ff858f1c25d3efdda56
|
|
7
|
+
data.tar.gz: befc6aadb01f3efb927d8f05d79b6b0b88645c1be6f07b1bc8966f46bf376db00f3c5610aa3651b2770c03f542b0350c765fef56984a83f84f953e061013f7d4
|
|
@@ -1,36 +1,48 @@
|
|
|
1
1
|
<div class="container mt-5">
|
|
2
2
|
<div class="row feature-description-boxes pt-5">
|
|
3
3
|
{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%}
|
|
4
|
-
<div class="
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
{%-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
4
|
+
<div class="row">
|
|
5
|
+
{%- endif -%} {% assign totalHeaderCount = 0 %} {% for data in
|
|
6
|
+
pageData.TEXTUAL_CONTENT %} {% assign words = data.header | split: " " %}
|
|
7
|
+
{% assign word_count = words | size %} {% assign totalHeaderCount =
|
|
8
|
+
totalHeaderCount | plus: word_count %} {% endfor %} {% for data in
|
|
9
|
+
pageData.TEXTUAL_CONTENT %}
|
|
10
|
+
<div
|
|
11
|
+
class="{%- if site.monumetricId and page.url != '/' and page.lang == 'en' -%} col-md-6 my-4 {%- else -%} col-md-4 my-4 card h-100 border-0 bg-transparent{%- endif -%}"
|
|
12
|
+
>
|
|
13
|
+
{%- assign space = ' ' -%}
|
|
14
|
+
<img
|
|
15
|
+
src="{{data.logoUrl}}"
|
|
16
|
+
loading="lazy"
|
|
17
|
+
class="card-img-top float-left mr-3 appscms-feature-image"
|
|
18
|
+
alt="{{data.header}}"
|
|
19
|
+
{%-
|
|
20
|
+
if
|
|
21
|
+
site.crossorigin
|
|
22
|
+
-%}
|
|
23
|
+
crossorigin{{space}}
|
|
24
|
+
{{space}}
|
|
25
|
+
{%-
|
|
26
|
+
endif
|
|
27
|
+
-%}
|
|
28
|
+
style="object-fit: cover; height: 5rem; width: 5rem"
|
|
29
|
+
/>
|
|
30
|
+
{%- if totalHeaderCount > site.count_of_words_in_headings -%}
|
|
31
|
+
<h2 class="card-title appscms-feature-title">
|
|
32
|
+
{{data.header | replace: "$variable", page.value}}
|
|
33
|
+
</h2>
|
|
34
|
+
{%- else -%}
|
|
35
|
+
<div class="card-title appscms-feature-title">
|
|
36
|
+
{{data.header | replace: "$variable", page.value}}
|
|
29
37
|
</div>
|
|
30
|
-
{
|
|
31
|
-
|
|
38
|
+
{%- endif -%}
|
|
39
|
+
<p class="card-text m-0 appscms-feature-description">
|
|
40
|
+
{{data.content | replace: "$variable", page.value}}
|
|
41
|
+
</p>
|
|
32
42
|
</div>
|
|
43
|
+
{% endfor %} {%- if site.monumetricId and page.url != '/' and page.lang ==
|
|
44
|
+
'en' -%}
|
|
33
45
|
</div>
|
|
34
46
|
{%- endif -%}
|
|
35
47
|
</div>
|
|
36
|
-
</div>
|
|
48
|
+
</div>
|
|
@@ -1,38 +1,3 @@
|
|
|
1
|
-
<style>
|
|
2
|
-
.modal1 {
|
|
3
|
-
display: none;
|
|
4
|
-
position: fixed;
|
|
5
|
-
z-index: 1000;
|
|
6
|
-
left: 0;
|
|
7
|
-
top: 0;
|
|
8
|
-
width: 100%;
|
|
9
|
-
height: 100%;
|
|
10
|
-
overflow: auto;
|
|
11
|
-
background-color: rgba(59, 58, 58, 0.9);
|
|
12
|
-
}
|
|
13
|
-
.modal1-content1 {
|
|
14
|
-
margin: auto;
|
|
15
|
-
display: block;
|
|
16
|
-
width: 80%;
|
|
17
|
-
max-width: 800px;
|
|
18
|
-
margin-top: 20px;
|
|
19
|
-
}
|
|
20
|
-
.modal1-body img {
|
|
21
|
-
width: 100%;
|
|
22
|
-
height: auto;
|
|
23
|
-
}
|
|
24
|
-
.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
|
-
}
|
|
35
|
-
</style>
|
|
36
1
|
<div class="inforgraphics_section">
|
|
37
2
|
<h3 class="text-center w-100 mb-5"><b>Other useful information</b></h3>
|
|
38
3
|
<div class="wrapper">
|
|
@@ -44,7 +9,7 @@
|
|
|
44
9
|
<img
|
|
45
10
|
loading="lazy"
|
|
46
11
|
src="{{ item.image }}"
|
|
47
|
-
alt="
|
|
12
|
+
alt="infographics image"
|
|
48
13
|
draggable="false"
|
|
49
14
|
class="infographic-img"
|
|
50
15
|
onclick="openModal1('{{ item.image }}')"
|
|
@@ -61,100 +26,7 @@
|
|
|
61
26
|
<span class="close1" onclick="closeModal1()">×</span>
|
|
62
27
|
<div class="modal1-content1">
|
|
63
28
|
<div class="modal1-body">
|
|
64
|
-
<img id="modal1Image" src="" alt="
|
|
29
|
+
<img id="modal1Image" src="" alt="full size infographics image" />
|
|
65
30
|
</div>
|
|
66
31
|
</div>
|
|
67
32
|
</div>
|
|
68
|
-
<script>
|
|
69
|
-
function openModal1(imageSrc) {
|
|
70
|
-
var modal1 = document.getElementById("imageModal1");
|
|
71
|
-
var modal1Img = document.getElementById("modal1Image");
|
|
72
|
-
modal1.style.display = "block";
|
|
73
|
-
modal1Img.src = imageSrc;
|
|
74
|
-
}
|
|
75
|
-
function closeModal1() {
|
|
76
|
-
var modal1 = document.getElementById("imageModal1");
|
|
77
|
-
modal1.style.display = "none";
|
|
78
|
-
}
|
|
79
|
-
document.addEventListener("click", function (event) {
|
|
80
|
-
var modal1 = document.getElementById("imageModal1");
|
|
81
|
-
if (event.target === modal1) {
|
|
82
|
-
closeModal1();
|
|
83
|
-
}
|
|
84
|
-
});
|
|
85
|
-
const carousel = document.querySelector(".carousel-inner"),
|
|
86
|
-
firstImg = carousel.querySelectorAll("img")[0],
|
|
87
|
-
arrowIcons = document.querySelectorAll(".wrapper i");
|
|
88
|
-
const numImages = carousel.querySelectorAll("img").length;
|
|
89
|
-
const isMobile = window.matchMedia("(max-width: 767px)").matches; // Check if screen width is less than or equal to 767px
|
|
90
|
-
if (numImages > 3) {
|
|
91
|
-
arrowIcons[1].style.display = "block";
|
|
92
|
-
} else {
|
|
93
|
-
arrowIcons[0].style.display = "none";
|
|
94
|
-
arrowIcons[1].style.display = "none";
|
|
95
|
-
}
|
|
96
|
-
let isDragStart = false,
|
|
97
|
-
isDragging = false,
|
|
98
|
-
prevPageX,
|
|
99
|
-
prevScrollLeft,
|
|
100
|
-
positionDiff;
|
|
101
|
-
const showHideIcons = () => {
|
|
102
|
-
let scrollWidth = carousel.scrollWidth - carousel.clientWidth; // getting max scrollable width
|
|
103
|
-
arrowIcons[0].style.display = carousel.scrollLeft == 0 ? "none" : "block";
|
|
104
|
-
arrowIcons[1].style.display =
|
|
105
|
-
carousel.scrollLeft == scrollWidth ? "none" : "block";
|
|
106
|
-
};
|
|
107
|
-
arrowIcons.forEach((icon) => {
|
|
108
|
-
icon.addEventListener("click", () => {
|
|
109
|
-
let firstImgWidth = firstImg.clientWidth + 40;
|
|
110
|
-
const scrollAmount = icon.id === "left" ? -firstImgWidth : firstImgWidth;
|
|
111
|
-
carousel.scrollBy({
|
|
112
|
-
left: scrollAmount,
|
|
113
|
-
behavior: "smooth",
|
|
114
|
-
});
|
|
115
|
-
setTimeout(() => showHideIcons(), 60); // calling showHideIcons after 60ms
|
|
116
|
-
});
|
|
117
|
-
});
|
|
118
|
-
// const autoSlide = () => {
|
|
119
|
-
// // if there is no image left to scroll then return from here
|
|
120
|
-
// if (carousel.scrollLeft - (carousel.scrollWidth - carousel.clientWidth) > -1 || carousel.scrollLeft <= 0) return;
|
|
121
|
-
// positionDiff = Math.abs(positionDiff); // making positionDiff value to positive
|
|
122
|
-
// let firstImgWidth = firstImg.clientWidth + 14;
|
|
123
|
-
// // getting difference value that needs to add or reduce from carousel left to take middle img center
|
|
124
|
-
// let valDifference = firstImgWidth - positionDiff;
|
|
125
|
-
// if (carousel.scrollLeft > prevScrollLeft) { // if user is scrolling to the right
|
|
126
|
-
// return carousel.scrollLeft += positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
127
|
-
// }
|
|
128
|
-
// // if user is scrolling to the left
|
|
129
|
-
// carousel.scrollLeft -= positionDiff > firstImgWidth / 3 ? valDifference : -positionDiff;
|
|
130
|
-
// }
|
|
131
|
-
// const dragStart = (e) => {
|
|
132
|
-
// // updatating global variables value on mouse down event
|
|
133
|
-
// isDragStart = true;
|
|
134
|
-
// prevPageX = e.pageX || e.touches[0].pageX;
|
|
135
|
-
// prevScrollLeft = carousel.scrollLeft;
|
|
136
|
-
// }
|
|
137
|
-
// const dragging = (e) => {
|
|
138
|
-
// // scrolling images/carousel to left according to mouse pointer
|
|
139
|
-
// if (!isDragStart) return;
|
|
140
|
-
// e.preventDefault();
|
|
141
|
-
// isDragging = true;
|
|
142
|
-
// carousel.classList.add("dragging");
|
|
143
|
-
// positionDiff = (e.pageX || e.touches[0].pageX) - prevPageX;
|
|
144
|
-
// carousel.scrollLeft = prevScrollLeft - positionDiff;
|
|
145
|
-
// showHideIcons();
|
|
146
|
-
// }
|
|
147
|
-
// const dragStop = () => {
|
|
148
|
-
// isDragStart = false;
|
|
149
|
-
// carousel.classList.remove("dragging");
|
|
150
|
-
// if (!isDragging) return;
|
|
151
|
-
// isDragging = false;
|
|
152
|
-
// autoSlide();
|
|
153
|
-
// }
|
|
154
|
-
// carousel.addEventListener("mousedown", dragStart);
|
|
155
|
-
// carousel.addEventListener("touchstart", dragStart);
|
|
156
|
-
// document.addEventListener("mousemove", dragging);
|
|
157
|
-
// carousel.addEventListener("touchmove", dragging);
|
|
158
|
-
// document.addEventListener("mouseup", dragStop);
|
|
159
|
-
// carousel.addEventListener("touchend", dragStop);
|
|
160
|
-
</script>
|
|
@@ -1,138 +1,84 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
}
|
|
1
|
+
{% assign lang = page.lang | default: "en" %} {% assign siteData =
|
|
2
|
+
site.data.header[lang].data %} {% assign featureData = page.fileName %} {%
|
|
3
|
+
assign folder = page.folderName %} {% assign Data= site.data[folder][lang][file]
|
|
4
|
+
%}
|
|
5
|
+
<nav class="appscms-navbar">
|
|
6
|
+
<div class="row w-100 h-100 col-11 mx-auto">
|
|
7
|
+
<div class="appscms-navbar-nav">
|
|
8
|
+
{%- if siteData.navbarBrandLogoSvg -%}
|
|
9
|
+
<a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
|
|
10
|
+
{%- elsif siteData.navbarBrandText -%}
|
|
11
|
+
<span> {{siteData.navbarBrandText}}</span>
|
|
12
|
+
{%- else -%} {%- endif -%}
|
|
13
|
+
<div class="d-flex align-items-center">
|
|
14
|
+
{%- if site.navigationSearch -%}
|
|
15
|
+
<div class="nav-search mr-4">
|
|
16
|
+
<div class="search-container">
|
|
17
|
+
<input
|
|
18
|
+
type="text"
|
|
19
|
+
class="search-input"
|
|
20
|
+
placeholder="Search Tools"
|
|
21
|
+
/>
|
|
12
22
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
/* fill: #fff; */
|
|
38
|
-
height: 20px;
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.search-button:active {
|
|
42
|
-
background-color: #555;
|
|
43
|
-
}
|
|
44
|
-
.nav-search{
|
|
45
|
-
position: relative;
|
|
46
|
-
}
|
|
47
|
-
.result-item{
|
|
48
|
-
padding: 9px 12px;
|
|
49
|
-
}
|
|
50
|
-
.result-item a{
|
|
51
|
-
color: #222325;
|
|
52
|
-
}
|
|
53
|
-
.searchbarResults{
|
|
54
|
-
overflow: scroll;
|
|
55
|
-
height: 60vh;
|
|
56
|
-
background-color: #fff;
|
|
57
|
-
border: 1px solid #e4e5e7;
|
|
58
|
-
border-radius: 6px;
|
|
59
|
-
-webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
|
|
60
|
-
box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
|
|
61
|
-
-webkit-box-sizing: border-box;
|
|
62
|
-
box-sizing: border-box;
|
|
63
|
-
color: #74767e;
|
|
64
|
-
cursor: default;
|
|
65
|
-
margin-top: 8px;
|
|
66
|
-
padding: 12px;
|
|
67
|
-
position: absolute;
|
|
68
|
-
width: 100%;
|
|
69
|
-
z-index: 101;
|
|
70
|
-
display: none;
|
|
71
|
-
}
|
|
72
|
-
</style>
|
|
73
|
-
{% assign lang = page.lang | default: "en" %} {% assign siteData = site.data.header[lang].data
|
|
74
|
-
%} {% assign featureData = page.fileName %} {% assign folder = page.folderName
|
|
75
|
-
%} {% assign Data= site.data[folder][lang][file] %}
|
|
76
|
-
<nav class="appscms-navbar">
|
|
77
|
-
<div class="row w-100 h-100">
|
|
78
|
-
<div class="col-11 mx-auto">
|
|
79
|
-
<div class="appscms-navbar-nav">
|
|
80
|
-
{%- if siteData.navbarBrandLogoSvg -%}
|
|
81
|
-
<a href="/" aria-label="home-page"> {{siteData.navbarBrandLogoSvg}} </a>
|
|
82
|
-
{%- elsif siteData.navbarBrandText -%}
|
|
83
|
-
<span> {{siteData.navbarBrandText}}
|
|
84
|
-
{%- else -%}
|
|
85
|
-
{%- endif -%}
|
|
86
|
-
<div class="d-flex align-items-center">
|
|
87
|
-
{%- if site.navigationSearch -%}
|
|
88
|
-
<div class="nav-search mr-4">
|
|
89
|
-
<div class="search-container">
|
|
90
|
-
<input type="text" class="search-input" placeholder="Search Tools">
|
|
91
|
-
|
|
92
|
-
<button class="search-button">
|
|
93
|
-
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" stroke="#ffffff"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z" stroke="#ffffff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>
|
|
94
|
-
</button>
|
|
95
|
-
</div>
|
|
96
|
-
|
|
97
|
-
<div id="results" class="searchbarResults"></div>
|
|
23
|
+
<button class="search-button">
|
|
24
|
+
<svg
|
|
25
|
+
viewBox="0 0 24 24"
|
|
26
|
+
fill="none"
|
|
27
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
28
|
+
stroke="#ffffff"
|
|
29
|
+
>
|
|
30
|
+
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
31
|
+
<g
|
|
32
|
+
id="SVGRepo_tracerCarrier"
|
|
33
|
+
stroke-linecap="round"
|
|
34
|
+
stroke-linejoin="round"
|
|
35
|
+
></g>
|
|
36
|
+
<g id="SVGRepo_iconCarrier">
|
|
37
|
+
<path
|
|
38
|
+
d="M16.6725 16.6412L21 21M19 11C19 15.4183 15.4183 19 11 19C6.58172 19 3 15.4183 3 11C3 6.58172 6.58172 3 11 3C15.4183 3 19 6.58172 19 11Z"
|
|
39
|
+
stroke="#ffffff"
|
|
40
|
+
stroke-width="2"
|
|
41
|
+
stroke-linecap="round"
|
|
42
|
+
stroke-linejoin="round"
|
|
43
|
+
></path>
|
|
44
|
+
</g>
|
|
45
|
+
</svg>
|
|
46
|
+
</button>
|
|
98
47
|
</div>
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
48
|
+
|
|
49
|
+
<div id="results" class="searchbarResults"></div>
|
|
50
|
+
</div>
|
|
51
|
+
{%- endif -%} {%- if siteData.navItems -%}
|
|
52
|
+
<div class="appscms-navbar-nav-links">
|
|
104
53
|
{%- for item in siteData.navItems -%}
|
|
105
54
|
<a class="appscms-nav-link" href="{{item.url}}">{{item.name}}</a>
|
|
106
55
|
{%- endfor -%}
|
|
107
|
-
</div>
|
|
108
|
-
{%- endif -%}
|
|
109
|
-
</div>
|
|
110
|
-
|
|
111
|
-
<div id="hamburger" data-open="false" class="hamburger">
|
|
112
|
-
<svg
|
|
113
|
-
style="font-size:25px"
|
|
114
|
-
stroke="currentColor"
|
|
115
|
-
fill="currentColor"
|
|
116
|
-
stroke-width="0"
|
|
117
|
-
viewBox="0 0 512 512"
|
|
118
|
-
aria-hidden="true"
|
|
119
|
-
focusable="false"
|
|
120
|
-
height="50px"
|
|
121
|
-
width="1em"
|
|
122
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
123
|
-
>
|
|
124
|
-
<path
|
|
125
|
-
fill="none"
|
|
126
|
-
stroke-linecap="round"
|
|
127
|
-
stroke-miterlimit="10"
|
|
128
|
-
stroke-width="48"
|
|
129
|
-
d="M88 152h336M88 256h336M88 360h336"
|
|
130
|
-
></path>
|
|
131
|
-
</svg>
|
|
132
56
|
</div>
|
|
57
|
+
{%- endif -%}
|
|
133
58
|
</div>
|
|
59
|
+
|
|
60
|
+
<div id="hamburger" data-open="false" class="hamburger">
|
|
61
|
+
<svg
|
|
62
|
+
style="font-size: 25px"
|
|
63
|
+
stroke="currentColor"
|
|
64
|
+
fill="currentColor"
|
|
65
|
+
stroke-width="0"
|
|
66
|
+
viewBox="0 0 512 512"
|
|
67
|
+
aria-hidden="true"
|
|
68
|
+
focusable="false"
|
|
69
|
+
height="50px"
|
|
70
|
+
width="1em"
|
|
71
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
72
|
+
>
|
|
73
|
+
<path
|
|
74
|
+
fill="none"
|
|
75
|
+
stroke-linecap="round"
|
|
76
|
+
stroke-miterlimit="10"
|
|
77
|
+
stroke-width="48"
|
|
78
|
+
d="M88 152h336M88 256h336M88 360h336"
|
|
79
|
+
></path>
|
|
80
|
+
</svg>
|
|
134
81
|
</div>
|
|
135
82
|
</div>
|
|
136
|
-
</
|
|
137
|
-
|
|
138
|
-
|
|
83
|
+
</div>
|
|
84
|
+
</nav>
|