Merge pull request #3 from cchaos/alexwizp-tsvb_27770/design

Fiddle with flex box and wrapping

Author: alexwizp

src/legacy/core_plugins/metrics/public/_variables.scss

@@ -10,4 +10,4 @@ $tvbValueColorReversed: transparentize($euiColorEmptyShade, .2);
 $tvbHoverBackgroundColor: transparentize($euiColorFullShade, .9);
 $tvbHoverBackgroundColorReversed: transparentize($euiColorEmptyShade, .9);
 
-$tvbSplitBlockVisMinSize: $euiSize * 15;
+$tvbSplitBlockVisMinSize: $euiSize * 12;

src/legacy/core_plugins/metrics/public/components/_vis_with_splits.scss

@@ -1,18 +1,25 @@
 .tvbSplitVis {
+  width: 100%;
   display: flex;
-  flex: 1 0 auto;
+  // Allow wrapping beyond 4 in a row
   flex-wrap: wrap;
-  justify-content: center;
-  align-content: center;
-  align-self: start;
-  width: 100%;
+  // Space out each vis instead of clumping in the center to utilize more hoizontal space
+  justify-content: space-around;
+  // Stretch the all the heights so that prior to wrapping the vis' take up the full panel height
+  align-items: stretch;
 }
 
 .tvbSplitVis__split {
-  display: flex;
-  flex: 1 0 auto;
-  flex-direction: row;
-  overflow: hidden;
+  // This maintains that each vis will be at least 1/4 of the panel's width
+  // but it will also grow to fill the space if there are less than 4 in a row
+  flex: 1 0 25%;
+  // Ensure a minimum width is acheived on smaller width panels
   min-width: $tvbSplitBlockVisMinSize;
-  min-height: $tvbSplitBlockVisMinSize;
+  display: flex;
+
+  > .tvbVis {
+    // Apply the minimum height on the vis itself so it doesn't interfere with flex calculations
+    // Gauges are not completely square, so the height is just slightly less than the width
+    min-height: $tvbSplitBlockVisMinSize / 1.25;
+  }
 }