|
3011 | 3011 | {% trans "Match" %} |
3012 | 3012 | </li> |
3013 | 3013 | </a> |
| 3014 | + {% if user.is_authenticated %} |
3014 | 3015 | <a class="menu-link" href="{% url 'progress' %}"> |
3015 | 3016 | <li class="mb-2 menu ps-3 py-1"> |
3016 | 3017 | {% trans "Progress" %} |
3017 | 3018 | </li> |
3018 | 3019 | </a> |
| 3020 | + {% endif %} |
3019 | 3021 | </ul> |
3020 | 3022 | </div> |
3021 | 3023 | </li> |
|
3148 | 3150 | </div> |
3149 | 3151 | {% endif %} |
3150 | 3152 |
|
3151 | | - <span class="hamburger-button-menu ms-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" aria-label="Toggle navigation"> |
| 3153 | + |
| 3154 | + <!-- language switcher (moved into right-side toolbar) --> |
| 3155 | + <div class="dropdown ms-2" style="margin-left:10px;margin-right:5px;"> |
| 3156 | + {% get_current_language as CURRENT_LANG %} |
| 3157 | + {% with code=CURRENT_LANG|lower|slice:":2" %} |
| 3158 | + <button class="nav-link dropdown-toggle btn btn-link p-0" |
| 3159 | + id="langDropdown" |
| 3160 | + data-bs-toggle="dropdown" |
| 3161 | + aria-expanded="false" |
| 3162 | + title="{% trans 'Language' %}" |
| 3163 | + type="button"> |
| 3164 | + {% if code == "en" %} |
| 3165 | + 🌐 |
| 3166 | + {% elif code == "es" %} |
| 3167 | + <img class="flag-icon" src="{% static 'images/flags/es.png' %}" alt="Español"> |
| 3168 | + {% elif code == "zh" %} |
| 3169 | + <img class="flag-icon" src="{% static 'images/flags/cn.png' %}" alt="简体中文"> |
| 3170 | + {% elif code == "fr" %} |
| 3171 | + <img class="flag-icon" src="{% static 'images/flags/fr.png' %}" alt="Français"> |
| 3172 | + {% elif code == "ja" %} |
| 3173 | + <img class="flag-icon" src="{% static 'images/flags/jp.png' %}" alt="日本語"> |
| 3174 | + {% elif code == "ko" %} |
| 3175 | + <img class="flag-icon" src="{% static 'images/flags/kr.png' %}" alt="한국어"> |
| 3176 | + {% else %} |
| 3177 | + 🌐 |
| 3178 | + {% endif %} |
| 3179 | + </button> |
| 3180 | + {% endwith %} |
| 3181 | + |
| 3182 | + <ul id="lang_menu" class="dropdown-menu dropdown-menu-end" aria-labelledby="langDropdown"> |
| 3183 | + <li><a class="dropdown-item d-flex align-items-center lang-choice" href="#" data-lang="en"> |
| 3184 | + <img class="flag-icon me-2" src="{% static 'images/flags/us.png' %}" alt="English"> English |
| 3185 | + </a></li> |
| 3186 | + <li><a class="dropdown-item d-flex align-items-center lang-choice" href="#" data-lang="es"> |
| 3187 | + <img class="flag-icon me-2" src="{% static 'images/flags/es.png' %}" alt="Español"> Español |
| 3188 | + </a></li> |
| 3189 | + <li><a class="dropdown-item d-flex align-items-center lang-choice" href="#" data-lang="zh-hans"> |
| 3190 | + <img class="flag-icon me-2" src="{% static 'images/flags/cn.png' %}" alt="简体中文"> 简体中文 |
| 3191 | + </a></li> |
| 3192 | + <li><a class="dropdown-item d-flex align-items-center lang-choice" href="#" data-lang="fr"> |
| 3193 | + <img class="flag-icon me-2" src="{% static 'images/flags/fr.png' %}" alt="Français"> Français |
| 3194 | + </a></li> |
| 3195 | + <li><a class="dropdown-item d-flex align-items-center lang-choice" href="#" data-lang="ja"> |
| 3196 | + <img class="flag-icon me-2" src="{% static 'images/flags/jp.png' %}" alt="日本語"> 日本語 |
| 3197 | + </a></li> |
| 3198 | + <li><a class="dropdown-item d-flex align-items-center lang-choice" href="#" data-lang="ko"> |
| 3199 | + <img class="flag-icon me-2" src="{% static 'images/flags/kr.png' %}" alt="한국어"> 한국어 |
| 3200 | + </a></li> |
| 3201 | + </ul> |
| 3202 | + </div> |
| 3203 | + |
| 3204 | + <span class="hamburger-button-menu ms-2" type="button" data-bs-toggle="collapse" |
| 3205 | + data-bs-target="#navbar_global" aria-controls="navbar_global" aria-expanded="false" |
| 3206 | + aria-label="Toggle navigation"> |
3152 | 3207 | <span class="navbar-toggler-icon"></span> |
3153 | 3208 |
|
3154 | 3209 | </span> |
|
3490 | 3545 | }); |
3491 | 3546 | </script> |
3492 | 3547 |
|
3493 | | - |
3494 | | - |
3495 | 3548 | </div> |
3496 | 3549 | </div> |
3497 | 3550 |
|
| 3551 | + <style> |
| 3552 | + .flag-icon{ |
| 3553 | + width: 30px; |
| 3554 | + height: 21px; |
| 3555 | + object-fit: cover; |
| 3556 | + flex-shrink: 0; |
| 3557 | + margin-right: 10px; |
| 3558 | + display: inline-block; |
| 3559 | + vertical-align: middle; |
| 3560 | + border-radius: 2px; |
| 3561 | + } |
| 3562 | + |
| 3563 | + .dropdown-menu#lang_menu { |
| 3564 | + background-color: #fff !important; |
| 3565 | + border: 1px solid #ccc !important; |
| 3566 | + border-radius: 4px !important; |
| 3567 | + box-shadow: 0 2px 6px rgba(0,0,0,.15) !important; |
| 3568 | + padding: 0 !important; |
| 3569 | + margin-top: 0.5rem !important; |
| 3570 | + min-width: auto !important; |
| 3571 | + width: auto !important; |
| 3572 | + } |
| 3573 | + |
| 3574 | + .dropdown-menu#lang_menu .dropdown-item { |
| 3575 | + color: #4B5868 !important; |
| 3576 | + font-weight: 500; |
| 3577 | + padding: 0.5rem 0.8rem !important; |
| 3578 | + padding-right: 1.2rem !important; |
| 3579 | + background-color: transparent !important; |
| 3580 | + border-bottom: 1px solid #eee; |
| 3581 | + display: flex !important; |
| 3582 | + align-items: center; |
| 3583 | + justify-content: flex-start; |
| 3584 | + } |
| 3585 | + |
| 3586 | + .dropdown-menu#lang_menu .dropdown-item:last-child { |
| 3587 | + border-bottom: none; |
| 3588 | + } |
| 3589 | + |
| 3590 | + .dropdown-menu#lang_menu .dropdown-item:hover, |
| 3591 | + .dropdown-menu#lang_menu .dropdown-item:focus { |
| 3592 | + background-color: #1967D2 !important; |
| 3593 | + color: #fff !important; |
| 3594 | + } |
| 3595 | + |
| 3596 | + .dropdown-menu#lang_menu .dropdown-item.active { |
| 3597 | + background-color: #ffcd11 !important; |
| 3598 | + color: #fff !important; |
| 3599 | + } |
| 3600 | + |
| 3601 | + #langDropdown img.flag-icon { |
| 3602 | + filter: none !important; |
| 3603 | + opacity: 1 !important; |
| 3604 | + } |
| 3605 | + </style> |
| 3606 | + <script> |
| 3607 | + document.addEventListener('DOMContentLoaded', function () { |
| 3608 | + const form = document.getElementById('set-lang-form'); |
| 3609 | + const input = document.getElementById('lang-input'); |
| 3610 | + document.querySelectorAll('.dropdown-item.lang-choice[data-lang]').forEach(a => { |
| 3611 | + a.addEventListener('click', function (e) { |
| 3612 | + e.preventDefault(); |
| 3613 | + input.value = this.dataset.lang; |
| 3614 | + form.submit(); |
| 3615 | + }); |
| 3616 | + }); |
| 3617 | + }); |
| 3618 | + </script> |
| 3619 | + |
| 3620 | + |
| 3621 | + |
| 3622 | + </div> |
| 3623 | + </div> |
| 3624 | + |
3498 | 3625 | </nav> |
3499 | 3626 | </header> |
3500 | 3627 | <script src="{% static 'js/toggles.js' %}"></script> |
|
3675 | 3802 | } |
3676 | 3803 | }); |
3677 | 3804 | }); |
| 3805 | + |
3678 | 3806 | </script> |
3679 | 3807 | <script src="{% static 'js/search_suggestions.js' %}"></script> |
3680 | 3808 |
|
| 3809 | + |
3681 | 3810 | </script> |
3682 | 3811 | <script src="{% static 'js/search_suggestions.js' %}"></script> |
3683 | 3812 |
|
| 3813 | + |
| 3814 | + </script> |
| 3815 | + <script src="{% static 'js/search_suggestions.js' %}"></script> |
| 3816 | + <style> |
| 3817 | + /* Keep navbar link text yellow, including when dropdown is expanded */ |
| 3818 | + .navbar .nav-link, |
| 3819 | + .navbar .nav-link:hover, |
| 3820 | + .navbar .nav-link:focus, |
| 3821 | + .navbar .nav-link:active, |
| 3822 | + .navbar .nav-link:visited, |
| 3823 | + .navbar .nav-link.active, |
| 3824 | + .navbar .dropdown-toggle[aria-expanded="true"], |
| 3825 | + .navbar .dropdown-toggle.show { |
| 3826 | + color: #FFCD11 !important; |
| 3827 | + } |
| 3828 | + |
| 3829 | + /* Ensure icons/arrows inherit the same yellow */ |
| 3830 | + .navbar .nav-link .fas, |
| 3831 | + .navbar .nav-link .nav-link-arrow { |
| 3832 | + color: inherit !important; |
| 3833 | + } |
| 3834 | + </style> |
| 3835 | + |
0 commit comments