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

Small screen sizes cause the translation dropdown to overflow to the next row. #163

Open
alamshafil opened this issue Aug 4, 2022 · 9 comments
Assignees
Labels
ui-improvment Improvements on the UI

Comments

@alamshafil
Copy link
Contributor

As written by @xanimo in #125 (review)

Small screen sizes cause the translation dropdown to overflow to the next row.

image
On page load on the landing when the navbar is expanded we're still getting those funky styles on the translation dropdown.

@Maniixer
Copy link

Maniixer commented Aug 4, 2022

removing the flag would be a good idea as its not needed to show the languages, Having EN, SP,FR,.... is more then enough.

@qlpqlp qlpqlp added the ui-improvment Improvements on the UI label Aug 12, 2022
@qlpqlp qlpqlp self-assigned this Aug 12, 2022
@qlpqlp
Copy link
Contributor

qlpqlp commented Aug 12, 2022

Thanks @alamshafil and @Maniixer :)
There are some names like PT-PT that are a litter bigger. Should we remove the tags and only show the flags? or lower the font size and remove the flags?

@Maniixer
Copy link

I would say removing the flags is best, as some have problem recognizing what flag belongs to what country.

@Maniixer
Copy link

What you also can do is make the logo smaller on mobile as it does not need to take over the whole nav :p

@qlpqlp
Copy link
Contributor

qlpqlp commented Aug 12, 2022

Will do that @Maniixer :)
Much thanks for helping (yes I know also your hard efforts on helping dogecoin.com) :)

@Maniixer
Copy link

image

  • changed class names to class="badge bg-dark text-light comic-neue" some had class name class="badge bg-dark text-ligh comic-neuet"
    image

  • Added a div to put all the language links in it.

  • Removed in .badge{
    padding: 0.35em 1.6500000000000004em;
    }

@qlpqlp
Copy link
Contributor

qlpqlp commented Aug 12, 2022

image

  • changed class names to class="badge bg-dark text-light comic-neue" some had class name class="badge bg-dark text-ligh comic-neuet"
    image
  • Added a div to put all the language links in it.
  • Removed in .badge{
    padding: 0.35em 1.6500000000000004em;
    }

I like your aproche, but I have to admit, shibes like to see the flags also :P

@Maniixer
Copy link

yes you can keep the flags, if the logo on mobile is just smaller it fixes it.

@Maniixer
Copy link

Maniixer commented Aug 14, 2022

@qlpqlp what you think about this?, before the text would move out of the box because of a fixed width and when hovering over a language it shows it better.

margin-top: -1px i think should not be there

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ui-improvment Improvements on the UI
Projects
None yet
Development

No branches or pull requests

3 participants