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

✅ [OUTREACHY] : Mobile UI optimization #5403

Open
wants to merge 7 commits into
base: main
Choose a base branch
from

Conversation

kemsguy7
Copy link

This pr resolves issue: #5318 where i resolved some ux issues on the mobile view of the registry page.

Key changes


  • Changed display of filters and search input fields to flex column display for better visual alignment
  • Fixed overflowing pill by taking it to a new line and reducing the font size

Demo

mobile-optimization-open-telm.mp4

@kemsguy7 kemsguy7 requested a review from a team as a code owner October 14, 2024 16:21
@kemsguy7 kemsguy7 changed the title updates: fixed mobile ui/ux issues in registry page [OUTREACHY] : Mobile UI optimization Oct 14, 2024
@kemsguy7
Copy link
Author

@svrnm , please kindly review

@tiffany76 tiffany76 added the outreachy Issues for Outreachy Participants label Oct 15, 2024
Copy link
Member

@svrnm svrnm left a comment

Choose a reason for hiding this comment

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

looks good overall, thank you. One additional thing: If there are multiple links at the bottom of an element, the links are not in line (see screenshot below)

Screenshot 2024-10-15 at 08 46 21

@@ -9,7 +9,7 @@
@each $component, $color in $otel-registry-license-colors {
&.badge-#{$component} {
color: white;
background-color: $color;
background-color: $color;
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
background-color: $color;
background-color: $color;

Copy link
Author

Choose a reason for hiding this comment

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

@svrnm do i add a space here too?

@kemsguy7
Copy link
Author

@svrnm , i've applied a fix to this issue, kindly find attached a screenshot
Screenshot 2024-10-15 at 17 03 03

looks good overall, thank you. One additional thing: If there are multiple links at the bottom of an element, the links are not in line (see screenshot below)

Screenshot 2024-10-15 at 08 46 21

</li>
{{ end -}}
{{ end -}}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
{{ end -}}
{{ end -}}

Copy link
Author

Choose a reason for hiding this comment

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

@svrnm please what fix exactly do you need here? the linting?

Copy link
Member

Choose a reason for hiding this comment

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

Add an empty line at the bottom of the file

Copy link
Member

Choose a reason for hiding this comment

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

Note that you might be able to auto fix that by running npm run:format locally

Copy link
Author

Choose a reason for hiding this comment

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

oh! @svrnm , thanks for this. I'm on it.

Copy link
Author

Choose a reason for hiding this comment

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

@svrnm fixed, please review

@svrnm svrnm changed the title [OUTREACHY] : Mobile UI optimization ✅ [OUTREACHY] : Mobile UI optimization Oct 16, 2024
@svrnm
Copy link
Member

svrnm commented Oct 16, 2024

Minor issue, but beyond that this looks good!

When you have applied that minor change, I consider this as done! After the outreachy application phase we will take another look and see if we can merge this PR.

</li>
{{ end -}}
{{ end -}}
Copy link
Member

Choose a reason for hiding this comment

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

Suggested change
{{ end -}}
{{ end -}}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
outreachy Issues for Outreachy Participants
Projects
Status: No status
Development

Successfully merging this pull request may close these issues.

3 participants