Clean up create drawer styles

criticalstack · Nov 16, 2020 · 3ef9151 · 3ef9151
1 parent c290cba
commit 3ef9151
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 25 deletions.
diff --git a/client/css/section-editor.css b/client/css/section-editor.css
@@ -12,10 +12,10 @@ div.section-editor {
 
 .cs-tabs div.section-editor {
   position: absolute;
-  top: 134px;
-  bottom: 20px;
-  left: 20px;
-  right: 20px;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
   display: grid;
   grid-template-columns: 340px 1fr;
   grid-template-rows: minmax(55px, max-content);

diff --git a/client/css/tabs.css b/client/css/tabs.css
@@ -86,3 +86,8 @@
   padding: 20px;
   background: #fff;
 }
+
+.create-drawer .cs-tabs .react-tabs__tab-panel--selected {
+  position: relative;
+  flex-grow: 1;
+}
diff --git a/client/lib/layout/create/create-content.jsx b/client/lib/layout/create/create-content.jsx
@@ -41,14 +41,18 @@ class CreateContent extends React.Component {
         style={{
           border: 0,
           padding: "20px",
-          height: "100%",
-          marginBottom: "60px"
+          flexGrow: "1",
+          marginBottom: "0",
+          display: "flex",
+          flexDirection: "column"
         }}
       >
         <Tabs
           className="cs-tabs"
           style={{
-            height: "100%"
+            flexGrow: "1",
+            display: "flex",
+            flexDirection: "column"
           }}
           selectedIndex={this.state.index}
           onSelect={(tab) => this.handleTabClick(tab)}

diff --git a/client/lib/layout/create/create-drawer.jsx b/client/lib/layout/create/create-drawer.jsx
@@ -7,16 +7,15 @@ import CreateContent from "./create-content";
 
 const useStyles = makeStyles(() => ({
   root: {
-    display: "flex",
-    position: "fixed",
-    bottom: "10px",
-    right: "20px",
-    zIndex: 1000
+    // position: "fixed",
+    // bottom: "10px",
+    // right: "20px",
+    // zIndex: 1000
   },
   drawer: {
-    width: "100%",
-    height: "100%",
-    flexShrink: 0,
+    // width: "100%",
+    // height: "100%",
+    // flexShrink: 0,
   },
   drawerPaper: {
     width: "100%",
@@ -28,18 +27,13 @@ const useStyles = makeStyles(() => ({
     display: "flex",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingRight: "20px",
-    paddingBottom: "20px",
+    padding: "10px 7px 10px 20px",
     backgroundColor: "#31383d"
   },
   drawerHeaderTitle: {
-    float: "left",
-    marginLeft: "19px",
     display: "flex",
-    justifyContent: "center",
     alignItems: "center",
     fontSize: "40px",
-    marginBottom: "-10px",
     color: "#fff"
   },
   drawerHeaderDefault: {

diff --git a/client/lib/layout/create/wizards.jsx b/client/lib/layout/create/wizards.jsx
@@ -7,10 +7,10 @@ import resourceMetadata from "../../../shared/manifests/resource-metadata";
 const useStyles = makeStyles(() => ({
   root: {
     position: "absolute",
-    top: "134px",
-    bottom: "20px",
-    left: "20px",
-    right: "20px"
+    top: "0",
+    bottom: "0",
+    left: "0",
+    right: "0"
   },
   content: {
     padding: "40px",