Merge pull request #12 from cchaos/discover/responsive-layout

Using EUI Page components

src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.tsx

@@ -119,7 +119,7 @@ export function ActionBar({
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow>
+            <EuiFormRow display="center">
               <EuiFieldNumber
                 aria-label={
                   isSuccessor
@@ -130,6 +130,7 @@ export function ActionBar({
                         defaultMessage: 'Number of newer documents',
                       })
                 }
+                compressed
                 className="cxtSizePicker"
                 data-test-subj={`${type}CountPicker`}
                 disabled={isDisabled}

src/plugins/discover/public/application/angular/directives/_index.scss

@@ -1,2 +1 @@
 @import 'histogram';
-@import 'uninitialized';

src/plugins/discover/public/application/angular/directives/uninitialized.tsx

@@ -31,7 +31,6 @@ export const DiscoverUninitialized = ({ onRefresh }: Props) => {
     <I18nProvider>
       <EuiEmptyPrompt
         iconType="discoverApp"
-        className="dscUninitialized"
         title={
           <h2>
             <FormattedMessage id="discover.uninitializedTitle" defaultMessage="Start searching" />

src/plugins/discover/public/application/angular/doc_table/infinite_scroll.ts

@@ -16,6 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+
+import $ from 'jquery';
+
 interface LazyScope extends ng.IScope {
   [key: string]: any;
 }
@@ -33,20 +36,20 @@ export function createInfiniteScrollDirective() {
        * and have therefore to be considered for calculation of infinite scrolling
        */
       const scrollDiv = $element.parents('.dscTable');
-      const scrollDivMobile = $element.parents('.dscApp__frame');
+      const scrollDivMobile = $(window);
 
       function onScroll() {
         if (!$scope.more) return;
-        const usedScrollDiv = document.getElementsByClassName('dscSidebar__mobile').length
-          ? scrollDivMobile
-          : scrollDiv;
+        const isMobileView = document.getElementsByClassName('dscSidebar__mobile').length > 0;
+        const usedScrollDiv = isMobileView ? scrollDivMobile : scrollDiv;
+        const scrollTop = usedScrollDiv.scrollTop();
 
         const winHeight = Number(usedScrollDiv.height());
-        const winBottom = Number(winHeight) + Number(usedScrollDiv.scrollTop());
+        const winBottom = Number(winHeight) + Number(scrollTop);
         const elTop = $element.get(0).offsetTop || 0;
         const remaining = elTop - winBottom;
 
-        if (remaining <= winHeight * 0.5) {
+        if (remaining <= winHeight) {
           $scope[$scope.$$phase ? '$eval' : '$apply'](function () {
             $scope.more();
           });
@@ -62,11 +65,11 @@ export function createInfiniteScrollDirective() {
       }
 
       scrollDiv.on('scroll', scheduleCheck);
-      scrollDivMobile.on('scroll', scheduleCheck);
+      window.addEventListener('scroll', scheduleCheck);
       $scope.$on('$destroy', function () {
         clearTimeout(checkTimer);
         scrollDiv.off('scroll', scheduleCheck);
-        scrollDivMobile.off('scroll', scheduleCheck);
+        window.removeEventListener('scroll', scheduleCheck);
       });
       scheduleCheck();
     },

src/plugins/discover/public/application/components/context_app/context_app_legacy.tsx

@@ -16,10 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import './context_app_legacy.scss';
 import React from 'react';
 import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
-import { EuiPanel, EuiText, EuiPageContent, EuiPage } from '@elastic/eui';
+import { EuiHorizontalRule, EuiText, EuiPageContent, EuiPage } from '@elastic/eui';
 import { ContextErrorMessage } from '../context_error_message';
 import {
   DocTableLegacy,
@@ -100,14 +99,9 @@ export function ContextAppLegacy(renderProps: ContextAppProps) {
   const loadingFeedback = () => {
     if (status === LOADING_STATUS.UNINITIALIZED || status === LOADING_STATUS.LOADING) {
       return (
-        <EuiPanel paddingSize="l" data-test-subj="contextApp_loadingIndicator">
-          <EuiText textAlign="center">
-            <FormattedMessage
-              id="discover.context.loadingDescription"
-              defaultMessage="Loading..."
-            />
-          </EuiText>
-        </EuiPanel>
+        <EuiText textAlign="center" data-test-subj="contextApp_loadingIndicator">
+          <FormattedMessage id="discover.context.loadingDescription" defaultMessage="Loading..." />
+        </EuiText>
       );
     }
     return null;
@@ -122,13 +116,13 @@ export function ContextAppLegacy(renderProps: ContextAppProps) {
           <EuiPageContent paddingSize="s" className="dscCxtAppContent">
             <ActionBar {...actionBarProps(PREDECESSOR_TYPE)} />
             {loadingFeedback()}
+            <EuiHorizontalRule margin="xs" />
             {isLoaded ? (
-              <EuiPanel paddingSize="none">
-                <div className="discover-table">
-                  <DocTableLegacy {...docTableProps()} />
-                </div>
-              </EuiPanel>
+              <div className="discover-table">
+                <DocTableLegacy {...docTableProps()} />
+              </div>
             ) : null}
+            <EuiHorizontalRule margin="xs" />
             <ActionBar {...actionBarProps(SUCCESSOR_TYPE)} />
           </EuiPageContent>
         </EuiPage>