Better comments UI for mobile

www/pad/app-pad.less

@@ -24,6 +24,21 @@ body.cp-app-pad {
         overflow: hidden;
     }
 
+    @media screen and (max-height: @browser_media-medium-screen),
+           screen and (max-width: @browser_media-medium-screen) {
+        #cp-app-pad-toc {
+            margin: 5px;
+            &.hidden {
+                margin: 1px;
+            }
+        }
+        #cp-app-pad-comments {
+            .cp-pad-show, .cp-pad-hide {
+                display: none;
+            }
+        }
+    }
+
     #cp-app-pad-toc, #cp-app-pad-comments, #cp-app-pad-resize {
         .cp-pad-show, .cp-pad-hide {
             position: absolute;
@@ -110,6 +125,29 @@ body.cp-app-pad {
             }
         }
     }
+    #cp-app-pad-comments {
+        order: 3;
+        width: 330px;
+        //background-color: white;
+        margin: 10px;
+        position: relative;
+        .cp-pad-show, .cp-pad-hide {
+            left: 0;
+        }
+        h2 {
+            font-size: 1.5rem;
+            text-align: right;
+        }
+        .comments_main();
+    }
+    .cp-app-pad-comments-modal {
+        display: flex;
+        flex-flow: column;
+        max-height: 100%;
+        h2 {
+            text-align: left;
+        }
+    }
 
     .cke_toolbox_main {
         background-color: @cp_toolbar-bg;
@@ -197,21 +235,6 @@ body.cp-app-pad {
                 }
             }
         }
-        #cp-app-pad-comments {
-            order: 3;
-            width: 330px;
-            //background-color: white;
-            margin: 10px;
-            position: relative;
-            .cp-pad-show, .cp-pad-hide {
-                left: 0;
-            }
-            h2 {
-                font-size: 1.5rem;
-                text-align: right;
-            }
-            .comments_main();
-        }
         &.cke_body_width {
             div.cp-comment-bubble {
                 button {

www/pad/comments.js

@@ -636,6 +636,8 @@ define([
         // If we've clicked on the show/hide buttons, always use our latest local value
         if (typeof(Env.localHide) === "boolean") { hide = Env.localHide; }
 
+        if (Env.mobile) { hide = false; }
+
         Env.$container.removeClass('hidden');
         if (hide) { Env.$container.addClass('hidden'); }
 
@@ -644,6 +646,10 @@ define([
             $showBtn.addClass('notif');
         }
 
+        if (Env.mobile && Env.current) {
+            Env.$container.find('.cp-comment-container[data-uid]').hide();
+            Env.$container.find('.cp-comment-container[data-uid="' + Env.current + '"]').show();
+        }
 
         Env.$container.show();
     };
@@ -823,6 +829,9 @@ define([
                         v: canonicalize(Env.editor.getSelection().getSelectedText())
                     }]
                 };
+
+                Env.current = uid;
+
                 // There may be a race condition between updateMetadata and addMark that causes
                 //  * updateMetadata first:  comment not rendered (redrawComments called
                 //                           before addMark)
@@ -839,6 +848,12 @@ define([
 
             Env.$container.show();
             Env.$container.find('> h2').after(form);
+
+            if (Env.modal) {
+                UI.openCustomModal(Env.modal);
+                Env.current = undefined;
+                Env.$container.find('.cp-comment-container[data-uid]').hide();
+            }
         };
 
 
@@ -934,7 +949,16 @@ define([
             var $comment = $(e.target);
             var uid = $comment.attr('data-uid');
             if (!uid) { return; }
+            if (Env.modal) {
+                UI.openCustomModal(Env.modal);
+                Env.current = uid;
+                Env.$container.find('.cp-comment-container[data-uid]').hide();
+                setTimeout(function () {
+                Env.$container.find('.cp-comment-container[data-uid="' + uid + '"]').show().click();
+                });
+            } else {
                 Env.$container.find('.cp-comment-container[data-uid="' + uid + '"]').click();
+            }
         });
 
         var call = function(f) {

www/pad/inner.js

@@ -101,6 +101,7 @@ define([
         logFights: true,
         fights: [],
         Cursor: Cursor,
+        mobile: $('body').width() <= 600
     };
 
     // MEDIATAG: Filter elements to serialize
@@ -688,10 +689,13 @@ define([
             $iframe: $iframe,
             $inner: $inner,
             $contentContainer: $contentContainer,
-            $container: $('#cp-app-pad-comments')
+            $container: $(APP.commentsEl),
+            modal: APP.mobile && APP.comments,
+            mobile: APP.mobile
         });
 
         var $resize = $('#cp-app-pad-resize');
+        if (module.mobile) { $resize.hide(); }
         var $toc = $('#cp-app-pad-toc');
         $toc.show();
 
@@ -714,6 +718,7 @@ define([
             mkHelpMenu(framework);
         }
 
+        /*
         framework._.sfCommon.getAttribute(['pad', 'width'], function(err, data) {
             var active = data || typeof(data) === "undefined";
             if (active) {
@@ -722,6 +727,7 @@ define([
                 editor.execCommand('pagemode');
             }
         });
+        */
 
         framework.onEditableChange(function(unlocked) {
             if (!framework.isReadOnly()) {
@@ -813,9 +819,13 @@ define([
                 hide = md.defaultWidth === 0;
             }
 
-            // If we've clicking on the show/hide buttons, always use our last value
+            // If we've clicked on the show/hide buttons, always use our last value
             if (typeof(localHide) === "boolean") { hide = localHide; }
 
+            if (APP.mobile) {
+                hide = false;
+            }
+
             $contentContainer.removeClass('cke_body_width');
             $resize.removeClass('hidden');
             if (hide) {
@@ -870,7 +880,7 @@ define([
             } else {
                 hide = md.defaultOutline === 0;
             }
-            // If we've clicking on the show/hide buttons, always use our last value
+            // If we've clicked on the show/hide buttons, always use our last value
             if (typeof(localHide) === "boolean") { hide = localHide; }
 
             $toc.removeClass('hidden');
@@ -1401,7 +1411,20 @@ define([
                 var $ckeToolbar = $('#cke_1_top').find('.cke_toolbox_main');
                 $mainContainer.prepend($ckeToolbar.addClass('cke_reset_all'));
                 $contentContainer.append(h('div#cp-app-pad-resize'));
-                $contentContainer.append(h('div#cp-app-pad-comments'));
+
+                var comments = h('div#cp-app-pad-comments');
+                APP.commentsEl = comments;
+                if (APP.mobile) {
+                    APP.comments = UI.dialog.customModal(comments, {
+                        buttons: [{
+                            name: Messages.filePicker_close,
+                            onClick: function () {}
+                        }]
+                    });
+                    $(APP.comments).addClass('cp-app-pad-comments-modal');
+                } else {
+                    $contentContainer.append(comments);
+                }
                 $contentContainer.prepend(h('div#cp-app-pad-toc'));
                 $ckeToolbar.find('.cke_button__image_icon').parent().hide();