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

package/components/Accordion/Accordion.svelte

@@ -589,13 +589,15 @@ export let stayOpen = true;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Accordion/AccordionItem.svelte

@@ -590,13 +590,15 @@ export let header;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Badge/Badge.svelte

@@ -595,13 +595,15 @@ if (badgeConfig.hasOwnProperty(config)) {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Breadcrumb/Breadcrumb.svelte

@@ -605,13 +605,15 @@ let length = newBreadcrumbs.length;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Button/Button.svelte

@@ -1341,13 +1341,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardIcon.svelte

@@ -672,13 +672,15 @@ if (titleConfig.includes(titleLocation)) {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardiconBody.svelte

@@ -667,13 +667,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardiconSubtitle.svelte

@@ -676,13 +676,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CardIcon/CardiconTitle.svelte

@@ -676,13 +676,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/CheckBox/Checkbox.svelte

@@ -625,13 +625,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Dropdown/Dropdown.svelte

@@ -650,13 +650,15 @@ export let title = "Dropdowns";
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Dropdown/DropdownItem.svelte

@@ -643,13 +643,15 @@ export let disabled = false;
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/EnkiSidebar.svelte

@@ -724,13 +724,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/NavIcon.svelte

@@ -667,13 +667,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/NavItem.svelte

@@ -665,13 +665,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/EnkiSidbar/NavLink.svelte

@@ -674,13 +674,15 @@ li.icons:hover {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/Brand.svelte

@@ -72,7 +72,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  color: #6C757D;
+  color: #ffffff;
 }
 :global(.userProfile img) {
   width: 45px;
@@ -653,13 +653,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/Header.scss

@@ -52,7 +52,7 @@
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
-	color: $gray-600;
+	color: $white;
 }
 
 :global(.userProfile img) {

package/components/Header/Header.svelte

@@ -71,7 +71,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  color: #6C757D;
+  color: #ffffff;
 }
 :global(.userProfile img) {
   width: 45px;
@@ -652,13 +652,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/HeaderItem.svelte

@@ -73,7 +73,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  color: #6C757D;
+  color: #ffffff;
 }
 :global(.userProfile img) {
   width: 45px;
@@ -654,13 +654,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Header/UserAvatar.svelte

@@ -71,7 +71,7 @@
   display: flex;
   flex-direction: column;
   align-items: flex-end;
-  color: #6C757D;
+  color: #ffffff;
 }
 :global(.userProfile img) {
   width: 45px;
@@ -652,13 +652,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Layout/Content.svelte

@@ -1,9 +1,13 @@
-<script>
-</script>
-
-<div class="container-fluid" style="margin-top:80px;background-color: #EBECEF;">
+<div class="container-fluid enki-main-content">
 	<div class="row">
 		<slot name="sidebar-menu" />
 		<slot />
 	</div>
 </div>
+
+<style>
+	.enki-main-content {
+		margin-top:77px;
+		background-color: #D4F1F4;
+	}
+</style>

package/components/Layout/Page.svelte

@@ -2,11 +2,12 @@
 	import { Col, Row } from 'sveltestrap';
 </script>
 
-<main class="main-content">
+<div class="main-content">
 	<div
-		class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3"
+		class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 mb-3
+"
 	>
-		<Row class="pt-3 pb-2 m-2" style="width:100%">
+		<Row class="d-flex flex-lg-row flex-column px-3" style="width:100%">
 			<Col md="4">
 				<header>
 					<div class="d-flex flex-row justify-content-start mt-2 title">
@@ -23,12 +24,12 @@
 		</Row>
 	</div>
 	<div>
-		<slot name="statuscard"/>
+		<slot name="statuscard" />
 	</div>
 	<div>
 		<slot />
 	</div>
-</main>
+</div>
 
 <style>
 	.screen-size-fix {

package/components/ModalWindow/Modal.svelte

@@ -591,13 +591,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/ModalWindow/ModalBody.svelte

@@ -589,13 +589,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/ModalWindow/ModalFooter.svelte

@@ -587,13 +587,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/ModalWindow/ModalHeader.svelte

@@ -592,13 +592,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/NotFound/NotFound.svelte

@@ -627,13 +627,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Pagination/Pagination.svelte

@@ -724,13 +724,15 @@ function nextPage() {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/RadioButton/RadioButton.svelte

@@ -607,13 +607,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Sidebar/SideBarMenu.svelte

@@ -5,9 +5,9 @@
 	export let companyName = 'EnkiTek';
 </script>
 
-<div class="sidebar">
+<div class="sidebar pe-0" >
 	<div
-		class="offcanvas-md offcanvas-end bg-light rounded"
+		class="offcanvas-md offcanvas-end bg-white rounded"
 		tabindex="-1"
 		id="sidebarMenu"
 		aria-labelledby="sidebarMenuLabel"

package/components/Sidebar/Sidebar.svelte

@@ -749,13 +749,15 @@ ul, .icon-sidebar-content ul li, .icon-sidebar-content .toggle-button {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/StatusCard/StatusCard.scss

@@ -1,11 +1,11 @@
 @import './../variable.scss';
 
 .card {
-    background-color: $gray-100;
+    border-color: transparent;
+    background-color: $white;
     padding: $rem;
     border-radius: calc((3*$rem)/4);
     font-family: $bodyFonts;
-    min-width: 22rem;
     min-height:14rem;
 }
 .title{

package/components/StatusCard/StatusCard.svelte

@@ -1,20 +1,20 @@
 <script>
-export let className = "";	
-</script>
-
-<div class="card m-2 {className}">
-	<slot />
-</div>
-
-<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
+	export let className = "";	
+	</script>
+	<div class="col-12 col-md-6 col-sm-6 col-lg-3">
+	<div class="m-2 card {className}">
+		<slot />
+	</div>
+	</div>
+	<style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @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");
 @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");
 .card {
-  background-color: #F8F9FA;
+  border-color: transparent;
+  background-color: #ffffff;
   padding: 1rem;
   border-radius: 0.75rem;
   font-family: Roboto;
-  min-width: 22rem;
   min-height: 14rem;
 }
 .title {
@@ -40,3 +40,4 @@ export let className = "";
   width: fit-content;
   border-radius: 0.3333333333rem;
 }</style>
+	

package/components/StatusCard/StatusCardBody.svelte

@@ -25,11 +25,11 @@
 @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");
 @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");
 .card {
-  background-color: #F8F9FA;
+  border-color: transparent;
+  background-color: #ffffff;
   padding: 1rem;
   border-radius: 0.75rem;
   font-family: Roboto;
-  min-width: 22rem;
   min-height: 14rem;
 }
 .title {

package/components/StatusCard/StatusCardTitle.svelte

@@ -15,11 +15,11 @@
 @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");
 @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");
 .card {
-  background-color: #F8F9FA;
+  border-color: transparent;
+  background-color: #ffffff;
   padding: 1rem;
   border-radius: 0.75rem;
   font-family: Roboto;
-  min-width: 22rem;
   min-height: 14rem;
 }
 .title {

package/components/Switches/Switch.svelte

@@ -598,13 +598,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Tab/Tab.svelte

@@ -618,13 +618,15 @@ export let tabs = [
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/TextField/TextField.svelte

@@ -626,13 +626,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Toast/Toast.svelte

@@ -662,13 +662,15 @@
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/Tooltip/Tooltip.svelte

@@ -605,13 +605,15 @@ const textAligns = {
 }
 .sidebar {
   position: fixed;
-  top: 80px; /* Height of the navbar */
+  top: 73px;
+  /* Height of the navbar */
   bottom: 0;
   width: 315px;
   transition: transform 0.3s ease;
 }
 .main-content {
-  margin-left: 315px; /* Width of the sidebar */
+  margin-left: 315px;
+  /* Width of the sidebar */
   flex: 1;
   overflow-y: auto;
   transition: margin-left 0.3s ease;

package/components/WidgetCard/Card.scss

@@ -1,21 +1,11 @@
 @import './../variable.scss';
 .card {
     font-family: $bodyFonts;
-    background-color: #f8f8f8;
-    border-radius: calc((3*$rem)/4);
-    padding: $rem;
-    border-color: transparent;
-    min-height: 354px;
-    min-width: 355px;
-}
-.doublecard{
-    font-family: $bodyFonts;
-    background-color: #f8f8f8;
+    background-color: $white;
     border-radius: calc((3*$rem)/4);
     padding: $rem;
     border-color: transparent;
-    min-height: 354px;
-    min-width: 712px; 
+    min-height: 22rem;
 }
 .state-card {
     font-family: $bodyFonts;

package/components/WidgetCard/SensorStatusCard.svelte

@@ -30,21 +30,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");
 .card {
   font-family: Roboto;
-  background-color: #f8f8f8;
-  border-radius: 0.75rem;
-  padding: 1rem;
-  border-color: transparent;
-  min-height: 354px;
-  min-width: 355px;
-}
-.doublecard {
-  font-family: Roboto;
-  background-color: #f8f8f8;
+  background-color: #ffffff;
   border-radius: 0.75rem;
   padding: 1rem;
   border-color: transparent;
-  min-height: 354px;
-  min-width: 712px;
+  min-height: 22rem;
 }
 .state-card {
   font-family: Roboto;

package/components/WidgetCard/StateCard.svelte

@@ -33,21 +33,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");
 .card {
   font-family: Roboto;
-  background-color: #f8f8f8;
-  border-radius: 0.75rem;
-  padding: 1rem;
-  border-color: transparent;
-  min-height: 354px;
-  min-width: 355px;
-}
-.doublecard {
-  font-family: Roboto;
-  background-color: #f8f8f8;
+  background-color: #ffffff;
   border-radius: 0.75rem;
   padding: 1rem;
   border-color: transparent;
-  min-height: 354px;
-  min-width: 712px;
+  min-height: 22rem;
 }
 .state-card {
   font-family: Roboto;

package/components/WidgetCard/WidgetCard.svelte

@@ -5,68 +5,69 @@
 	export let resizable = false;
 	export let widthOnly = true;
 	export let resizeQuotient = 2;
-	export let cardLength = 1;
+	export let cardLength = 3;
 	let maximized = false;
 	let element = null;
 	const toggleMaximize = () => {
 		maximized = !maximized;
-		if (!maximized) {
-			element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
-			if (!widthOnly) {
-				element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
-			}
-
-			return;
-		}
-		element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
-		if (!widthOnly) {
-			element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
+		if (maximized) {
+			cardLength *= 2;
+			console.log(cardLength);
+		} else {
+			cardLength /= 2;
+			console.log(cardLength);
 		}
+		// if (!maximized) {
+		// 	element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
+		// 	if (!widthOnly) {
+		// 		element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
+		// 	}
+
+		// 	return;
+		// }
+		// element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
+		// if (!widthOnly) {
+		// 	element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
+		// }
 	};
 </script>
 
-<div bind:this={element}>
-	<div class="m-2 {cardLength == 1 ? "card" : "doublecard"}">
-		<Row>
-			<Col>
-				<div class="title fw-normal">{title}</div>
-			</Col>
-			{#if resizable}
-				<Col>
-					<div class="float-end">
-						<i on:click={toggleMaximize} class="material-icons"
-							>{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
-						>
-					</div>
-				</Col>
-			{/if}
-		</Row>
-		<Row>
-			<slot />
-		</Row>
+{#key cardLength}
+	<div class="col-12 col-md-{cardLength * 2} col-sm-{cardLength * 2} col-lg-{cardLength}">
+		<div bind:this={element}>
+			<div class="m-2 card">
+				<Row>
+					<Col>
+						<div class="title fw-normal">{title}</div>
+					</Col>
+					{#if resizable}
+						<Col>
+							<div class="float-end">
+								<i on:click={toggleMaximize} class="material-icons"
+									>{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
+								>
+							</div>
+						</Col>
+					{/if}
+				</Row>
+				<Row>
+					<slot />
+				</Row>
+			</div>
+		</div>
 	</div>
-</div>
+{/key}
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @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");
 @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");
 .card {
   font-family: Roboto;
-  background-color: #f8f8f8;
-  border-radius: 0.75rem;
-  padding: 1rem;
-  border-color: transparent;
-  min-height: 354px;
-  min-width: 355px;
-}
-.doublecard {
-  font-family: Roboto;
-  background-color: #f8f8f8;
+  background-color: #ffffff;
   border-radius: 0.75rem;
   padding: 1rem;
   border-color: transparent;
-  min-height: 354px;
-  min-width: 712px;
+  min-height: 22rem;
 }
 .state-card {
   font-family: Roboto;
@@ -149,4 +150,4 @@
   color: #c9443a;
   padding: 5px 10px;
   border-radius: 5px;
-}</style>
+}</style>

package/components/common.scss

@@ -794,25 +794,31 @@
 
 .sidebar {
     position: fixed;
-    top: 80px; /* Height of the navbar */
+    top: 73px;
+    /* Height of the navbar */
     bottom: 0;
     width: 315px;
     transition: transform 0.3s ease;
-  }  
-  .main-content {    
-    margin-left: 315px; /* Width of the sidebar */      
+}
+
+.main-content {
+    margin-left: 315px;
+    /* Width of the sidebar */
     flex: 1;
     overflow-y: auto;
     transition: margin-left 0.3s ease;
-  }
-  .main-content.collapsed {
+}
+
+.main-content.collapsed {
     margin-left: 0;
-  }
-  @media (max-width: 767px) {
+}
+
+@media (max-width: 767px) {
     .sidebar {
-      display: none !important;
+        display: none !important;
     }
+
     .main-content {
-      margin-left: 0;
-    }      
-  }
+        margin-left: 0;
+    }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",