Tweak UX on mobile

Since Mobile Safari automatically resizes iframes to fit their content, we need to avoid using position:fixed. In this commit we:

- Eliminate use of position:fixed for dropdowns. They are instead displayed statically, like on desktop.
- Reposition modals when they are shown according to the parent window's scroll position.
- Tweak the toolbar's appearance and height on mobile.

extensions/embed/js/forum/src/main.js

@@ -1,4 +1,4 @@
-import { override } from 'flarum/extend';
+import { override, extend } from 'flarum/extend';
 import app from 'flarum/app';
 import Composer from 'flarum/components/Composer';
 import ModalManager from 'flarum/components/ModalManager';
@@ -35,6 +35,19 @@ app.initializers.replace('boot', () => {
     return original(post).replace('/embed', '/d');
   });
 
+  app.pageInfo = m.prop();
+
+  extend(ModalManager.prototype, 'show', function() {
+    const info = app.pageInfo();
+    this.$().css('top', Math.max(0, info.scrollTop - info.offsetTop));
+  });
+
+  window.iFrameResizer = {
+    readyCallback: function() {
+      window.parentIFrame.getPageInfo(app.pageInfo);
+    }
+  };
+
   app.pane = new Pane(document.getElementById('app'));
   app.drawer = new Drawer();
   app.composer = m.mount(document.getElementById('composer'), Composer.component());

extensions/embed/less/forum/extension.less

@@ -1,6 +1,10 @@
 .container {
   width: auto;
   padding: 0 20px;
+
+  @media @phone {
+    padding: 0;
+  }
 }
 .App {
   padding-top: 0;
@@ -14,13 +18,15 @@
   border-top: 0;
 }
 .DiscussionPage-nav--embed {
-  height: 70px;
+  @media @tablet-up {
+    height: 70px;
+  }
 
   > ul {
     z-index: 100;
     background: @body-bg;
     list-style: none;
-    padding: 0;
+    padding: 15px 0;
     margin: 0;
     border-bottom: 1px solid @control-bg;
 
@@ -29,24 +35,26 @@
       left: 0;
       right: 0;
       top: 0;
-      padding: 0 15px;
+      padding: 15px 15px;
     }
 
     > li {
-      margin: 15px 15px 15px 0;
+      margin: 0 15px 0 0;
       display: inline-block;
-
-      .Dropdown-menu {
-        left: 0;
-        right: auto;
-      }
     }
-    .item-replies h3 {
+    .item-replies {
-      font-weight: normal;
+      @media @phone {
-      margin: 0;
+        display: block;
+        margin-bottom: 10px;
+      }
 
-      &, a {
+      h3 {
-        color: @muted-color;
+        font-weight: normal;
+        margin: 0;
+
+        &, a {
+          color: @muted-color;
+        }
       }
     }
   }
@@ -57,3 +65,19 @@
 .Post-stream {
   margin-top: 0;
 }
+
+@media @phone {
+  .Dropdown .Dropdown-menu {
+    position: absolute;
+    bottom: auto;
+    top: auto;
+    right: auto !important;
+    padding-bottom: 0 !important;
+    .transition(none);
+
+    &.Dropdown-menu--right {
+      left: auto !important;
+      right: 0 !important;
+    }
+  }
+}