[Userscript] Fix pentru alinierea defectuoasă a meniului de profil pe mobil

[Viper]

Salut, nu știu ce modificări au fost făcute recent dar dacă intru de pe telefon mă zgârie pe retină treaba asta de câteva zile.

Și nu numai pe mine, mulțumesc @Radutuby pentru că mi-ai scris și tu legat de bug cât și pentru ajutorul la teste.

Scriptul se află aici: orange_fix_mobile_menu.user.js

Anunţ

// ==UserScript==
// @name        Comunitatea Orange - Mobile Menu Fix
// @namespace   Violentmonkey Scripts
// @match       https://comunitate.orange.ro/*
// @version     1.2
// @description Repară spațierea meniului pe mobil.
// @author      Viper @ comunitate.orange.ro
// ==/UserScript==

(function() {
    'use strict';

    // 1. CSS de bază pentru structură
    const baseStyle = document.createElement('style');
    baseStyle.innerHTML = `
        /* Anulăm marginile haotice, lăsăm desktop-ul în pace */
        ul[id^="userNavDropdown"] li .lia-header-nav-component-widget {
            margin: 0 !important;
            padding: 0 !important;
            border: none !important;
            background: transparent !important;
            min-height: 0 !important;
        }

        /* Transformăm linkul într-un rând flexibil capabil să țină badge-ul */
        ul[id^="userNavDropdown"] li .lia-header-nav-component-widget > a {
            display: flex !important;
            align-items: center !important;
            justify-content: space-between !important;
            width: 100% !important;
            box-sizing: border-box !important;
            text-decoration: none !important;
        }

        /* Stilizarea organică a bulei portocalii */
        ul[id^="userNavDropdown"] li .lia-header-nav-component-widget .lia-header-nav-component-unread-count {
            position: static !important;
            margin: 0 !important;
            background-color: #ff6600 !important;
            color: white !important;
            border-radius: 10px !important;
            padding: 2px 8px !important;
            font-size: 12px !important;
            font-weight: bold !important;
            line-height: 1 !important;
        }

        /* Ascundem feedback-ul ajax rezidual */
        ul[id^="userNavDropdown"] li .lia-inline-ajax-feedback {
            display: none !important;
        }
    `;
    document.head.appendChild(baseStyle);

    // 2. Funcția de sincronizare
    function syncMenuStyles() {
        const dropdown = document.querySelector('.user-navigation-settings-drop-down');
        if (!dropdown || dropdown.style.display === 'none') return;

        // Găsim un element nativ care arată perfect ("My profile")
        const referenceLink = dropdown.querySelector('ul[id^="userNavDropdown"] > li > a.lia-link-navigation');
        if (!referenceLink) return;

        // Citim matematica de randare a platformei
        const style = window.getComputedStyle(referenceLink);
        const perfectPadding = `${style.paddingTop} ${style.paddingRight} ${style.paddingBottom} ${style.paddingLeft}`;

        const widgets = dropdown.querySelectorAll('ul[id^="userNavDropdown"] li .lia-header-nav-component-widget');

        widgets.forEach(widget => {
            // Respectăm decizia platformei de a ascunde elementul pe desktop
            if (window.getComputedStyle(widget).display === 'none') {
                return;
            }

            const link = widget.querySelector('a');
            const badge = widget.querySelector('.lia-header-nav-component-unread-count');

            if (link && link.style.padding !== perfectPadding) {
                // Injectăm stilul "furat" din platformă
                link.style.setProperty('padding', perfectPadding, 'important');
                link.style.setProperty('font-size', style.fontSize, 'important');
                link.style.setProperty('color', style.color, 'important');
                link.style.setProperty('line-height', style.lineHeight, 'important');

                // Mutăm și controlăm bula
                if (badge && badge.parentElement === widget) {
                    link.appendChild(badge);
                }
            }

            // Logica inteligentă pentru 0 (se aplică mereu, indiferent dacă s-a mutat deja)
            if (badge) {
                const count = badge.textContent.trim();
                if (count === '0' || count === '') {
                    badge.style.setProperty('display', 'none', 'important');
                } else {
                    badge.style.setProperty('display', 'inline-block', 'important');
                }
            }
        });
    }

    // 3. Activăm sincronizarea DOAR la deschiderea meniului
    document.addEventListener('click', (e) => {
        if (e.target.closest('.user-navigation-settings-dropdown-link') || e.target.closest('.UserAvatar')) {
            // Așteptăm 50ms pentru a-i da timp CSS-ului platformei să re-randeze starea meniului
            setTimeout(syncMenuStyles, 50);
        }
    });

})();

Rezultat:

Cum se instalează, am menționat aici: Cum deschidem imaginile din mesajele private, la dimensiunea originală? bonus: image gallery fixes

Spor! 🙃

[Radutuby]

Marfă, 😁. Mulțumesc, alta viață 😅

[AndreeaAC]

@Viper, mulțumim mult pentru subiectele de tip user guidance create în Comunitate! Apreciem foaaarte mult ce împărtășești cu noi și sper că sunt de folos tuturor celor care caută astfel de soluții. 🧡

[Viper]

Mulțumesc și eu pentru că nu le ștergeți 🙃 N-aș vrea să le țin doar pentru mine.

Ideal ar fi ca aceste mici inconveniente să fie reparate de către cei care întrețin platforma dar până se sesizează cineva de acolo (dacă mai este cineva care întreține platforma, sperăm că da) ne descurcăm cum putem prin scripturi.

Nici nu știu unde am putea raporta aceste probleme.. nefiind un serviciu contractat.