1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Fixed 'Insert Quotes...' button issue in responsive

Discussion in 'Resolved Bug Reports' started by Null, Feb 22, 2014.

  1. Null

    Null Well-Known Member

    There seems to be a little issue with the 'Insert Quotes...' button on my mobile device, no idea about other mobile devices as I haven't checked yet (iPhone 5S, iOS 7.0.6/Safari).
    safari_quote1.png safari_quote2.png
     
  2. Lawrence

    Lawrence Well-Known Member

    Just tested on my iPad mini in portrait mode and no issues. :)
     
    Null likes this.
  3. Null

    Null Well-Known Member

    I assume it's purely down to screen resolution and elements fitting within said space.
     
  4. Liam W

    Liam W Well-Known Member

    Looks a bit off on Nexus 5...

    Screenshot_2014-02-22-15-18-43.png
     
  5. NixFifty

    NixFifty Well-Known Member

    Confirmed on my iPhone 5.
     
  6. Sheratan

    Sheratan Well-Known Member

    Confirmed on IE 11 Windows Phone, both potrait and landscape
     
  7. Mike

    Mike XenForo Developer Staff Member

    I assume the only real issue is the vertical alignment, which is from the float. The rest of the wrapping is simply what happens with a left floated element alongside right aligned elements.
     
  8. Mike

    Mike XenForo Developer Staff Member

    I've sorted the vertical alignment.
     
  9. Chris D

    Chris D XenForo Developer Staff Member

    There was a point where I thought about reporting this as a bug -- I know it's designed that way and why. But to me it still looks odd on a smaller screen.

    I did wonder if having two Insert Quote buttons on screen could be a solution, with them being hidden/shown depending on viewport width.

    upload_2014-2-25_13-45-34.png

    Better than this:

    upload_2014-2-25_13-47-58.png
     
    Null likes this.
  10. Chris D

    Chris D XenForo Developer Staff Member

    I've just had another thought about this:

    It's debatable whether the Insert Quotes button needs to be floated left anyway. To insert a quote it's on the left. To insert a file it's on the right. To insert the post it's on the right. To add a quote to multi quote it's on the right.

    That button specifically being on the left seems inconsistent.
     
    Null likes this.
  11. Null

    Null Well-Known Member

    I think the first image in your previous post looks pretty much spot on.

    These buttons are the only thing I dislike about XF's mobile-responsive layout, it makes me cringe to see such a small thing ruin how beautiful XF looks/works on mobile.
     
  12. Chris D

    Chris D XenForo Developer Staff Member

    It's actually quite simple to do it yourself. You could just have it floated right permanently like this: (Add to EXTRA.css)

    Code:
    button.MultiQuoteWatcher
    {
        float: right;
    }
    or use some media queries to affect that at certain screen sizes.

    My idea of having two buttons is probably a bit overkill.
     

Share This Page