sButtons/sbuttons

Toggle button not fully visible on Firefox

Closed this issue · 6 comments

andypants888 commented

Hi! I'm Andrew and I'm new to contributing and coding in general so please let me know if I have missed some obvious or common detail. Thank you.

  1. Bug description below:

When using the toggle button feature on Mozilla Firefox, the toggle button is partly hidden along the left/right padding at page-load. Once the user clicks on the toggle button, the full button becomes visible.

  • Partly hidden - Firefox 87 (desktop)
  • Partly hidden - Firefox 88 (android)
  • Normal - Brave (android)
  • Normal - Chrome (android & desktop)
  1. Expected Behavior:

The toggle initial view should be same on both Firefox and Chrome.

  1. Screenshots:

Here is a JS Fiddle showing the problem: LINK

Overview:
toggle_bug_screenshot

While inspecting element:
image

  1. Additional:

I tried setting the padding from 10px to 0px (in the css input), but this caused the white middle button to be incorrectly positioned.

I am thinking maybe the way to fix this is to look in the .less file, adjust the padding rules for the "input checkbox", adjust the white button animations, recompile, and test in various browsers.

Do you guys have any thoughts? Or opinions on how to approach this?

I'd like to work on this, but not cause extra problems... this would be my first real contribution to any project.

github-actions commented

Hi, @andypants888,
Thanks for opening an issue 💙 your issue will be seen by maintainers soon.
Contributors 🧑‍🤝‍🧑 like you make the open source community 🌍 such an amazing place to learn 📖 , inspire 👼, and create 🎨 .
We will investigate 👀 and get back to you as soon as possible 👍 .
Just make sure you have given us sufficient information ℹ️.
By that time enjoy this joke 👇 , hope you like it 😄

Why did the Python data scientist get arrested at customs?
She was caught trying to import pandas!

Use this action on your projects. Use memes on issues action instead.

shahednasser commented

Hello Andrew. Sorry for the late delay and thank you for your interest in contributing to sButtons!

That was a nice catch. I'll assign you to this issue. Let me know if you need any help while working on this.

andypants888 commented

Hi shahed!

No worries at all. I've been working on the issue this week and I've been getting some trouble from the lessc compiler (maybe prettier too)

I planned to make 3 changes to 2 files, in toggle.less and variables.less

When I run npm start, my changes to the .less files are not compiling as expected. I have tried running npm start before making the changes, but then prettier will loop repeatedly without stopping.

My main problems are:

  1. lessc is causing unexpected changes in slides 4 & 6 to the hover in the snake-btn, and to the font-face src version.

  2. after running prettier, my git shows that 89/91 files have been modified, but no text inside the files have actually been modified.

Again, I've put the screenshots in the link below, and if you can offer any advice, I'd be very grateful.

SCREENSHOTS HERE: google slides link

github-actions commented

@shahednasser reporting a stale issue.

shahednasser commented

Hi @andypants888 after making changes to any less file, you just need to run npm run compile and commit the changes.

github-actions commented

@shahednasser reporting a stale issue.