@appscode/design-system 2.17.41 → 2.17.43
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.
- package/main.scss +1 -0
- package/package.json +1 -1
- package/vue-components/styles/components/_all.scss +1 -0
- package/vue-components/styles/components/_skeletons.scss +38 -0
- package/vue-components/v3/cards/DbCard.vue +804 -0
- package/vue-components/v3/skeleton/Skeleton.vue +5 -42
- package/vue-components/v3/table/ListTable.vue +240 -0
package/main.scss
CHANGED
|
@@ -34,5 +34,6 @@
|
|
|
34
34
|
@import "@/components/vue-components/styles/components/cards/cards-group";
|
|
35
35
|
@import "@/components/vue-components/styles/components/file-explore";
|
|
36
36
|
@import "@/components/vue-components/styles/components/ac-duration";
|
|
37
|
+
@import "@/components/vue-components/styles/components/skeletons";
|
|
37
38
|
|
|
38
39
|
// @import "@/components/vue-components/styles/theme/appscode.scss";
|
package/package.json
CHANGED
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
.skeletons {
|
|
2
|
+
display: flex;
|
|
3
|
+
flex-direction: column;
|
|
4
|
+
gap: 8px;
|
|
5
|
+
}
|
|
6
|
+
.skeleton {
|
|
7
|
+
background: linear-gradient(90deg, $secondary-95 25%, $secondary-90 50%, $secondary-95 75%);
|
|
8
|
+
background-size: 200% 100%;
|
|
9
|
+
animation: loading 2s infinite ease-in-out;
|
|
10
|
+
border-radius: 4px;
|
|
11
|
+
display: flex;
|
|
12
|
+
height: var(--height);
|
|
13
|
+
width: var(--width);
|
|
14
|
+
&.is-rounded {
|
|
15
|
+
border-radius: 50%;
|
|
16
|
+
}
|
|
17
|
+
&.is-dark {
|
|
18
|
+
background: linear-gradient(
|
|
19
|
+
90deg,
|
|
20
|
+
$secondary-30 0%,
|
|
21
|
+
$secondary-30 20%,
|
|
22
|
+
$secondary-10 50%,
|
|
23
|
+
$secondary-30 80%,
|
|
24
|
+
$secondary-30 100%
|
|
25
|
+
);
|
|
26
|
+
background-size: 200% 100%;
|
|
27
|
+
animation: loading 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@keyframes loading {
|
|
32
|
+
0% {
|
|
33
|
+
background-position: 200% 0;
|
|
34
|
+
}
|
|
35
|
+
100% {
|
|
36
|
+
background-position: -200% 0;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -0,0 +1,804 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="columns is-multiline is-mobile">
|
|
3
|
+
<!-- MariaDB Card -->
|
|
4
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
5
|
+
<div class="card db-card db-card-blue">
|
|
6
|
+
<div class="card-gradient"></div>
|
|
7
|
+
<div class="card-glow"></div>
|
|
8
|
+
|
|
9
|
+
<div class="card-content">
|
|
10
|
+
<div class="level is-mobile mb-4">
|
|
11
|
+
<div class="level-left">
|
|
12
|
+
<div class="icon-wrapper icon-blue">
|
|
13
|
+
<svg
|
|
14
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
15
|
+
width="24"
|
|
16
|
+
height="24"
|
|
17
|
+
viewBox="0 0 24 24"
|
|
18
|
+
fill="none"
|
|
19
|
+
stroke="currentColor"
|
|
20
|
+
stroke-width="2"
|
|
21
|
+
stroke-linecap="round"
|
|
22
|
+
stroke-linejoin="round"
|
|
23
|
+
>
|
|
24
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
25
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
26
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
27
|
+
</svg>
|
|
28
|
+
</div>
|
|
29
|
+
</div>
|
|
30
|
+
<div class="level-right">
|
|
31
|
+
<span class="status-badge">
|
|
32
|
+
<svg
|
|
33
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
34
|
+
width="16"
|
|
35
|
+
height="16"
|
|
36
|
+
viewBox="0 0 24 24"
|
|
37
|
+
fill="none"
|
|
38
|
+
stroke="currentColor"
|
|
39
|
+
stroke-width="2.5"
|
|
40
|
+
stroke-linecap="round"
|
|
41
|
+
stroke-linejoin="round"
|
|
42
|
+
>
|
|
43
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
44
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
45
|
+
</svg>
|
|
46
|
+
</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<div class="content">
|
|
51
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">MariaDB</h3>
|
|
52
|
+
|
|
53
|
+
<div class="mb-3">
|
|
54
|
+
<div class="level is-mobile mb-2">
|
|
55
|
+
<div class="level-left">
|
|
56
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
57
|
+
</div>
|
|
58
|
+
<div class="level-right">
|
|
59
|
+
<span class="tag is-small is-info is-light has-text-weight-bold">1/3</span>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<progress class="progress is-small progress-blue" value="33" max="100">33%</progress>
|
|
63
|
+
</div>
|
|
64
|
+
|
|
65
|
+
<div class="stats-section">
|
|
66
|
+
<div class="level is-mobile">
|
|
67
|
+
<div class="level-left">
|
|
68
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
69
|
+
</div>
|
|
70
|
+
<div class="level-right">
|
|
71
|
+
<span class="tag is-small has-text-weight-bold">1500m / 1500m</span>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
<div class="level is-mobile">
|
|
75
|
+
<div class="level-left">
|
|
76
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="level-right">
|
|
79
|
+
<span class="tag is-small has-text-weight-bold">6Gi / 6Gi</span>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
</div>
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</div>
|
|
87
|
+
|
|
88
|
+
<!-- MongoDB Card -->
|
|
89
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
90
|
+
<div class="card db-card db-card-green">
|
|
91
|
+
<div class="card-gradient"></div>
|
|
92
|
+
<div class="card-glow"></div>
|
|
93
|
+
|
|
94
|
+
<div class="card-content">
|
|
95
|
+
<div class="level is-mobile mb-4">
|
|
96
|
+
<div class="level-left">
|
|
97
|
+
<div class="icon-wrapper icon-green">
|
|
98
|
+
<svg
|
|
99
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
100
|
+
width="24"
|
|
101
|
+
height="24"
|
|
102
|
+
viewBox="0 0 24 24"
|
|
103
|
+
fill="none"
|
|
104
|
+
stroke="currentColor"
|
|
105
|
+
stroke-width="2"
|
|
106
|
+
stroke-linecap="round"
|
|
107
|
+
stroke-linejoin="round"
|
|
108
|
+
>
|
|
109
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
110
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
111
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
112
|
+
</svg>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
<div class="level-right">
|
|
116
|
+
<span class="status-badge">
|
|
117
|
+
<svg
|
|
118
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
119
|
+
width="16"
|
|
120
|
+
height="16"
|
|
121
|
+
viewBox="0 0 24 24"
|
|
122
|
+
fill="none"
|
|
123
|
+
stroke="currentColor"
|
|
124
|
+
stroke-width="2.5"
|
|
125
|
+
stroke-linecap="round"
|
|
126
|
+
stroke-linejoin="round"
|
|
127
|
+
>
|
|
128
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
129
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
130
|
+
</svg>
|
|
131
|
+
</span>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
|
|
135
|
+
<div class="content">
|
|
136
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">MongoDB</h3>
|
|
137
|
+
|
|
138
|
+
<div class="mb-3">
|
|
139
|
+
<div class="level is-mobile mb-2">
|
|
140
|
+
<div class="level-left">
|
|
141
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
142
|
+
</div>
|
|
143
|
+
<div class="level-right">
|
|
144
|
+
<span class="tag is-small is-success is-light has-text-weight-bold">1/3</span>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
<progress class="progress is-small progress-green" value="33" max="100">33%</progress>
|
|
148
|
+
</div>
|
|
149
|
+
|
|
150
|
+
<div class="stats-section">
|
|
151
|
+
<div class="level is-mobile">
|
|
152
|
+
<div class="level-left">
|
|
153
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="level-right">
|
|
156
|
+
<span class="tag is-small has-text-weight-bold">2700m / 2700m</span>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="level is-mobile">
|
|
160
|
+
<div class="level-left">
|
|
161
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="level-right">
|
|
164
|
+
<span class="tag is-small has-text-weight-bold">3Gi / 3Gi</span>
|
|
165
|
+
</div>
|
|
166
|
+
</div>
|
|
167
|
+
</div>
|
|
168
|
+
</div>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
</div>
|
|
172
|
+
|
|
173
|
+
<!-- MySQL Card -->
|
|
174
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
175
|
+
<div class="card db-card db-card-orange">
|
|
176
|
+
<div class="card-gradient"></div>
|
|
177
|
+
<div class="card-glow"></div>
|
|
178
|
+
|
|
179
|
+
<div class="card-content">
|
|
180
|
+
<div class="level is-mobile mb-4">
|
|
181
|
+
<div class="level-left">
|
|
182
|
+
<div class="icon-wrapper icon-orange">
|
|
183
|
+
<svg
|
|
184
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
185
|
+
width="24"
|
|
186
|
+
height="24"
|
|
187
|
+
viewBox="0 0 24 24"
|
|
188
|
+
fill="none"
|
|
189
|
+
stroke="currentColor"
|
|
190
|
+
stroke-width="2"
|
|
191
|
+
stroke-linecap="round"
|
|
192
|
+
stroke-linejoin="round"
|
|
193
|
+
>
|
|
194
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
195
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
196
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
197
|
+
</svg>
|
|
198
|
+
</div>
|
|
199
|
+
</div>
|
|
200
|
+
<div class="level-right">
|
|
201
|
+
<span class="status-badge">
|
|
202
|
+
<svg
|
|
203
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
204
|
+
width="16"
|
|
205
|
+
height="16"
|
|
206
|
+
viewBox="0 0 24 24"
|
|
207
|
+
fill="none"
|
|
208
|
+
stroke="currentColor"
|
|
209
|
+
stroke-width="2.5"
|
|
210
|
+
stroke-linecap="round"
|
|
211
|
+
stroke-linejoin="round"
|
|
212
|
+
>
|
|
213
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
214
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
215
|
+
</svg>
|
|
216
|
+
</span>
|
|
217
|
+
</div>
|
|
218
|
+
</div>
|
|
219
|
+
|
|
220
|
+
<div class="content">
|
|
221
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">MySQL</h3>
|
|
222
|
+
|
|
223
|
+
<div class="mb-3">
|
|
224
|
+
<div class="level is-mobile mb-2">
|
|
225
|
+
<div class="level-left">
|
|
226
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
227
|
+
</div>
|
|
228
|
+
<div class="level-right">
|
|
229
|
+
<span class="tag is-small is-warning is-light has-text-weight-bold">3/3</span>
|
|
230
|
+
</div>
|
|
231
|
+
</div>
|
|
232
|
+
<progress class="progress is-small progress-orange" value="100" max="100">100%</progress>
|
|
233
|
+
</div>
|
|
234
|
+
|
|
235
|
+
<div class="stats-section">
|
|
236
|
+
<div class="level is-mobile">
|
|
237
|
+
<div class="level-left">
|
|
238
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="level-right">
|
|
241
|
+
<span class="tag is-small has-text-weight-bold">3500m / 3500m</span>
|
|
242
|
+
</div>
|
|
243
|
+
</div>
|
|
244
|
+
<div class="level is-mobile">
|
|
245
|
+
<div class="level-left">
|
|
246
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
247
|
+
</div>
|
|
248
|
+
<div class="level-right">
|
|
249
|
+
<span class="tag is-small has-text-weight-bold">14Gi / 14Gi</span>
|
|
250
|
+
</div>
|
|
251
|
+
</div>
|
|
252
|
+
</div>
|
|
253
|
+
</div>
|
|
254
|
+
</div>
|
|
255
|
+
</div>
|
|
256
|
+
</div>
|
|
257
|
+
|
|
258
|
+
<!-- Postgres Card -->
|
|
259
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
260
|
+
<div class="card db-card db-card-cyan">
|
|
261
|
+
<div class="card-gradient"></div>
|
|
262
|
+
<div class="card-glow"></div>
|
|
263
|
+
|
|
264
|
+
<div class="card-content">
|
|
265
|
+
<div class="level is-mobile mb-4">
|
|
266
|
+
<div class="level-left">
|
|
267
|
+
<div class="icon-wrapper icon-cyan">
|
|
268
|
+
<svg
|
|
269
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
270
|
+
width="24"
|
|
271
|
+
height="24"
|
|
272
|
+
viewBox="0 0 24 24"
|
|
273
|
+
fill="none"
|
|
274
|
+
stroke="currentColor"
|
|
275
|
+
stroke-width="2"
|
|
276
|
+
stroke-linecap="round"
|
|
277
|
+
stroke-linejoin="round"
|
|
278
|
+
>
|
|
279
|
+
<ellipse cx="12" cy="5" rx="9" ry="3"></ellipse>
|
|
280
|
+
<path d="M3 5V19A9 3 0 0 0 21 19V5"></path>
|
|
281
|
+
<path d="M3 12A9 3 0 0 0 21 12"></path>
|
|
282
|
+
</svg>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="level-right">
|
|
286
|
+
<span class="status-badge">
|
|
287
|
+
<svg
|
|
288
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
289
|
+
width="16"
|
|
290
|
+
height="16"
|
|
291
|
+
viewBox="0 0 24 24"
|
|
292
|
+
fill="none"
|
|
293
|
+
stroke="currentColor"
|
|
294
|
+
stroke-width="2.5"
|
|
295
|
+
stroke-linecap="round"
|
|
296
|
+
stroke-linejoin="round"
|
|
297
|
+
>
|
|
298
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
299
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
300
|
+
</svg>
|
|
301
|
+
</span>
|
|
302
|
+
</div>
|
|
303
|
+
</div>
|
|
304
|
+
|
|
305
|
+
<div class="content">
|
|
306
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">Postgres</h3>
|
|
307
|
+
|
|
308
|
+
<div class="mb-3">
|
|
309
|
+
<div class="level is-mobile mb-2">
|
|
310
|
+
<div class="level-left">
|
|
311
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
312
|
+
</div>
|
|
313
|
+
<div class="level-right">
|
|
314
|
+
<span class="tag is-small is-link is-light has-text-weight-bold">1/3</span>
|
|
315
|
+
</div>
|
|
316
|
+
</div>
|
|
317
|
+
<progress class="progress is-small progress-cyan" value="33" max="100">33%</progress>
|
|
318
|
+
</div>
|
|
319
|
+
|
|
320
|
+
<div class="stats-section">
|
|
321
|
+
<div class="level is-mobile">
|
|
322
|
+
<div class="level-left">
|
|
323
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="level-right">
|
|
326
|
+
<span class="tag is-small has-text-weight-bold">1500m / 1500m</span>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
<div class="level is-mobile">
|
|
330
|
+
<div class="level-left">
|
|
331
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="level-right">
|
|
334
|
+
<span class="tag is-small has-text-weight-bold">3Gi / 3Gi</span>
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
</div>
|
|
341
|
+
</div>
|
|
342
|
+
|
|
343
|
+
<!-- Redis Card -->
|
|
344
|
+
<div class="column is-half-mobile is-one-third-tablet is-one-fifth-desktop">
|
|
345
|
+
<div class="card db-card db-card-red">
|
|
346
|
+
<div class="card-gradient"></div>
|
|
347
|
+
<div class="card-glow"></div>
|
|
348
|
+
|
|
349
|
+
<div class="card-content">
|
|
350
|
+
<div class="level is-mobile mb-4">
|
|
351
|
+
<div class="level-left">
|
|
352
|
+
<div class="icon-wrapper icon-red">
|
|
353
|
+
<svg
|
|
354
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
355
|
+
width="24"
|
|
356
|
+
height="24"
|
|
357
|
+
viewBox="0 0 24 24"
|
|
358
|
+
fill="none"
|
|
359
|
+
stroke="currentColor"
|
|
360
|
+
stroke-width="2"
|
|
361
|
+
stroke-linecap="round"
|
|
362
|
+
stroke-linejoin="round"
|
|
363
|
+
>
|
|
364
|
+
<rect width="20" height="8" x="2" y="2" rx="2" ry="2"></rect>
|
|
365
|
+
<rect width="20" height="8" x="2" y="14" rx="2" ry="2"></rect>
|
|
366
|
+
<line x1="6" x2="6.01" y1="6" y2="6"></line>
|
|
367
|
+
<line x1="6" x2="6.01" y1="18" y2="18"></line>
|
|
368
|
+
</svg>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="level-right">
|
|
372
|
+
<span class="status-badge">
|
|
373
|
+
<svg
|
|
374
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
375
|
+
width="16"
|
|
376
|
+
height="16"
|
|
377
|
+
viewBox="0 0 24 24"
|
|
378
|
+
fill="none"
|
|
379
|
+
stroke="currentColor"
|
|
380
|
+
stroke-width="2.5"
|
|
381
|
+
stroke-linecap="round"
|
|
382
|
+
stroke-linejoin="round"
|
|
383
|
+
>
|
|
384
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
385
|
+
<path d="m9 12 2 2 4-4"></path>
|
|
386
|
+
</svg>
|
|
387
|
+
</span>
|
|
388
|
+
</div>
|
|
389
|
+
</div>
|
|
390
|
+
|
|
391
|
+
<div class="content">
|
|
392
|
+
<h3 class="title is-5 mb-2 mt-8 db-title">Redis</h3>
|
|
393
|
+
|
|
394
|
+
<div class="mb-3">
|
|
395
|
+
<div class="level is-mobile mb-2">
|
|
396
|
+
<div class="level-left">
|
|
397
|
+
<span class="is-size-7 has-text-weight-semibold has-text-grey">Instances</span>
|
|
398
|
+
</div>
|
|
399
|
+
<div class="level-right">
|
|
400
|
+
<span class="tag is-small is-danger is-light has-text-weight-bold">2/3</span>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
<progress class="progress is-small progress-red" value="67" max="100">67%</progress>
|
|
404
|
+
</div>
|
|
405
|
+
|
|
406
|
+
<div class="stats-section">
|
|
407
|
+
<div class="level is-mobile">
|
|
408
|
+
<div class="level-left">
|
|
409
|
+
<span class="is-size-7 has-text-grey">Storage</span>
|
|
410
|
+
</div>
|
|
411
|
+
<div class="level-right">
|
|
412
|
+
<span class="tag is-small has-text-weight-bold">1750m / 1750m</span>
|
|
413
|
+
</div>
|
|
414
|
+
</div>
|
|
415
|
+
<div class="level is-mobile">
|
|
416
|
+
<div class="level-left">
|
|
417
|
+
<span class="is-size-7 has-text-grey">Memory</span>
|
|
418
|
+
</div>
|
|
419
|
+
<div class="level-right">
|
|
420
|
+
<span class="tag is-small has-text-weight-bold">3584Mi / 4Gi</span>
|
|
421
|
+
</div>
|
|
422
|
+
</div>
|
|
423
|
+
</div>
|
|
424
|
+
</div>
|
|
425
|
+
</div>
|
|
426
|
+
</div>
|
|
427
|
+
</div>
|
|
428
|
+
</div>
|
|
429
|
+
</template>
|
|
430
|
+
|
|
431
|
+
<script setup></script>
|
|
432
|
+
|
|
433
|
+
<style scoped>
|
|
434
|
+
/* Container */
|
|
435
|
+
.db-cards-container {
|
|
436
|
+
padding: 1rem;
|
|
437
|
+
gap: 1.5rem;
|
|
438
|
+
}
|
|
439
|
+
|
|
440
|
+
/* Base Card Styling */
|
|
441
|
+
.db-card {
|
|
442
|
+
position: relative;
|
|
443
|
+
overflow: hidden;
|
|
444
|
+
border-radius: 1rem;
|
|
445
|
+
cursor: pointer;
|
|
446
|
+
transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
|
|
447
|
+
/* box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); */
|
|
448
|
+
border: 1px solid rgba(0, 0, 0, 0.05);
|
|
449
|
+
}
|
|
450
|
+
|
|
451
|
+
.db-card:hover {
|
|
452
|
+
transform: translateY(-0.5rem);
|
|
453
|
+
/* box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); */
|
|
454
|
+
}
|
|
455
|
+
|
|
456
|
+
/* Gradient Background Overlays */
|
|
457
|
+
.card-gradient {
|
|
458
|
+
position: absolute;
|
|
459
|
+
inset: 0;
|
|
460
|
+
opacity: 0;
|
|
461
|
+
transition: opacity 0.5s ease;
|
|
462
|
+
border-radius: 1rem;
|
|
463
|
+
pointer-events: none;
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.db-card:hover .card-gradient {
|
|
467
|
+
opacity: 1;
|
|
468
|
+
}
|
|
469
|
+
|
|
470
|
+
/* Glow Effects */
|
|
471
|
+
.card-glow {
|
|
472
|
+
position: absolute;
|
|
473
|
+
inset: -2px;
|
|
474
|
+
opacity: 0;
|
|
475
|
+
filter: blur(20px);
|
|
476
|
+
transition: opacity 0.5s ease;
|
|
477
|
+
border-radius: 1rem;
|
|
478
|
+
pointer-events: none;
|
|
479
|
+
z-index: -1;
|
|
480
|
+
}
|
|
481
|
+
|
|
482
|
+
.db-card:hover .card-glow {
|
|
483
|
+
opacity: 0.2;
|
|
484
|
+
}
|
|
485
|
+
|
|
486
|
+
/* Color Variants */
|
|
487
|
+
.db-card-blue .card-gradient {
|
|
488
|
+
background: linear-gradient(135deg, rgba(59, 130, 246, 0.1) 0%, rgba(147, 51, 234, 0.1) 100%);
|
|
489
|
+
}
|
|
490
|
+
|
|
491
|
+
.db-card-blue .card-glow {
|
|
492
|
+
background: linear-gradient(135deg, #3b82f6 0%, #9333ea 100%);
|
|
493
|
+
}
|
|
494
|
+
|
|
495
|
+
.db-card-green .card-gradient {
|
|
496
|
+
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(20, 184, 166, 0.1) 100%);
|
|
497
|
+
}
|
|
498
|
+
|
|
499
|
+
.db-card-green .card-glow {
|
|
500
|
+
background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
|
|
501
|
+
}
|
|
502
|
+
|
|
503
|
+
.db-card-orange .card-gradient {
|
|
504
|
+
background: linear-gradient(135deg, rgba(249, 115, 22, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
|
|
505
|
+
}
|
|
506
|
+
|
|
507
|
+
.db-card-orange .card-glow {
|
|
508
|
+
background: linear-gradient(135deg, #f97316 0%, #ef4444 100%);
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
.db-card-cyan .card-gradient {
|
|
512
|
+
background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
.db-card-cyan .card-glow {
|
|
516
|
+
background: linear-gradient(135deg, #06b6d4 0%, #6366f1 100%);
|
|
517
|
+
}
|
|
518
|
+
|
|
519
|
+
.db-card-red .card-gradient {
|
|
520
|
+
background: linear-gradient(135deg, rgba(244, 63, 94, 0.1) 0%, rgba(236, 72, 153, 0.1) 100%);
|
|
521
|
+
}
|
|
522
|
+
|
|
523
|
+
.db-card-red .card-glow {
|
|
524
|
+
background: linear-gradient(135deg, #f43f5e 0%, #ec4899 100%);
|
|
525
|
+
}
|
|
526
|
+
|
|
527
|
+
.db-card-yellow .card-gradient {
|
|
528
|
+
background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(249, 115, 22, 0.1) 100%);
|
|
529
|
+
}
|
|
530
|
+
|
|
531
|
+
.db-card-yellow .card-glow {
|
|
532
|
+
background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
|
|
533
|
+
}
|
|
534
|
+
|
|
535
|
+
/* Icon Wrapper */
|
|
536
|
+
.icon-wrapper {
|
|
537
|
+
width: 3rem;
|
|
538
|
+
height: 3rem;
|
|
539
|
+
border-radius: 0.75rem;
|
|
540
|
+
display: flex;
|
|
541
|
+
align-items: center;
|
|
542
|
+
justify-content: center;
|
|
543
|
+
color: white;
|
|
544
|
+
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2);
|
|
545
|
+
transition: all 0.5s ease;
|
|
546
|
+
}
|
|
547
|
+
|
|
548
|
+
.db-card:hover .icon-wrapper {
|
|
549
|
+
transform: scale(1.1) rotate(3deg);
|
|
550
|
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
|
|
551
|
+
}
|
|
552
|
+
|
|
553
|
+
/* Icon Color Variants */
|
|
554
|
+
.icon-blue {
|
|
555
|
+
background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
|
|
556
|
+
}
|
|
557
|
+
|
|
558
|
+
.db-card:hover .icon-blue {
|
|
559
|
+
background: linear-gradient(135deg, #60a5fa 0%, #9333ea 100%);
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
.icon-green {
|
|
563
|
+
background: linear-gradient(135deg, #10b981 0%, #047857 100%);
|
|
564
|
+
}
|
|
565
|
+
|
|
566
|
+
.db-card:hover .icon-green {
|
|
567
|
+
background: linear-gradient(135deg, #34d399 0%, #14b8a6 100%);
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.icon-orange {
|
|
571
|
+
background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
|
|
572
|
+
}
|
|
573
|
+
|
|
574
|
+
.db-card:hover .icon-orange {
|
|
575
|
+
background: linear-gradient(135deg, #fb923c 0%, #ef4444 100%);
|
|
576
|
+
}
|
|
577
|
+
|
|
578
|
+
.icon-cyan {
|
|
579
|
+
background: linear-gradient(135deg, #06b6d4 0%, #0369a1 100%);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.db-card:hover .icon-cyan {
|
|
583
|
+
background: linear-gradient(135deg, #22d3ee 0%, #6366f1 100%);
|
|
584
|
+
}
|
|
585
|
+
|
|
586
|
+
.icon-red {
|
|
587
|
+
background: linear-gradient(135deg, #f43f5e 0%, #be123c 100%);
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.db-card:hover .icon-red {
|
|
591
|
+
background: linear-gradient(135deg, #fb7185 0%, #ec4899 100%);
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
.icon-yellow {
|
|
595
|
+
background: linear-gradient(135deg, #f59e0b 0%, #b45309 100%);
|
|
596
|
+
}
|
|
597
|
+
|
|
598
|
+
.db-card:hover .icon-yellow {
|
|
599
|
+
background: linear-gradient(135deg, #fbbf24 0%, #f97316 100%);
|
|
600
|
+
}
|
|
601
|
+
|
|
602
|
+
/* Status Badge */
|
|
603
|
+
.status-badge {
|
|
604
|
+
display: flex;
|
|
605
|
+
align-items: center;
|
|
606
|
+
justify-content: center;
|
|
607
|
+
width: 2rem;
|
|
608
|
+
height: 2rem;
|
|
609
|
+
border-radius: 50%;
|
|
610
|
+
background: rgba(16, 185, 129, 0.1);
|
|
611
|
+
border: 2px solid rgba(16, 185, 129, 0.2);
|
|
612
|
+
animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
613
|
+
}
|
|
614
|
+
|
|
615
|
+
.status-badge svg {
|
|
616
|
+
color: #10b981;
|
|
617
|
+
}
|
|
618
|
+
|
|
619
|
+
@keyframes pulse-ring {
|
|
620
|
+
0% {
|
|
621
|
+
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4);
|
|
622
|
+
}
|
|
623
|
+
70% {
|
|
624
|
+
box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
|
|
625
|
+
}
|
|
626
|
+
100% {
|
|
627
|
+
box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
|
|
628
|
+
}
|
|
629
|
+
}
|
|
630
|
+
|
|
631
|
+
/* Title */
|
|
632
|
+
.db-title {
|
|
633
|
+
font-weight: 700;
|
|
634
|
+
letter-spacing: -0.025em;
|
|
635
|
+
transition: color 0.3s ease;
|
|
636
|
+
}
|
|
637
|
+
|
|
638
|
+
.db-card-blue:hover .db-title {
|
|
639
|
+
color: #3b82f6;
|
|
640
|
+
}
|
|
641
|
+
|
|
642
|
+
.db-card-green:hover .db-title {
|
|
643
|
+
color: #10b981;
|
|
644
|
+
}
|
|
645
|
+
|
|
646
|
+
.db-card-orange:hover .db-title {
|
|
647
|
+
color: #f97316;
|
|
648
|
+
}
|
|
649
|
+
|
|
650
|
+
.db-card-cyan:hover .db-title {
|
|
651
|
+
color: #06b6d4;
|
|
652
|
+
}
|
|
653
|
+
|
|
654
|
+
.db-card-red:hover .db-title {
|
|
655
|
+
color: #f43f5e;
|
|
656
|
+
}
|
|
657
|
+
|
|
658
|
+
.db-card-yellow:hover .db-title {
|
|
659
|
+
color: #f59e0b;
|
|
660
|
+
}
|
|
661
|
+
|
|
662
|
+
/* Progress Bars */
|
|
663
|
+
.progress {
|
|
664
|
+
height: 0.5rem;
|
|
665
|
+
border-radius: 9999px;
|
|
666
|
+
position: relative;
|
|
667
|
+
overflow: hidden;
|
|
668
|
+
}
|
|
669
|
+
|
|
670
|
+
.progress::-webkit-progress-bar {
|
|
671
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
672
|
+
border-radius: 9999px;
|
|
673
|
+
}
|
|
674
|
+
|
|
675
|
+
.progress::-webkit-progress-value {
|
|
676
|
+
border-radius: 9999px;
|
|
677
|
+
transition: width 0.7s ease;
|
|
678
|
+
position: relative;
|
|
679
|
+
}
|
|
680
|
+
|
|
681
|
+
.progress::-moz-progress-bar {
|
|
682
|
+
border-radius: 9999px;
|
|
683
|
+
transition: width 0.7s ease;
|
|
684
|
+
}
|
|
685
|
+
|
|
686
|
+
/* Progress Bar Colors */
|
|
687
|
+
.progress-blue::-webkit-progress-value {
|
|
688
|
+
background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);
|
|
689
|
+
}
|
|
690
|
+
|
|
691
|
+
.progress-blue::-moz-progress-bar {
|
|
692
|
+
background: linear-gradient(90deg, #3b82f6 0%, #9333ea 100%);
|
|
693
|
+
}
|
|
694
|
+
|
|
695
|
+
.progress-green::-webkit-progress-value {
|
|
696
|
+
background: linear-gradient(90deg, #10b981 0%, #14b8a6 100%);
|
|
697
|
+
}
|
|
698
|
+
|
|
699
|
+
.progress-green::-moz-progress-bar {
|
|
700
|
+
background: linear-gradient(90deg, #10b981 0%, #14b8a6 100%);
|
|
701
|
+
}
|
|
702
|
+
|
|
703
|
+
.progress-orange::-webkit-progress-value {
|
|
704
|
+
background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
|
|
705
|
+
}
|
|
706
|
+
|
|
707
|
+
.progress-orange::-moz-progress-bar {
|
|
708
|
+
background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
|
|
709
|
+
}
|
|
710
|
+
|
|
711
|
+
.progress-cyan::-webkit-progress-value {
|
|
712
|
+
background: linear-gradient(90deg, #06b6d4 0%, #6366f1 100%);
|
|
713
|
+
}
|
|
714
|
+
|
|
715
|
+
.progress-cyan::-moz-progress-bar {
|
|
716
|
+
background: linear-gradient(90deg, #06b6d4 0%, #6366f1 100%);
|
|
717
|
+
}
|
|
718
|
+
|
|
719
|
+
.progress-red::-webkit-progress-value {
|
|
720
|
+
background: linear-gradient(90deg, #f43f5e 0%, #ec4899 100%);
|
|
721
|
+
}
|
|
722
|
+
|
|
723
|
+
.progress-red::-moz-progress-bar {
|
|
724
|
+
background: linear-gradient(90deg, #f43f5e 0%, #ec4899 100%);
|
|
725
|
+
}
|
|
726
|
+
|
|
727
|
+
.progress-yellow::-webkit-progress-value {
|
|
728
|
+
background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
|
|
729
|
+
}
|
|
730
|
+
|
|
731
|
+
.progress-yellow::-moz-progress-bar {
|
|
732
|
+
background: linear-gradient(90deg, #f59e0b 0%, #f97316 100%);
|
|
733
|
+
}
|
|
734
|
+
|
|
735
|
+
/* Stats Section */
|
|
736
|
+
.stats-section {
|
|
737
|
+
padding-top: 0.75rem;
|
|
738
|
+
margin-top: 0.5rem;
|
|
739
|
+
}
|
|
740
|
+
|
|
741
|
+
.stats-section .level {
|
|
742
|
+
margin-bottom: 0.5rem;
|
|
743
|
+
}
|
|
744
|
+
|
|
745
|
+
.stats-section .level:last-child {
|
|
746
|
+
margin-bottom: 0;
|
|
747
|
+
}
|
|
748
|
+
|
|
749
|
+
.stats-section .tag {
|
|
750
|
+
font-family: "Courier New", monospace;
|
|
751
|
+
background-color: rgba(0, 0, 0, 0.03);
|
|
752
|
+
}
|
|
753
|
+
|
|
754
|
+
.db-card:hover .stats-section .tag {
|
|
755
|
+
background-color: rgba(0, 0, 0, 0.05);
|
|
756
|
+
}
|
|
757
|
+
|
|
758
|
+
/* Card Fade In Animation */
|
|
759
|
+
@keyframes fadeInUp {
|
|
760
|
+
from {
|
|
761
|
+
opacity: 0;
|
|
762
|
+
transform: translateY(1rem);
|
|
763
|
+
}
|
|
764
|
+
to {
|
|
765
|
+
opacity: 1;
|
|
766
|
+
transform: translateY(0);
|
|
767
|
+
}
|
|
768
|
+
}
|
|
769
|
+
|
|
770
|
+
.db-card {
|
|
771
|
+
animation: fadeInUp 0.5s ease-out;
|
|
772
|
+
}
|
|
773
|
+
|
|
774
|
+
.column:nth-child(1) .db-card {
|
|
775
|
+
animation-delay: 0ms;
|
|
776
|
+
}
|
|
777
|
+
.column:nth-child(2) .db-card {
|
|
778
|
+
animation-delay: 50ms;
|
|
779
|
+
}
|
|
780
|
+
.column:nth-child(3) .db-card {
|
|
781
|
+
animation-delay: 100ms;
|
|
782
|
+
}
|
|
783
|
+
.column:nth-child(4) .db-card {
|
|
784
|
+
animation-delay: 150ms;
|
|
785
|
+
}
|
|
786
|
+
.column:nth-child(5) .db-card {
|
|
787
|
+
animation-delay: 200ms;
|
|
788
|
+
}
|
|
789
|
+
.column:nth-child(6) .db-card {
|
|
790
|
+
animation-delay: 250ms;
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
/* Responsive adjustments */
|
|
794
|
+
@media screen and (max-width: 768px) {
|
|
795
|
+
.db-cards-container {
|
|
796
|
+
padding: 0.5rem;
|
|
797
|
+
}
|
|
798
|
+
|
|
799
|
+
.icon-wrapper {
|
|
800
|
+
width: 2.5rem;
|
|
801
|
+
height: 2.5rem;
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
</style>
|
|
@@ -17,46 +17,9 @@ withDefaults(defineProps<Props>(), {
|
|
|
17
17
|
</script>
|
|
18
18
|
|
|
19
19
|
<template>
|
|
20
|
-
<div
|
|
20
|
+
<div
|
|
21
|
+
class="skeleton"
|
|
22
|
+
:class="[rounded ? 'is-rounded' : '', dark ? 'is-dark' : '', modifierClasses]"
|
|
23
|
+
:style="[{ height: height, width: width }]"
|
|
24
|
+
></div>
|
|
21
25
|
</template>
|
|
22
|
-
|
|
23
|
-
<style lang="scss">
|
|
24
|
-
.skeletons {
|
|
25
|
-
display: flex;
|
|
26
|
-
flex-direction: column;
|
|
27
|
-
gap: 8px;
|
|
28
|
-
}
|
|
29
|
-
.skeleton {
|
|
30
|
-
background: linear-gradient(90deg, $secondary-95 25%, $secondary-90 50%, $secondary-95 75%);
|
|
31
|
-
background-size: 200% 100%;
|
|
32
|
-
animation: loading 2s infinite ease-in-out;
|
|
33
|
-
border-radius: 4px;
|
|
34
|
-
display: flex;
|
|
35
|
-
height: v-bind(height);
|
|
36
|
-
width: v-bind(width);
|
|
37
|
-
&.is-rounded {
|
|
38
|
-
border-radius: 50%;
|
|
39
|
-
}
|
|
40
|
-
&.is-dark {
|
|
41
|
-
background: linear-gradient(
|
|
42
|
-
90deg,
|
|
43
|
-
$secondary-30 0%,
|
|
44
|
-
$secondary-30 20%,
|
|
45
|
-
$secondary-10 50%,
|
|
46
|
-
$secondary-30 80%,
|
|
47
|
-
$secondary-30 100%
|
|
48
|
-
);
|
|
49
|
-
background-size: 200% 100%;
|
|
50
|
-
animation: loading 2s infinite cubic-bezier(0.4, 0, 0.2, 1);
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
@keyframes loading {
|
|
55
|
-
0% {
|
|
56
|
-
background-position: 200% 0;
|
|
57
|
-
}
|
|
58
|
-
100% {
|
|
59
|
-
background-position: -200% 0;
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
</style>
|
|
@@ -0,0 +1,240 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="recommendations-container">
|
|
3
|
+
<div class="box recommendations-card">
|
|
4
|
+
<!-- Header -->
|
|
5
|
+
<div class="card-header-section">
|
|
6
|
+
<h2 class="title is-5 mb-2 has-text-weight-semibold">Recommendations</h2>
|
|
7
|
+
<p class="subtitle is-7 has-text-grey">Smart suggestions for your databases</p>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<!-- Content -->
|
|
11
|
+
<div class="card-content-section">
|
|
12
|
+
<!-- Recommendation Item 1 -->
|
|
13
|
+
<div class="recommendation-item">
|
|
14
|
+
<div class="is-flex is-align-items-start mb-2">
|
|
15
|
+
<span class="icon is-small has-text-grey-light mr-3">
|
|
16
|
+
<svg
|
|
17
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
18
|
+
width="16"
|
|
19
|
+
height="16"
|
|
20
|
+
viewBox="0 0 24 24"
|
|
21
|
+
fill="none"
|
|
22
|
+
stroke="currentColor"
|
|
23
|
+
stroke-width="2"
|
|
24
|
+
stroke-linecap="round"
|
|
25
|
+
stroke-linejoin="round"
|
|
26
|
+
>
|
|
27
|
+
<path d="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"></path>
|
|
28
|
+
<path d="M12 9v4"></path>
|
|
29
|
+
<path d="M12 17h.01"></path>
|
|
30
|
+
</svg>
|
|
31
|
+
</span>
|
|
32
|
+
<div class="is-flex-grow-1">
|
|
33
|
+
<p class="is-size-7 has-text-weight-semibold has-text-dark recommendation-title">
|
|
34
|
+
mgc-x-mongodb-x-update-same-version-1u0fc
|
|
35
|
+
</p>
|
|
36
|
+
</div>
|
|
37
|
+
</div>
|
|
38
|
+
<p class="is-size-7 has-text-grey mb-3 is-ellipsis-2">
|
|
39
|
+
Same version update is required. Update details: 1.0.1-acdc...
|
|
40
|
+
</p>
|
|
41
|
+
<div class="tags">
|
|
42
|
+
<span class="badge is-success is-light">Pending</span>
|
|
43
|
+
<span class="badge is-danger">High</span>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<!-- Recommendation Item 2 -->
|
|
48
|
+
<div class="recommendation-item">
|
|
49
|
+
<div class="is-flex is-align-items-start mb-2">
|
|
50
|
+
<span class="icon is-small has-text-grey-light mr-3">
|
|
51
|
+
<svg
|
|
52
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
53
|
+
width="16"
|
|
54
|
+
height="16"
|
|
55
|
+
viewBox="0 0 24 24"
|
|
56
|
+
fill="none"
|
|
57
|
+
stroke="currentColor"
|
|
58
|
+
stroke-width="2"
|
|
59
|
+
stroke-linecap="round"
|
|
60
|
+
stroke-linejoin="round"
|
|
61
|
+
>
|
|
62
|
+
<polyline points="22 7 13.5 15.5 8.5 10.5 2 17"></polyline>
|
|
63
|
+
<polyline points="16 7 22 7 22 13"></polyline>
|
|
64
|
+
</svg>
|
|
65
|
+
</span>
|
|
66
|
+
<div class="is-flex-grow-1">
|
|
67
|
+
<p class="is-size-7 has-text-weight-semibold has-text-dark recommendation-title">
|
|
68
|
+
mgc-x-mongodb-x-update-version-xr72jx
|
|
69
|
+
</p>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
<p class="is-size-7 has-text-grey mb-3 is-ellipsis-2">
|
|
73
|
+
Latest Major/Minor version is available. Recommending version Update...
|
|
74
|
+
</p>
|
|
75
|
+
<div class="tags">
|
|
76
|
+
<span class="badge is-success is-light">Skipped</span>
|
|
77
|
+
<span class="badge is-warning">Medium</span>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<!-- Recommendation Item 3 -->
|
|
82
|
+
<div class="recommendation-item">
|
|
83
|
+
<div class="is-flex is-align-items-start mb-2">
|
|
84
|
+
<span class="icon is-small has-text-grey-light mr-3">
|
|
85
|
+
<svg
|
|
86
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
87
|
+
width="16"
|
|
88
|
+
height="16"
|
|
89
|
+
viewBox="0 0 24 24"
|
|
90
|
+
fill="none"
|
|
91
|
+
stroke="currentColor"
|
|
92
|
+
stroke-width="2"
|
|
93
|
+
stroke-linecap="round"
|
|
94
|
+
stroke-linejoin="round"
|
|
95
|
+
>
|
|
96
|
+
<circle cx="12" cy="12" r="10"></circle>
|
|
97
|
+
<path d="M12 16v-4"></path>
|
|
98
|
+
<path d="M12 8h.01"></path>
|
|
99
|
+
</svg>
|
|
100
|
+
</span>
|
|
101
|
+
<div class="is-flex-grow-1">
|
|
102
|
+
<p class="is-size-7 has-text-weight-semibold has-text-dark recommendation-title">
|
|
103
|
+
mgc-x-mongodb-x-update-version-xw2jhm
|
|
104
|
+
</p>
|
|
105
|
+
</div>
|
|
106
|
+
</div>
|
|
107
|
+
<p class="is-size-7 has-text-grey mb-3 is-ellipsis-2">
|
|
108
|
+
Latest Major/Minor version is available. Recommending version Update...
|
|
109
|
+
</p>
|
|
110
|
+
<div class="tags">
|
|
111
|
+
<span class="badge is-success is-light">Pending</span>
|
|
112
|
+
<span class="badge is-warning">Medium</span>
|
|
113
|
+
</div>
|
|
114
|
+
</div>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<!-- Footer -->
|
|
118
|
+
<div class="card-footer-section">
|
|
119
|
+
<button class="button ac-button is-primary is-fullwidth has-text-weight-semibold">View All</button>
|
|
120
|
+
</div>
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</template>
|
|
124
|
+
|
|
125
|
+
<style scoped>
|
|
126
|
+
.recommendations-container {
|
|
127
|
+
max-width: 500px;
|
|
128
|
+
width: 100%;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
/* Card Container - 60% Neutral Base */
|
|
132
|
+
.recommendations-card {
|
|
133
|
+
background: linear-gradient(135deg, hsl(0, 0%, 99%) 0%, hsl(0, 0%, 97%) 100%);
|
|
134
|
+
border-radius: 12px;
|
|
135
|
+
border: 1px solid hsl(0, 0%, 90%);
|
|
136
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
137
|
+
padding: 0;
|
|
138
|
+
transition: all 0.3s ease;
|
|
139
|
+
overflow: hidden;
|
|
140
|
+
}
|
|
141
|
+
|
|
142
|
+
.recommendations-card:hover {
|
|
143
|
+
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
|
|
144
|
+
border-color: hsl(0, 0%, 85%);
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
/* Header Section - 30% Secondary */
|
|
148
|
+
.card-header-section {
|
|
149
|
+
padding: 1.25rem 1.5rem;
|
|
150
|
+
border-bottom: 1px solid hsl(0, 0%, 92%);
|
|
151
|
+
background: linear-gradient(180deg, hsl(0, 0%, 98%) 0%, transparent 100%);
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
.card-header-section .title {
|
|
155
|
+
color: hsl(0, 0%, 20%);
|
|
156
|
+
margin-bottom: 0.375rem;
|
|
157
|
+
font-size: 1.125rem;
|
|
158
|
+
line-height: 1.3;
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.card-header-section .subtitle {
|
|
162
|
+
color: hsl(0, 0%, 50%);
|
|
163
|
+
margin: 0;
|
|
164
|
+
line-height: 1.4;
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
.card-content-section {
|
|
168
|
+
padding: 0;
|
|
169
|
+
max-height: 400px;
|
|
170
|
+
overflow-y: auto;
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.recommendation-item {
|
|
174
|
+
padding: 1.125rem 1.5rem;
|
|
175
|
+
border-bottom: 1px solid hsl(0, 0%, 94%);
|
|
176
|
+
cursor: pointer;
|
|
177
|
+
transition: all 0.2s ease;
|
|
178
|
+
position: relative;
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
.recommendation-item:hover {
|
|
182
|
+
background: hsl(0, 0%, 98%);
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.recommendation-item:last-child {
|
|
186
|
+
border-bottom: none;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.recommendation-item .icon {
|
|
190
|
+
margin-top: 2px;
|
|
191
|
+
flex-shrink: 0;
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
.recommendation-item .icon svg {
|
|
195
|
+
transition: color 0.2s ease;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.recommendation-item:hover .icon svg {
|
|
199
|
+
color: #3b82f6 !important;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Title */
|
|
203
|
+
.recommendation-title {
|
|
204
|
+
overflow: hidden;
|
|
205
|
+
text-overflow: ellipsis;
|
|
206
|
+
white-space: nowrap;
|
|
207
|
+
line-height: 1.4;
|
|
208
|
+
transition: color 0.2s ease;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.recommendation-item:hover .recommendation-title {
|
|
212
|
+
color: #3b82f6 !important;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
.card-footer-section {
|
|
216
|
+
padding: 1.125rem 1.5rem;
|
|
217
|
+
border-top: 1px solid hsl(0, 0%, 92%);
|
|
218
|
+
background: linear-gradient(0deg, hsl(0, 0%, 98%) 0%, transparent 100%);
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
/* Responsive Design */
|
|
222
|
+
@media screen and (max-width: 768px) {
|
|
223
|
+
.recommendations-container {
|
|
224
|
+
max-width: 100%;
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.card-header-section,
|
|
228
|
+
.card-footer-section {
|
|
229
|
+
padding: 1rem 1.25rem;
|
|
230
|
+
}
|
|
231
|
+
|
|
232
|
+
.recommendation-item {
|
|
233
|
+
padding: 1rem 1.25rem;
|
|
234
|
+
}
|
|
235
|
+
|
|
236
|
+
.card-header-section .title {
|
|
237
|
+
font-size: 1rem;
|
|
238
|
+
}
|
|
239
|
+
}
|
|
240
|
+
</style>
|