Summary

A hacky fix to adding comments to reviews mobile

Review Request #5441 — Created Feb. 8, 2014 and discarded Oct. 16, 2014, 2:40 p.m.

Information

Owner

mirai

Repository

Review Board

Branch

master

Bugs

Depends On

Reviewers

Groups

reviewboard, students

People

Description

A hacky fix to adding comments to reviews mobile

Originally, when the user tries to "Add comment" on a review from a mobile
device, the browser zooms extremely closely to the input field, and becomes
very difficult to type in the box as the cursor becomes too large.

This was caused by several reasons:
1) Mobile browsers have a zoom system based on the font-size of the input or
textarea
2) The CodeMirror library that was used for the textarea to enable typing code
had a very badly written textarea styling which consisted of font-size: 4px

Due to these, the browser zoomed an unnecessary amount, even though the actual
textarea size was much bigger (CodeMirror does not use the original textarea)

The fix sets the textarea font-size to 32px, and does a hacky fix to the
zooming. This is done by listening to the mouseover event on textarea, and
disabling zoom during that time until mousedown, which fixes the browser zoom

Testing Done

Testing completed through accessing local server through iPhone 5S.

Issues

Description	From	Last Updated
Can we move the function definitions inline? $("input[type=text], textarea") .mouseover(function() { $('head meta[name=viewport]').remove(); ... }) .mousedown(function() { ... }); Please …	david	Feb. 8, 2014, 11:12 p.m.

Fix it!

Does this address issue 3233?
It's also kind of impossible to see the change in CodeMirror. Ideally I'd like to work around this issue in our own code so we can avoid changing a third-party component. If that's impossible, can we at least (a) import the non-minified version of CodeMirror into our source tree so changes are easier to see, and (b) try to contribute the change upstream?

reviewboard/static/rb/js/common.js (Diff revision 1)

An issue was opened. Show all issues

Can we move the function definitions inline?

$("input[type=text], textarea")
    .mouseover(function() {
        $('head meta[name=viewport]').remove();
        ...
    })
    .mousedown(function() {
        ...
    });


Please also use single-quotes around strings. I know we're not consistent in the existant code, but I'm trying to migrate things in that direction.

You could use attr insted of removing and adding an element to the DOM.
$('meta').attr('content', 'user-scalable=1')

It might also be a good idea to combine the two functions into one, and pass in the content value you want to set.

Status:: Discarded