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.

Sign up for GitHub

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

Jump to bottom

Make user menu wider #3618

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

Make user menu wider #3618

wants to merge 1 commit into from

Conversation

shoorick
Copy link
Contributor

Russian user menu is too narrow and word Администрирование doesn't fit menu width. Russian translation of Administration is the longest. Compare this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Administration menu</title>
    <style>
        body {
            font-family: "Montserrat",-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen-Sans","Ubuntu","Cantarell","Helvetica Neue",sans-serif;
        }

        ul {
            list-style: none;
            width: 10em;
            margin: 0;
            padding: 0;
        }

        li {
            margin-bottom: .1rem;
            padding: 0.357rem;
            background: #def;
            font-size: .93rem;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <h1>Menu items</h1>
    <p>Move mouse pointer over the menu to ask for locale.</p>
    <ul>
        <!-- grep -R 'msgid "navigation.admin"' -A 1 | sort | perl -nle 'print qq{<li title="$1">$2</li>} if m{^(.+)/.*msgstr "(.*)"}' -->
        <li title="ar_IQ">الإدارة</li>
        <li title="ca_ES">Gestió</li>
        <li title="cs_CZ">Administrace</li>
        <li title="da_DK">Administration</li>
        <li title="de_DE">Administration</li>
        <li title="el_GR">Διαχείριση</li>
        <li title="en_US">Administration</li>
        <li title="es_ES">Administración</li>
        <li title="eu_ES">Administrazioa</li>
        <li title="fa_IR">مدیریت</li>
        <li title="fi_FI">Ylläpito</li>
        <li title="fr_CA">Administration</li>
        <li title="fr_FR">Administration</li>
        <li title="gd_GB">Ball sgioba rianachd LibreOffice</li>
        <li title="gl_ES">Administración</li>
        <li title="hu_HU">Adminisztráció</li>
        <li title="hy_AM">Ադմինիստրացիա</li>
        <li title="id_ID">Administrasi</li>
        <li title="is_IS">Umsjón</li>
        <li title="it_IT">Amministrazione</li>
        <li title="ja_JP">管理</li>
        <li title="mk_MK">Администрација</li>
        <li title="nb_NO">Administrasjon</li>
        <li title="nl_NL">Beheer</li>
        <li title="pl_PL">Administracja</li>
        <li title="pt_BR">Administração</li>
        <li title="pt_PT">Administração</li>
        <li title="ro_RO">Administrare</li>
        <li title="ru_RU">Администрирование</li>
        <li title="sl_SI">Administracija</li>
        <li title="sr_RS@cyrillic">Администрација</li>
        <li title="sr_RS@latin">Administracija</li>
        <li title="sv_SE">Administration</li>
        <li title="tr_TR">Yönetim</li>
        <li title="uk_UA">Адміністрування</li>
        <li title="vi_VN">Quản trị</li>
        <li title="zh_CN">管理</li>
    </ul>
</body>
</html>

13em is quite enough.

@shoorick
Copy link
Contributor Author

Wrong width: 10em

Fixed width: 13em

@asmecher
Copy link
Member

@NateWr, what's your preferred solution to this kind of layout issue?

@NateWr
Copy link
Contributor

NateWr commented Nov 15, 2022

I think changing width: 10em to min-width: 10em might solve this problem in a way that works best for all languages. It should grow when needed but won't be too wide when the text is shorter.

@shoorick can you try that out and let me know if it addresses the problem?

@shoorick
Copy link
Contributor Author

I've tried replace width with min-width — it looks OK:

English

Russian

@shoorick
Copy link
Contributor Author

It seems that min-width: 10em is useless and can be safely removed for existing translations.

@NateWr
Copy link
Contributor

NateWr commented Nov 15, 2022

We do want to keep the .pkp_navigation_user ul rule. In other translations, we don't want it to be 15em, so it is a deliberate override of .pkp_nav_list ul.

@NateWr
Copy link
Contributor

NateWr commented Nov 15, 2022

Oh, I see what you're saying now. I think what we want is to set the width to auto and the min-width. So it should be:

.pkp_navigation_user ul {
  width: auto;
  min-width: 10em;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
3 participants
@shoorick @asmecher @NateWr