rework - act 1

MAIF · Nov 15, 2024 · 26456d6 · 26456d6
1 parent e9008fa
commit 26456d6
Show file tree

Hide file tree

Showing 8 changed files with 32 additions and 18 deletions.
diff --git a/otoroshi/javascript/src/apps/BackOfficeApp.js b/otoroshi/javascript/src/apps/BackOfficeApp.js
@@ -288,9 +288,9 @@ class BackOfficeAppContainer extends Component {
           )}
           {/* <div className='container-fluid'> */}
           <div style={{ height: 'calc(100vh - 52px)' /*, overflow: 'hidden'*/ }}>
-            <div className="d-flex" style={{ position: 'relative' }}>
+            <div className={`d-flex  ${!this.state.openedSidebar ? 'sidebar--closed' : ''}`} style={{ position: 'relative' }}>
               <div
-                className={`sidebar ${!this.state.openedSidebar ? 'sidebar--closed' : ''}`}
+                className="sidebar"
                 id="sidebar"
               >
                 <i

diff --git a/otoroshi/javascript/src/components/DynamicTitle.js b/otoroshi/javascript/src/components/DynamicTitle.js
@@ -37,12 +37,16 @@ export class DynamicTitle extends Component {
 
     return (
       <div style={{ position: 'relative' }}>
-        <div className="page-header">
-          <h3 className="page-header_title">
-            {this.state.content} <Thumbtack {...this.props} getTitle={DynamicTitle.getContent} />
-          </h3>
+        <div className="page-header_title d-flex">
+          <div className="d-flex ms-3">
+              <h3 className="m-0 align-self-center">
+                {this.state.content} <Thumbtack {...this.props} getTitle={DynamicTitle.getContent} />
+              </h3>
+            </div>
+        </div>
+        <div className="dynamicChildren">
+          {this.props.children}
         </div>
-        {this.props.children}
       </div>
     );
   }

diff --git a/otoroshi/javascript/src/components/PageTitle.js b/otoroshi/javascript/src/components/PageTitle.js
@@ -5,20 +5,20 @@ export default function PageTitle({
   title,
   children,
   style = {},
-  className = 'ms-0 mb-3',
+  className = 'mb-3',
   ...props
 }) {
   return (
     <div
       className={`page-header_title d-flex align-item-center justify-content-between ${className}`}
       style={style}
     >
-      <div className="d-flex">
+      <div className="d-flex ms-3">
         <h3 className="m-0 align-self-center">
           {title} <Thumbtack {...props} />
         </h3>
       </div>
-      <div className="d-flex align-item-center justify-content-between">{children}</div>
+      <div className="d-flex align-item-center justify-content-between me-3 py-1">{children}</div>
     </div>
   );
 }
diff --git a/otoroshi/javascript/src/components/inputs/Table.js b/otoroshi/javascript/src/components/inputs/Table.js
@@ -790,7 +790,7 @@ export class Table extends Component {
             <div className="row">
               <div
                 className=""
-                style={{ position: 'absolute', right: 0, top: 34, width: 'fit-content' }}
+                style={{ position: 'fixed', right: 0, top: 62, width: 'fit-content', zIndex:1001 }}
               >
                 <button
                   type="button"

diff --git a/otoroshi/javascript/src/style/_variables.module.scss b/otoroshi/javascript/src/style/_variables.module.scss
@@ -68,6 +68,8 @@ $color-white-4-opa80: #e1dfdf80;
   --bg-color_level1_opa80: #{$color-dark-6-opa80};
   --bg-color_level2_opa80: #{$color-dark-5-opa80};
   --bg-color_level3_opa80: #{$color-dark-4-opa80};
+
+  --sidebar-width: 250px;
 }
 
 [data-theme="light"] {

diff --git a/otoroshi/javascript/src/style/layout/_global.scss b/otoroshi/javascript/src/style/layout/_global.scss
@@ -59,4 +59,8 @@ h4 {
 
 .view-stats:hover button {
   background-color: var(--bg-color_level3);
+}
+
+.dynamicChildren{
+  padding-top: 130px;
 }
diff --git a/otoroshi/javascript/src/style/layout/_pagecontent.scss b/otoroshi/javascript/src/style/layout/_pagecontent.scss
@@ -55,11 +55,16 @@
 }
 
 .page-header_title {
-  margin-top: 32px;
-  // margin-left: 25px;
-  padding-bottom: 9px;
+  // margin-top: 32px;
+  margin-left: -15px;
+  // padding-bottom: 9px;
   border-bottom: 1px solid var(--color-primary);
   color: var(--color-primary);
+  height: 50px;
+  background-color: var(--bg-color_level1);
+  position: fixed;
+  width: calc(100% - var(--sidebar-width));
+  z-index: 1000;
 }
 
 .sub-container {

diff --git a/otoroshi/javascript/src/style/layout/_sidebar.scss b/otoroshi/javascript/src/style/layout/_sidebar.scss
@@ -1,8 +1,8 @@
 .sidebar {
   background: var(--bg-color_level2);
   position: relative;
-  min-width: 250px;
-  max-width: 250px;
+  min-width: var(--sidebar-width);
+  max-width: var(--sidebar-width);;
   z-index: 1001;
   display: block;
   border-right: none;
@@ -87,8 +87,7 @@
 }
 
 .sidebar--closed {
-  min-width: 52px;
-  max-width: 52px;
+  --sidebar-width: 52px;
 }
 
 .sidebar-title{