appscms-tools-theme 4.7.1 → 4.7.2

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4b1a4ced88dcc3df6da66138944c5d945e9d62cd598ba2f21f15f37407642fcb
4
- data.tar.gz: a890d70697782ee96723a8a14d106a3b32c8aeda2a628ec8eb7defea61a55fef
3
+ metadata.gz: 791b4cdc861ae80bec987f97ed3d952451e8b6ed8d4244c4f51c89cab844f573
4
+ data.tar.gz: 87ab2a1bd27f90671150e052ea3b96fd1f423057e54bddce3f3a518d5d6f8933
5
5
  SHA512:
6
- metadata.gz: 219b660f2b9ffdeac6c8277f5d7aab55d30361f982f12b093c16b33eda99eb3cadcd5ffea0f2cf9d49ad8c0b6b37a5885dff72079eb45b34ce0bac8ba8cfda7b
7
- data.tar.gz: 0bba5d2fd62810951ed639d97b5c6bd55812bac6b47862575087325b3df18f4929162dd5d6867b2cc337f75dc5972a9649fa3b1f4dd61213047957ae6d16efe9
6
+ metadata.gz: 4070e82ef7b1628684d33ec4e747b375e354e6185d4f1276c327c08be35c77cd7de8f50306046589bf813ef7274eb9ccbdcb3e9a8588bf6767da2a3af45995e8
7
+ data.tar.gz: 792b73dc8f5b5741942c56e56e0d05ec6bfd140c7fce004a099d4ccd7587f7b5963261589f4e748a382061e62039619d854b736a772e830887b1edf5e4d0f1cd
@@ -22,74 +22,83 @@
22
22
  ],
23
23
  "features": [
24
24
  {
25
- "name": "Appscms Media tool",
26
- "description": "Appscms feature layout with new design",
27
- "color": "linear-gradient(148deg, #835af2 20%, #1220d8 100%)",
28
- "icon": "/assets/images/digipaint.svg",
29
- "url": "/appscms-feature"
30
- },
31
- {
32
- "name": "Erase tool",
33
- "description": "Appscms feature layout with new design",
34
- "color": "linear-gradient(148deg, #31d3bd 20%, #187cca 100%)",
35
- "icon": "/assets/images/digipaint.svg",
36
- "url": "/appscms-feature"
37
- },
38
- {
39
- "name": "Pdf tool",
40
- "description": "Appscms feature layout with new design",
41
- "color": "linear-gradient(148deg, #32a0f7 20%, #114793 100%)",
42
- "icon": "/assets/images/digipaint.svg",
43
- "url": "/appscms-feature"
44
- },
45
- {
46
- "name": "Appscms Video Split",
47
- "description": "Appscms feature layout with new design",
48
- "color": "linear-gradient(148deg, #ffa16b 20%, #db410a 100%)",
49
- "icon": "/assets/images/digipaint.svg",
50
- "url": "/appscms-feature"
51
- },
52
- {
53
- "name": "Appscms resize tool",
54
- "description": "Appscms feature layout with new design",
55
- "color": "#1A2EE7",
56
- "icon": "/assets/images/digipaint.svg",
57
- "url": "/appscms-feature"
58
- },
59
- {
60
- "name": "Appscms Audio kit",
61
- "description": "Appscms feature layout with new design",
62
- "color": "#1A2EE7",
63
- "icon": "/assets/images/digipaint.svg",
64
- "url": "/appscms-feature"
65
- },
66
- {
67
- "name": "Appscms feature",
68
- "description": "Appscms feature layout with new design",
69
- "color": "#1A2EE7",
70
- "icon": "/assets/images/digipaint.svg",
71
- "url": "/appscms-feature"
72
- },
73
- {
74
- "name": "Appscms feature",
75
- "description": "Appscms feature layout with new design",
76
- "color": "#1A2EE7",
77
- "icon": "/assets/images/digipaint.svg",
78
- "url": "/appscms-feature"
25
+ "category": "All Tools",
26
+ "active": true,
27
+ "type": "tab",
28
+ "display": "block",
29
+ "features": [
30
+ {
31
+ "name": "All tools",
32
+ "description": "Appscms feature layout with new design",
33
+ "color": "linear-gradient(148deg, #835af2 20%, #1220d8 100%)",
34
+ "icon": "/assets/images/digipaint.svg",
35
+ "url": "/appscms-feature"
36
+ },
37
+ {
38
+ "name": "All tools",
39
+ "description": "Appscms feature layout with new design",
40
+ "color": "linear-gradient(148deg, #31d3bd 20%, #187cca 100%)",
41
+ "icon": "/assets/images/digipaint.svg",
42
+ "url": "/appscms-feature"
43
+ },
44
+ {
45
+ "name": "All tools",
46
+ "description": "Appscms feature layout with new design",
47
+ "color": "linear-gradient(148deg, #32a0f7 20%, #114793 100%)",
48
+ "icon": "/assets/images/digipaint.svg",
49
+ "url": "/appscms-feature"
50
+ },
51
+ {
52
+ "name": "All tools",
53
+ "description": "Appscms feature layout with new design",
54
+ "color": "linear-gradient(148deg, #ffa16b 20%, #db410a 100%)",
55
+ "icon": "/assets/images/digipaint.svg",
56
+ "url": "/appscms-feature"
57
+ },
58
+ {
59
+ "name": "All tools",
60
+ "description": "Appscms feature layout with new design",
61
+ "color": "#1A2EE7",
62
+ "icon": "/assets/images/digipaint.svg",
63
+ "url": "/appscms-feature"
64
+ }
65
+ ]
79
66
  },
80
67
  {
81
- "name": "Appscms feature",
82
- "description": "Appscms feature layout with new design",
83
- "color": "#1A2EE7",
84
- "icon": "/assets/images/digipaint.svg",
85
- "url": "/appscms-feature"
86
- }
87
- ],
88
- "featureCategories": [
89
- {
90
- "category": "All Tools",
68
+ "category": "Calculators",
91
69
  "type": "tab",
92
- "features": []
70
+ "active": false,
71
+ "display": "none",
72
+ "features": [
73
+ {
74
+ "name": "Calculators",
75
+ "description": "Appscms feature layout with new design",
76
+ "color": "#1A2EE7",
77
+ "icon": "/assets/images/digipaint.svg",
78
+ "url": "/appscms-feature"
79
+ },
80
+ {
81
+ "name": "Calculators",
82
+ "description": "Appscms feature layout with new design",
83
+ "color": "#1A2EE7",
84
+ "icon": "/assets/images/digipaint.svg",
85
+ "url": "/appscms-feature"
86
+ },
87
+ {
88
+ "name": "Calculators",
89
+ "description": "Appscms feature layout with new design",
90
+ "color": "#1A2EE7",
91
+ "icon": "/assets/images/digipaint.svg",
92
+ "url": "/appscms-feature"
93
+ },
94
+ {
95
+ "name": "Calculators",
96
+ "description": "Appscms feature layout with new design",
97
+ "color": "#1A2EE7",
98
+ "icon": "/assets/images/digipaint.svg",
99
+ "url": "/appscms-feature"
100
+ }
101
+ ]
93
102
  },
94
103
  {
95
104
  "category": "Calculators",
@@ -1,12 +1,13 @@
1
+ {%- if page.lang == 'en' -%}
1
2
  <style>
2
3
  .toolfilter svg {
3
4
  height: 20px;
4
5
  width: 20px;
5
6
  }
6
- .filter__category svg {
7
- height: 21px;
8
- width: 21px;
7
+ .inverted {
8
+ filter: invert(1);
9
9
  }
10
+
10
11
  .toolfilters {
11
12
  width: fit-content;
12
13
  min-width: 500px;
@@ -38,263 +39,80 @@
38
39
  background-color: var(--primary-color);
39
40
  color: #ffffff;
40
41
  }
41
- .filter__category:hover svg {
42
+ .filter__category:hover img {
42
43
  filter: invert(1);
43
44
  }
45
+ .filter__category img {
46
+ height: 21px;
47
+ width: 21px;
48
+ }
49
+ .filter__category_active {
50
+ background-color: var(--primary-color);
51
+ color: #fff;
52
+ }
44
53
  </style>
45
54
  <div class="container">
46
55
  <div class="row justify-content-center">
47
56
  <div class="col-lg-9 col-md-12 col-sm-12 pt-sm-3">
48
57
  <div class="toolfilters-wrapper">
49
- <div class="toolfilters">
50
- {%- for item in pageData.featureCategories -%} {%- if item.link -%}
58
+ <div id="toolfilters" class="toolfilters">
59
+ {%- for item in pageData.features -%} {%- if item.link -%}
51
60
  <a
52
61
  href="{{item.link}}"
53
- class="filter__category"
54
- data-tools-block-type="1"
62
+ class="filter__category{% if item.active %} filter__category_active{% endif %}"
55
63
  >
56
- <svg
57
- viewBox="0 0 48 48"
58
- fill="none"
59
- xmlns="http://www.w3.org/2000/svg"
60
- stroke="#ffffff"
61
- >
62
- <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
63
- <g
64
- id="SVGRepo_tracerCarrier"
65
- stroke-linecap="round"
66
- stroke-linejoin="round"
67
- ></g>
68
- <g id="SVGRepo_iconCarrier">
69
- <rect
70
- width="48"
71
- height="48"
72
- fill="white"
73
- fill-opacity="0.01"
74
- ></rect>
75
- <rect
76
- x="4"
77
- y="4"
78
- width="16"
79
- height="16"
80
- rx="2"
81
- fill="#525658"
82
- stroke="#525658"
83
- stroke-width="4"
84
- stroke-linejoin="round"
85
- ></rect>
86
- <rect
87
- x="4"
88
- y="28"
89
- width="16"
90
- height="16"
91
- rx="2"
92
- fill="#525658"
93
- stroke="#525658"
94
- stroke-width="4"
95
- stroke-linejoin="round"
96
- ></rect>
97
- <rect
98
- x="28"
99
- y="4"
100
- width="16"
101
- height="16"
102
- rx="2"
103
- fill="#525658"
104
- stroke="#525658"
105
- stroke-width="4"
106
- stroke-linejoin="round"
107
- ></rect>
108
- <path
109
- d="M28 28H44"
110
- stroke="#525658"
111
- stroke-width="4"
112
- stroke-linecap="round"
113
- stroke-linejoin="round"
114
- ></path>
115
- <path
116
- d="M36 36H44"
117
- stroke="#525658"
118
- stroke-width="4"
119
- stroke-linecap="round"
120
- stroke-linejoin="round"
121
- ></path>
122
- <path
123
- d="M28 44H44"
124
- stroke="#525658"
125
- stroke-width="4"
126
- stroke-linecap="round"
127
- stroke-linejoin="round"
128
- ></path>
129
- </g>
130
- </svg>
131
-
64
+ <img
65
+ src="/assets/images/menu.svg"
66
+ alt=""
67
+ style="filter: invert(1)"
68
+ />
132
69
  <span class="filter__name">{{item.category}}</span>
133
70
  </a>
134
71
  {%- else -%}
135
- <div class="filter__category" data-tools-block-type="1">
136
- <svg
137
- viewBox="0 0 48 48"
138
- fill="none"
139
- xmlns="http://www.w3.org/2000/svg"
140
- stroke="#ffffff"
141
- >
142
- <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
143
- <g
144
- id="SVGRepo_tracerCarrier"
145
- stroke-linecap="round"
146
- stroke-linejoin="round"
147
- ></g>
148
- <g id="SVGRepo_iconCarrier">
149
- <rect
150
- width="48"
151
- height="48"
152
- fill="white"
153
- fill-opacity="0.01"
154
- ></rect>
155
- <rect
156
- x="4"
157
- y="4"
158
- width="16"
159
- height="16"
160
- rx="2"
161
- fill="#525658"
162
- stroke="#525658"
163
- stroke-width="4"
164
- stroke-linejoin="round"
165
- ></rect>
166
- <rect
167
- x="4"
168
- y="28"
169
- width="16"
170
- height="16"
171
- rx="2"
172
- fill="#525658"
173
- stroke="#525658"
174
- stroke-width="4"
175
- stroke-linejoin="round"
176
- ></rect>
177
- <rect
178
- x="28"
179
- y="4"
180
- width="16"
181
- height="16"
182
- rx="2"
183
- fill="#525658"
184
- stroke="#525658"
185
- stroke-width="4"
186
- stroke-linejoin="round"
187
- ></rect>
188
- <path
189
- d="M28 28H44"
190
- stroke="#525658"
191
- stroke-width="4"
192
- stroke-linecap="round"
193
- stroke-linejoin="round"
194
- ></path>
195
- <path
196
- d="M36 36H44"
197
- stroke="#525658"
198
- stroke-width="4"
199
- stroke-linecap="round"
200
- stroke-linejoin="round"
201
- ></path>
202
- <path
203
- d="M28 44H44"
204
- stroke="#525658"
205
- stroke-width="4"
206
- stroke-linecap="round"
207
- stroke-linejoin="round"
208
- ></path>
209
- </g>
210
- </svg>
211
-
72
+ <div
73
+ data-category-name="{{item.category}}"
74
+ class="filter__category{% if item.active %} filter__category_active{% endif %}"
75
+ >
76
+ <img
77
+ src="/assets/images/menu.svg"
78
+ alt=""
79
+ style="filter: invert(1)"
80
+ />
212
81
  <span class="filter__name">{{item.category}}</span>
213
82
  </div>
214
- {%- endif -%}
215
-
216
- <div class="filter__category" data-tools-block-type="1">
217
- <svg
218
- viewBox="0 0 48 48"
219
- fill="none"
220
- xmlns="http://www.w3.org/2000/svg"
221
- stroke="#ffffff"
222
- >
223
- <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
224
- <g
225
- id="SVGRepo_tracerCarrier"
226
- stroke-linecap="round"
227
- stroke-linejoin="round"
228
- ></g>
229
- <g id="SVGRepo_iconCarrier">
230
- <rect
231
- width="48"
232
- height="48"
233
- fill="white"
234
- fill-opacity="0.01"
235
- ></rect>
236
- <rect
237
- x="4"
238
- y="4"
239
- width="16"
240
- height="16"
241
- rx="2"
242
- fill="#525658"
243
- stroke="#525658"
244
- stroke-width="4"
245
- stroke-linejoin="round"
246
- ></rect>
247
- <rect
248
- x="4"
249
- y="28"
250
- width="16"
251
- height="16"
252
- rx="2"
253
- fill="#525658"
254
- stroke="#525658"
255
- stroke-width="4"
256
- stroke-linejoin="round"
257
- ></rect>
258
- <rect
259
- x="28"
260
- y="4"
261
- width="16"
262
- height="16"
263
- rx="2"
264
- fill="#525658"
265
- stroke="#525658"
266
- stroke-width="4"
267
- stroke-linejoin="round"
268
- ></rect>
269
- <path
270
- d="M28 28H44"
271
- stroke="#525658"
272
- stroke-width="4"
273
- stroke-linecap="round"
274
- stroke-linejoin="round"
275
- ></path>
276
- <path
277
- d="M36 36H44"
278
- stroke="#525658"
279
- stroke-width="4"
280
- stroke-linecap="round"
281
- stroke-linejoin="round"
282
- ></path>
283
- <path
284
- d="M28 44H44"
285
- stroke="#525658"
286
- stroke-width="4"
287
- stroke-linecap="round"
288
- stroke-linejoin="round"
289
- ></path>
290
- </g>
291
- </svg>
292
-
293
- <span class="filter__name">Pdf Tools</span>
294
- </div>
295
- {%- endfor -%}
83
+ {%- endif -%} {%- endfor -%}
296
84
  </div>
297
85
  </div>
298
86
  </div>
299
87
  </div>
300
88
  </div>
89
+
90
+ <script>
91
+ const categories = document.querySelectorAll(".filter__category");
92
+
93
+ categories.forEach((item) => {
94
+ item.addEventListener("click", () => {
95
+ // Remove 'filter__category_active' class from all categories
96
+ categories.forEach((i) => {
97
+ i.classList.remove("filter__category_active");
98
+ });
99
+
100
+ // Add 'filter__category_active' class to the clicked category
101
+ item.classList.add("filter__category_active");
102
+
103
+ // Hide all elements with a 'data-category' attribute
104
+ document.querySelectorAll("[data-category]").forEach((category) => {
105
+ category.style.display = "none";
106
+ });
107
+
108
+ // Show elements that match the clicked category's data-category-name
109
+ const elements = document.querySelectorAll(
110
+ `[data-category="${item.dataset.categoryName}"]`
111
+ );
112
+ elements.forEach((element) => {
113
+ element.style.display = "block";
114
+ });
115
+ });
116
+ });
117
+ </script>
118
+ {%- endif -%}
@@ -2,21 +2,28 @@
2
2
  <div class="row">
3
3
  <div class="col-md-10 mx-auto">
4
4
  <div class="row" id="appscms-tools-section-row">
5
- {% for item in pageData.features %}
6
- <div class="col-xl-4 col-lg-6 col-md-6 col-3 appscms-tool-container">
5
+ {% for product in pageData.features %} {%- for item in product.features
6
+ -%}
7
+ <div
8
+ class="col-xl-4 col-lg-6 col-md-6 col-3 appscms-tool-container"
9
+ data-category="{{product.category}}"
10
+ style="display: {{product.display}};"
11
+ >
7
12
  <a href="{{item.url}}">
8
13
  <div class="appscms-tool">
9
14
  <div class="tool-top" style="background: {{item.color}};">
10
15
  <div class="tool-img">
11
16
  <img crossorigin="anonymous" src="{{item.icon}}" alt="img" />
12
17
  </div>
13
- <div class="tool-text">{{item.description | truncate:67,'..'}}</div>
18
+ <div class="tool-text">
19
+ {{item.description | truncate:67,'..'}}
20
+ </div>
14
21
  </div>
15
22
  <div class="tool-heading">{{item.name | truncate: 33, '..'}}</div>
16
23
  </div>
17
24
  </a>
18
25
  </div>
19
- {% endfor %}
26
+ {%- endfor -%} {% endfor %}
20
27
  </div>
21
28
  </div>
22
29
  </div>
@@ -51,7 +51,8 @@
51
51
  color: #222325;
52
52
  }
53
53
  .searchbarResults{
54
-
54
+ overflow: scroll;
55
+ height: 60vh;
55
56
  background-color: #fff;
56
57
  border: 1px solid #e4e5e7;
57
58
  border-radius: 6px;
@@ -82,28 +83,31 @@
82
83
  <span> {{siteData.navbarBrandText}}
83
84
  {%- else -%}
84
85
  {%- endif -%}
85
- {%- if site.navigationSearch -%}
86
- <div class="nav-search">
87
- <div class="search-container">
88
- <input type="text" class="search-input" placeholder="Search Tools">
89
-
90
- <button class="search-button">
91
- <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>
92
- </button>
93
- </div>
94
-
95
- <div id="results" class="searchbarResults"></div>
96
- </div>
97
- {%- 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>
98
96
 
97
+ <div id="results" class="searchbarResults"></div>
98
+ </div>
99
+ {%- endif -%}
99
100
 
100
- {%- if siteData.navItems -%}
101
- <div class="appscms-navbar-nav-links">
102
- {%- for item in siteData.navItems -%}
103
- <a class="appscms-nav-link" href="{{item.url}}">{{item.name}}</a>
104
- {%- endfor -%}
101
+
102
+ {%- if siteData.navItems -%}
103
+ <div class="appscms-navbar-nav-links">
104
+ {%- for item in siteData.navItems -%}
105
+ <a class="appscms-nav-link" href="{{item.url}}">{{item.name}}</a>
106
+ {%- endfor -%}
107
+ </div>
108
+ {%- endif -%}
105
109
  </div>
106
- {%- endif -%}
110
+
107
111
  <div id="hamburger" data-open="false" class="hamburger">
108
112
  <svg
109
113
  style="font-size:25px"