@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.
@@ -15,16 +15,24 @@
15
15
 
16
16
  <style>
17
17
  body { color:#2B1B63;}
18
- .button, .pointer { cursor: pointer;}
18
+ /*BTNS*/
19
+ .button, .pointer { cursor: pointer!important}
20
+ .button{min-width:110px;}
21
+ /*BTNS*/
19
22
  a {
20
23
  text-decoration: none;
21
24
  color:#8873FE;}
22
25
  a:hover { text-decoration: underline; }
23
26
  .uppercase {text-transform: uppercase;}
27
+
28
+ /*footer position*/
29
+ .main-min-height {min-height: calc(100vh - 560px);}
30
+ /*footer position*/
31
+
24
32
  /*label*/
25
33
  ::placeholder {color: #8873FE;}
26
34
  input:focus {
27
- border: 2px solid #9977FE;
35
+ border: 2px solid ##9977FE;
28
36
  background-color:#ffffff;}
29
37
  :focus { outline: none;}
30
38
  /*label*/
@@ -51,7 +59,90 @@ input:focus {
51
59
  background-position: 200% 0, 0 0, 0 190px, 50px 195px;
52
60
  }
53
61
  }
62
+ /*FX ANIMATIONS*/
63
+ /*scale-round-inside*/
64
+ .fx-scale-round {
65
+ position:relative;
66
+ z-index: 10;
67
+ overflow: hidden;
68
+ }
69
+ .fx-scale-round::after {
70
+ content: "";
71
+ background: #ffffff;
72
+ position: absolute;
73
+ z-index: -1;
74
+ border-radius: 50%;
75
+ left: -50%;
76
+ right: -50%;
77
+ top: -100%;
78
+ bottom: -100%;
79
+ transform: scale(0, 0);
80
+ transform-origin: center bottom;
81
+ transition: all 0.3s ease-out;
82
+
83
+ }
84
+ .fx-scale-round:hover {
85
+ transform-origin: center bottom;
86
+ transform: scale(1.1);
87
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
88
+ }
89
+ .fx-scale-round:hover::after {
90
+ transform: scale(1, 1);
91
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
92
+ }
93
+ /*scale-round-inside*/
94
+ /*scale*/
95
+ .fx-scale:hover {
96
+ transform-origin: center bottom;
97
+ transform: scale(1.1);
98
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
99
+ }
100
+ /*flash*/
101
+ .fx-underline:hover, .fx-flash:hover {
102
+ animation: flash-in .5s ;
103
+ }
104
+ /* Underline animation */
105
+ .fx-underline {
106
+ position: relative;
107
+ }
108
+ /* Fade in */
109
+ .fx-underline::after {
110
+ content: '';
111
+ position: absolute;
112
+ bottom: -3px;
113
+ left: 0;
114
+ width: 100%;
115
+ height: 0.1em;
116
+ background-color: #8873fe;
117
+ opacity: 0;
118
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 1.8);
119
+ }
120
+
121
+ .fx-underline:hover::after,
122
+ .fx-underline:focus::after {
123
+ opacity: 1;
124
+ transform: translate3d(0, 2.2em, 0);
125
+ }
54
126
 
127
+ /* Scale from center */
128
+ .fx-underline:after {
129
+ transform: scale(0);
130
+ transform-origin: center;
131
+ }
132
+
133
+ .fx-underline:hover::after,
134
+ .fx-underline:focus::after{
135
+ transform: scale(1);
136
+ }
137
+ /* Underline animation */
138
+ /*flash-in animation*/
139
+ @keyframes flash-in{
140
+ 0% {opacity:0;}
141
+ 100% {opacity:1;}
142
+ }
143
+ /*flash-in animation*/
144
+
145
+ /*FX ANIMATIONS*/
55
146
  </style>
56
147
  <script src="/node_modules/vue/dist/vue.global.js"></script>
57
148
  <script src="/js/main.js"></script>
@@ -129,7 +220,7 @@ window.addEventListener('load', function() {
129
220
  },
130
221
 
131
222
  openEditor(id, lang) {
132
- window.open(`/?id=${id}&lang=${lang}&connectorId=${this.user.storage.connectorId}`, '_blank')
223
+ window.open(`/?id=${id}&lang=${lang}&connectorId=${this.user.storage.connectorId}`, '_self')
133
224
  },
134
225
 
135
226
  async logout() {
@@ -230,7 +321,7 @@ window.addEventListener('load', function() {
230
321
 
231
322
  ><HEADER
232
323
  id="igrg" src="undefined"
233
- class="header padding-normal "
324
+ class="menu-bar "
234
325
 
235
326
 
236
327
  ><A
@@ -264,6 +355,11 @@ window.addEventListener('load', function() {
264
355
  target="_blank"
265
356
 
266
357
  >About</A><A
358
+ id="iels" href="https://community.silex.me/" src="undefined"
359
+ class="nav__item uppercase "
360
+ target="_blank"
361
+
362
+ >Community</A><A
267
363
  id="iels" href="https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=en-US&source=silex-dashboard" src="undefined"
268
364
  class="nav__item uppercase "
269
365
  target="_blank"
@@ -340,7 +436,7 @@ window.addEventListener('load', function() {
340
436
 
341
437
  >Create your first project, click on "Create a website"</P></div></HEADER><MAIN
342
438
  id="iz63r" src="undefined"
343
- class="padding-normal section main-min-height "
439
+ class="padding-normal main-min-height website-max-width margin-80 "
344
440
 
345
441
 
346
442
  ><SECTION
@@ -355,7 +451,7 @@ window.addEventListener('load', function() {
355
451
 
356
452
  ><BUTTON
357
453
  id="i2x0l" src="undefined"
358
- class="button button--primary rounded top-space-40 "
454
+ class="button button--primary rounded top-space-40 fx-scale-round "
359
455
  @click="showCreationForm = !showCreationForm" v-if="!showCreationForm"
360
456
 
361
457
  ><span
@@ -410,12 +506,12 @@ window.addEventListener('load', function() {
410
506
 
411
507
  ><button
412
508
  type="submit" id="i021na" src="undefined"
413
- class="button rounded button--primary right-space-20 "
509
+ class="button rounded button--primary right-space-20 fx-scale-round "
414
510
 
415
511
 
416
512
  >Create</button><button
417
513
  type="reset" src="undefined"
418
- class="button rounded button--secondary "
514
+ class="button rounded button--secondary fx-scale-round "
419
515
  @click="showCreationForm = !showCreationForm"
420
516
 
421
517
  >Cancel</button></div></form></div><div
@@ -425,112 +521,112 @@ window.addEventListener('load', function() {
425
521
 
426
522
  ><SECTION
427
523
  id="idgvg" src="undefined"
428
- class="button-bar button-bar--full-width bg-white rounded loaded__item "
524
+ class="button-bar loaded__item "
429
525
  v-if="!loading" v-for="(website, index) in websites" :key="index"
430
526
 
431
527
  ><H3
432
528
  id="i69a7" src="undefined"
433
- class="button-bar_item button-bar__item--main right-space-40 color-2B1B63-80 uppercase "
434
- v-text="website.name || website.id"
529
+ class="right-space-40 color-2B1B63-80 uppercase pointer "
530
+ v-text="website.name || website.id" @click="openEditor(website.websiteId, 'en')"
435
531
 
436
532
  >My first website</H3><P
437
533
  id="i65hn" src="undefined"
438
- class="button-bar_item button-bar__item--secondary flex-no-shrink right-space-40 "
534
+ class="button-bar__item--secondary flex-no-shrink right-space-40 "
439
535
  v-text="'Updated ' + new Date(website.updatedAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })"
440
536
 
441
537
  >Updated 1h ago by lexoyo</P><P
442
538
  id="i64qa" src="undefined"
443
- class="button-bar_item button-bar__item--secondary flex-no-shrink right-space-40 "
539
+ class="button-bar__item--secondary flex-no-shrink right-space-40 "
444
540
  v-text="'Created ' + new Date(website.createdAt).toLocaleDateString(undefined, { day: 'numeric', month: 'long', year: 'numeric' })"
445
541
 
446
542
  >Created 2023-02-16 by lexoyo</P><div
447
543
  id="i3b4tr" src="undefined"
448
- class="button-bar_item flex-no-shrink "
544
+ class="flex-no-shrink "
449
545
 
450
546
 
451
547
  ><BUTTON
452
548
  id="ifyf6p" href="" src="undefined"
453
- class="right-space-20 bold button-bar__item--link pointer "
549
+ class="right-space-20 bold button-bar__item--link pointer fx-underline fx-scale "
454
550
  @click="openEditor(website.websiteId, 'en')"
455
551
 
456
552
  >Edit</BUTTON><BUTTON
457
553
  href="" id="ihf6ew" src="undefined"
458
- class="right-space-20 button-bar__item--link pointer "
554
+ class="right-space-20 button-bar__item--link pointer fx-underline fx-scale "
459
555
  @click="renameWebsite(website.websiteId, 'en')"
460
556
 
461
557
  >Rename</BUTTON><BUTTON
462
558
  id="iol4h" src="undefined"
463
- class="button-bar__item--link pointer "
559
+ class="button-bar__item--link pointer fx-flash fx-scale "
464
560
  @click="deleteWebsite(website.websiteId)" title="Delete"
465
561
 
466
562
  >X</BUTTON></div></SECTION><SECTION
467
563
  id="i1fjn" src="undefined"
468
- class="button-bar button-bar--full-width bg-white rounded loading__item skeleton-anim skeleton-wrapper "
564
+ class="button-bar loading__item skeleton-anim skeleton-wrapper "
469
565
  v-if="loading"
470
566
 
471
567
  ><H3
472
568
  id="iwu6a" src="undefined"
473
- class="button-bar_item button-bar__item--main skeleton-text skeleton right-space-40 "
569
+ class="skeleton-text skeleton right-space-40 "
474
570
 
475
571
 
476
572
  >My first websiteMy first websiteMy first websiteMy first</H3><P
477
573
  id="i26fn" src="undefined"
478
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
574
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
479
575
 
480
576
 
481
577
  >Updated 1h ago by lexoyo</P><P
482
578
  id="iywbk" src="undefined"
483
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
579
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
484
580
 
485
581
 
486
582
  >Created 2023-02-16 by lexoyo</P><div
487
583
  id="ixz6c" src="undefined"
488
- class="button-bar_item skeleton skeleton-button "
584
+ class="skeleton skeleton-button "
489
585
 
490
586
 
491
587
  >Edit</div></SECTION><SECTION
492
588
  id="iwxxo5" src="undefined"
493
- class="button-bar button-bar--full-width bg-white rounded loading__item skeleton-anim skeleton-wrapper "
589
+ class="button-bar loading__item skeleton-anim skeleton-wrapper "
494
590
  v-if="loading"
495
591
 
496
592
  ><H3
497
- src="undefined"
498
- class="button-bar_item button-bar__item--main skeleton-text skeleton "
593
+ id="inmp3" src="undefined"
594
+ class="skeleton-text skeleton right-space-40 "
499
595
 
500
596
 
501
597
  >My first websiteMy first websiteMy first websiteMy first</H3><P
502
- src="undefined"
503
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
598
+ id="icjz8" src="undefined"
599
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
504
600
 
505
601
 
506
602
  >Updated 1h ago by lexoyo</P><P
507
- src="undefined"
508
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
603
+ id="illbe" src="undefined"
604
+ class="button-bar__item--secondary skeleton-text skeleton right-space-40 "
509
605
 
510
606
 
511
607
  >Created 2023-02-16 by lexoyo</P><div
512
608
  id="i9fx3l" src="undefined"
513
- class="button-bar_item skeleton skeleton-button "
609
+ class="skeleton skeleton-button "
514
610
 
515
611
 
516
612
  >Edit</div></SECTION><SECTION
517
613
  id="isld3r" src="undefined"
518
- class="button-bar button-bar--full-width bg-white rounded loading__item skeleton-anim skeleton-wrapper "
614
+ class="button-bar loading__item skeleton-anim skeleton-wrapper "
519
615
  v-if="loading"
520
616
 
521
617
  ><H3
522
618
  src="undefined"
523
- class="button-bar_item button-bar__item--main skeleton-text skeleton "
619
+ class="button-bar_item button-bar__item--main skeleton-text skeleton right-space-40 "
524
620
 
525
621
 
526
622
  >My first websiteMy first websiteMy first websiteMy first</H3><P
527
623
  src="undefined"
528
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
624
+ class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
529
625
 
530
626
 
531
627
  >Updated 1h ago by lexoyo</P><P
532
628
  src="undefined"
533
- class="button-bar_item button-bar__item--secondary skeleton-text skeleton "
629
+ class="button-bar_item button-bar__item--secondary skeleton-text skeleton right-space-40 "
534
630
 
535
631
 
536
632
  >Created 2023-02-16 by lexoyo</P><div
@@ -565,27 +661,27 @@ window.addEventListener('load', function() {
565
661
 
566
662
  >Ready to start your journey?</H3></div></div><div
567
663
  id="i7ej6j" src="undefined"
568
- class="horizontal box-message text-white "
664
+ class="flex-between box-message text-white "
569
665
  v-if="error"
570
666
 
571
667
  ><H3
572
668
  id="iv0eyi" src="undefined"
573
- class="full-width v-space h-space "
669
+ class="box-message-text "
574
670
  v-text="error"
575
671
 
576
672
  >Insert your text here</H3><div
577
673
  id="i4656n" src="undefined"
578
- class="rounded pointer button-bar__item--link text-white "
674
+ class="pointer button-bar__item--link text-white "
579
675
  @click="error = null"
580
676
 
581
677
  >Dismiss</div></div><div
582
678
  id="ilteie" src="undefined"
583
- class="horizontal box-message text-white "
679
+ class="flex-between box-message text-white "
584
680
  v-if="message"
585
681
 
586
682
  ><H3
587
683
  id="i2d31v" src="undefined"
588
- class="full-width v-space h-space "
684
+ class="box-message-text "
589
685
  v-text="message"
590
686
 
591
687
  >Insert your text here</H3><div
@@ -595,14 +691,59 @@ window.addEventListener('load', function() {
595
691
 
596
692
  >Dismiss</div></div></MAIN><FOOTER
597
693
  id="ilzpl" src="undefined"
598
- class="header footer "
694
+ class="footer "
599
695
 
600
696
 
601
697
  ><div
602
- id="i238z" src="undefined"
603
- class="section "
698
+
699
+ class="footer__column "
700
+
701
+
702
+ ><A
703
+ id="ipa5zg" href="http://docs.silex.me/"
704
+ class="footer__item "
705
+
706
+
707
+ >Documentation</A><A
708
+ id="ipa5zg" href="https://www.silex.me/"
709
+ class="footer__item "
710
+
711
+
712
+ >About Silex, official website</A><A
713
+ id="ipa5zg" href="https://community.silex.me/"
714
+ class="footer__item "
715
+
716
+
717
+ >Community furum</A><A
718
+ id="ipa5zg" href="http://www.silexlabs.org/"
719
+ class="footer__item "
720
+
721
+
722
+ >Silex Labs - the non profit organization behind Silex</A></div><div
723
+
724
+ class="footer__column "
725
+
726
+
727
+ ><A
728
+ href="https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=en-US&source=silex-dashboard"
729
+ class="footer__item "
730
+
731
+
732
+ >Newsletter - every 3 months</A><A
733
+ href="https://www.meetup.com/Silex-Labs-Aperopensource/"
734
+ class="footer__item "
735
+
736
+
737
+ >Meetups, events, workshops</A><A
738
+ href="https://fosstodon.org/@silex"
739
+ class="footer__item "
740
+
741
+
742
+ >Mastodon - follow us on the free/libre social network</A><A
743
+ href="https://www.youtube.com/user/Silexlabs/"
744
+ class="footer__item "
604
745
 
605
746
 
606
- ></div></FOOTER></body>
747
+ >Youtube - tutorials and more</A></div></FOOTER></body>
607
748
  </html>
608
749
 
@@ -15,16 +15,24 @@
15
15
 
16
16
  <style>
17
17
  body { color:#2B1B63;}
18
- .button, .pointer { cursor: pointer;}
18
+ /*BTNS*/
19
+ .button, .pointer { cursor: pointer!important}
20
+ .button{min-width:110px;}
21
+ /*BTNS*/
19
22
  a {
20
23
  text-decoration: none;
21
24
  color:#8873FE;}
22
25
  a:hover { text-decoration: underline; }
23
26
  .uppercase {text-transform: uppercase;}
27
+
28
+ /*footer position*/
29
+ .main-min-height {min-height: calc(100vh - 560px);}
30
+ /*footer position*/
31
+
24
32
  /*label*/
25
33
  ::placeholder {color: #8873FE;}
26
34
  input:focus {
27
- border: 2px solid #9977FE;
35
+ border: 2px solid ##9977FE;
28
36
  background-color:#ffffff;}
29
37
  :focus { outline: none;}
30
38
  /*label*/
@@ -51,7 +59,90 @@ input:focus {
51
59
  background-position: 200% 0, 0 0, 0 190px, 50px 195px;
52
60
  }
53
61
  }
62
+ /*FX ANIMATIONS*/
63
+ /*scale-round-inside*/
64
+ .fx-scale-round {
65
+ position:relative;
66
+ z-index: 10;
67
+ overflow: hidden;
68
+ }
69
+ .fx-scale-round::after {
70
+ content: "";
71
+ background: #ffffff;
72
+ position: absolute;
73
+ z-index: -1;
74
+ border-radius: 50%;
75
+ left: -50%;
76
+ right: -50%;
77
+ top: -100%;
78
+ bottom: -100%;
79
+ transform: scale(0, 0);
80
+ transform-origin: center bottom;
81
+ transition: all 0.3s ease-out;
82
+
83
+ }
84
+ .fx-scale-round:hover {
85
+ transform-origin: center bottom;
86
+ transform: scale(1.1);
87
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
88
+ }
89
+ .fx-scale-round:hover::after {
90
+ transform: scale(1, 1);
91
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
92
+ }
93
+ /*scale-round-inside*/
94
+ /*scale*/
95
+ .fx-scale:hover {
96
+ transform-origin: center bottom;
97
+ transform: scale(1.1);
98
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 2.8);
99
+ }
100
+ /*flash*/
101
+ .fx-underline:hover, .fx-flash:hover {
102
+ animation: flash-in .5s ;
103
+ }
104
+ /* Underline animation */
105
+ .fx-underline {
106
+ position: relative;
107
+ }
108
+ /* Fade in */
109
+ .fx-underline::after {
110
+ content: '';
111
+ position: absolute;
112
+ bottom: -3px;
113
+ left: 0;
114
+ width: 100%;
115
+ height: 0.1em;
116
+ background-color: #8873fe;
117
+ opacity: 0;
118
+ transition: transform 0.2s cubic-bezier(0, -0.530, 0.405, 1.8);
119
+ }
120
+
121
+ .fx-underline:hover::after,
122
+ .fx-underline:focus::after {
123
+ opacity: 1;
124
+ transform: translate3d(0, 2.2em, 0);
125
+ }
54
126
 
127
+ /* Scale from center */
128
+ .fx-underline:after {
129
+ transform: scale(0);
130
+ transform-origin: center;
131
+ }
132
+
133
+ .fx-underline:hover::after,
134
+ .fx-underline:focus::after{
135
+ transform: scale(1);
136
+ }
137
+ /* Underline animation */
138
+ /*flash-in animation*/
139
+ @keyframes flash-in{
140
+ 0% {opacity:0;}
141
+ 100% {opacity:1;}
142
+ }
143
+ /*flash-in animation*/
144
+
145
+ /*FX ANIMATIONS*/
55
146
  </style>
56
147
  <script src="/node_modules/vue/dist/vue.global.js"></script>
57
148
  <script src="/js/main.js"></script>
@@ -154,11 +245,11 @@ window.addEventListener('load', function() {
154
245
 
155
246
  ><HEADER
156
247
  id="ij139z" src="undefined"
157
- class="header padding-normal full-width "
248
+ class="menu-bar "
158
249
 
159
250
 
160
251
  ><A
161
- href="/" src="undefined"
252
+ href="/" id="iy54t1" src="undefined"
162
253
 
163
254
 
164
255
 
@@ -188,11 +279,16 @@ window.addEventListener('load', function() {
188
279
  target="_blank"
189
280
 
190
281
  >A propos</A><A
282
+ href="https://community.silex.me/" id="i0g3ac" src="undefined"
283
+ class="nav__item uppercase "
284
+ target="_blank"
285
+
286
+ >Communauté</A><A
191
287
  href="https://mail-list.silexlabs.org/subscription/cemnfkaVrK?locale=fr-FR&source=silex-dashboard" id="i0g3ac" src="undefined"
192
288
  class="nav__item uppercase "
193
289
  target="_blank"
194
290
 
195
- >Info</A></NAV><div
291
+ >News</A></NAV><div
196
292
  src="undefined"
197
293
  class="lang h-space uppercase "
198
294
 
@@ -244,7 +340,7 @@ window.addEventListener('load', function() {
244
340
 
245
341
  ><A
246
342
  id="isqe61" href="https://" src="undefined"
247
- class="h-space button-bar__item--main button-bar_item button big-button "
343
+ class="button big-button "
248
344
  v-if="!loading" v-for="(connector, index) in connectors" :key="index" :style="{ backgroundColor: connector.background, color: connector.color }" @click="openLogin(connector)"
249
345
 
250
346
  ><div