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

Fix inconsistent alignment in Language button and Fix Story description overlapping footer contents, if description text is large #175

Closed
wants to merge 6 commits into from

Conversation

prajwalkulkarni
Copy link

@prajwalkulkarni prajwalkulkarni commented Mar 15, 2022

Issue Number

fixes #173
fixes #178

Describe the changes you've made
#173
Removed classes on <EOS_KEYBOARD_ARROW_UP />, <EOS_KEYBOARD_ARROW_DOWN /> components, along with the class on div that holds the string Language so that inconsistent margin/padding is eliminated.
Also replaced padding specified on .btn class from px units to rem.
Added the property align-items: center to fix the alignment.

#178
Replaced absolute viewport height of story page with auto to contain the expanded story description and avoid overlapping and overflowing.

Describe if there is any unusual behavior (Any Warning) of your code(Write NA if there isn't)
NA

Additional context (OPTIONAL)

Test plan (OPTIONAL)

A good test plan should give instructions that someone else can easily follow.

Checklist

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • All new and existing tests passed.
  • The title of my pull request is a short description of the requested changes.

Provide a Deployed link of route/page that needs to review
Arrow icon and string aligned properly with no unwanted extra padding between/around the elements.
issue

issue

@prajwalkulkarni prajwalkulkarni changed the title Fix inconsistent alignment in Language button Fix inconsistent alignment in Language button and Fix Story description overlapping footer contents, if description text is large Mar 16, 2022
border: 0;
border-radius: 10px;
padding: 8px 16px;
padding: 0.5rem;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is not fixing the issue on the language button, unfortunately. Plus it is changing our UI.

You need to consider that this class is use globally, so altering it will alter all buttons. the problem in the language button is that it is inserting an SVG icon rather than a element with the name of the icon. This would fix the problem.

@@ -25,7 +25,7 @@
}

&-page {
height: 100vh;
height: auto;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this isn't a good solution either. the story-page class is used globally. You will be breaking the UI of other pages with this. The 100vh is to get full vertical hight. Setting it to Auto means it will only get the hight of its container (depending on the content and not the size of the screen)

If the problem is in the footer, you need to work on solutions tackling specifically the component, or footer page.

This pull request was closed.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants