mobile safe stacking

Author: willwade

browser/dasher/userinterface.css

@@ -294,6 +294,31 @@ body {
     border-bottom: 1px solid #d8d9db;
 }
 
+#user-interface.ui-mobile-stack .ui-main-area {
+    grid-template-columns: 1fr;
+    grid-template-rows: minmax(0, 1fr) 120px;
+}
+
+#user-interface.ui-mobile-stack .ui-main-area.ui-message-position-right .ui-message-resizer,
+#user-interface.ui-mobile-stack .ui-main-area.ui-message-position-top .ui-message-resizer {
+    display: none;
+}
+
+#user-interface.ui-mobile-stack .ui-main-area.ui-message-position-right > svg,
+#user-interface.ui-mobile-stack .ui-main-area.ui-message-position-top > svg {
+    grid-column: 1;
+    grid-row: 1;
+}
+
+#user-interface.ui-mobile-stack .ui-main-area.ui-message-position-right .ui-message-pane,
+#user-interface.ui-mobile-stack .ui-main-area.ui-message-position-top .ui-message-pane {
+    grid-column: 1;
+    grid-row: 2;
+    border-left: none;
+    border-top: 1px solid #d8d9db;
+    padding: 6px;
+}
+
 .ui-message-pane {
     min-width: 0;
     min-height: 0;

browser/dasher/userinterface.js

@@ -167,6 +167,7 @@ export default class UserInterface {
     this._messagePosition = 'right';
     this._messagePaneWidth = 420;
     this._resizingMessagePane = false;
+    this._mobileStackLayout = false;
     this._uiPreferencesKey = 'dasher-ui-preferences';
     this._gameMode = false;
     this._gameTarget = '';
@@ -893,6 +894,13 @@ export default class UserInterface {
     }
   }
 
+  _update_mobile_layout() {
+    const width = this._parent.getBoundingClientRect().width;
+    const forceStack = width <= 1100;
+    this._mobileStackLayout = forceStack;
+    this._parent.classList.toggle('ui-mobile-stack', forceStack);
+  }
+
   _attach_message_resizer() {
     if (this._messageResizeHandle === undefined || this._mainArea === undefined) {
       return;
@@ -1708,6 +1716,7 @@ export default class UserInterface {
   }
 
   _finish_load() {
+    this._update_mobile_layout();
     this._limits.svgPiece = this._svg;
     this._on_resize();
     window.addEventListener('resize', this._on_resize.bind(this));
@@ -2017,6 +2026,7 @@ export default class UserInterface {
   }
 
   _on_resize() {
+    this._update_mobile_layout();
     this.svgRect = this._svg.node.getBoundingClientRect();
 
     if (this._controller !== null) {