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

Sign up to get free protection for your applications and to get access to all the features.
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",