input text is too close to edges

[bhavayAnand9]

Please describe the problem (or idea)

As described in this comment, due to the form-class in demo.css the fields in text input are now too close to the edges.

What happened just before the problem occurred? Or what problem could this idea solve?

using .form-control[type="range"] might solve the problem

What did you expect to see that you didn't?

Too close:

OK:

Please show us where to look

https://github.com/publiclab/image-sequencer/blob/main/examples/demo.css#L45

What's your PublicLab.org username?

bhavayanandcse

This can help us diagnose the issue:

Browser, version, and operating system

Many bugs are related to these -- please help us track it down and reproduce what you're seeing!

---

Thank you!

Your help makes Public Lab better! We deeply appreciate your helping refine and improve this site.

To learn how to write really great issues, which increases the chances they'll be resolved, see:

https://publiclab.org/wiki/developers#Contributing+for+non-coders

[welcome]

Thanks for opening your first issue here! Please follow the issue template to help us help you 👍🎉😄
If you have screenshots to share demonstrating the issue, that's really helpful! 📸 You can make a gif too!

[gitmate]

GitMate.io thinks the contributors most likely able to help are @oorjitchowdhary, and @GitMate[bot].

Possibly related issues are #431 (Text overlay), #383 (Input/Output mismatch on applying edge-detect), #459 (Close-parentheses in Dynamic module input get lost when sourced from URL), #166 (Edge detection module), and #389 (When the input is larger make it as textarea).

[gitmate]

GitMate.io thinks the contributors most likely able to help are @oorjitchowdhary, and @GitMate[bot].

Possibly related issues are #431 (Text overlay), #383 (Input/Output mismatch on applying edge-detect), #459 (Close-parentheses in Dynamic module input get lost when sourced from URL), #166 (Edge detection module), and #389 (When the input is larger make it as textarea).

[bhavayAnand9]

it can be a good first-timer-only task.

[kevinzluo]

The changes should be made here:

image-sequencer/examples/demo.css

Lines 45 to 47 in 2161d58

	.form-control {
	padding: 0px 0px;
	}

DIFF:

- .form-control {
+ .form-control[type="range"] {
     padding: 0px 0px; 
  } 

[bhavayAnand9]

@jywarren It's a month old issue and very easy to fix. Can you assign it a fto or first-timers-tag? Thanks

[jywarren]

Done!

---

This has been marked as a good candidate for becoming a first-timers-only issue like these, meaning that it's simple, self-contained, and with some extra formatting, could be a great entry point for a new contributor. If you're familiar enough with this code, please consider reformatting or reposting it as a first-timers-only issue, and then ping @publiclab/reviewers to get it labelled. Or, if this is not your first time, try to solve it yourself!

[sashadev-sky]

I will double check @kevinzluo's solution and repost this as a FTO in the next few hours :) @jywarren @bhavayAnand9

[sashadev-sky]

@bhavayAnand9 @kevinzluo @jywarren I think this issue may be outdated as the UI looks like this now:
http://sequencer.publiclab.org/examples/#steps=contrast{}

Please confirm.

[bhavayAnand9]

@sashadev-sky other modules like crop which uses text inputs instead of range based have still this issue.

[sashadev-sky]

@bhavayAnand9 Sorry I missed that! I went through a few other ones and they were converted to the new UI so I figured they all might be. Is there a reason we changed some and not others?

Would it be preferable to change all of them to the new UI for consistency? If so, I can open up FTOs regarding that.

[bhavayAnand9]

@sashadev-sky I don't think we can change all modules because some modules like white-balance can take input from 0-40k so it'll be difficult to adjust that input on a slider. I guess slider method is more suitable with modules having one input and having a range between 1-100. What do you think?

[sashadev-sky]

@bhavayAnand9 good point! I don't think it matters how many inputs there are just that the range is small enough to be slider friendly as you mentioned. I will open an FTO for your recommended CSS change :)

[sashadev-sky]

@bhavayAnand9 My branch is updated but I think there might be something wrong with my setup. Can you please advise? I have never used grunt before but I ran grunt serve and the demo.css file I am seeing in the Network panel of Chrome dev tools seems to be an old version... it doesn't have a lot of the styles on it

for me it is showing:

[bhavayAnand9]

@sashadev-sky Haha! You had forked a wrong repo. You forked it from jywarren/image-sequencer instead of publiclab/image-sequencer. Jywarren's repo is 159 commits behind.

[jywarren]

oh no! Yes, i am recently usually updating only my feature branches... sorry!!!

…

On Fri, Jan 18, 2019 at 2:38 PM Bhavay Anand ***@***.***> wrote: @sashadev-sky <https://github.com/sashadev-sky> Haha! You had forked a wrong repo. You forked it from jywarren/image-sequencer <https://github.com/jywarren/image-sequencer> instead of publiclab/image-sequencer <https://github.com/publiclab/image-sequencer>. Jywarren's repo is 159 commits behind. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#530 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AABfJ6DXE-AZWKKk1R-ncOGJNG7bnpL7ks5vEiKOgaJpZM4ZB72f> .

[sashadev-sky]

@bhavayAnand9 🙈 🙈
I will fix this and open after the weekend

[bhavayAnand9]

Thanks!

[sashadev-sky]

Closing this issue as I have opened an FTO from it #692