appscms-tools-theme 3.9.6 → 3.9.7

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.
@@ -2,89 +2,98 @@
2
2
  layout: feature
3
3
  ---
4
4
 
5
- {% assign file = page.fileName %}
6
- {% assign lang = page.lang %}
7
- {% assign folder = page.folderName %}
8
- {% assign calculatorData= site.data[folder][lang][file].calculatorData %}
5
+ {% assign file = page.fileName %} {% assign lang = page.lang %} {% assign folder
6
+ = page.folderName %} {% assign calculatorData=
7
+ site.data[folder][lang][file].calculatorData %}
9
8
 
10
9
  <div class="container">
11
- <div class="calculator-workspace">
10
+ <div class="row">
11
+ <div class="col-md-7 mx-auto">
12
+ <div class="calculator-workspace">
12
13
  <div class="row w-100 mx-auto">
13
- <form id="calculator-form" class="w-100">
14
- {%- for item in calculatorData.calculatorRow -%}
15
- <div class="row" id="calculator-row-{{forloop.index}}">
16
- {%- if item.labelName -%}
17
- <div class="col-md-12">
18
- <div class="d-flex">
19
- <label for="{{item.labelId}}">{{item.labelName}}</label>
20
- {%- if item.toolTip -%} <span class="calculator-tooltip" data-toggle="tooltip"
21
- data-placement="top" title="{{item.toolTip}}"><i
22
- class="fas fa-info-circle"></i></span>{%-
23
- endif -%}
24
- </div>
25
- </div>
26
- {%- endif -%}
27
- {%- if item.dropDown or item.inputBox or item.dateTimePicker -%}
28
- <div class="col-md-12">
29
- <div class="d-flex calculator-inputs">
30
- {%- if item.inputBox -%}
31
- {%- assign inputBoxType = "number" -%}
32
- {%- if item.inputType -%}
33
- {%- assign inputBoxType = item.inputType -%}
34
- {%- endif -%}
35
- <input class="form-control" type="{{inputBoxType}}" name="{{item.inputName}}"
36
- id="{{item.inputId}}">
37
- {%- endif -%}
38
- {%- if item.dropDown -%}
39
- <select class="form-control" name="{{item.dropDownName}}" id="{{item.dropDownId}}"></select>
40
- {%- endif -%}
41
- {%- if item.dateTimePicker -%}
42
- <input class="form-control" type="date" name="{{item.dateTimePicker}}"
43
- id="{{item.dateTimePickerId}}">
44
- {%- endif -%}
45
- {%- if item.unit -%}
46
- <div class="unit">{{item.unit}}</div>
47
- {%- endif -%}
48
-
49
- </div>
50
-
51
- </div>
52
- {%- endif -%}
53
-
54
-
55
- </div>
56
- {%- endfor -%}
57
- <div id="dynamic-section"></div>
58
- </form>
59
-
60
- </div>
61
- <div class="row w-100 mx-auto">
62
- {%- if calculatorData.ButtonValue -%}
63
- <div class="col-12 mt-4 px-0">
64
- <div class="d-flex justify-content-end">
65
- <button class="submit-button" style="background-color:{{site.data[folder][lang][file].color}} ;"
66
- type="{{calculatorData.ButtonType}}"
67
- id="{{calculatorData.ButtonId}}">{{calculatorData.ButtonValue}}</button>
14
+ <form id="calculator-form" class="w-100">
15
+ {%- for item in calculatorData.calculatorRow -%}
16
+ <div class="row" id="calculator-row-{{forloop.index}}">
17
+ {%- if item.labelName -%}
18
+ <div class="col-md-12">
19
+ <div class="d-flex">
20
+ <label for="{{item.labelId}}">{{item.labelName}}</label>
21
+ {%- if item.toolTip -%}
22
+ <span
23
+ class="calculator-tooltip"
24
+ data-toggle="tooltip"
25
+ data-placement="top"
26
+ title="{{item.toolTip}}"
27
+ ><i class="fas fa-info-circle"></i></span
28
+ >{%- endif -%}
68
29
  </div>
69
-
70
- </div>
71
- {%- endif -%}
72
- {%- if calculatorData.resultDiv -%}
73
- <div class="col-12 mt-3">
74
- <div class="result-section" id="result-section">
75
-
30
+ </div>
31
+ {%- endif -%} {%- if item.dropDown or item.inputBox or
32
+ item.dateTimePicker -%}
33
+ <div class="col-md-12">
34
+ <div class="d-flex calculator-inputs">
35
+ {%- if item.inputBox -%} {%- assign inputBoxType = "number"
36
+ -%} {%- if item.inputType -%} {%- assign inputBoxType =
37
+ item.inputType -%} {%- endif -%}
38
+ <input
39
+ class="form-control"
40
+ type="{{inputBoxType}}"
41
+ name="{{item.inputName}}"
42
+ id="{{item.inputId}}"
43
+ />
44
+ {%- endif -%} {%- if item.dropDown -%}
45
+ <select
46
+ class="form-control"
47
+ name="{{item.dropDownName}}"
48
+ id="{{item.dropDownId}}"
49
+ ></select>
50
+ {%- endif -%} {%- if item.dateTimePicker -%}
51
+ <input
52
+ class="form-control"
53
+ type="date"
54
+ name="{{item.dateTimePicker}}"
55
+ id="{{item.dateTimePickerId}}"
56
+ />
57
+ {%- endif -%} {%- if item.unit -%}
58
+ <div class="unit">{{item.unit}}</div>
59
+ {%- endif -%}
76
60
  </div>
61
+ </div>
62
+ {%- endif -%}
77
63
  </div>
78
- {%- endif -%}
64
+ {%- endfor -%}
65
+ <div id="dynamic-section"></div>
66
+ </form>
79
67
  </div>
80
-
81
- </div>
82
- {%- if calculatorData.calculatorWarning-%}
83
- <div class="warning-alert-box mt-4">
84
- <div class="alert alert-danger" role="alert">
85
- {{ calculatorData.calculatorWarning }}
68
+ <div class="row w-100 mx-auto">
69
+ {%- if calculatorData.ButtonValue -%}
70
+ <div class="col-12 mt-4 px-0">
71
+ <div class="d-flex justify-content-end">
72
+ <button
73
+ class="submit-button"
74
+ style="background:{{site.data[folder][lang][file].color}} ;"
75
+ type="{{calculatorData.ButtonType}}"
76
+ id="{{calculatorData.ButtonId}}"
77
+ >
78
+ {{calculatorData.ButtonValue}}
79
+ </button>
80
+ </div>
81
+ </div>
82
+ {%- endif -%} {%- if calculatorData.resultDiv -%}
83
+ <div class="col-12 mt-3">
84
+ <div class="result-section" id="result-section"></div>
85
+ </div>
86
+ {%- endif -%}
86
87
  </div>
88
+ </div>
87
89
  </div>
88
- {%- endif -%}
90
+ </div>
89
91
 
90
- </div>
92
+ {%- if calculatorData.calculatorWarning-%}
93
+ <div class="warning-alert-box mt-4">
94
+ <div class="alert alert-danger" role="alert">
95
+ {{ calculatorData.calculatorWarning }}
96
+ </div>
97
+ </div>
98
+ {%- endif -%}
99
+ </div>
@@ -79,7 +79,7 @@
79
79
  <div
80
80
  id="Inputbox"
81
81
  class="boxes"
82
- style="background-color: {{boxColor}};"
82
+ style="background: {{boxColor}};"
83
83
  >
84
84
  <img
85
85
  height="21px"
@@ -97,10 +97,7 @@
97
97
  />
98
98
  <span class="ml-3">CHOOSE FILE</span>
99
99
  </div>
100
- <div
101
- class="file-pick-dropdown"
102
- style="background-color:{{boxColor}}"
103
- >
100
+ <div class="file-pick-dropdown" style="background:{{boxColor}}">
104
101
  <i class="fas fa-angle-down arrow-sign"></i>
105
102
  <div class="file-picker-dropdown" style="display: none">
106
103
  <button id="filepicker">
@@ -184,7 +181,7 @@
184
181
  <div class="d-flex align-items-center">
185
182
  <button
186
183
  id="download-button"
187
- style="background-color: {{pageData.color}};"
184
+ style="background: {{pageData.color}};"
188
185
  >
189
186
  <svg
190
187
  xmlns="http://www.w3.org/2000/svg"
@@ -124,7 +124,7 @@
124
124
  <div
125
125
  id="Inputbox"
126
126
  class="boxes"
127
- style="background-color: {{boxColor}};"
127
+ style="background: {{boxColor}};"
128
128
  >
129
129
  <img
130
130
  height="21px"
@@ -142,10 +142,7 @@
142
142
  />
143
143
  <span class="ml-3">CHOOSE FILE</span>
144
144
  </div>
145
- <div
146
- class="file-pick-dropdown"
147
- style="background-color:{{boxColor}}"
148
- >
145
+ <div class="file-pick-dropdown" style="background:{{boxColor}}">
149
146
  <i class="fas fa-angle-down arrow-sign"></i>
150
147
  <div class="file-picker-dropdown" style="display: none">
151
148
  <button id="filepicker">
data/_layouts/frame.html CHANGED
@@ -156,7 +156,7 @@ layout: feature
156
156
  <div class="crop-image-modal-container">
157
157
  <div class="row w-100">
158
158
  <div class="crop-image-modal col-lg-6 col-md-8 mx-auto">
159
- <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
159
+ <div class="crop-image-modal-header" style="background:{{fileData.color}} ;">
160
160
  <div>Select an area you would like to use</div>
161
161
  <div>
162
162
  <button onclick="closeModal()">
@@ -177,7 +177,7 @@ layout: feature
177
177
  <div class="example-images-modal-container">
178
178
  <div class="row w-100">
179
179
  <div class="example-images-modal col-lg-6 col-md-8 mx-auto">
180
- <div class="crop-image-modal-header" style="background-color:{{fileData.color}} ;">
180
+ <div class="crop-image-modal-header" style="background:{{fileData.color}} ;">
181
181
  <div>Examples</div>
182
182
  <div>
183
183
  <button onclick="closeExamplesModal()">
@@ -46,7 +46,7 @@ layout: feature
46
46
  <div
47
47
  id="Inputbox"
48
48
  class="boxes"
49
- style="background-color: {{pageData.color}}; color: #fff;"
49
+ style="background: {{pageData.color}}; color: #fff;"
50
50
  >
51
51
  <img
52
52
  height="22px"
@@ -67,7 +67,7 @@ layout: feature
67
67
  </div>
68
68
  <div
69
69
  class="file-pick-dropdown"
70
- style="background-color: {{pageData.color}}; color: #fff;"
70
+ style="background: {{pageData.color}}; color: #fff;"
71
71
  >
72
72
  <i class="fas fa-angle-down arrow-sign"></i>
73
73
  <div class="file-picker-dropdown" style="display: none">
@@ -112,7 +112,7 @@ layout: feature
112
112
  </div>
113
113
  </div>
114
114
  {%- endif -%} {%- else -%} {%- if page.removeBox != true -%}
115
- <div class="custom-box" style="background-color:{{pageData.color}};">
115
+ <div class="custom-box" style="background:{{pageData.color}};">
116
116
  <div class="inner-box">
117
117
  <div style="display: none" id="file-loader">
118
118
  <img
@@ -253,7 +253,7 @@ layout: feature
253
253
  <div class="d-flex align-items-center">
254
254
  <button
255
255
  id="download-button"
256
- style="background-color: {{pageData.color}};"
256
+ style="background: {{pageData.color}};"
257
257
  >
258
258
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
259
259
  <path
@@ -194,6 +194,10 @@ body {
194
194
  }
195
195
 
196
196
  @media (max-width: 768px) {
197
+ .close-nav-ham {
198
+ display: flex !important;
199
+ justify-content: end;
200
+ }
197
201
  .hamburger {
198
202
  display: block;
199
203
  cursor: pointer;
@@ -223,7 +227,6 @@ body {
223
227
  flex-direction: column;
224
228
  gap: 0px;
225
229
  overflow-y: scroll;
226
- margin-top: 3rem;
227
230
  }
228
231
  .appscms-toolbar .appscms-toolbar-list .appscms-toolbar-list-item {
229
232
  align-items: flex-start;
@@ -494,7 +497,7 @@ body {
494
497
 
495
498
  .appscms-blog-cards img {
496
499
  border-radius: 10px 10px 0px 0px;
497
- height: 180px;
500
+ height: auto;
498
501
  }
499
502
  .card-body {
500
503
  display: flex;
@@ -603,12 +606,18 @@ body {
603
606
  font-size: 15px;
604
607
  margin-bottom: 0;
605
608
  }
609
+ .language-drop-down-item a:hover {
610
+ background: var(--secondary-color-3);
611
+ border-radius: 3px;
612
+ }
606
613
  .language-drop-down-item a {
614
+ text-decoration: none;
607
615
  display: flex;
608
616
  width: 100%;
609
617
  align-items: center;
610
618
  padding: 9px 9px;
611
619
  color: #1e1e1e;
620
+ font-size: 13px;
612
621
  border-bottom: 1px solid rgb(224, 224, 224);
613
622
  }
614
623
 
@@ -744,6 +753,7 @@ body {
744
753
  #appscms-tools-section-row {
745
754
  gap: 15px;
746
755
  justify-content: center;
756
+ margin-top: 35px;
747
757
  }
748
758
  .appscms-tool .tool-top .tool-img img {
749
759
  border-radius: 0;
@@ -1089,12 +1099,6 @@ body {
1089
1099
  .share-modal-social a i {
1090
1100
  font-size: 30px;
1091
1101
  }
1092
-
1093
- .authors-list {
1094
- border-top: 1px solid rgb(224, 224, 224);
1095
- margin-top: 100px;
1096
- padding: 100px;
1097
- }
1098
1102
  .authors-list a {
1099
1103
  color: var(--dark-gray);
1100
1104
  }
@@ -1237,3 +1241,17 @@ body {
1237
1241
  transform: scale(1.1);
1238
1242
  box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.12);
1239
1243
  }
1244
+ .no-result-found-msg {
1245
+ font-size: 20px;
1246
+ color: var(--black-light);
1247
+ text-align: center;
1248
+ width: 100%;
1249
+ font-weight: 500;
1250
+ }
1251
+ .close-nav-ham {
1252
+ display: none;
1253
+ }
1254
+ .active-lang {
1255
+ background: #f4f5ff;
1256
+ border-radius: 3px;
1257
+ }
@@ -1,5 +1,4 @@
1
1
  .calculator-workspace {
2
- width: 400px;
3
2
  background: #f6f6f6d2;
4
3
  position: relative;
5
4
  z-index: 1;
@@ -70,7 +70,8 @@ const featureList= document.querySelector('#appscms-tools-section-row')
70
70
  const renderFeatures=(query)=> {
71
71
  featureList.innerHTML = "";
72
72
  const filteredFeatures = features.filter(feature => feature.name.toLowerCase().includes(query.toLowerCase()));
73
- filteredFeatures.forEach(item => {
73
+ if (filteredFeatures.length>0) {
74
+ filteredFeatures.forEach(item => {
74
75
  const listItem = document.createElement("div");
75
76
  const classNames = "col-xl-4 col-lg-6 col-md-6 appscms-tool-container";
76
77
  let classList = classNames.split(" ");
@@ -80,7 +81,7 @@ const renderFeatures=(query)=> {
80
81
  listItem.innerHTML = `
81
82
  <a href="${item.url}">
82
83
  <div class="appscms-tool">
83
- <div class="tool-top" style="background-color: ${item.color};">
84
+ <div class="tool-top" style="background: ${item.color};">
84
85
  <div class="tool-img">
85
86
  <img crossorigin="anonymous" src="${item.icon}" alt="img" />
86
87
  </div>
@@ -92,6 +93,13 @@ const renderFeatures=(query)=> {
92
93
  `;
93
94
  featureList.appendChild(listItem);
94
95
  });
96
+ } else {
97
+ let msg=document.createElement('div')
98
+ msg.classList.add('no-result-found-msg')
99
+ msg.innerHTML="No search results found!"
100
+ featureList.appendChild(msg)
101
+ }
102
+
95
103
  }
96
104
  const searchInput= document.querySelector('#search-features')
97
105
  searchInput.addEventListener("input", function () {
@@ -20,10 +20,38 @@ if ("{{ site.safeui }}"==="true") {
20
20
  });
21
21
  }
22
22
  const hamburger = document.querySelector("#hamburger");
23
+ const closeNavHam = document.querySelector("#close-nav-ham");
23
24
  const appscmsToolbar = document.querySelector(".appscms-toolbar");
24
25
  const appscmsToolbarListItems = document.querySelectorAll(
25
26
  ".appscms-toolbar-list-item-span"
26
27
  );
28
+ closeNavHam.addEventListener("click", () => {
29
+ if (hamburger.dataset.open === "1") {
30
+ hamburger.dataset.open = "0";
31
+ appscmsToolbar.style.right = "-272px";
32
+ appscmsToolbar.style.display = "none";
33
+ hamburger.innerHTML = ` <svg
34
+ style="font-size:25px"
35
+ stroke="currentColor"
36
+ fill="currentColor"
37
+ stroke-width="0"
38
+ viewBox="0 0 512 512"
39
+ aria-hidden="true"
40
+ focusable="false"
41
+ height="50px"
42
+ width="1em"
43
+ xmlns="http://www.w3.org/2000/svg"
44
+ >
45
+ <path
46
+ fill="none"
47
+ stroke-linecap="round"
48
+ stroke-miterlimit="10"
49
+ stroke-width="48"
50
+ d="M88 152h336M88 256h336M88 360h336"
51
+ ></path>
52
+ </svg>`;
53
+ }
54
+ })
27
55
  hamburger.addEventListener("click", () => {
28
56
  if (hamburger.dataset.open === "1") {
29
57
  hamburger.dataset.open = "0";
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.9.6
4
+ version: 3.9.7
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-09-30 00:00:00.000000000 Z
11
+ date: 2023-10-12 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: jekyll
@@ -184,6 +184,8 @@ files:
184
184
  - _layouts/allAuthors.html
185
185
  - _layouts/appscms-about.html
186
186
  - _layouts/appscms-audio.html
187
+ - _layouts/appscms-author.html
188
+ - _layouts/appscms-authors.html
187
189
  - _layouts/appscms-blog.html
188
190
  - _layouts/appscms-calculator.html
189
191
  - _layouts/appscms-contact.html