@enki-tek/fms-web-components 0.1.6 → 0.1.7

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 (17) hide show
  1. package/components/Header/Brand.svelte +1 -1
  2. package/components/Header/Header.scss +1 -1
  3. package/components/Header/Header.svelte +1 -1
  4. package/components/Header/HeaderItem.svelte +1 -1
  5. package/components/Header/UserAvatar.svelte +1 -1
  6. package/components/Layout/Content.svelte +1 -1
  7. package/components/Layout/Page.svelte +3 -2
  8. package/components/Sidebar/SideBarMenu.svelte +2 -2
  9. package/components/StatusCard/StatusCard.scss +2 -2
  10. package/components/StatusCard/StatusCard.svelte +11 -10
  11. package/components/StatusCard/StatusCardBody.svelte +2 -2
  12. package/components/StatusCard/StatusCardTitle.svelte +2 -2
  13. package/components/WidgetCard/Card.scss +2 -12
  14. package/components/WidgetCard/SensorStatusCard.svelte +2 -12
  15. package/components/WidgetCard/StateCard.svelte +2 -12
  16. package/components/WidgetCard/WidgetCard.svelte +46 -45
  17. package/package.json +1 -1
package/components/Header/Brand.svelte CHANGED
@@ -72,7 +72,7 @@
72
72
  display: flex;
73
73
  flex-direction: column;
74
74
  align-items: flex-end;
75
- color: #6C757D;
75
+ color: #ffffff;
76
76
  }
77
77
  :global(.userProfile img) {
78
78
  width: 45px;
package/components/Header/Header.scss CHANGED
@@ -52,7 +52,7 @@
52
52
  display: flex;
53
53
  flex-direction: column;
54
54
  align-items: flex-end;
55
- color: $gray-600;
55
+ color: $white;
56
56
  }
57
57
 
58
58
  :global(.userProfile img) {
package/components/Header/Header.svelte CHANGED
@@ -71,7 +71,7 @@
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  align-items: flex-end;
74
- color: #6C757D;
74
+ color: #ffffff;
75
75
  }
76
76
  :global(.userProfile img) {
77
77
  width: 45px;
package/components/Header/HeaderItem.svelte CHANGED
@@ -73,7 +73,7 @@
73
73
  display: flex;
74
74
  flex-direction: column;
75
75
  align-items: flex-end;
76
- color: #6C757D;
76
+ color: #ffffff;
77
77
  }
78
78
  :global(.userProfile img) {
79
79
  width: 45px;
package/components/Header/UserAvatar.svelte CHANGED
@@ -71,7 +71,7 @@
71
71
  display: flex;
72
72
  flex-direction: column;
73
73
  align-items: flex-end;
74
- color: #6C757D;
74
+ color: #ffffff;
75
75
  }
76
76
  :global(.userProfile img) {
77
77
  width: 45px;
package/components/Layout/Content.svelte CHANGED
@@ -8,6 +8,6 @@
8
8
  <style>
9
9
  .enki-main-content {
10
10
  margin-top:77px;
11
- background-color: #EBECEF;
11
+ background-color: #D4F1F4;
12
12
  }
13
13
  </style>
package/components/Layout/Page.svelte CHANGED
@@ -4,9 +4,10 @@
4
4
 
5
5
  <div class="main-content">
6
6
  <div
7
- class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"
7
+ class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3
8
+ "
8
9
  >
9
- <Row style="width:100%">
10
+ <Row class="d-flex flex-lg-row flex-column px-3" style="width:100%">
10
11
  <Col md="4">
11
12
  <header>
12
13
  <div class="d-flex flex-row justify-content-start mt-2 title">
package/components/Sidebar/SideBarMenu.svelte CHANGED
@@ -5,9 +5,9 @@
5
5
  export let companyName = 'EnkiTek';
6
6
  </script>
7
7
 
8
- <div class="sidebar">
8
+ <div class="sidebar pe-0" >
9
9
  <div
10
- class="offcanvas-md offcanvas-end bg-light rounded"
10
+ class="offcanvas-md offcanvas-end bg-white rounded"
11
11
  tabindex="-1"
12
12
  id="sidebarMenu"
13
13
  aria-labelledby="sidebarMenuLabel"
package/components/StatusCard/StatusCard.scss CHANGED
@@ -1,11 +1,11 @@
1
1
  @import './../variable.scss';
2
2
 
3
3
  .card {
4
- background-color: $gray-100;
4
+ border-color: transparent;
5
+ background-color: $white;
5
6
  padding: $rem;
6
7
  border-radius: calc((3*$rem)/4);
7
8
  font-family: $bodyFonts;
8
- min-width: 22rem;
9
9
  min-height:14rem;
10
10
  }
11
11
  .title{
package/components/StatusCard/StatusCard.svelte CHANGED
@@ -1,20 +1,20 @@
1
1
  <script>
2
- export let className = "";
3
- </script>
4
-
5
- <div class="card m-2 {className}">
6
- <slot />
7
- </div>
8
-
9
- <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
2
+ export let className = "";
3
+ </script>
4
+ <div class="col-12 col-md-6 col-sm-6 col-lg-3">
5
+ <div class="m-2 card {className}">
6
+ <slot />
7
+ </div>
8
+ </div>
9
+ <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
10
10
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
11
11
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
12
12
  .card {
13
- background-color: #F8F9FA;
13
+ border-color: transparent;
14
+ background-color: #ffffff;
14
15
  padding: 1rem;
15
16
  border-radius: 0.75rem;
16
17
  font-family: Roboto;
17
- min-width: 22rem;
18
18
  min-height: 14rem;
19
19
  }
20
20
  .title {
@@ -40,3 +40,4 @@ export let className = "";
40
40
  width: fit-content;
41
41
  border-radius: 0.3333333333rem;
42
42
  }</style>
43
+
package/components/StatusCard/StatusCardBody.svelte CHANGED
@@ -25,11 +25,11 @@
25
25
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
26
26
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
27
27
  .card {
28
- background-color: #F8F9FA;
28
+ border-color: transparent;
29
+ background-color: #ffffff;
29
30
  padding: 1rem;
30
31
  border-radius: 0.75rem;
31
32
  font-family: Roboto;
32
- min-width: 22rem;
33
33
  min-height: 14rem;
34
34
  }
35
35
  .title {
package/components/StatusCard/StatusCardTitle.svelte CHANGED
@@ -15,11 +15,11 @@
15
15
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
16
16
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
17
17
  .card {
18
- background-color: #F8F9FA;
18
+ border-color: transparent;
19
+ background-color: #ffffff;
19
20
  padding: 1rem;
20
21
  border-radius: 0.75rem;
21
22
  font-family: Roboto;
22
- min-width: 22rem;
23
23
  min-height: 14rem;
24
24
  }
25
25
  .title {
package/components/WidgetCard/Card.scss CHANGED
@@ -1,21 +1,11 @@
1
1
  @import './../variable.scss';
2
2
  .card {
3
3
  font-family: $bodyFonts;
4
- background-color: #f8f8f8;
5
- border-radius: calc((3*$rem)/4);
6
- padding: $rem;
7
- border-color: transparent;
8
- min-height: 354px;
9
- min-width: 355px;
10
- }
11
- .doublecard{
12
- font-family: $bodyFonts;
13
- background-color: #f8f8f8;
4
+ background-color: $white;
14
5
  border-radius: calc((3*$rem)/4);
15
6
  padding: $rem;
16
7
  border-color: transparent;
17
- min-height: 354px;
18
- min-width: 712px;
8
+ min-height: 22rem;
19
9
  }
20
10
  .state-card {
21
11
  font-family: $bodyFonts;
package/components/WidgetCard/SensorStatusCard.svelte CHANGED
@@ -30,21 +30,11 @@
30
30
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
31
31
  .card {
32
32
  font-family: Roboto;
33
- background-color: #f8f8f8;
34
- border-radius: 0.75rem;
35
- padding: 1rem;
36
- border-color: transparent;
37
- min-height: 354px;
38
- min-width: 355px;
39
- }
40
- .doublecard {
41
- font-family: Roboto;
42
- background-color: #f8f8f8;
33
+ background-color: #ffffff;
43
34
  border-radius: 0.75rem;
44
35
  padding: 1rem;
45
36
  border-color: transparent;
46
- min-height: 354px;
47
- min-width: 712px;
37
+ min-height: 22rem;
48
38
  }
49
39
  .state-card {
50
40
  font-family: Roboto;
package/components/WidgetCard/StateCard.svelte CHANGED
@@ -33,21 +33,11 @@
33
33
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
34
34
  .card {
35
35
  font-family: Roboto;
36
- background-color: #f8f8f8;
37
- border-radius: 0.75rem;
38
- padding: 1rem;
39
- border-color: transparent;
40
- min-height: 354px;
41
- min-width: 355px;
42
- }
43
- .doublecard {
44
- font-family: Roboto;
45
- background-color: #f8f8f8;
36
+ background-color: #ffffff;
46
37
  border-radius: 0.75rem;
47
38
  padding: 1rem;
48
39
  border-color: transparent;
49
- min-height: 354px;
50
- min-width: 712px;
40
+ min-height: 22rem;
51
41
  }
52
42
  .state-card {
53
43
  font-family: Roboto;
package/components/WidgetCard/WidgetCard.svelte CHANGED
@@ -5,68 +5,69 @@
5
5
  export let resizable = false;
6
6
  export let widthOnly = true;
7
7
  export let resizeQuotient = 2;
8
- export let cardLength = 1;
8
+ export let cardLength = 3;
9
9
  let maximized = false;
10
10
  let element = null;
11
11
  const toggleMaximize = () => {
12
12
  maximized = !maximized;
13
- if (!maximized) {
14
- element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
15
- if (!widthOnly) {
16
- element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
17
- }
18
-
19
- return;
20
- }
21
- element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
22
- if (!widthOnly) {
23
- element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
13
+ if (maximized) {
14
+ cardLength *= 2;
15
+ console.log(cardLength);
16
+ } else {
17
+ cardLength /= 2;
18
+ console.log(cardLength);
24
19
  }
20
+ // if (!maximized) {
21
+ // element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
22
+ // if (!widthOnly) {
23
+ // element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
24
+ // }
25
+
26
+ // return;
27
+ // }
28
+ // element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
29
+ // if (!widthOnly) {
30
+ // element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
31
+ // }
25
32
  };
26
33
  </script>
27
34
 
28
- <div bind:this={element}>
29
- <div class="m-2 {cardLength == 1 ? "card" : "doublecard"}">
30
- <Row>
31
- <Col>
32
- <div class="title fw-normal">{title}</div>
33
- </Col>
34
- {#if resizable}
35
- <Col>
36
- <div class="float-end">
37
- <i on:click={toggleMaximize} class="material-icons"
38
- >{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
39
- >
40
- </div>
41
- </Col>
42
- {/if}
43
- </Row>
44
- <Row>
45
- <slot />
46
- </Row>
35
+ {#key cardLength}
36
+ <div class="col-12 col-md-{cardLength * 2} col-sm-{cardLength * 2} col-lg-{cardLength}">
37
+ <div bind:this={element}>
38
+ <div class="m-2 card">
39
+ <Row>
40
+ <Col>
41
+ <div class="title fw-normal">{title}</div>
42
+ </Col>
43
+ {#if resizable}
44
+ <Col>
45
+ <div class="float-end">
46
+ <i on:click={toggleMaximize} class="material-icons"
47
+ >{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
48
+ >
49
+ </div>
50
+ </Col>
51
+ {/if}
52
+ </Row>
53
+ <Row>
54
+ <slot />
55
+ </Row>
56
+ </div>
57
+ </div>
47
58
  </div>
48
- </div>
59
+ {/key}
49
60
 
50
61
  <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
51
62
  @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
52
63
  @import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
53
64
  .card {
54
65
  font-family: Roboto;
55
- background-color: #f8f8f8;
56
- border-radius: 0.75rem;
57
- padding: 1rem;
58
- border-color: transparent;
59
- min-height: 354px;
60
- min-width: 355px;
61
- }
62
- .doublecard {
63
- font-family: Roboto;
64
- background-color: #f8f8f8;
66
+ background-color: #ffffff;
65
67
  border-radius: 0.75rem;
66
68
  padding: 1rem;
67
69
  border-color: transparent;
68
- min-height: 354px;
69
- min-width: 712px;
70
+ min-height: 22rem;
70
71
  }
71
72
  .state-card {
72
73
  font-family: Roboto;
@@ -149,4 +150,4 @@
149
150
  color: #c9443a;
150
151
  padding: 5px 10px;
151
152
  border-radius: 5px;
152
- }</style>
153
+ }</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.1.6",
3
+ "version": "0.1.7",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",