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
|
@@ -1,157 +1,88 @@
|
|
|
1
|
-
<style>
|
|
2
|
-
.mobile-search-bar {
|
|
3
|
-
position: relative;
|
|
4
|
-
height: 100px;
|
|
5
|
-
width: 100%;
|
|
6
|
-
display: none;
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
.mobile-search-container {
|
|
10
|
-
display: flex;
|
|
11
|
-
border: 1px solid #ccc;
|
|
12
|
-
border-radius: 5px;
|
|
13
|
-
overflow: hidden;
|
|
14
|
-
height: 38px;
|
|
15
|
-
margin: 20px 0px 20px 0px;
|
|
16
|
-
background-color: white;
|
|
17
|
-
position: relative;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.mobile-search-input {
|
|
21
|
-
flex: 1;
|
|
22
|
-
border: none;
|
|
23
|
-
padding: 12px 16px;
|
|
24
|
-
font-size: 16px;
|
|
25
|
-
outline: none;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.mobile-search-input::placeholder {
|
|
29
|
-
color: #888;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
.mobile-search-button {
|
|
33
|
-
background-color: #000;
|
|
34
|
-
border: none;
|
|
35
|
-
padding: 0 16px;
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
justify-content: center;
|
|
39
|
-
cursor: pointer;
|
|
40
|
-
outline: none;
|
|
41
|
-
}
|
|
42
|
-
|
|
43
|
-
.mobile-search-button svg {
|
|
44
|
-
/* fill: #fff; */
|
|
45
|
-
height: 20px;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.mobile-search-button:active {
|
|
49
|
-
background-color: #555;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.mobile-nav-search {
|
|
53
|
-
position: relative;
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.mobile-result-item {
|
|
57
|
-
padding: 9px 12px;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.mobile-result-item a {
|
|
61
|
-
color: #222325;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.mobile-searchbarResults {
|
|
65
|
-
background-color: #fff;
|
|
66
|
-
border: 1px solid #e4e5e7;
|
|
67
|
-
border-radius: 6px;
|
|
68
|
-
-webkit-box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
|
|
69
|
-
box-shadow: 0 17px 58px rgba(0, 0, 0, .08);
|
|
70
|
-
-webkit-box-sizing: border-box;
|
|
71
|
-
box-sizing: border-box;
|
|
72
|
-
color: #74767e;
|
|
73
|
-
cursor: default;
|
|
74
|
-
margin-top: 8px;
|
|
75
|
-
padding: 12px;
|
|
76
|
-
position: fixed;
|
|
77
|
-
margin-top: 42px;
|
|
78
|
-
width: 244px;
|
|
79
|
-
height: 400px;
|
|
80
|
-
overflow-y: scroll;
|
|
81
|
-
z-index: 101;
|
|
82
|
-
display: none;
|
|
83
|
-
}
|
|
84
|
-
</style>
|
|
85
|
-
|
|
86
1
|
{%- if site.newToolBar and page.lang == 'en' -%}
|
|
87
|
-
<div class="appscms-toolbar">
|
|
2
|
+
<div class="appscms-toolbar">
|
|
88
3
|
<div class="row">
|
|
89
4
|
<div class="col-11 mx-auto">
|
|
90
5
|
<div class="appscms-toolbar-list">
|
|
91
6
|
<button class="scroll-left">❮</button>
|
|
92
7
|
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
|
|
93
|
-
<img
|
|
94
|
-
|
|
8
|
+
<img
|
|
9
|
+
class="mt-3"
|
|
10
|
+
style="cursor: pointer"
|
|
11
|
+
height="30px"
|
|
12
|
+
width="30px"
|
|
13
|
+
src="/assets/images/close-button.svg"
|
|
14
|
+
alt="close-button"
|
|
15
|
+
/>
|
|
95
16
|
</div>
|
|
96
17
|
{%- if site.navigationSearch -%}
|
|
97
18
|
<div class="mobile-search-bar">
|
|
98
19
|
<div class="mobile-search-container">
|
|
99
|
-
<input
|
|
20
|
+
<input
|
|
21
|
+
type="text"
|
|
22
|
+
class="mobile-search-input"
|
|
23
|
+
placeholder="Search Tools"
|
|
24
|
+
/>
|
|
100
25
|
<button class="mobile-search-button">
|
|
101
|
-
<svg
|
|
26
|
+
<svg
|
|
27
|
+
viewBox="0 0 24 24"
|
|
28
|
+
fill="none"
|
|
29
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
30
|
+
stroke="#ffffff"
|
|
31
|
+
>
|
|
102
32
|
<g id="SVGRepo_bgCarrier" stroke-width="0"></g>
|
|
103
|
-
<g
|
|
33
|
+
<g
|
|
34
|
+
id="SVGRepo_tracerCarrier"
|
|
35
|
+
stroke-linecap="round"
|
|
36
|
+
stroke-linejoin="round"
|
|
37
|
+
></g>
|
|
104
38
|
<g id="SVGRepo_iconCarrier">
|
|
105
39
|
<path
|
|
106
40
|
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"
|
|
107
|
-
stroke="#ffffff"
|
|
41
|
+
stroke="#ffffff"
|
|
42
|
+
stroke-width="2"
|
|
43
|
+
stroke-linecap="round"
|
|
44
|
+
stroke-linejoin="round"
|
|
45
|
+
></path>
|
|
108
46
|
</g>
|
|
109
47
|
</svg>
|
|
110
48
|
</button>
|
|
111
49
|
<div id="mobile-results" class="mobile-searchbarResults"></div>
|
|
112
50
|
</div>
|
|
113
51
|
</div>
|
|
114
|
-
{%- endif -%}
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
52
|
+
{%- endif -%} {%- if Data.megaMenu -%} {%- for item in
|
|
53
|
+
Data.megaMenu.dropdown -%}
|
|
54
|
+
<nav class="appscms-toolbar-list-item">
|
|
55
|
+
<span
|
|
56
|
+
class="appscms-toolbar-list-item-span d-flex justify-content-between"
|
|
57
|
+
>
|
|
120
58
|
{{ item.categoryName }}
|
|
121
59
|
</span>
|
|
122
60
|
<div class="list-item-dropdown">
|
|
123
61
|
<div class="row">
|
|
124
62
|
{% if item.featuredLinks.size > 0 %}
|
|
125
|
-
<
|
|
126
|
-
<
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
<
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
<h4>{{i.name}}</h4>
|
|
136
|
-
<p class="category-tools__descr gray">{{i.text}}</p>
|
|
137
|
-
</div>
|
|
138
|
-
</a>
|
|
139
|
-
{%- endfor -%}
|
|
63
|
+
<section class="col-lg-4 col-md-6 appscms-featured-tools">
|
|
64
|
+
<h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
|
|
65
|
+
{%- for i in item.featuredLinks -%}
|
|
66
|
+
<a href="{{i.url}}" class="category-tools__item">
|
|
67
|
+
<figure class="icon_box v_2 v2">
|
|
68
|
+
<img src="{{i.iconSrc}}" alt="image for tools" />
|
|
69
|
+
</figure>
|
|
70
|
+
<div class="category-tools__content">
|
|
71
|
+
<h4>{{i.name}}</h4>
|
|
72
|
+
<p class="category-tools__descr gray">{{i.text}}</p>
|
|
140
73
|
</div>
|
|
141
|
-
</
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
{%- if item.links.size > 0 -%}
|
|
74
|
+
</a>
|
|
75
|
+
{%- endfor -%}
|
|
76
|
+
</section>
|
|
77
|
+
{%- endif -%} {%- if item.links.size > 0 -%}
|
|
145
78
|
<div class="col-md-8">
|
|
146
79
|
<div class="appscms-other-tools">
|
|
147
80
|
<div class="expand_menu-name-categiry">OTHER TOOLS</div>
|
|
148
81
|
|
|
149
|
-
{% assign array_size = item.links | size %}
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
{% assign second_half = item.links | slice: half_size, array_size %}
|
|
154
|
-
|
|
82
|
+
{% assign array_size = item.links | size %} {% assign
|
|
83
|
+
half_size = array_size | divided_by: 2 %} {% assign first_half
|
|
84
|
+
= item.links | slice: 0, half_size %} {% assign second_half =
|
|
85
|
+
item.links | slice: half_size, array_size %}
|
|
155
86
|
|
|
156
87
|
<div class="row">
|
|
157
88
|
<div class="col-md-6">
|
|
@@ -159,10 +90,8 @@
|
|
|
159
90
|
{%- for i in first_half | slice: 0, half -%}
|
|
160
91
|
<li>
|
|
161
92
|
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
162
|
-
|
|
163
93
|
</li>
|
|
164
94
|
{%- endfor -%}
|
|
165
|
-
|
|
166
95
|
</ul>
|
|
167
96
|
</div>
|
|
168
97
|
<div class="col-md-6">
|
|
@@ -170,97 +99,78 @@
|
|
|
170
99
|
{%- for i in second_half -%}
|
|
171
100
|
<li>
|
|
172
101
|
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
173
|
-
|
|
174
102
|
</li>
|
|
175
103
|
{%- endfor -%}
|
|
176
104
|
</ul>
|
|
177
105
|
</div>
|
|
178
|
-
|
|
179
|
-
|
|
180
106
|
</div>
|
|
181
|
-
|
|
182
107
|
</div>
|
|
183
108
|
</div>
|
|
184
109
|
{%- endif -%}
|
|
185
110
|
</div>
|
|
186
111
|
</div>
|
|
187
|
-
</
|
|
188
|
-
{%- endfor -%}
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
112
|
+
</nav>
|
|
113
|
+
{%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
|
|
114
|
+
-%}
|
|
115
|
+
<nav class="appscms-toolbar-list-item">
|
|
116
|
+
<span
|
|
117
|
+
class="appscms-toolbar-list-item-span d-flex justify-content-between"
|
|
118
|
+
>
|
|
194
119
|
{{ item.categoryName }}
|
|
195
120
|
</span>
|
|
196
121
|
<div class="list-item-dropdown">
|
|
197
122
|
<div class="row">
|
|
198
123
|
{%- if item.featuredLinks.size > 0 -%}
|
|
199
|
-
<
|
|
200
|
-
<
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
<
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
<h4>{{i.name}}</h4>
|
|
210
|
-
<p class="category-tools__descr gray">{{i.text}}</p>
|
|
211
|
-
</div>
|
|
212
|
-
</a>
|
|
213
|
-
{%- endfor -%}
|
|
214
|
-
</div>
|
|
215
|
-
</div>
|
|
216
|
-
</div>
|
|
217
|
-
{%- endif -%}
|
|
218
|
-
{%- if item.links.size > 0 -%}
|
|
219
|
-
<div class="col-lg-6">
|
|
220
|
-
<div class="appscms-other-tools">
|
|
221
|
-
<div class="expand_menu-name-categiry">OTHER TOOLS</div>
|
|
222
|
-
{% assign array_size = item.links | size %}
|
|
223
|
-
{% assign half_size = array_size | divided_by: 2 %}
|
|
224
|
-
|
|
225
|
-
{% assign first_half = item.links | slice: 0, half_size %}
|
|
226
|
-
{% assign second_half = item.links | slice: half_size, array_size %}
|
|
227
|
-
|
|
228
|
-
<div class="row">
|
|
229
|
-
<div class="col-md-6">
|
|
230
|
-
<ul class="mega_menu">
|
|
231
|
-
{%- for i in first_half | slice: 0, half -%}
|
|
232
|
-
<li>
|
|
233
|
-
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
234
|
-
|
|
235
|
-
</li>
|
|
236
|
-
{%- endfor -%}
|
|
237
|
-
</ul>
|
|
238
|
-
</div>
|
|
239
|
-
<div class="col-md-6">
|
|
240
|
-
<ul class="mega_menu">
|
|
241
|
-
|
|
242
|
-
{%- for i in second_half -%}
|
|
243
|
-
<li>
|
|
244
|
-
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
245
|
-
|
|
246
|
-
</li>
|
|
247
|
-
{%- endfor -%}
|
|
248
|
-
</ul>
|
|
249
|
-
</div>
|
|
250
|
-
|
|
251
|
-
|
|
124
|
+
<section class="col-lg-4 col-md-6 appscms-featured-tools">
|
|
125
|
+
<h4 class="expand_menu-name-categiry">FEATURED TOOLS</h4>
|
|
126
|
+
{%- for i in item.featuredLinks -%}
|
|
127
|
+
<a href="{{i.url}}" class="category-tools__item">
|
|
128
|
+
<figure class="icon_box v_2 v2">
|
|
129
|
+
<img src="{{i.iconSrc}}" alt="icon-img" />
|
|
130
|
+
</figure>
|
|
131
|
+
<div class="category-tools__content">
|
|
132
|
+
<h4>{{i.name}}</h4>
|
|
133
|
+
<p class="category-tools__descr gray">{{i.text}}</p>
|
|
252
134
|
</div>
|
|
135
|
+
</a>
|
|
136
|
+
{%- endfor -%}
|
|
137
|
+
</section>
|
|
138
|
+
{%- endif -%} {%- if item.links.size > 0 -%}
|
|
139
|
+
<section class="col-lg-6 col-md-8 appscms-other-tools">
|
|
140
|
+
<div class="expand_menu-name-categiry">OTHER TOOLS</div>
|
|
141
|
+
{% assign array_size = item.links | size %} {% assign half_size
|
|
142
|
+
= array_size | divided_by: 2 %} {% assign first_half =
|
|
143
|
+
item.links | slice: 0, half_size %} {% assign second_half =
|
|
144
|
+
item.links | slice: half_size, array_size %}
|
|
145
|
+
|
|
146
|
+
<div class="row">
|
|
147
|
+
<nav class="col-md-6">
|
|
148
|
+
<ul class="mega_menu">
|
|
149
|
+
{%- for i in first_half | slice: 0, half -%}
|
|
150
|
+
<li>
|
|
151
|
+
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
152
|
+
</li>
|
|
153
|
+
{%- endfor -%}
|
|
154
|
+
</ul>
|
|
155
|
+
</nav>
|
|
156
|
+
<nav class="col-md-6">
|
|
157
|
+
<ul class="mega_menu">
|
|
158
|
+
{%- for i in second_half -%}
|
|
159
|
+
<li>
|
|
160
|
+
<a href="{{ i.url }}">{{ i.name }}</a>
|
|
161
|
+
</li>
|
|
162
|
+
{%- endfor -%}
|
|
163
|
+
</ul>
|
|
164
|
+
</nav>
|
|
253
165
|
</div>
|
|
254
|
-
</
|
|
166
|
+
</section>
|
|
255
167
|
{%- endif -%}
|
|
256
|
-
|
|
257
168
|
</div>
|
|
258
169
|
</div>
|
|
259
|
-
</
|
|
170
|
+
</nav>
|
|
260
171
|
{%- endfor -%}
|
|
261
172
|
<button class="scroll-right">❯</button>
|
|
262
173
|
</div>
|
|
263
|
-
|
|
264
174
|
</div>
|
|
265
175
|
</div>
|
|
266
176
|
</div>
|
|
@@ -271,47 +181,47 @@
|
|
|
271
181
|
<div class="appscms-toolbar-list">
|
|
272
182
|
<button class="scroll-left">❮</button>
|
|
273
183
|
<div id="close-nav-ham" data-open="1" class="close-nav-ham">
|
|
274
|
-
<img
|
|
275
|
-
|
|
184
|
+
<img
|
|
185
|
+
class="mt-3"
|
|
186
|
+
style="cursor: pointer"
|
|
187
|
+
height="30px"
|
|
188
|
+
width="30px"
|
|
189
|
+
src="/assets/images/close-button.svg"
|
|
190
|
+
alt="close-button"
|
|
191
|
+
/>
|
|
276
192
|
</div>
|
|
277
|
-
{%- if Data.megaMenu -%}
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
193
|
+
{%- if Data.megaMenu -%} {%- for item in Data.megaMenu.dropdown -%}
|
|
194
|
+
<nav class="appscms-toolbar-list-item">
|
|
195
|
+
<span
|
|
196
|
+
class="appscms-toolbar-list-item-span d-flex justify-content-between"
|
|
197
|
+
>
|
|
281
198
|
{{ item.categoryName }}
|
|
282
199
|
</span>
|
|
283
200
|
<div class="list-item-dropdown">
|
|
284
|
-
<h4 class="list-item-dropdown-heading">
|
|
285
|
-
{{ Data.nav-link-name }}
|
|
286
|
-
</h4>
|
|
201
|
+
<h4 class="list-item-dropdown-heading">{{ Data.nav-link-name }}</h4>
|
|
287
202
|
<div class="row">
|
|
288
|
-
{%- assign count = 0 -%}
|
|
289
|
-
{%-
|
|
290
|
-
|
|
291
|
-
{%- if count == 1 -%}
|
|
292
|
-
{%- if site.name == "olarandoms" -%}
|
|
203
|
+
{%- assign count = 0 -%} {%- for i in item.links -%} {%- assign
|
|
204
|
+
count = count | plus: 1 -%} {%- if count == 1 -%} {%- if site.name
|
|
205
|
+
== "olarandoms" -%}
|
|
293
206
|
<div class="col-xl-6">
|
|
294
207
|
{%- else -%}
|
|
295
208
|
<div class="col-md-6 col-lg-4">
|
|
296
|
-
{%- endif -%}
|
|
297
|
-
{%- endif -%}
|
|
298
|
-
{%- if count == 6 -%}
|
|
209
|
+
{%- endif -%} {%- endif -%} {%- if count == 6 -%}
|
|
299
210
|
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
300
211
|
</div>
|
|
301
|
-
{%- assign count = 0 -%}
|
|
302
|
-
{%- else -%}
|
|
212
|
+
{%- assign count = 0 -%} {%- else -%}
|
|
303
213
|
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
304
|
-
{%- endif -%}
|
|
305
|
-
{%- endfor -%}
|
|
214
|
+
{%- endif -%} {%- endfor -%}
|
|
306
215
|
</div>
|
|
307
216
|
</div>
|
|
308
|
-
|
|
309
|
-
|
|
310
|
-
{%- endif -%}
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
314
|
-
|
|
217
|
+
</div>
|
|
218
|
+
</nav>
|
|
219
|
+
{%- endfor -%} {%- endif -%} {%- for item in siteData.megaMenu.dropdown
|
|
220
|
+
-%}
|
|
221
|
+
<nav class="appscms-toolbar-list-item">
|
|
222
|
+
<span
|
|
223
|
+
class="appscms-toolbar-list-item-span d-flex justify-content-between"
|
|
224
|
+
>
|
|
315
225
|
{{ item.categoryName }}
|
|
316
226
|
</span>
|
|
317
227
|
<div class="list-item-dropdown">
|
|
@@ -319,27 +229,22 @@
|
|
|
319
229
|
{{ siteData.megaMenu.nav-link-name }}
|
|
320
230
|
</h4>
|
|
321
231
|
<div class="row">
|
|
322
|
-
{%- assign count = 0 -%}
|
|
323
|
-
{%-
|
|
324
|
-
|
|
325
|
-
{%- if count == 1 -%}
|
|
326
|
-
{%- if site.name == "olarandoms" -%}
|
|
232
|
+
{%- assign count = 0 -%} {%- for i in item.links -%} {%- assign
|
|
233
|
+
count = count | plus: 1 -%} {%- if count == 1 -%} {%- if site.name
|
|
234
|
+
== "olarandoms" -%}
|
|
327
235
|
<div class="col-xl-6">
|
|
328
236
|
{%- else -%}
|
|
329
237
|
<div class="col-md-6 col-lg-4">
|
|
330
|
-
{%- endif -%}
|
|
331
|
-
{%- endif -%}
|
|
332
|
-
{%- if count == 6 -%}
|
|
238
|
+
{%- endif -%} {%- endif -%} {%- if count == 6 -%}
|
|
333
239
|
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
334
240
|
</div>
|
|
335
|
-
{%- assign count = 0 -%}
|
|
336
|
-
{%- else -%}
|
|
241
|
+
{%- assign count = 0 -%} {%- else -%}
|
|
337
242
|
<a class="toolbar-link" href="{{ i.url }}">{{ i.name }}</a>
|
|
338
|
-
{%- endif -%}
|
|
339
|
-
{%- endfor -%}
|
|
243
|
+
{%- endif -%} {%- endfor -%}
|
|
340
244
|
</div>
|
|
341
245
|
</div>
|
|
342
|
-
|
|
246
|
+
</div>
|
|
247
|
+
</nav>
|
|
343
248
|
{%- endfor -%}
|
|
344
249
|
<button class="scroll-right">❯</button>
|
|
345
250
|
</div>
|
|
@@ -347,95 +252,3 @@
|
|
|
347
252
|
</div>
|
|
348
253
|
</div>
|
|
349
254
|
{%- endif -%}
|
|
350
|
-
|
|
351
|
-
|
|
352
|
-
|
|
353
|
-
|
|
354
|
-
<script>
|
|
355
|
-
document.addEventListener("DOMContentLoaded", function () {
|
|
356
|
-
const scrollContainer = document.querySelector(".appscms-toolbar-list");
|
|
357
|
-
const scrollLeft = document.querySelector(".scroll-left");
|
|
358
|
-
const scrollRight = document.querySelector(".scroll-right");
|
|
359
|
-
|
|
360
|
-
function updateScrollButtons() {
|
|
361
|
-
scrollLeft.style.display =
|
|
362
|
-
scrollContainer.scrollLeft > 0 ? "block" : "none";
|
|
363
|
-
scrollRight.style.display =
|
|
364
|
-
scrollContainer.scrollWidth >
|
|
365
|
-
scrollContainer.clientWidth + scrollContainer.scrollLeft
|
|
366
|
-
? "block"
|
|
367
|
-
: "none";
|
|
368
|
-
}
|
|
369
|
-
|
|
370
|
-
scrollLeft.addEventListener("click", function () {
|
|
371
|
-
scrollContainer.scrollLeft -= 120; // Adjust this value as needed
|
|
372
|
-
updateScrollButtons();
|
|
373
|
-
});
|
|
374
|
-
|
|
375
|
-
scrollRight.addEventListener("click", function () {
|
|
376
|
-
scrollContainer.scrollLeft += 120; // Adjust this value as needed
|
|
377
|
-
updateScrollButtons();
|
|
378
|
-
});
|
|
379
|
-
|
|
380
|
-
scrollContainer.addEventListener("scroll", updateScrollButtons);
|
|
381
|
-
|
|
382
|
-
// Initial check to hide buttons if necessary
|
|
383
|
-
updateScrollButtons();
|
|
384
|
-
});
|
|
385
|
-
|
|
386
|
-
</script>
|
|
387
|
-
|
|
388
|
-
<style>
|
|
389
|
-
.scroll-container {
|
|
390
|
-
display: flex;
|
|
391
|
-
align-items: center;
|
|
392
|
-
background-color: #333;
|
|
393
|
-
position: relative;
|
|
394
|
-
}
|
|
395
|
-
|
|
396
|
-
.scroll-left,
|
|
397
|
-
.scroll-right {
|
|
398
|
-
background-color: #4456f6f7;
|
|
399
|
-
color: white;
|
|
400
|
-
border: none;
|
|
401
|
-
height: 40px;
|
|
402
|
-
cursor: pointer;
|
|
403
|
-
position: absolute;
|
|
404
|
-
width: 40px;
|
|
405
|
-
top: 50%;
|
|
406
|
-
z-index: 100;
|
|
407
|
-
transform: translateY(-50%);
|
|
408
|
-
}
|
|
409
|
-
|
|
410
|
-
.scroll-left {
|
|
411
|
-
left: 0;
|
|
412
|
-
}
|
|
413
|
-
|
|
414
|
-
.scroll-right {
|
|
415
|
-
right: 0;
|
|
416
|
-
}
|
|
417
|
-
|
|
418
|
-
.scroll-left:hover,
|
|
419
|
-
.scroll-right:hover {
|
|
420
|
-
background-color: #8691f6f7;
|
|
421
|
-
}
|
|
422
|
-
|
|
423
|
-
.navbar {
|
|
424
|
-
/* overflow-x: auto; */
|
|
425
|
-
white-space: nowrap;
|
|
426
|
-
flex-grow: 1;
|
|
427
|
-
scroll-behavior: smooth;
|
|
428
|
-
display: flex;
|
|
429
|
-
}
|
|
430
|
-
|
|
431
|
-
.navbar ul {
|
|
432
|
-
padding: 0;
|
|
433
|
-
margin: 0;
|
|
434
|
-
display: flex;
|
|
435
|
-
list-style-type: none;
|
|
436
|
-
}
|
|
437
|
-
|
|
438
|
-
.navbar li {
|
|
439
|
-
display: inline;
|
|
440
|
-
}
|
|
441
|
-
</style>
|
|
@@ -17,23 +17,22 @@ site.removeJquery != true -%}
|
|
|
17
17
|
endif
|
|
18
18
|
-%}
|
|
19
19
|
></script>
|
|
20
|
-
{%- endif -%}
|
|
21
|
-
|
|
22
|
-
{%- if page.layout == "appscms-home" or page.layout == "contenttool-home" -%}
|
|
20
|
+
{%- endif -%} {%- if site.search -%} {%- if page.layout == "appscms-home" or
|
|
21
|
+
page.layout == "contenttool-home" -%}
|
|
23
22
|
<script
|
|
24
23
|
defer
|
|
25
24
|
src="/assets/js/appscms-search.js"
|
|
26
25
|
crossorigin="anonymous"
|
|
27
26
|
></script>
|
|
28
|
-
{%- endif -%}
|
|
29
|
-
{%- endif -%}
|
|
30
|
-
|
|
27
|
+
{%- endif -%} {%- endif -%}
|
|
31
28
|
|
|
32
29
|
<script
|
|
33
30
|
defer
|
|
34
31
|
src="/assets/js/appscms-theme.js"
|
|
35
32
|
crossorigin="anonymous"
|
|
36
33
|
></script>
|
|
34
|
+
<script defer src="/assets/js/appscms-infographics.js"></script>
|
|
35
|
+
|
|
37
36
|
{%- if site.userTrackingCount -%} {%- include customScripts.html -%} {%- endif
|
|
38
37
|
-%} {%- if site.userTrackingCount and page.layout == "feature" -%}
|
|
39
38
|
<script defer src="/assets/js/usageTracking.js"></script>
|
|
@@ -121,11 +120,8 @@ replace: "$fileName", page.fileName | replace: "$lang", page.lang | replace:
|
|
|
121
120
|
crossorigin="anonymous"
|
|
122
121
|
referrerpolicy="no-referrer"
|
|
123
122
|
/>
|
|
124
|
-
{%- endif -%}
|
|
125
|
-
|
|
126
|
-
-%}
|
|
127
|
-
{%- if site.bookmark -%}
|
|
128
|
-
{%- if page.layout == "appscms-feature" -%}
|
|
123
|
+
{%- endif -%} {%- include google-analytics.html -%} {%- if site.bookmark -%} {%-
|
|
124
|
+
if page.layout == "appscms-feature" -%}
|
|
129
125
|
<script>
|
|
130
126
|
const toaster = document.querySelector(".toaster");
|
|
131
127
|
if (
|
|
@@ -138,14 +134,11 @@ replace: "$fileName", page.fileName | replace: "$lang", page.lang | replace:
|
|
|
138
134
|
} else {
|
|
139
135
|
toaster.innerHTML = `Press Ctrl + D to Bookmark this page`;
|
|
140
136
|
}
|
|
141
|
-
}
|
|
142
|
-
else{
|
|
137
|
+
} else {
|
|
143
138
|
toaster.style.display = "none";
|
|
144
139
|
}
|
|
145
140
|
setTimeout(() => {
|
|
146
141
|
toaster.style.display = "none";
|
|
147
142
|
}, 10000);
|
|
148
143
|
</script>
|
|
149
|
-
{%- endif -%}
|
|
150
|
-
{%- endif -%}
|
|
151
|
-
|
|
144
|
+
{%- endif -%} {%- endif -%}
|