@silexlabs/silex-dashboard 1.0.21 → 1.0.23

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.
@@ -74,7 +74,7 @@ window.addEventListener('load', function() {
74
74
  },
75
75
 
76
76
  openEditor(id, lang) {
77
- window.open(`/?id=${id}&lang=${lang}&connectorId=${this.user.storage.connectorId}`, '_blank')
77
+ window.open(`/?id=${id}&lang=${lang}&connectorId=${this.user.storage.connectorId}`, '_self')
78
78
  },
79
79
 
80
80
  async logout() {
@@ -11,16 +11,24 @@
11
11
 
12
12
  <style>
13
13
  body { color:#2B1B63;}
14
- .button, .pointer { cursor: pointer;}
14
+ /*BTNS*/
15
+ .button, .pointer { cursor: pointer!important}
16
+ .button{min-width:110px;}
17
+ /*BTNS*/
15
18
  a {
16
19
  text-decoration: none;
17
20
  color:#8873FE;}
18
21
  a:hover { text-decoration: underline; }
19
22
  .uppercase {text-transform: uppercase;}
23
+
24
+ /*footer position*/
25
+ .main-min-height {min-height: calc(100vh - 560px);}
26
+ /*footer position*/
27
+
20
28
  /*label*/
21
29
  ::placeholder {color: #8873FE;}
22
30
  input:focus {
23
- border: 2px solid #9977FE;
31
+ border: 2px solid ##9977FE;
24
32
  background-color:#ffffff;}
25
33
  :focus { outline: none;}
26
34
  /*label*/
@@ -47,7 +55,90 @@ input:focus {
47
55
  background-position: 200% 0, 0 0, 0 190px, 50px 195px;
48
56
  }
49
57
  }
58
+ /*FX ANIMATIONS*/
59
+ /*scale-round-inside*/
60
+ .fx-scale-round {
61
+ position:relative;
62
+ z-index: 10;
63
+ overflow: hidden;
64
+ }
65
+ .fx-scale-round::after {
66
+ content: "";
67
+ background: #ffffff;
68
+ position: absolute;
69
+ z-index: -1;
70
+ border-radius: 50%;
71
+ left: -50%;
72
+ right: -50%;
73
+ top: -100%;
74
+ bottom: -100%;
75
+ transform: scale(0, 0);
76
+ transform-origin: center bottom;
77
+ transition: all 0.3s ease-out;
78
+
79
+ }
80
+ .fx-scale-round:hover {
81
+ transform-origin: center bottom;
82
+ transform: scale(1.1);
83
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
84
+ }
85
+ .fx-scale-round:hover::after {
86
+ transform: scale(1, 1);
87
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
88
+ }
89
+ /*scale-round-inside*/
90
+ /*scale*/
91
+ .fx-scale:hover {
92
+ transform-origin: center bottom;
93
+ transform: scale(1.1);
94
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
95
+ }
96
+ /*flash*/
97
+ .fx-underline:hover, .fx-flash:hover {
98
+ animation: flash-in .5s ;
99
+ }
100
+ /* Underline animation */
101
+ .fx-underline {
102
+ position: relative;
103
+ }
104
+ /* Fade in */
105
+ .fx-underline::after {
106
+ content: '';
107
+ position: absolute;
108
+ bottom: -3px;
109
+ left: 0;
110
+ width: 100%;
111
+ height: 0.1em;
112
+ background-color: #8873fe;
113
+ opacity: 0;
114
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 1.8);
115
+ }
116
+
117
+ .fx-underline:hover::after,
118
+ .fx-underline:focus::after {
119
+ opacity: 1;
120
+ transform: translate3d(0, 2.2em, 0);
121
+ }
122
+
123
+ /* Scale from center */
124
+ .fx-underline:after {
125
+ transform: scale(0);
126
+ transform-origin: center;
127
+ }
128
+
129
+ .fx-underline:hover::after,
130
+ .fx-underline:focus::after{
131
+ transform: scale(1);
132
+ }
133
+ /* Underline animation */
134
+ /*flash-in animation*/
135
+ @keyframes flash-in{
136
+ 0% {opacity:0;}
137
+ 100% {opacity:1;}
138
+ }
139
+ /*flash-in animation*/
50
140
 
141
+ /*FX ANIMATIONS*/
51
142
  </style>
52
143
  {% render "api-connectors.js.html" frontmatter: frontmatter page: page site: site api-translations: api-translations lang: lang %}
53
144
 
@@ -65,11 +156,11 @@ input:focus {
65
156
 
66
157
  ><HEADER
67
158
  id="ij139z" src="undefined"
68
- class="header padding-normal full-width "
159
+ class="menu-bar "
69
160
 
70
161
 
71
162
  ><A
72
- href="/" src="undefined"
163
+ href="/" id="iy54t1" src="undefined"
73
164
 
74
165
 
75
166
 
@@ -136,7 +227,7 @@ input:focus {
136
227
 
137
228
  ><A
138
229
  id="isqe61" href="https://" src="undefined"
139
- class="h-space button-bar__item--main button-bar_item button big-button "
230
+ class="button big-button "
140
231
  v-if="!loading" v-for="(connector, index) in connectors" :key="index" :style="{ backgroundColor: connector.background, color: connector.color }" @click="openLogin(connector)"
141
232
 
142
233
  ><div
@@ -11,16 +11,24 @@
11
11
 
12
12
  <style>
13
13
  body { color:#2B1B63;}
14
- .button, .pointer { cursor: pointer;}
14
+ /*BTNS*/
15
+ .button, .pointer { cursor: pointer!important}
16
+ .button{min-width:110px;}
17
+ /*BTNS*/
15
18
  a {
16
19
  text-decoration: none;
17
20
  color:#8873FE;}
18
21
  a:hover { text-decoration: underline; }
19
22
  .uppercase {text-transform: uppercase;}
23
+
24
+ /*footer position*/
25
+ .main-min-height {min-height: calc(100vh - 560px);}
26
+ /*footer position*/
27
+
20
28
  /*label*/
21
29
  ::placeholder {color: #8873FE;}
22
30
  input:focus {
23
- border: 2px solid #9977FE;
31
+ border: 2px solid ##9977FE;
24
32
  background-color:#ffffff;}
25
33
  :focus { outline: none;}
26
34
  /*label*/
@@ -47,7 +55,90 @@ input:focus {
47
55
  background-position: 200% 0, 0 0, 0 190px, 50px 195px;
48
56
  }
49
57
  }
58
+ /*FX ANIMATIONS*/
59
+ /*scale-round-inside*/
60
+ .fx-scale-round {
61
+ position:relative;
62
+ z-index: 10;
63
+ overflow: hidden;
64
+ }
65
+ .fx-scale-round::after {
66
+ content: "";
67
+ background: #ffffff;
68
+ position: absolute;
69
+ z-index: -1;
70
+ border-radius: 50%;
71
+ left: -50%;
72
+ right: -50%;
73
+ top: -100%;
74
+ bottom: -100%;
75
+ transform: scale(0, 0);
76
+ transform-origin: center bottom;
77
+ transition: all 0.3s ease-out;
50
78
 
79
+ }
80
+ .fx-scale-round:hover {
81
+ transform-origin: center bottom;
82
+ transform: scale(1.1);
83
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
84
+ }
85
+ .fx-scale-round:hover::after {
86
+ transform: scale(1, 1);
87
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
88
+ }
89
+ /*scale-round-inside*/
90
+ /*scale*/
91
+ .fx-scale:hover {
92
+ transform-origin: center bottom;
93
+ transform: scale(1.1);
94
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
95
+ }
96
+ /*flash*/
97
+ .fx-underline:hover, .fx-flash:hover {
98
+ animation: flash-in .5s ;
99
+ }
100
+ /* Underline animation */
101
+ .fx-underline {
102
+ position: relative;
103
+ }
104
+ /* Fade in */
105
+ .fx-underline::after {
106
+ content: '';
107
+ position: absolute;
108
+ bottom: -3px;
109
+ left: 0;
110
+ width: 100%;
111
+ height: 0.1em;
112
+ background-color: #8873fe;
113
+ opacity: 0;
114
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 1.8);
115
+ }
116
+
117
+ .fx-underline:hover::after,
118
+ .fx-underline:focus::after {
119
+ opacity: 1;
120
+ transform: translate3d(0, 2.2em, 0);
121
+ }
122
+
123
+ /* Scale from center */
124
+ .fx-underline:after {
125
+ transform: scale(0);
126
+ transform-origin: center;
127
+ }
128
+
129
+ .fx-underline:hover::after,
130
+ .fx-underline:focus::after{
131
+ transform: scale(1);
132
+ }
133
+ /* Underline animation */
134
+ /*flash-in animation*/
135
+ @keyframes flash-in{
136
+ 0% {opacity:0;}
137
+ 100% {opacity:1;}
138
+ }
139
+ /*flash-in animation*/
140
+
141
+ /*FX ANIMATIONS*/
51
142
  </style>
52
143
  {% render "api-websites.js.html" frontmatter: frontmatter page: page site: site api-translations: api-translations lang: lang %}
53
144
 
@@ -65,7 +156,7 @@ input:focus {
65
156
 
66
157
  ><HEADER
67
158
  id="igrg" src="undefined"
68
- class="header padding-normal "
159
+ class="menu-bar "
69
160
 
70
161
 
71
162
  ><A
@@ -156,7 +247,7 @@ input:focus {
156
247
 
157
248
  >{{ subtitle-empty }}</P></div></HEADER><MAIN
158
249
  id="iz63r" src="undefined"
159
- class="padding-normal section main-min-height "
250
+ class="padding-normal main-min-height website-max-width margin-80 "
160
251
 
161
252
 
162
253
  ><SECTION
@@ -171,7 +262,7 @@ input:focus {
171
262
 
172
263
  ><BUTTON
173
264
  id="i2x0l" src="undefined"
174
- class="button button--primary rounded top-space-40 "
265
+ class="button button--primary rounded top-space-40 fx-scale-round "
175
266
  @click="showCreationForm = !showCreationForm" v-if="!showCreationForm"
176
267
 
177
268
  ><span
@@ -226,12 +317,12 @@ input:focus {
226
317
 
227
318
  ><button
228
319
  type="submit" id="i021na" src="undefined"
229
- class="button rounded button--primary right-space-20 "
320
+ class="button rounded button--primary right-space-20 fx-scale-round "
230
321
 
231
322
 
232
323
  >{{ add-ok }}</button><button
233
324
  type="reset" src="undefined"
234
- class="button rounded button--secondary "
325
+ class="button rounded button--secondary fx-scale-round "
235
326
  @click="showCreationForm = !showCreationForm"
236
327
 
237
328
  >{{ add-cancel }}</button></div></form></div><div
@@ -241,112 +332,112 @@ input:focus {
241
332
 
242
333
  ><SECTION
243
334
  id="idgvg" src="undefined"
244
- class="button-bar button-bar--full-width bg-white rounded loaded__item "
335
+ class="button-bar loaded__item "
245
336
  v-if="!loading" v-for="(website, index) in websites" :key="index"
246
337
 
247
338
  ><H3
248
339
  id="i69a7" src="undefined"
249
- class="button-bar_item button-bar__item--main right-space-40 color-2B1B63-80 uppercase "
250
- v-text="website.name || website.id"
340
+ class="right-space-40 color-2B1B63-80 uppercase pointer "
341
+ v-text="website.name || website.id" @click="openEditor(website.websiteId, '{{lang}}')"
251
342
 
252
343
  >My first website</H3><P
253
344
  id="i65hn" src="undefined"
254
- class="button-bar_item button-bar__item--secondary flex-no-shrink right-space-40 "
345
+ class="button-bar__item--secondary flex-no-shrink right-space-40 "
255
346
  v-text="'{{ list-item-updated }} ' + new Date(website.updatedAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })"
256
347
 
257
348
  >Updated 1h ago by lexoyo</P><P
258
349
  id="i64qa" src="undefined"
259
- class="button-bar_item button-bar__item--secondary flex-no-shrink right-space-40 "
350
+ class="button-bar__item--secondary flex-no-shrink right-space-40 "
260
351
  v-text="'{{ list-item-created }} ' + new Date(website.createdAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })"
261
352
 
262
353
  >Created 2023-02-16 by lexoyo</P><div
263
354
  id="i3b4tr" src="undefined"
264
- class="button-bar_item flex-no-shrink "
355
+ class="flex-no-shrink "
265
356
 
266
357
 
267
358
  ><BUTTON
268
359
  id="ifyf6p" href="" src="undefined"
269
- class="right-space-20 bold button-bar__item--link pointer "
360
+ class="right-space-20 bold button-bar__item--link pointer fx-underline fx-scale "
270
361
  @click="openEditor(website.websiteId, '{{lang}}')"
271
362
 
272
363
  >{{ list-edit }}</BUTTON><BUTTON
273
364
  href="" id="ihf6ew" src="undefined"
274
- class="right-space-20 button-bar__item--link pointer "
365
+ class="right-space-20 button-bar__item--link pointer fx-underline fx-scale "
275
366
  @click="renameWebsite(website.websiteId, '{{lang}}')"
276
367
 
277
368
  >{{ list-rename }}</BUTTON><BUTTON
278
369
  id="iol4h" src="undefined"
279
- class="button-bar__item--link pointer "
370
+ class="button-bar__item--link pointer fx-flash fx-scale "
280
371
  @click="deleteWebsite(website.websiteId)" title="{{ list-delete }}"
281
372
 
282
373
  >X</BUTTON></div></SECTION><SECTION
283
374
  id="i1fjn" src="undefined"
284
- class="button-bar button-bar--full-width bg-white rounded loading__item skeleton-anim skeleton-wrapper "
375
+ class="button-bar loading__item skeleton-anim skeleton-wrapper "
285
376
  v-if="loading"
286
377
 
287
378
  ><H3
288
379
  id="iwu6a" src="undefined"
289
- class="button-bar_item button-bar__item--main skeleton-text skeleton right-space-40 "
380
+ class="skeleton-text skeleton right-space-40 "
290
381
 
291
382
 
292
383
  >My first websiteMy first websiteMy first websiteMy first</H3><P
293
384
  id="i26fn" src="undefined"
294
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
385
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
295
386
 
296
387
 
297
388
  >Updated 1h ago by lexoyo</P><P
298
389
  id="iywbk" src="undefined"
299
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
390
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
300
391
 
301
392
 
302
393
  >Created 2023-02-16 by lexoyo</P><div
303
394
  id="ixz6c" src="undefined"
304
- class="button-bar_item skeleton skeleton-button "
395
+ class="skeleton skeleton-button "
305
396
 
306
397
 
307
398
  >Edit</div></SECTION><SECTION
308
399
  id="iwxxo5" src="undefined"
309
- class="button-bar button-bar--full-width bg-white rounded loading__item skeleton-anim skeleton-wrapper "
400
+ class="button-bar loading__item skeleton-anim skeleton-wrapper "
310
401
  v-if="loading"
311
402
 
312
403
  ><H3
313
- src="undefined"
314
- class="button-bar_item button-bar__item--main skeleton-text skeleton "
404
+ id="inmp3" src="undefined"
405
+ class="skeleton-text skeleton right-space-40 "
315
406
 
316
407
 
317
408
  >My first websiteMy first websiteMy first websiteMy first</H3><P
318
- src="undefined"
319
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
409
+ id="icjz8" src="undefined"
410
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
320
411
 
321
412
 
322
413
  >Updated 1h ago by lexoyo</P><P
323
- src="undefined"
324
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
414
+ id="illbe" src="undefined"
415
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
325
416
 
326
417
 
327
418
  >Created 2023-02-16 by lexoyo</P><div
328
419
  id="i9fx3l" src="undefined"
329
- class="button-bar_item skeleton skeleton-button "
420
+ class="skeleton skeleton-button "
330
421
 
331
422
 
332
423
  >Edit</div></SECTION><SECTION
333
424
  id="isld3r" src="undefined"
334
- class="button-bar button-bar--full-width bg-white rounded loading__item skeleton-anim skeleton-wrapper "
425
+ class="button-bar loading__item skeleton-anim skeleton-wrapper "
335
426
  v-if="loading"
336
427
 
337
428
  ><H3
338
429
  src="undefined"
339
- class="button-bar_item button-bar__item--main skeleton-text skeleton "
430
+ class="button-bar_item button-bar__item--main skeleton-text skeleton right-space-40 "
340
431
 
341
432
 
342
433
  >My first websiteMy first websiteMy first websiteMy first</H3><P
343
434
  src="undefined"
344
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
435
+ class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
345
436
 
346
437
 
347
438
  >Updated 1h ago by lexoyo</P><P
348
439
  src="undefined"
349
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
440
+ class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
350
441
 
351
442
 
352
443
  >Created 2023-02-16 by lexoyo</P><div
@@ -381,27 +472,27 @@ input:focus {
381
472
 
382
473
  >{{ text-empty2 }}</H3></div></div><div
383
474
  id="i7ej6j" src="undefined"
384
- class="horizontal box-message text-white "
475
+ class="flex-between box-message text-white "
385
476
  v-if="error"
386
477
 
387
478
  ><H3
388
479
  id="iv0eyi" src="undefined"
389
- class="full-width v-space h-space "
480
+ class="box-message-text "
390
481
  v-text="error"
391
482
 
392
483
  >Insert your text here</H3><div
393
484
  id="i4656n" src="undefined"
394
- class="rounded pointer button-bar__item--link text-white "
485
+ class="pointer button-bar__item--link text-white "
395
486
  @click="error = null"
396
487
 
397
488
  >{{ message-dismiss }}</div></div><div
398
489
  id="ilteie" src="undefined"
399
- class="horizontal box-message text-white "
490
+ class="flex-between box-message text-white "
400
491
  v-if="message"
401
492
 
402
493
  ><H3
403
494
  id="i2d31v" src="undefined"
404
- class="full-width v-space h-space "
495
+ class="box-message-text "
405
496
  v-text="message"
406
497
 
407
498
  >Insert your text here</H3><div
@@ -411,14 +502,29 @@ input:focus {
411
502
 
412
503
  >{{ message-dismiss }}</div></div></MAIN><FOOTER
413
504
  id="ilzpl" src="undefined"
414
- class="header footer "
505
+ class="footer "
415
506
 
416
507
 
417
508
  ><div
418
- id="i238z" src="undefined"
419
- class="section "
509
+
510
+ class="footer__column "
511
+
512
+
513
+ >{% for item in footer1 %}<A
514
+ id="ipa5zg" href="{{ item.url }}"
515
+ class="footer__item "
516
+
517
+
518
+ >{{ item.label }}</A>{% endfor %}</div><div
519
+
520
+ class="footer__column "
521
+
522
+
523
+ >{% for item in footer2 %}<A
524
+ href="{{ item.url }}"
525
+ class="footer__item "
420
526
 
421
527
 
422
- >{{ content }}</div></FOOTER></body>
528
+ >{{ item.label }}</A>{% endfor %}</div></FOOTER></body>
423
529
  </html>
424
530