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

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-content/ai-image-content.scss +27 -4
  3. package/src/components/ai-image-generator/ai-image-generator.html +1 -0
  4. package/src/components/ai-image-generator/ai-image-generator.scss +27 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gudhub/ssg-web-components-library",
3
- "version": "1.0.81",
3
+ "version": "1.0.82",
4
4
  "description": "",
5
5
  "main": "index.js",
6
6
  "type": "module",
package/src/components/ai-image-generator/ai-image-content/ai-image-content.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  ai-image-content {
2
2
  section {
3
- padding: 0;
3
+ padding: 0 !important;
4
4
  max-width: 622px;
5
5
  font-family: Roboto, sans-serif;
6
6
 
@@ -11,12 +11,14 @@ ai-image-content {
11
11
  line-height: 100%;
12
12
  color: #383838;
13
13
  }
14
+
14
15
  .subtitle {
15
16
  font-size: 24px;
16
17
  line-height: 140%;
17
18
  color: #545454;
18
19
  }
19
20
  }
21
+
20
22
  .bottom {
21
23
  display: flex;
22
24
  flex-direction: column;
@@ -42,16 +44,22 @@ ai-image-content {
42
44
  margin-bottom: 12px;
43
45
  transition: all 0.2s ease;
44
46
 
47
+ svg {
48
+ height: 24px;
49
+ width: 24px;
50
+ }
51
+
45
52
  &:hover {
46
53
  background-color: #fff;
47
54
  border-color: #6CBE02;
48
55
  color: #6CBE02;
49
56
 
50
- svg {
57
+ svg {
51
58
  path {
52
59
  stroke: #6CBE02;
53
60
  fill: #6CBE02;
54
61
  }
62
+
55
63
  path[stroke-linecap] {
56
64
  stroke: #6CBE02;
57
65
  fill: transparent;
@@ -59,6 +67,7 @@ ai-image-content {
59
67
  }
60
68
  }
61
69
  }
70
+
62
71
  .formats {
63
72
  font-size: 16px;
64
73
  font-weight: 300;
@@ -66,6 +75,7 @@ ai-image-content {
66
75
  color: #545454;
67
76
  margin-bottom: 20px;
68
77
  }
78
+
69
79
  .no-text {
70
80
  color: #6CBE02;
71
81
  text-transform: uppercase;
@@ -74,6 +84,7 @@ ai-image-content {
74
84
  }
75
85
  }
76
86
  }
87
+
77
88
  @media screen and (max-width: 768px) {
78
89
  ai-image-content section {
79
90
  .content {
@@ -82,27 +93,39 @@ ai-image-content {
82
93
  align-items: center;
83
94
  gap: 15px;
84
95
  }
96
+
85
97
  .top {
86
98
  h1 {
87
99
  font-size: 31px;
88
100
  }
101
+
89
102
  .subtitle {
90
103
  font-size: 18px;
91
104
  }
92
105
  }
106
+
93
107
  .bottom {
94
108
  width: 100%;
95
109
  max-width: 100%;
96
110
 
97
- & > p {
111
+ &>p {
98
112
  display: none;
99
113
  }
114
+
100
115
  button {
101
116
  display: flex;
102
117
  justify-content: center;
103
118
  width: 100%;
119
+
120
+ &.btn {
121
+ padding: 13px 32px;
122
+ }
123
+
124
+ span {
125
+ font-size: 16px;
126
+ }
104
127
  }
105
128
  }
106
129
  }
107
-
130
+
108
131
  }
package/src/components/ai-image-generator/ai-image-generator.html CHANGED
@@ -23,6 +23,7 @@
23
23
 
24
24
  <div class="actions-wrapper">
25
25
  <div class="input-wrapper">
26
+ <label for="textarea">${json.result.prompt}</label>
26
27
  <textarea name="textarea" id="prompt">House, grass, trees, flowerbeds</textarea>
27
28
  </div>
28
29
  <div class="flex-buttons">
package/src/components/ai-image-generator/ai-image-generator.scss CHANGED
@@ -14,9 +14,9 @@ ai-image-generator {
14
14
  .images-wrapper {
15
15
  position: relative;
16
16
  max-width: 1058px;
17
- // max-height: 566px;
18
17
  width: 100%;
19
18
  height: 100%;
19
+
20
20
  overflow: hidden;
21
21
 
22
22
  display: grid;
@@ -49,11 +49,12 @@ ai-image-generator {
49
49
  }
50
50
 
51
51
  button-component div.btn {
52
+ text-align: center;
53
+ text-transform: capitalize;
52
54
  bottom: 15px;
53
55
  left: 50%;
54
56
  transform: translateX(-50%);
55
57
  z-index: 10;
56
- text-transform: uppercase;
57
58
  border-color: #6CBE02;
58
59
  background-color: #6CBE02;
59
60
  color: #fff;
@@ -68,12 +69,11 @@ ai-image-generator {
68
69
  .actions-wrapper {
69
70
  display: flex;
70
71
  gap: 16px;
71
- align-items: center;
72
+ align-items: end;
72
73
  justify-content: center;
73
74
  width: 100%;
74
75
 
75
76
  .input-wrapper {
76
- height: 52px;
77
77
  max-width: 580px;
78
78
  width: 100%;
79
79
 
@@ -93,6 +93,7 @@ ai-image-generator {
93
93
  .flex-buttons {
94
94
  display: flex;
95
95
  gap: 16px;
96
+ margin-bottom: 5px;
96
97
 
97
98
  .btn {
98
99
  cursor: pointer;
@@ -192,12 +193,15 @@ ai-image-generator {
192
193
  }
193
194
  }
194
195
 
195
- @media (max-width: 1050px) {
196
+ @media screen and (max-width: 1050px) {
196
197
  ai-image-generator {
198
+ section {
199
+ padding-top: 15px;
200
+ }
197
201
  .flex-wrapper.start {
198
202
  align-items: self-start;
199
203
  flex-direction: column-reverse;
200
- gap: 32px;
204
+ gap: 16px;
201
205
  }
202
206
 
203
207
  .result {
@@ -210,6 +214,7 @@ ai-image-generator {
210
214
 
211
215
  .actions-wrapper {
212
216
  flex-direction: column;
217
+ align-items: center;
213
218
 
214
219
  .flex-buttons {
215
220
  gap: 16px;
@@ -220,6 +225,7 @@ ai-image-generator {
220
225
  justify-content: center;
221
226
  flex: 1;
222
227
  padding: 14px;
228
+ font-size: 16px;
223
229
  }
224
230
  }
225
231
  }
@@ -230,10 +236,9 @@ ai-image-generator {
230
236
  }
231
237
 
232
238
  .loader {
233
- width: 70px;
234
- height: 70px;
235
-
236
239
  .spinner-circle {
240
+ width: 70px;
241
+ height: 70px;
237
242
  border: 8px solid #DADADA;
238
243
  border-top: 8px solid #6CBE02;
239
244
  }
@@ -244,4 +249,16 @@ ai-image-generator {
244
249
  font-size: 16px;
245
250
  }
246
251
  }
247
- }
252
+ }
253
+ @media screen and (max-width: 600px){
254
+ ai-image-generator .result .images-wrapper button-component div.btn {
255
+ width: 80%;
256
+ }
257
+
258
+ ai-image-generator .result .images-wrapper {
259
+ .icv__img.icv__img-a,
260
+ .icv__img.icv__img-b {
261
+ max-height: 50vh;
262
+ }
263
+ }
264
+ }