add mike work

Signed-off-by: at670475 <[email protected]>

api-catalog-ui/frontend/package.json

@@ -29,6 +29,7 @@
         "react": "17.0.2",
         "react-app-polyfill": "2.0.0",
         "react-dom": "17.0.2",
+        "react-hook-form": "^7.46.1",
         "react-loadable": "5.5.0",
         "react-redux": "7.2.5",
         "react-router-dom": "5.3.0",

api-catalog-ui/frontend/src/assets/scss/_media.scss

@@ -3,6 +3,61 @@
     .filtering-container {
       width: 100%;
     }
+    .mobile-view {
+      display: flex !important;
+    }
+    .desktop-view {
+      display: none !important;
+    }
+    .header {
+      #doc, .product-name {
+        margin-right: var( --spaceSmaller );
+      }
+      .product-name {
+        min-width: 27px;
+      }
+      .mobile-view:not(.mobile-menu-trigger-ctn) {
+        display: none !important;
+      }
+    }//end header
+
+    &.mobile-menu-open {
+      &, .App, .main-content2 {
+        overflow: hidden !important;
+      }
+      .main-content2, .header {
+        filter: blur(1px);
+        -webkit-filter: blur(1px);
+      }
+      &:after {
+        content: "";
+        background-color: var( --unknown10 );
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        opacity: .7;
+        left: 0;
+        top: 0px;
+      }
+      .content .main .nav-bar,
+      .dashboard-mobile-menu {
+        left: 0;
+      }
+      .dashboard-mobile-menu {
+        .header {
+          filter: blur(0px);
+          -webkit-filter: blur(0px);
+
+          .mobile-view {
+            display: flex !important;
+          }
+          .right-icons a {
+            width: 100%;
+          }
+        }
+      }
+    }//end mobile-menu-open
+
     .content {
       .main-content {
         width: calc(100vw - calc(#{var( --contentPadding )} * 2));
@@ -12,15 +67,27 @@
         }
       }
       .main {
+        --sideNavWidth: var( --sideNavMobileWidth );
+        --sideNavRightPadding: var( --spaceSmall );
+
         .side-bar {
           display: none;
         }
+        .nav-bar {
+          @include mobileNav();
+        }
         .main-content2 {
-          width: calc(100% - #{var(--sideNavWidth)} - #{var(--contentLeftPadding)});
+          --contentLeftPadding: var( --spaceMedium );
+          --contentRightPadding: var( --spaceMedium );
+          width: 100%;
           overflow: auto;
+
+          &:before {
+            width: 100%;
+          }
         }
-      }
-    }
+      }//end main
+    }//end content
 
     .api-diff-form {
       flex-wrap: wrap;
@@ -35,6 +102,6 @@
         margin-right: 0px;
         margin-bottom: var( --spaceSmaller );
       }
-    }
+    }//end api-diff-form
   }//end body
 }

api-catalog-ui/frontend/src/assets/scss/_mixin.scss

@@ -13,4 +13,15 @@
     color: var( --text20Disabled );
     cursor: default;
   }
+}
+
+@mixin mobileNav() {
+  position: absolute;
+  top: 0;
+  height: 100dvh;
+  left: calc(calc(#{var(--sideNavWidth)} * -1) - calc(#{var(--sideNavLeftPadding)} + var(--sideNavRightPadding)));
+  width: var( --sideNavWidth );
+  z-index: 2;
+  background-color: var( --surface05 );
+  transition: left .5s ease;
 }

api-catalog-ui/frontend/src/assets/scss/_theme_default.scss

@@ -124,6 +124,26 @@
   --borderRadius1: 3px;
   --borderRadius2: 6px;
 
+  //various
   --sideNavWidth: 25%;
-  --contentLeftPadding: 4%;
+  --defaultBottomPadding: var( --spaceSmall);
+
+  --sideNavMobileWidth: 80%;
+
+  --sideNavLeftPadding: var( --spaceSmall );
+  --sideNavRightPadding: var( --spaceMedium );
+  --sideNavBottomPadding: var( --defaultBottomPadding );
+
+  --contentLeftPadding: 3%;
+  --contentRightPadding: var( --spaceMedium );
+  --contentBottomPadding: var( --defaultBottomPadding );
+  --contentTopPadding: var( --spaceLarge );
+
+  --headerVPadding: var( --spaceSmall );
+  --headerInternalHeight: 28px;
+  --headerHeight: calc(#{var( --headerVPadding )} + #{var( --headerInternalHeight )});
+
+  --contentHeightAdj: calc(100dvh - calc(#{var( --headerHeight )} + #{var( --contentBottomPadding )}));
+
+  --scrollPadding: var( --spaceSmaller );
 }

api-catalog-ui/frontend/src/components/App/App.jsx

@@ -16,13 +16,18 @@ import '../../assets/css/APIMReactToastify.css';
 import PageNotFound from '../PageNotFound/PageNotFound';
 import HeaderContainer from '../Header/HeaderContainer';
 import Spinner from '../Spinner/Spinner';
-import Footer from '../Footer/Footer';
+import { closeMobileMenu } from '../../utils/utilFunctions';
 import { AsyncDashboardContainer, AsyncDetailPageContainer, AsyncLoginContainer } from './AsyncModules'; // eslint-disable-line import/no-cycle
 
 class App extends Component {
     componentDidMount() {
         // workaround for missing process polyfill in webpack 5
         window.process = { ...window.process };
+        window.onresize = () => {
+            if (document.body.offsetWidth > 767) {
+                closeMobileMenu();
+            }
+        };
     }
 
     render() {
@@ -35,9 +40,15 @@ class App extends Component {
                     <ErrorContainer />
                     <Suspense fallback={<Spinner isLoading={isLoading} />}>
                         <Router history={history}>
+                            {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
                             <>
                                 <div className="content">
                                     <Route path="/(dashboard|service/.*)/" component={HeaderContainer} />
+
+                                    <div className="dashboard-mobile-menu mobile-view">
+                                        <Route path="/(dashboard|service/.*)/" component={HeaderContainer} />
+                                    </div>
+
                                     <Switch>
                                         <Route path="/" exact render={() => <Redirect replace to="/dashboard" />} />
                                         <Route
@@ -71,7 +82,6 @@ class App extends Component {
                                         />
                                     </Switch>
                                 </div>
-                                <Route path="/(dashboard|service/.*)/" component={Footer} />
                             </>
                         </Router>
                     </Suspense>

api-catalog-ui/frontend/src/components/App/_app.scss

@@ -7,6 +7,9 @@ body {
   height: 100%;
   min-height: 100vh;
 
+  * {
+    box-sizing: border-box;
+  }
   h1, h2, h3, h4, h5, h6, .MuiTypography-h1, .MuiTypography-h2, .MuiTypography-h3, .MuiTypography-h4, .MuiTypography-h5, .MuiTypography-h6 {
     margin: var( --spaceMedium ) 0;
   }
@@ -23,12 +26,58 @@ body {
   h5, .MuiTypography-h5 {
     font-size: var( --fontMedium );
   }
+  #grid-container,
+  .main-content2,
+  .nav-bar {
+    height: var( --contentHeightAdj );
+    overflow: auto;
+  }
+  .title1 {
+    font-size: var( --fontLarger );
+    font-weight: var( --fontWeightMedium );
+    color: var( --controlText15 );
+  }
+  .no-content {
+    padding: var( --spaceLarger );
+    text-align: center;
+  }
   .MuiTypography-colorPrimary {
     color: var( --control00 );
   }
   .MuiTab-textColorInherit {
     opacity: 1;
   }
+  .MuiButton-root {
+    &.icon-btn {
+      min-width: 0px;
+
+      img {
+        height: 22px;
+      }
+    }
+  }
+  .mobile-view {
+    display: none !important;
+  }
+  .mobile-menu-close-ctn {
+    justify-content: space-between;
+  }
+  .mobile-menu-trigger-ctn {
+    margin-bottom: var( --spaceSmallest );
+
+    .mobile-menu-trigger-btn {
+      padding: 0px;
+
+      &.MuiButton-root:hover {
+        background-color: transparent;
+      }
+      .mobile-menu-trigger {
+        margin-right: var( --spaceSmaller );
+        padding: var( --spaceTiny );
+      }
+    }
+  }//end mobile-menu-trigger
+
 
   .MuiTab-root {
     overflow: visible;
@@ -84,6 +133,7 @@ body {
     &, .main-content dashboard-content {
       display: flex;
       flex-direction: column;
+      overflow: hidden;
     }
     > .header {
       align-items: center;
@@ -107,14 +157,15 @@ body {
 
       .nav-bar,
       .side-bar {
+        overflow: auto;
         display: flex;
         flex-direction: column;
         align-items: center;
         max-width: 368px;
         min-width: 19.3%;
         width: var( --sideNavWidth );
-        min-height: 100dvh;
-        padding: var( --spaceSmall ) var( --spaceSmaller ) var( --spaceSmall ) var( --spaceSmall );
+        min-width: var( --sideNavWidth );
+        padding: var( --spaceSmall ) var( --sideNavRightPadding ) var( --sideNavBottomPadding ) var( --sideNavLeftPadding );
         position: relative;
       }
 
@@ -129,9 +180,10 @@ body {
 
       .main-content2 {
         width: 100%;
-        padding: var( --spaceLarge ) var( --spaceSmaller ) 0 var( --contentLeftPadding );
+        padding: var( --contentTopPadding ) var( --contentRightPadding ) var( --contentBottomPadding ) var( --contentLeftPadding );
         position: relative;
-        overflow-x: auto;
+        // overflow-x: auto;
+        overflow:auto;
 
         &:before {
           width: calc(100% - #{var( --contentLeftPadding )} - #{var( --spaceLarger )});
@@ -193,6 +245,7 @@ body {
       font-weight: var( --fontWeightBold);
       line-height: 28px;
       color: var( --text10 );
+      text-align: left;
   }
   // button {
   &.MuiIconButton-root,
@@ -279,3 +332,10 @@ body {
 #ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
     display: none;
 }
+.App {
+  height: 100dvh;
+  overflow: hidden;
+}
+#ot-sdk-btn.ot-sdk-show-settings, #ot-sdk-btn.optanon-show-settings {
+    display: none;
+}