appscms-tools-theme 4.7.1 → 4.7.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 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"