search

openlab-at-city-tech / webworkqa

WeBWorK integration for WordPress and BuddyPress
GNU General Public License v2.0
4 stars 2 forks source link

Mobile layout suggestions #125

Open moui72 opened 6 years ago

moui72 commented 6 years ago

I think that the smallest breakpoint should be extended to slightly larger viewpoints. I'll refer to breakpoints using the bootstrap convention: the smallest breakpoint "XS", then "SM", "MD", "LG" "XL"

Here's what I mean:

The "XS" breakpoint looks great: xs

The "MD" also looks great md

The "SM" breakpoint (between XS and MD, ~500px > width > 770) looks a little wonky to me. I think the filters and user avatars should be hidden as in the XS breapoint. sm

boonebgorges commented 6 years ago

I made the adjustments locally and I agree that it looks better in most places. Some screenshots are below. I'll cc @jennaspevack so she can give it a think. This is likely the kind of thing we'd want to tackle in a future term, so that we can have time for a full review at various breakpoints (there's bound to be wonkiness).

screenshot_2018-05-31_08-46-13 screenshot_2018-05-31_08-45-40 screenshot_2018-05-31_08-45-24

moui72 commented 6 years ago

sounds good

jennaspevack commented 6 years ago

I'm not sure if I'm seeing the changes Tyler suggested. SM still looks wonky to me.

I find the SM and MD to be wonky and would prefer to see the filters moved to the search dropdown for under, say 900px(?) But I'd need to think on this a bit more. :)

One thing I am seeing is that the Most Recent dropdown is hiding the Questions and Replies heading. image

boonebgorges commented 6 years ago

I'm not sure if I'm seeing the changes Tyler suggested. SM still looks wonky to me.

I didn't make the changes in the repo, so you can't see them on openlabdev.org. I just made them locally for the purposes of screenshots. What you see in the screenshot is just a couple lines' change in the stylesheet, so it's doable for now from a technical point of view, but I didn't want to go ahead with it because I was afraid it'd trigger a wholesale review of the breakpoint, which we can't do at the moment.

@jennaspevack Regarding the overlap, can you give a suggestion about what ought to happen? Should the header be narrower so it breaks to two lines? Or should the dropdown go above the header? Or below? This is likely a change that can be made in the short term, so it might be worth breaking out from the current ticket.

jennaspevack commented 6 years ago

Sorry, @boonebgorges- I missed this. If it's not too late, it could just go above the the header.

boonebgorges commented 6 years ago

Sounds good. I've made the change at these medium widths. This will have to suffice for now, until we have a full review of breakpoints.

screenshot_2018-08-02_09-34-13