• 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

Null

Well-known member
#1
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
 

Mike

XenForo developer
Staff member
#7
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.
 

Chris D

XenForo developer
Staff member
#9
The rest of the wrapping is simply what happens with a left floated element alongside right aligned elements.
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
 

Chris D

XenForo developer
Staff member
#10
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

Well-known member
#11
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.
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.
 

Chris D

XenForo developer
Staff member
#12
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.
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.