css

.babelrc → babel.config.json

@@ -9,4 +9,4 @@
       }
     ]
   ]
-}
+}

css/demo.css

@@ -1,95 +1,78 @@
-#main {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
+body, html {
+    height: 100%;
+}
+
+.main {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+
+    /*display: -webkit-box;*/
+    /*display: -moz-box;*/
+    /*display: -ms-flexbox;*/
+    /*display: -webkit-flex;*/
     display: flex;
     flex-direction: column;
-    min-height: 0; /* NEW */
+
+    min-height: 0; /* NEW these are needed */
     min-width: 0; /* NEW */
     max-height: 100%;
+    max-width: 100%;
     height: 100%;
-}
-
-.page-header {
     width: 100%;
 }
 
-.page-header h1 {
-    color: white;
-    text-decoration: underline;
-}
+.page-header {
+    flex-grow: 0;
 
-.examples-dropdown {
-    float: right;
-    margin-top: 5px;
-    margin-right: 10px;
+    width: 100%;
 }
 
-h1 {
-    font-size: 1.6em;
-    display: inline;
-}
+.centre {
+    flex-grow: 1;
 
-div#centre {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
+    /*display: -webkit-box;*/
+    /*display: -moz-box;*/
+    /*display: -ms-flexbox;*/
+    /*display: -webkit-flex;*/
     display: flex;
     flex-direction: row;
-    flex-grow: 1;
     width: 100%;
     min-height: 0; /* NEW */
     min-width: 0; /* NEW */
-
 }
 
-.complexViewerSVG{
+
+.middleDiv {
+    flex-grow: 1;
+
     display: flex;
-    flex-grow:1;
+    flex-direction: column;
 }
 
-div#detailsDiv {
-    display: -webkit-box;
-    display: -moz-box;
-    display: -ms-flexbox;
-    display: -webkit-flex;
-    display: flex;
+
+.innerMiddleDiv {
     flex-grow: 1;
-    flex-direction: column;
+
+    display: flex;
+    flex-direction: row;
     min-height: 0; /* NEW */
     min-width: 0; /* NEW */
-    width: 350px;
-    max-width: 350px;
-    background: #ecedf2;
-    color: #091D42;
-    padding: 10px;
-    margin: 10px;
 }
 
-select, button {
-    font-size: 1em;
-}
+#networkDiv {
+    flex-grow: 1;
 
-b {
-    font-weight: bold;
+    display: flex;
 }
 
-div#middleDiv, div#networkDiv {
-    display: flex;
-    flex-direction: column;
+.complexViewerSVG{
     flex-grow: 1;
 }
 
-div#innerMiddleDiv {
-    display: flex;
-    flex-direction: row;
-    flex-grow: 1;
-    min-height: 0; /* NEW */
-    min-width: 0; /* NEW */
 
-}
 
 .color-key{
     width: 300px;
@@ -100,7 +83,8 @@ div#innerMiddleDiv {
 td {
     vertical-align: middle;
 }
-/*div#symbolKeyDiv {*/
+.symbolKeyDiv {
+    flex-grow: 0;
 /*    display: flex;*/
 /*    flex-grow: 1;*/
 /*    flex-direction: column;*/
@@ -110,10 +94,10 @@ td {
 /*        background:#ecedf2;*/
 /*    *!*/
 /*    color: #091D42;*/
-/*    overflow: auto;*/
+    overflow: auto;
 /*    min-height: 0; !* NEW *!*/
 /*    min-width: 0; !* NEW *!*/
-/*}*/
+}
 
 /*
 div#legendInner {
@@ -124,32 +108,30 @@ div#legendInner {
 }
 */
 
-.controls {
-    background-color: #091D42;
-    color: #fff;
-    margin-left: 0;
-
-    display: flex;
-    flex-direction: row;
-    /*flex-grow: 1;*/
-    flex-shrink: 0;
-    justify-content: space-between;
-    align-items: center;
+/*.controls {*/
+/*    background-color: #091D42;*/
+/*    !*color: #fff;*!*/
+/*    !*margin-left: 0;*!*/
+/*    */
+/*    !*display: flex;*!*/
+/*    !*flex-direction: row;*!*/
+/*    !*!*flex-grow: 1;*!*!*/
+/*    !*flex-shrink: 0;*!*/
+/*    !*justify-content: space-between;*!*/
+/*    !*align-items: center;*!*/
 
-}
+/*}*/
 
 .logoBar {
-    margin-top: 5px;
-    margin-bottom: 5px;
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    flex-wrap: wrap;
-    height: 70px;
-}
+flex-grow: 0;
 
-.noShrink {
-    flex-shrink: 0;
+/*    margin-top: 5px;*/
+/*    margin-bottom: 5px;*/
+/*    display: flex;*/
+/*    flex-direction: row;*/
+/*    flex-shrink: 0;*/
+/*    flex-wrap: wrap;*/
+/*    height: 70px;*/
 }
 
 .logo {