@gudhub/ssg-web-components-library 1.0.80 → 1.0.81

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.
Files changed (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/ai-image-generator/ai-image-compare/ai-image-compare.js +9 -1
  3. package/src/components/ai-image-generator/ai-image-compare/ai-image-compare.scss +0 -4
  4. package/src/components/ai-image-generator/ai-image-generator.scss +12 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gudhub/ssg-web-components-library",
3
- "version": "1.0.80",
3
+ "version": "1.0.81",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/src/components/ai-image-generator/ai-image-compare/ai-image-compare.js CHANGED
@@ -24,7 +24,15 @@ class AiImageCompare extends GHComponent {
24
24
  return;
25
25
  }
26
26
 
27
- new window.ImageCompare(element).mount();
27
+ const options = {
28
+ smoothing: false,
29
+ controlColor: "#73c781",
30
+ controlShadow: false,
31
+ addCircle: true,
32
+ addCircleBlur: true,
33
+ hoverStart: true
34
+ }
35
+ new window.ImageCompare(element, options).mount();
28
36
  }
29
37
 
30
38
  addScripts() {
package/src/components/ai-image-generator/ai-image-compare/ai-image-compare.scss CHANGED
@@ -5,17 +5,13 @@ ai-image-compare {
5
5
 
6
6
  #image-compare {
7
7
  height: 100%;
8
- max-height: 616px;
9
8
  max-width: 920px;
10
9
  }
11
10
 
12
11
  &.generated {
13
12
  #image-compare {
14
13
  height: 100%;
15
- max-height: 616px;
16
14
  max-width: 1060px;
17
15
  }
18
16
  }
19
-
20
-
21
17
  }
package/src/components/ai-image-generator/ai-image-generator.scss CHANGED
@@ -14,7 +14,7 @@ ai-image-generator {
14
14
  .images-wrapper {
15
15
  position: relative;
16
16
  max-width: 1058px;
17
- max-height: 566px;
17
+ // max-height: 566px;
18
18
  width: 100%;
19
19
  height: 100%;
20
20
  overflow: hidden;
@@ -47,6 +47,7 @@ ai-image-generator {
47
47
  cursor: pointer;
48
48
  }
49
49
  }
50
+
50
51
  button-component div.btn {
51
52
  bottom: 15px;
52
53
  left: 50%;
@@ -76,7 +77,6 @@ ai-image-generator {
76
77
  max-width: 580px;
77
78
  width: 100%;
78
79
 
79
-
80
80
  textarea {
81
81
  border-radius: 6px;
82
82
  border: 1px solid #DADADA;
@@ -162,10 +162,12 @@ ai-image-generator {
162
162
  top: 50%;
163
163
  left: 50%;
164
164
  transform: translate(-50%, -50%);
165
-
166
- z-index: 100;
167
- width: 140px;
168
- height: 140px;
165
+ height: 100%;
166
+ width: 100%;
167
+ display: grid;
168
+ place-items: center;
169
+ background: rgba(255, 255, 255, 0.7);
170
+ z-index: 10;
169
171
 
170
172
  .spinner-circle {
171
173
  width: 100%;
@@ -174,11 +176,11 @@ ai-image-generator {
174
176
  border-top: 20px solid #6CBE02;
175
177
  border-radius: 50%;
176
178
  animation: spin 1s linear infinite;
179
+ width: 140px;
180
+ height: 140px;
177
181
  }
178
182
  }
179
183
 
180
-
181
-
182
184
  .hidden {
183
185
  display: none;
184
186
  }
@@ -205,6 +207,7 @@ ai-image-generator {
205
207
  right: 5px;
206
208
  }
207
209
  }
210
+
208
211
  .actions-wrapper {
209
212
  flex-direction: column;
210
213
 
@@ -229,6 +232,7 @@ ai-image-generator {
229
232
  .loader {
230
233
  width: 70px;
231
234
  height: 70px;
235
+
232
236
  .spinner-circle {
233
237
  border: 8px solid #DADADA;
234
238
  border-top: 8px solid #6CBE02;