A hacky fix to adding comments to reviews mobile

Review Request #5441 — Created Feb. 8, 2014 and discarded

mirai
Review Board
master
reviewboard, students

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 completed through accessing local server through iPhone 5S.

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 ...

daviddavid
david
  1. 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?

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

    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.

  3. 
      
OL
  1. 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.

  2. 
      
MI
Review request changed

Status: Discarded

Loading...