Fix: Add Fluent Responsive stylesheet (#1500)

* add fabric-core-css * change to percentage values * add grid columns and rows * adjust styling * Adjust height * adjust heights * add grid columns and rows * fix content display on hide sidebar menu * reduce left padding * adjust right margin * adjust position of feedback button
microsoftgraph · Mar 8, 2022 · e1f9d27 · e1f9d27
1 parent 8b8c80f
commit e1f9d27
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 32 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
         "mini-css-extract-plugin": "1.6.2",
         "monaco-editor": "0.25.2",
         "monaco-editor-webpack-plugin": "4.2.0",
+        "office-ui-fabric-core": "11.0.0",
         "postcss-flexbugs-fixes": "5.0.2",
         "postcss-loader": "4.3.0",
         "postcss-preset-env": "7.3.0",
@@ -123,4 +124,4 @@
         "reportFile": "test-report.xml",
         "indent": 4
     }
-}
+}
diff --git a/src/app/services/reducers/dimensions-reducers.ts b/src/app/services/reducers/dimensions-reducers.ts
@@ -5,19 +5,19 @@ import { RESIZE_SUCCESS } from '../redux-constants';
 const initialState: IDimensions = {
   request: {
     width: '100%',
-    height: '36vh'
+    height: '40%'
   },
   response: {
     width: '100%',
-    height: '62vh'
+    height: '60%'
   },
   sidebar: {
     width: '26%',
-    height: '98vh'
+    height: ''
   },
   content: {
-    width: '72%',
-    height: '98vh'
+    width: '74%',
+    height: ''
   }
 };
 

diff --git a/src/app/views/App.styles.ts b/src/app/views/App.styles.ts
@@ -6,14 +6,24 @@ export const appStyles = (theme: ITheme) => {
       background: theme.semanticColors.bodyBackground,
       color: theme.semanticColors.bodyText,
       paddingTop: theme.spacing.s1,
-      width: '100%'
+      width: '100%',
+      height: '100%',
+      paddingRight: '15px',
+      paddingLeft: '4px',
+      marginLeft: 'auto',
+      marginRight: 'auto'
+    },
+    appRow: {
+      display: 'flex',
+      flexWrap: 'no-wrap'
     },
     tryItMessage: {
       marginBottom: theme.spacing.s1
     },
     sidebar: {
       background: theme.palette.neutralLighter,
-      paddingLeft: 10
+      paddingRight: 10,
+      marginRight: 10
     },
     sidebarMini: {
       background: theme.palette.neutralLighter,
@@ -73,8 +83,8 @@ export const appStyles = (theme: ITheme) => {
     },
     feedbackButtonMobileDisplay: {
       position: 'absolute',
-      top: '-1px',
-      right: '15px'
+      top: '13px',
+      right: '10px'
     }
   };
 };
diff --git a/src/app/views/App.tsx b/src/app/views/App.tsx
@@ -377,6 +377,7 @@ class App extends Component<IAppProps, IAppState> {
     let sideHeight = sidebar.height;
     let maxWidth = '50%';
     let contentWidth = content.width;
+    const contentHeight = content.height;
 
     const query = createShareLink(sampleQuery, authenticated);
     const { mobileScreen, showSidebar } = sidebarProperties;
@@ -392,9 +393,9 @@ class App extends Component<IAppProps, IAppState> {
     };
 
     if (mobileScreen) {
-      layout = sidebarWidth = 'col-xs-12 col-sm-12';
+      layout = sidebarWidth = 'ms-Grid-col ms-sm12';
       sideWidth = '100%';
-      sideHeight = '150px';
+      sideHeight = '100%';
       maxWidth = '100%';
       contentWidth = '100%';
       layout += ' layout';
@@ -407,24 +408,27 @@ class App extends Component<IAppProps, IAppState> {
     return (
       // @ts-ignore
       <ThemeContext.Provider value={this.props.appTheme}>
-        <div className={`container-fluid ${classes.app}`}>
+        <div className={`ms-Grid ${classes.app}`} style={{ paddingLeft : mobileScreen && '15px'}}>
           <Announced
             message={
               !showSidebar
                 ? translateMessage('Sidebar minimized')
                 : translateMessage('Sidebar maximized')
             }
           />
-          <div className='row'>
+          <div className={ `ms-Grid-row ${classes.appRow}`} style={{
+            flexWrap: mobileScreen && 'wrap',
+            marginRight: showSidebar && '-20px' }}>
+
             {graphExplorerMode === Mode.Complete && (
               <Resizable
                 onResize={(e: any, direction: any, ref: any) => {
                   if (ref?.style?.width) {
                     this.resizeSideBar(ref.style.width);
                   }
                 }}
-                className={sidebarWidth}
-                minWidth={'4vw'}
+                className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${sidebarWidth}`}
+                minWidth={'4'}
                 maxWidth={maxWidth}
                 enable={{
                   right: true
@@ -465,29 +469,29 @@ class App extends Component<IAppProps, IAppState> {
             {displayContent && (
               <Resizable
                 bounds={'window'}
-                className={layout}
-                style={{
-                  marginLeft: 10
-                }}
+                className={`ms-Grid-col ms-sm12 ms-md4 ms-lg4 ${layout}`}
                 enable={{
                   right: false
                 }}
                 size={{
                   width: graphExplorerMode === Mode.TryIt ? '100%' : contentWidth,
-                  height: '98vh'
+                  height: contentHeight
                 }}
+                style={!sidebarProperties.showSidebar && !mobileScreen ? {marginLeft: '8px'} : {}}
               >
                 <div style={{ marginBottom: 8 }}>
                   <QueryRunner onSelectVerb={this.handleSelectVerb} />
+                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaLaptopStyle}>
+                    <TermsOfUseMessage />
+                  </div>
                 </div>
-                <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaLaptopStyle}>
-                  <TermsOfUseMessage />
-                  <StatusMessages />
-                </div>
-                {
-                  // @ts-ignore
+
+                <div>
+                  <div style={mobileScreen ? this.statusAreaMobileStyle : this.statusAreaLaptopStyle}>
+                    <StatusMessages />
+                  </div>
                   <QueryResponse verb={this.state.selectedVerb} />
-                }
+                </div>
               </Resizable>
             )}
           </div>

diff --git a/src/app/views/query-runner/QueryRunner.tsx b/src/app/views/query-runner/QueryRunner.tsx
@@ -134,8 +134,8 @@ IQueryRunnerState
   public render() {
     return (
       <>
-        <div className='row'>
-          <div className='col-sm-12 col-lg-12'>
+        <div className='ms-Grid-row'>
+          <div className='ms-Grid-col ms-sm-12 ms-lg-12'>
             {
               // @ts-ignore
               <QueryInput
@@ -147,8 +147,8 @@ IQueryRunnerState
             }
           </div>
         </div>
-        <div className='row' style={{ marginTop: 10 }}>
-          <div className='col-sm-12 col-lg-12'>
+        <div className='ms-Grid-row' style={{ marginTop: 10 }}>
+          <div className='ms-Grid-col ms-sm-12 ms-lg-12'>
             {
               // @ts-ignore
               <Request