Fix to layout

the-curve-consulting · Feb 26, 2024 · cdaa9b9 · cdaa9b9
1 parent 1f5e18b
commit cdaa9b9
Show file tree

Hide file tree

Showing 15 changed files with 61 additions and 34 deletions.
diff --git a/dist/index.css b/dist/index.css
@@ -962,10 +962,6 @@ h1, .h1 {
   font-style: normal;
 }
 
-.sidebar-bg-grey {
-  background-color: var(--texmo-bg-primary);
-}
-
 .main-nav i {
   font-size: 3rem;
 }
@@ -1087,7 +1083,7 @@ a.breadcrumb-item:hover {
 .list-desktop {
   display: none;
 }
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
   .list-desktop {
     display: block;
   }
@@ -1096,7 +1092,7 @@ a.breadcrumb-item:hover {
 .list-mobile {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   .list-mobile {
     display: block;
   }
@@ -13175,7 +13171,9 @@ textarea.form-control-lg {
 }
 
 .side-navbar {
+  background-color: var(--texmo-bg-primary);
   border-top: var(--texmo-bg-secondary-borders) solid 1px;
+  width: 100px;
 }
 
 .texmo-table.table {
@@ -13233,4 +13231,13 @@ textarea.form-control-lg {
 
 .chip.bg-secondary {
   color: black;
+}
+
+.layout-container {
+  width: calc(100% - 100px);
+}
+@media (max-width: 768px) {
+  .layout-container {
+    width: 100%;
+  }
 }
diff --git a/dist/index.es.css b/dist/index.es.css
@@ -962,10 +962,6 @@ h1, .h1 {
   font-style: normal;
 }
 
-.sidebar-bg-grey {
-  background-color: var(--texmo-bg-primary);
-}
-
 .main-nav i {
   font-size: 3rem;
 }
@@ -1087,7 +1083,7 @@ a.breadcrumb-item:hover {
 .list-desktop {
   display: none;
 }
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
   .list-desktop {
     display: block;
   }
@@ -1096,7 +1092,7 @@ a.breadcrumb-item:hover {
 .list-mobile {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   .list-mobile {
     display: block;
   }
@@ -13175,7 +13171,9 @@ textarea.form-control-lg {
 }
 
 .side-navbar {
+  background-color: var(--texmo-bg-primary);
   border-top: var(--texmo-bg-secondary-borders) solid 1px;
+  width: 100px;
 }
 
 .texmo-table.table {
@@ -13233,4 +13231,13 @@ textarea.form-control-lg {
 
 .chip.bg-secondary {
   color: black;
+}
+
+.layout-container {
+  width: calc(100% - 100px);
+}
+@media (max-width: 768px) {
+  .layout-container {
+    width: 100%;
+  }
 }
diff --git a/dist/index.es.js b/dist/index.es.js
diff --git a/dist/index.es.js.map b/dist/index.es.js.map
diff --git a/dist/index.js b/dist/index.js
@@ -26128,7 +26128,7 @@ var ProgressBar = function (_a) {
 
 var SideNavbar = function (_a) {
     var className = _a.className, children = _a.children, rest = __rest(_a, ["className", "children"]);
-    return (React.createElement("div", __assign$1({ className: "d-none d-md-flex flex-column flex-shrink-0 sticky-top sidebar-bg-grey p-3 side-navbar ".concat(className) }, rest), children));
+    return (React.createElement("div", __assign$1({ className: "d-none d-md-flex flex-column flex-shrink-0 sticky-top p-3 side-navbar ".concat(className) }, rest), children));
 };
 
 /**
@@ -27624,7 +27624,7 @@ var LayoutBrand = function (_a) {
 
 var LayoutContainer = function (_a) {
     var className = _a.className, children = _a.children, style = _a.style, rest = __rest(_a, ["className", "children", "style"]);
-    return (React.createElement(Container$1, __assign$1({ fluid: true, className: "".concat(className, " d-flex flex-column px-0"), style: __assign$1(__assign$1({}, style), { minHeight: '100vh' }) }, rest), children));
+    return (React.createElement(Container$1, __assign$1({ fluid: true, className: "".concat(className, " layout-container d-flex flex-column px-0"), style: __assign$1(__assign$1({}, style), { minHeight: '100vh' }) }, rest), children));
 };
 
 var LayoutMain = function (_a) {

diff --git a/dist/index.js.map b/dist/index.js.map
diff --git a/dist/index.min.css b/dist/index.min.css
@@ -962,10 +962,6 @@ h1, .h1 {
   font-style: normal;
 }
 
-.sidebar-bg-grey {
-  background-color: var(--texmo-bg-primary);
-}
-
 .main-nav i {
   font-size: 3rem;
 }
@@ -1087,7 +1083,7 @@ a.breadcrumb-item:hover {
 .list-desktop {
   display: none;
 }
-@media (min-width: 1024px) {
+@media (min-width: 768px) {
   .list-desktop {
     display: block;
   }
@@ -1096,7 +1092,7 @@ a.breadcrumb-item:hover {
 .list-mobile {
   display: none;
 }
-@media (max-width: 1024px) {
+@media (max-width: 768px) {
   .list-mobile {
     display: block;
   }
@@ -13175,7 +13171,9 @@ textarea.form-control-lg {
 }
 
 .side-navbar {
+  background-color: var(--texmo-bg-primary);
   border-top: var(--texmo-bg-secondary-borders) solid 1px;
+  width: 100px;
 }
 
 .texmo-table.table {
@@ -13233,4 +13231,13 @@ textarea.form-control-lg {
 
 .chip.bg-secondary {
   color: black;
+}
+
+.layout-container {
+  width: calc(100% - 100px);
+}
+@media (max-width: 768px) {
+  .layout-container {
+    width: 100%;
+  }
 }
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/dist/index.min.js.map b/dist/index.min.js.map
diff --git a/scss/App.scss b/scss/App.scss
@@ -12,10 +12,6 @@ h1 {
   font-style: normal;
 }
 
-.sidebar-bg-grey {
-  background-color: var(--texmo-bg-primary);
-}
-
 .main-nav {
   i {
     font-size: 3rem;
@@ -145,15 +141,15 @@ a.breadcrumb-item:hover {
 .list-desktop {
   display: none;
 
-  @media (min-width: 1024px) {
+  @media (min-width: 768px) {
       display: block;
   }
 }
 
 .list-mobile {
   display: none;
 
-  @media(max-width: 1024px) {
+  @media(max-width: 768px) {
       display: block;
   }
 }
diff --git a/scss/texmo-react-components.scss b/scss/texmo-react-components.scss
@@ -18,3 +18,4 @@
 @import '../src/components/userProfile/UserProfile.scss';
 @import '../src/components/infoTile/InfoTile.scss';
 @import '../src/components/chip/Chip.scss';
+@import '../src/components/layout/Layout.scss';
diff --git a/src/components/layout/Layout.scss b/src/components/layout/Layout.scss
@@ -0,0 +1,7 @@
+.layout-container {
+  width: calc(100% - 100px);
+
+  @media(max-width: 768px) {
+    width: 100%;
+  }
+}
diff --git a/src/components/layout/components/LayoutContainer.tsx b/src/components/layout/components/LayoutContainer.tsx
@@ -12,7 +12,7 @@ const LayoutContainer = ({
   return (
     <Container
       fluid
-      className={`${className} d-flex flex-column px-0`}
+      className={`${className} layout-container d-flex flex-column px-0`}
       style={{ ...style, minHeight: '100vh' }}
       {...rest}
     >

diff --git a/src/components/sideNavbar/SideNavbar.scss b/src/components/sideNavbar/SideNavbar.scss
@@ -1,3 +1,5 @@
 .side-navbar {
+  background-color: var(--texmo-bg-primary);
   border-top: var(--texmo-bg-secondary-borders) solid 1px;
+  width: 100px;
 }
diff --git a/src/components/sideNavbar/SideNavbar.tsx b/src/components/sideNavbar/SideNavbar.tsx
@@ -5,7 +5,7 @@ export interface SideNavbarProps extends React.HTMLProps<HTMLDivElement> {}
 const SideNavbar = ({ className, children, ...rest }: SideNavbarProps) => {
   return (
     <div
-      className={`d-none d-md-flex flex-column flex-shrink-0 sticky-top sidebar-bg-grey p-3 side-navbar ${className}`}
+      className={`d-none d-md-flex flex-column flex-shrink-0 sticky-top p-3 side-navbar ${className}`}
       {...rest}
     >
       {children}