[UX] Responsive Layout: make better use of available screen real esta…

…te. (#110)
Azure · Mar 27, 2018 · 71c0dde · 71c0dde
1 parent 937abac
commit 71c0dde
Show file tree

Hide file tree

Showing 7 changed files with 36 additions and 113 deletions.
diff --git a/src/components/Search/CreateIncident.js b/src/components/Search/CreateIncident.js
@@ -12,7 +12,7 @@ const onSubmit = (input, history) => () => {
 }
 
 export const CreateIncident = ({input, creationError, history, dispatch}) => {
-  return <form id='incident-search' onSubmit={onSubmit(input, history)}>
+  return <form id='incident-search' onSubmit={onSubmit(input, history)} style={{padding: '16px'}}>
     <TextField
       hintText='Ticket Id of primary ticket'
       floatingLabelText='Ticket Id'

diff --git a/src/components/TopNav/TopNav.js b/src/components/TopNav/TopNav.js
@@ -4,7 +4,13 @@ import NavMenu from 'components/TopNav/NavMenu'
 import NavNotifs from 'components/TopNav/NavNotifs'
 
 export const TopNav = () => {
-  return <AppBar title='SRE Incident Assistant'
+  return <AppBar
+    title='SRE Incident Assistant'
+    titleStyle={{
+      fontStyle: 'normal',
+      fontWeight: 500,
+      fontSize: '20px'
+    }}
     iconElementLeft={<NavMenu />}
     iconElementRight={<NavNotifs />} />
 }

diff --git a/src/components/elements/Grid.js b/src/components/elements/Grid.js
@@ -14,7 +14,7 @@ export const GridSet = (containerClass, rowClass, columnClass, children) => {
 export const Grid = (rowClass, columnClass, children, key = 0) => {
   let rowKey = 0
   return (
-    <Paper zDepth={2} key={key}>
+    <Paper zDepth={1} key={key}>
       {
                 children.map(child => {
                   return Array.isArray(child) ? GridRow(rowClass, columnClass, child, rowKey++) : child

diff --git a/src/components/uncorrelatedEvents.js b/src/components/uncorrelatedEvents.js
@@ -25,12 +25,12 @@ class UncorrelatedEvents extends Component {
   render () {
     const { events, dispatch, eventTypes, history } = this.props
     return (
-      <div >
+      <div style={{padding: '16px'}}>
         <TimeAndDatePicker history={history} />
         <EventFilter history={history} eventTypes={eventTypes} />
         <Events events={events.pageList} ticketId={null} incidentId={null} />
         <Footer pagination={events} dispatch={dispatch} />
-      </div >
+      </div>
     )
   }
 }

diff --git a/src/extensionHooks/extension.html b/src/extensionHooks/extension.html
@@ -8,8 +8,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
   <link rel="shortcut icon" href="/favicon.ico">
 </head>
-<body>
-  <div id="siaApp" style="height:1000px" >APPLICATION CONTENT</div>
+<body style="width:360px">
+  <div id="outerContainer">
+    <div id="siaApp">Loading...</div>
+  </div>
   <script type="text/javascript" src="/assets/app.js"></script>
 </body>
 </html>
diff --git a/src/index.html b/src/index.html
@@ -10,7 +10,9 @@
   <link rel="shortcut icon" href="/favicon.ico">
 </head>
 <body>
-  <div id="siaApp">APPLICATION CONTENT</div>
+  <div id="outerContainer">
+    <div id="siaApp">Loading...</div>
+  </div>
   <script>__REACT_DEVTOOLS_GLOBAL_HOOK__ = parent.__REACT_DEVTOOLS_GLOBAL_HOOK__</script>
   <script type="text/javascript" src="/assets/app.js"></script>
 </body>

diff --git a/src/styles/App.css b/src/styles/App.css
@@ -1,122 +1,36 @@
-div#siaApp {
-  font-family: "Segoe UI", arial, sans-serif;
-  max-width: 20%;
+body {
+  margin: 0;
+  background-color: #EEEEEE;
 }
 
-.incident-container {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-}
-
-.incident-row {
-  border: 1px ;
-  flex: 1;
-	padding-left: 2%;
-  padding-right: 2%;
+#outerContainer {
+  width: 100%
 }
 
-.incident-col {
-  max-width: 100%;
-  box-sizing: border-box;
-  border: 1px ;
-  flex: 1;
-  flex-wrap: nowrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 2%;
+div#siaApp {
+  max-width: 840px;
+  margin: 0 auto;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  background: white;
 }
 
-.incident-steplabel {
-	flex-direction: column;
-  justify-content: space-between;
+.incident-container {
+  flex-direction: column;
 }
 
-.incident-EventFilter {
-  flex: 1;
-  justify-content: space-between;
-  align-items: center;
-  padding-top: 1%;
-  flex-wrap: wrap;
+.incident-col {
+  padding: 16px 16px 0px 16px;
 }
 
 .incident-EventFooter {
-  flex: 1;
-  align-items: center;
+  margin: 16px 0 16px 0;
   justify-content: space-between;
-  padding: 2%; 
   display: flex;
-  flex-direction: row;
-}
-
-.incident-card {
-  overflow: hidden;
-}
-
-@media (max-width: 1800px) {
-
-  div#siaApp {
-    max-width: 25%;
-  }
-
 }
 
-@media (max-width: 1600px) {
-
-  div#siaApp {
-    max-width: 30%;
-  }
-
-}
-
-@media (max-width: 1200px) {
-
-  div#siaApp {
-    max-width: 40%;
-  }
-
-}
-
-@media (max-width: 920px) {
-
-  div#siaApp {
-    max-width: 50%;
-  }
-
-}
-
-@media (max-width: 768px) {
-
-  div#siaApp {
-    max-width: 75%;
-  }
-
-}
-
-@media (max-width: 480px) {
-
-  div#siaApp {
-    max-width: 100%;
-  }
-
-  .incident-container {
-    display: flex;
-    flex-wrap: nowrap;
-  }
-
-  .incident-row {
-    display: flex;
-    flex: 1;
-    flex-direction: column;
-    flex-wrap: nowrap;
-  }
-
-  .incident-col {
-    display: flex;
-    flex: 1;
-    flex-wrap: nowrap;
-  }
-
+.incident-row {
+  display: flex;
+  flex-direction: column;
 }
 
 ::-ms-clear {
@@ -134,4 +48,3 @@ div#siaApp {
     background: transparent;
   }
 }
-