Merge pull request #8 from andreadelrio/responsive-discover

[Discover] Add responsive layout
andreadelrio · Oct 7, 2020 · fbd920a · fbd920a
2 parents a04bc8d + 9a29cfb
commit fbd920a
Show file tree

Hide file tree

Showing 20 changed files with 897 additions and 546 deletions.
diff --git a/src/plugins/discover/public/application/_discover.scss b/src/plugins/discover/public/application/_discover.scss
@@ -6,14 +6,27 @@
 }
 
 .dscAppContainer {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
   > * {
     position: relative;
   }
 }
+
 discover-app {
   flex-grow: 1;
 }
 
+.dscHitsCounter,
+.dscTimeChartHeader {
+  flex-grow: 0;
+}
+
 .dscApp {
   position: absolute;
   top: 0;
@@ -36,14 +49,13 @@ discover-app {
   flex-grow: 1;
   display: flex;
   overflow: hidden;
-}
-
-.dscApp__sidebar {
-  flex-grow: 0;
-  flex-basis: auto;
-  min-width: 250px;
-  display: flex;
-  flex-direction: column;
+  @include euiBreakpoint('xs', 's') {
+    flex-grow: 0;
+    flex-wrap: wrap;
+    margin-left: 0;
+    margin-right: 0;
+    overflow-y: auto;
+  }
 }
 
 .dscApp__content {
@@ -56,7 +68,7 @@ discover-app {
 
 .dscHistogram {
   display: flex;
-  height: 200px;
+  height: $euiSize * 12.5;
   padding: $euiSizeS;
 }
 // new slimmer layout for data grid
@@ -86,6 +98,15 @@ discover-app {
   display: flex;
   overflow: hidden;
 
+  @include euiBreakpoint('m', 'l', 'xl') {
+    margin-right: $euiSize;
+    margin-bottom: $euiSize;
+  }
+
+  @include euiBreakpoint('xs', 's') {
+    margin: $euiSizeS;
+  }
+
   .kbn-table {
     margin-bottom: 0;
   }
@@ -113,18 +134,9 @@ discover-app {
   padding: $euiSizeXS 0;
 }
 
-.dscOverlay {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 20;
-  padding-top: $euiSizeM;
-
-  opacity: 0.75;
+.dscLoading {
   text-align: center;
-  background-color: transparent;
+  padding: $euiSizeL 0;
 }
 
 .dscTable {
@@ -138,10 +150,9 @@ discover-app {
   }
 }
 
-// SASSTODO: replace the padding value with a variable
 .dscTable__footer {
   background-color: $euiColorLightShade;
-  padding: 5px 10px;
+  padding: $euiSizeXS $euiSizeS;
   text-align: center;
 }
 
@@ -150,10 +161,6 @@ discover-app {
   flex-direction: column;
   display: flex;
   overflow: hidden;
-  h3 {
-    margin: -20px 0 10px 0;
-    text-align: center;
-  }
 }
 
 .dscResults__interval {
@@ -196,28 +203,22 @@ discover-app {
   }
 }
 
+.dscCollapsibleSidebar__collapseButton {
+  align-self: flex-start;
+  &:not(.closed) {
+    position: relative;
+    left: -$euiSizeS;
+  }
+}
+
 .dscCollapsibleSidebar {
   position: relative;
   z-index: $euiZLevel1;
 
-  .dscCollapsibleSidebar__collapseButton {
-    position: absolute;
-    top: 0;
-    right: -$euiSizeXL + 4;
-    cursor: pointer;
-    z-index: -1;
-    min-height: $euiSizeM;
-    min-width: $euiSizeM;
-    padding: $euiSizeXS * .5;
-  }
-
   &.closed {
     width: 0 !important;
     border-right-width: 0;
     border-left-width: 0;
-    .dscCollapsibleSidebar__collapseButton {
-      right: -$euiSizeL + 4;
-    }
   }
 }
 

diff --git a/src/plugins/discover/public/application/angular/directives/_no_results.scss b/src/plugins/discover/public/application/angular/directives/_no_results.scss
@@ -1,3 +1,6 @@
 .dscNoResults {
-  max-width: 1000px;
+  @include euiBreakpoint('xs', 's') {
+    padding: 0 $euiSizeS;
+  }
+  padding: 0 $euiSize;
 }
diff --git a/src/plugins/discover/public/application/angular/discover.js b/src/plugins/discover/public/application/angular/discover.js
@@ -191,7 +191,7 @@ app.directive('discoverApp', function () {
   };
 });
 
-function discoverController($element, $route, $scope, $timeout, $window, Promise, uiCapabilities) {
+function discoverController($element, $route, $scope, $timeout, Promise, uiCapabilities) {
   const { isDefault: isDefaultType } = indexPatternsUtils;
   const subscriptions = new Subscription();
   const $fetchObservable = new Subject();
@@ -1037,10 +1037,6 @@ function discoverController($element, $route, $scope, $timeout, $window, Promise
     setAppState({ columnsWidth: colSize });
   };
 
-  $scope.scrollToTop = function () {
-    $window.scrollTo(0, 0);
-  };
-
   async function setupVisualization() {
     // If no timefield has been specified we don't create a histogram of messages
     if (!getTimeField()) return;

diff --git a/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts b/src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts
@@ -30,16 +30,23 @@ export function createInfiniteScrollDirective() {
       more: '=',
     },
     link: ($scope: LazyScope, $element: JQuery) => {
-      const $window = $(window);
       let checkTimer: any;
+      /**
+       * depending on which version of Discover is displayed, different elements are scrolling
+       * and have therefore to be considered for calculation of infinite scrolling
+       */
+      const scrollDiv = $element.parents('.dscTable');
+      const scrollDivMobile = $element.parents('.dscApp__frame');
 
       function onScroll() {
         if (!$scope.more) return;
+        const usedScrollDiv = document.getElementsByClassName('dscSidebar__mobile').length
+          ? scrollDivMobile
+          : scrollDiv;
 
-        const winHeight = Number($window.height());
-        const winBottom = Number(winHeight) + Number($window.scrollTop());
-        const offset = $element.offset();
-        const elTop = offset ? offset.top : 0;
+        const winHeight = Number(usedScrollDiv.height());
+        const winBottom = Number(winHeight) + Number(usedScrollDiv.scrollTop());
+        const elTop = $element.get(0).offsetTop || 0;
         const remaining = elTop - winBottom;
 
         if (remaining <= winHeight * 0.5) {
@@ -57,10 +64,12 @@ export function createInfiniteScrollDirective() {
         }, 50);
       }
 
-      $window.on('scroll', scheduleCheck);
+      scrollDiv.on('scroll', scheduleCheck);
+      scrollDivMobile.on('scroll', scheduleCheck);
       $scope.$on('$destroy', function () {
         clearTimeout(checkTimer);
-        $window.off('scroll', scheduleCheck);
+        scrollDiv.off('scroll', scheduleCheck);
+        scrollDivMobile.off('scroll', scheduleCheck);
       });
       scheduleCheck();
     },

diff --git a/src/plugins/discover/public/application/components/discover.scss b/src/plugins/discover/public/application/components/discover.scss
@@ -11,3 +11,26 @@
     }
   }
 }
+
+.dscSidebar__mobile {
+  width: 100%;
+  padding: 0 $euiSizeS $euiSizeS;
+  .dscSidebar__sectionStatic {
+    padding: 0;
+  }
+  .dscSidebar__mobileButton {
+    justify-content: space-between;
+  }
+  .dscSidebar__mobileBadge {
+    margin-left: $euiSizeXS;
+  }
+}
+
+.dscSidebarFlyout__header {
+  align-items: center;
+}
+
+.dscLoading {
+  text-align: center;
+  padding: $euiSizeL 0;
+}