F NAV - Schede di Navigazione Mobile

Dopo il nuovo aggiornamento, questo non funziona più. @Don hai apportato modifiche rilevanti o qualcosa del genere?

Ciao :waving_hand: No, non credo. L’ultima modifica è stata 2 mesi fa. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub

Sì, ha ricominciato a funzionare tutto. Alcuni altri componenti del tema stavano causando il problema.

1 Mi Piace

Ciao :waving_hand: Hmm non riesco a riprodurlo… quale dispositivo e browser utilizzi?

Ciao Don, grazie per la risposta.
È molto strano. Di seguito sono riportati diversi browser che ho testato e si è verificato lo stesso fenomeno. :sweat_smile:

Browser Edge su PC


App Discourse Hub per iPhone

Safari per iPhone

Edge per Android

Ho usato il seguente CSS per regolare la posizione e ha funzionato abbastanza bene.

/* Usa Flexbox per centrare chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Assicura che il contenitore abbia un contesto di posizionamento */
}

/* Assicura che gli stili dell'elemento numero non interferiscano con il centraggio */
.chat-channel-unread-indicator__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
2 Mi Piace

Sembra bello. Sarebbe bello mostrarlo anche agli utenti non registrati

@Don accetti le PR? Ho aggiunto una funzionalità per aggiungere funzioni extra per aprire un menu modale in cui è possibile aggiungere elementi aggiuntivi.

Nel nostro caso d’uso, vogliamo creare un sottomenu per avere più varianti durante la creazione di un nuovo argomento (ad es. inviare un bug report, inviare una richiesta di supporto, inviare un’idea, creare un nuovo diario o creare un nuovo argomento normale)

Vedi: GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs

4 Mi Piace

Aggiornamento rapido sul mio Fork di “F-NAV for Mobile” con pulsante Indietro, Sottomenu personalizzato e Controlli di visibilità

Perché questo fork?

  • Fornire un pulsante di intestazione “Indietro” nelle pagine degli argomenti che rispecchia la comune UX delle app mobili
  • Offrire un tipo di scheda “customMenu” che apre un sottomenu configurabile (ideale per collegarsi a più destinazioni; lo usiamo per aggiungere collegamenti personalizzati precompilati a “Nuovo argomento”)
  • Aggiungere la visibilità basata sui gruppi a schede e voci di menu, in modo da poter mostrare determinati elementi solo allo staff, ecc.
  • Piccole correzioni con alcune deprecazioni e rifinitura di stili/accessibilità
Riepilogo delle nuove funzionalità aggiunte
  • Icona Indietro nell’intestazione (opzionale)
    • Sostituisce il logo della home nell’intestazione con una freccia indietro nelle pagine degli argomenti
    • Comportamento: torna indietro se c’è cronologia, altrimenti reindirizza a “/”
    • Attivabile con l’impostazione: header_back_icon_enabled
  • Tipo di scheda Sottomenu personalizzato
    • Nuova funzione f_nav_tabs: customMenu
    • Nuova impostazione: f_nav_submenu_items
      • Configura le voci di menu con etichetta e URL (icona opzionale)
      • Ottimo per un accesso rapido a più pagine da una singola scheda
  • Controlli di visibilità basati sui gruppi
    • Schede, voci del sottomenu e profile_extra_items possono essere limitati a gruppi selezionati
    • Comportamento:
      • Gruppi vuoti => visibile a tutti
      • Se i gruppi sono impostati => solo i membri di almeno un gruppo selezionato possono vedere
      • Gli utenti anonimi non possono vedere gli elementi con restrizioni
  • Opzionale: Nascondi la barra di navigazione nelle pagine degli argomenti
    • Attivabile con l’impostazione: hide_nav_in_topic
  • Artefatti “build” zippati e documentazione di test
    • Artefatti di build di convenienza (v1–v5) in builds/
    • TESTING_GUIDE.md e TEST_RESULTS.md che documentano la validazione manuale

Miglioramenti alle funzionalità esistenti

  • Voci e schede F‑NAV
    • Aggiunge il getter visibleTabs per rispettare la visibilità dei gruppi
    • Integra il nuovo componente CustomSubmenu nel flusso di FNavItem
  • Avatar/menu del profilo nell’intestazione
    • Il rilevamento della visualizzazione mobile è stato spostato nel componente, migliorando il comportamento e risolvendo avvisi
    • Le voci extra del profilo ora supportano la visibilità basata sui gruppi
  • Stile e accessibilità
    • Nuovo SCSS per il sottomenu personalizzato e l’icona indietro
    • Stati coerenti di hover/attivo/focus-visible
    • Bordo‑raggio coerente con le variabili core; padding/spaziatura raffinati (ad es. padding del pulsante indietro impostato a 0)

Correzioni di bug e manutenzione

  • Risolti gli avvisi di deprecazione di site.mobileView spostando i controlli dagli initializer al rendering del componente
  • Corretto un caso limite di rendering spostando una funzione dal blocco
  • Piccola rifinitura per corrispondere ai comportamenti dell’intestazione di Discourse (stati hover/attivi, transizioni di opacità)
  • Piccole sistemazioni CSS (ad es. assicurarsi che il padding del pulsante indietro sia zero, prevenire spostamenti accidentali delle dimensioni)

Confronto di alto livello (Originale vs Branch Forked)

  • Originale (main): Schede mobili F‑NAV + importazione chat opzionale; nessun pulsante indietro o sottomenu personalizzato
  • Fork (feat/home-logo-arrow-back):
    • Aggiunge la funzionalità dell’icona indietro nell’intestazione con fallback di routing
    • Introduce la funzione scheda “customMenu” con voci di sottomenu configurabili
    • Aggiunge la visibilità limitata ai gruppi per schede, voci di sottomenu e voci del profilo
    • Nasconde opzionalmente F‑NAV nelle pagine degli argomenti
    • Migliora l’accessibilità e la coerenza degli stati di interazione
    • Fornisce documentazione di test e build pacchettizzate

Note:

  • Questo componente è destinato alle versioni recenti di Discourse che supportano il livello API dei plugin di Discourse 1.14+ (come indicato negli initializer)
  • Se ti affidi alla visibilità basata sui gruppi, assicurati prima che i tuoi gruppi e le tue appartenenze siano configurati

Parola di avvertimento: Testa con cautela poiché non sono un programmatore e il TC è stato creato e testato interamente con l’IA. Funziona meglio con 3.6beta1.

Un ringraziamento speciale a Don per questo fantastico componente; è un’aggiunta fantastica! :heart:

2 Mi Piace