Make the layout more compact on mobile

packages/application-extension/src/index.ts

@@ -355,6 +355,15 @@ const topVisibility: JupyterFrontEndPlugin<void> = {
     if (menu) {
       menu.viewMenu.addGroup([{ command: CommandIDs.toggleTop }], 2);
     }
+
+    // listen on format change (mobile and desktop) to make the view more compact
+    app.formatChanged.connect(() => {
+      if (app.format === 'desktop') {
+        classicShell.expandTop();
+      } else {
+        classicShell.collapseTop();
+      }
+    });
   },
   autoStart: true
 };

packages/application/package.json

@@ -50,6 +50,7 @@
     "@lumino/algorithm": "^1.3.3",
     "@lumino/coreutils": "^1.5.3",
     "@lumino/messaging": "^1.4.3",
+    "@lumino/polling": "^1.3.3",
     "@lumino/signaling": "^1.4.3",
     "@lumino/widgets": "^1.14.0",
     "es6-promise": "~4.2.8"

packages/application/src/app.ts

@@ -8,6 +8,8 @@ import {
 
 import { PageConfig } from '@jupyterlab/coreutils';
 
+import { Throttler } from '@lumino/polling';
+
 import { IClassicShell, ClassicShell } from './shell';
 
 /**
@@ -73,6 +75,18 @@ export class App extends JupyterFrontEnd<IClassicShell> {
     };
   }
 
+  /**
+   * Handle the DOM events for the application.
+   *
+   * @param event - The DOM event sent to the application.
+   */
+  handleEvent(event: Event): void {
+    super.handleEvent(event);
+    if (event.type === 'resize') {
+      void this._formatter.invoke();
+    }
+  }
+
   /**
    * Register plugins from a plugin module.
    *
@@ -106,6 +120,10 @@ export class App extends JupyterFrontEnd<IClassicShell> {
       this.registerPluginModule(mod);
     });
   }
+
+  private _formatter = new Throttler(() => {
+    Private.setFormat(this);
+  }, 250);
 }
 
 /**
@@ -128,3 +146,22 @@ export namespace App {
     default: JupyterFrontEndPlugin<any> | JupyterFrontEndPlugin<any>[];
   }
 }
+
+/**
+ * A namespace for module-private functionality.
+ */
+namespace Private {
+  /**
+   * Media query for mobile devices.
+   */
+  const MOBILE_QUERY = 'only screen and (max-width: 760px)';
+
+  /**
+   * Sets the `format` of a Jupyter front-end application.
+   *
+   * @param app The front-end application whose format is set.
+   */
+  export function setFormat(app: App): void {
+    app.format = window.matchMedia(MOBILE_QUERY).matches ? 'mobile' : 'desktop';
+  }
+}

packages/application/src/shell.ts

@@ -63,18 +63,46 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell {
     BoxLayout.setStretch(menuWrapper, 0);
     BoxLayout.setStretch(this._main, 1);
 
-    const spacer = new Widget();
-    spacer.node.style.minHeight = '16px';
+    this._spacer = new Widget();
+    this._spacer.id = 'spacer-widget';
 
     rootLayout.spacing = 0;
     rootLayout.addWidget(topWrapper);
     rootLayout.addWidget(menuWrapper);
-    rootLayout.addWidget(spacer);
+    rootLayout.addWidget(this._spacer);
     rootLayout.addWidget(this._main);
 
     this.layout = rootLayout;
   }
 
+  /**
+   * A signal emitted when the current widget changes.
+   */
+  get currentChanged(): ISignal<ClassicShell, void> {
+    return this._currentChanged;
+  }
+
+  /**
+   * The current widget in the shell's main area.
+   */
+  get currentWidget(): Widget {
+    return this._main.widgets[0];
+  }
+
+  /**
+   * Get the top area wrapper panel
+   */
+  get top(): Widget {
+    return this._topWrapper;
+  }
+
+  /**
+   * Get the menu area wrapper panel
+   */
+  get menu(): Widget {
+    return this._menuWrapper;
+  }
+
   activateById(id: string): void {
     // no-op
   }
@@ -114,31 +142,19 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell {
   }
 
   /**
-   * A signal emitted when the current widget changes.
-   */
-  get currentChanged(): ISignal<ClassicShell, void> {
-    return this._currentChanged;
-  }
-
-  /**
-   * The current widget in the shell's main area.
-   */
-  get currentWidget(): Widget {
-    return this._main.widgets[0];
-  }
-
-  /**
-   * Get the top area wrapper panel
+   * Collapse the top area and the spacer to make the view more compact.
    */
-  get top(): Widget {
-    return this._topWrapper;
+  collapseTop(): void {
+    this._topWrapper.setHidden(true);
+    this._spacer.setHidden(true);
   }
 
   /**
-   * Get the menu area wrapper panel
+   * Expand the top area to show the header and the spacer.
    */
-  get menu(): Widget {
-    return this._menuWrapper;
+  expandTop(): void {
+    this._topWrapper.setHidden(false);
+    this._spacer.setHidden(false);
   }
 
   /**
@@ -160,6 +176,7 @@ export class ClassicShell extends Widget implements JupyterFrontEnd.IShell {
   private _topHandler: Private.PanelHandler;
   private _menuWrapper: Panel;
   private _menuHandler: Private.PanelHandler;
+  private _spacer: Widget;
   private _main: Panel;
   private _currentChanged = new Signal<this, void>(this);
 }

packages/application/style/base.css

@@ -63,3 +63,7 @@ body {
   margin-right: auto;
   max-width: 1200px;
 }
+
+#spacer-widget {
+  min-height: 16px;
+}