New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Adjust buttons respective to viewport #726

Closed
rexagod opened this Issue Jan 29, 2019 · 9 comments

Comments

Projects
None yet
7 participants
@rexagod
Copy link

rexagod commented Jan 29, 2019

Hi, this is a first-timers-only issue. This means we've worked to make it more legible to folks who either haven't contributed to our codebase before, or even folks who haven't contributed to open source before.

If that's you, we're interested in helping you take the first step and can answer questions and help you out as you do. Note that we're especially interested in contributions from people from groups underrepresented in free and open source software!

We know that the process of creating a pull request is the biggest barrier for new contributors. This issue is for you 💝

If you have contributed before, consider leaving this one for someone new, and looking through our general help wanted issues. Thanks!

🤔 What you will need to know.

Nothing. This issue is meant to welcome you to Open Source :) We are happy to walk you through the process.

📋 Step by Step

  • 🙋 Claim this issue: Comment below. If someone else has claimed it, ask if they've opened a pull request already and if they're stuck -- maybe you can help them solve a problem or move it along!

  • 📝 Update: Currently the buttons specified here are not responsive due to the fact that their widths have been defined in px or pixels. You need to set the widths of both of these buttons to 35% so that they can adjust accordingly. Changes that need to made are located in demo.css file.

    #save-seq {
    display: block;
    margin: 0px 10px 0px 0px;
    width: 250px;
    }

    #gif {
    display: block;
    margin: 0px 0px 0px 10px;
    width: 250px;
    }

  • 💾 Commit your changes

  • 🔀 Start a Pull Request. There are two ways how you can start a pull request:

  1. If you are familiar with the terminal or would like to learn it, here is a great tutorial on how to send a pull request using the terminal.

  2. You can also edit files directly in your browser and open a pull request from there.

  • 🏁 Done Ask in comments for a review :)

🤔 Questions?

Leave a comment below!

Is someone else already working on this?

We encourage you to link to this issue by mentioning the issue # in your pull request, so we can see if someone's already started on it. If someone seem stuck, offer them some help! Otherwise, take a look at some other issues you can help with. Thanks!

@VibhorCodecianGupta

This comment has been minimized.

Copy link

VibhorCodecianGupta commented Jan 29, 2019

@gauravano @rexagod I already tried something like this previously, check this commit out.

adding media queries and removing min-width solves this issue, but discussions with @jywarren on that PR concluded in not going for complex CSS manipulations, please check the PR #583 for reference.

@gauravano

This comment has been minimized.

Copy link
Member

gauravano commented Jan 29, 2019

@jywarren should we close this one then?

@rexagod

This comment has been minimized.

Copy link
Author

rexagod commented Jan 29, 2019

Hey @VibhorCodecianGupta! I really don't think there's anything complex here. The widths are just being converted to a dynamic proportion here that inherit the parent's width. Changing 250px to 35% is all that needs to be done here, no media queries, no min-width removal. This in my opinion is one of the simplest solutions for this issue, but if there's some fault in it though that I may not be seeing, please feel free to close this issue. Thanks!

@HarshKhandeparkar

This comment has been minimized.

Copy link
Member

HarshKhandeparkar commented Jan 31, 2019

@rexagod @VibhorCodecianGupta I'm adding the label for now. Don't relly know if this should be closed

@jywarren

This comment has been minimized.

Copy link

jywarren commented Jan 31, 2019

I mainly meant we should try to focus on a slight overhaul of this UI area - i opened an issue for it today! #735 But this is also fine as a shorter term solution! 👍

@ananyaarun

This comment has been minimized.

Copy link

ananyaarun commented Feb 11, 2019

May i work on this issue , if it is still valid ? @jywarren

@gauravano

This comment has been minimized.

Copy link
Member

gauravano commented Feb 11, 2019

Hi @ananyaarun, actually the PR #735 is solved but the branch gh-pages still needs to be updated with the commit so let's wait for the push to the branch to see if this issue is solved or not. I guess @IgorWilbert can confirm too? Thanks!

@Harshithpabbati

This comment has been minimized.

Copy link
Member

Harshithpabbati commented Feb 13, 2019

can i work on this issue @jywarren

@jywarren

This comment has been minimized.

Copy link

jywarren commented Feb 13, 2019

Hi, all, i believe this is resolved now and will close this accordingly. Perhaps some other Image Sequencer community members would be willing to help @Harshithpabbati and @ananyaarun find a new issue to work on? Thanks all!

@jywarren jywarren closed this Feb 13, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment