media query for buttons #583
Conversation
|
@VibhorCodecianGupta what about the quick buttons? They too overflow. Can you fix those? Its really annoying on smaller screens. |
|
How about giving the preview images a bootstrap class of |
|
@harshkhandeparkar will look into it! |
|
Sorry I think the class is |
|
@jywarren yes, this can be achieved using btn-block as well, but the white panel behind the two buttons doesn't adjust it's size, and additional css might be required there (which I haven't figured out yet). Example:
How would you suggest we proceed? Using |
|
How about arranging the buttons one below the other on small screens? |
|
We can do that with bootstrap |
|
Wouldn't that break the UX? I feel that would make the view very clogged and full of buttons, if the buttons are listed one below the other, because we already have 4 buttons on the screen |
|
I mean only the save sequence and gif buttons. |
|
The quick buttons are the biggest problem actually. |
|
Yes, I get you. We could do that. Let's see what the maintainers have in mind! |
|
I'm not. LOL I'm actually a GCI student. I met publiclab during GCI this year. 😅 |
|
Oh! Hahaha, that's great. Nice to see you stuck with the Org! |
|
Yep JS is my favourite programming language so I like publiclab/image-sequencer. |
|
so great to be working with you all!
I think we should go with a short-term solution that basically works for
now. But I think we may want to take a more in-depth look at the
organization of this bottom area in general. Like, what is critical, what's
highest priority, vs. what could use smaller buttons or be hidden under a
fold-away pane or something?
Thank you!
…On Fri, Jan 4, 2019 at 9:36 AM HarshKhandeparkar ***@***.***> wrote:
Yep JS is my favourite programming language so I like
publiclab/image-sequencer.
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#583 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJziq18TyYLNIuOAm1HGTnLMREHpEks5u_2bCgaJpZM4ZlqWc>
.
|
|
@jywarren so the short-term solution according to you would be? I think adding |
|
I think btn-block sounds good for now, too -- if we're going to do a larger
redesign, best not spend too much time on custom media queries, perhaps,
until we're sure how it will look? Thank you!
…On Fri, Jan 4, 2019 at 11:29 AM Vibhor Gupta ***@***.***> wrote:
@jywarren <https://github.com/jywarren> so the short-term solution
according to you would be? I think adding btn-block for now should do the
trick, we could look into custom media query for smaller screens in the
long run. What say?
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#583 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ4KfM2mAXVBgI64ijBn_wvRFNM-Vks5u_4FAgaJpZM4ZlqWc>
.
|
|
Nice. I'll push the changes in a minute then. |
|
@jywarren have a look if you may, pushed the easy fix. Looks like so: Tablet view Mobile view |
|
This looks ok for now. Would you want to try adding "overflow:scroll;" CSS
to the thumbnails container? I'm not sure it'll work, but potentially in
touchscreens people could drag it back and forth. Small improvement -- we
could do it in a follow-up if you want, or here!
…On Fri, Jan 4, 2019 at 1:01 PM Vibhor Gupta ***@***.***> wrote:
@jywarren <https://github.com/jywarren> have a look if you may, pushed
the easy fix. Looks like so:
*Tablet view*
[image: screen shot 2019-01-04 at 11 19 52 pm]
<https://user-images.githubusercontent.com/29275810/50703011-b9276f00-1078-11e9-820b-06a84756e287.png>
*Mobile view*
[image: screen shot 2019-01-04 at 11 20 01 pm]
<https://user-images.githubusercontent.com/29275810/50703012-b9276f00-1078-11e9-825f-b2631b406cbf.png>
—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
<#583 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AABfJ88Y_R6MDEtswJSu4uwmX-1DhWpUks5u_5bXgaJpZM4ZlqWc>
.
|
|
@jywarren scrolling works for the quick icons. Had to write a media query for the mobile screens because of the
after putting the scroll and the media query to justify evenly (for mobile screens only, because it works perfectly otherwise), here is how it looks like (notice the scrollbar :D) :
|
|
This looks great. It says I can't merge automatically, so I think with a rebase it can be merged. Thanks! Also we'll figure out the compiling issues real soon - no worries. |
ghost
assigned
|
Rebased and rebuilt! |
|
Done. Nice!!! |
Fixes #582
Make sure these boxes are checked before your pull request (PR) is ready to be reviewed and merged. Thanks!
rake test@publiclab/reviewersfor help, in a comment belowIf tests do fail, click on the red
Xto learn why by reading the logs.Please be sure you've reviewed our contribution guidelines at https://publiclab.org/contributing-to-public-lab-software
Thanks!