Skip to content
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

Simplifying the structure of s-expandable and removed outdated styles #1145

Open
wants to merge 1 commit into
base: develop
Choose a base branch
from

Conversation

ondrejkonec
Copy link

Problem

Solution

The expandable component uses CSS tricks that are outdated and they are not needed. That is why I think easier solution can work better.

I tried to simplify the component and it works for all content inside s-expandable and there is no need to wrap it into another container (like .s-expandable--content).

This fixes the stacking order bug and also create better user experience, because there is no more jumping content as you can see in the video.

Improving

It is possible to add a simple transition and achieve the same effect (but I think it is not right to have it there).

Comparison

Before

https://www.loom.com/share/b4467d1418c54a239fce305f559a91a1

After

https://www.loom.com/share/025b413f864a4bbfa5c15c4a8b229220

When pull request is accepted

  • Update documentation

What do you think about this solution?

@netlify
Copy link

netlify bot commented Oct 13, 2022

Deploy Preview for stacks ready!

Name Link
🔨 Latest commit de71a8e
🔍 Latest deploy log https://app.netlify.com/sites/stacks/deploys/6347ddc9d94b150008314a92
😎 Deploy Preview https://deploy-preview-1145--stacks.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant