Discourse Tab Bar per Mobile

Adoro questa idea! Sarò più che felice di revisionare e unire una PR che implementa questa funzionalità :smiley:

11 Mi Piace

Mi piace molto questa idea :heart_eyes: Quindi ho appena provato a implementarla un po’. Credo che ci sia un modo molto migliore per farlo, ma per ora funziona abbastanza bene sul mio sito. :slight_smile:

Utilizzo il componente Big Header - Little Header inserendo il codice nel tag <head> del template per ottenere questo risultato.


Purtroppo su iPhone c’è una limitazione perché la barra di navigazione in basso (footer-nav) copre completamente la barra delle schede di Discourse. Quindi l’ho nascosta.

Ho aggiornato questo codice!
Ora condivido il codice qui (non sono sicuro che sia pronto per essere unito al progetto):

Inserisci questo nella sezione <head> per dispositivi mobili:

<script type="text/discourse-plugin" version="0.8.18">
   $(document).ready(function() {
        var lastScrollTop = 0;
        var body = $("body");
        var scrollMax = 30;
        $(window).scroll(function() {
            var scroll = $(this).scrollTop();
            if (lastScrollTop < scroll && scroll > scrollMax && !body.hasClass("tab-bar-hidden")) {
                body.addClass("tab-bar-hidden");
            } else if (lastScrollTop > scroll && body.hasClass("tab-bar-hidden")) {
                body.removeClass("tab-bar-hidden");
            }
            lastScrollTop = scroll;
        });
    });
</script>

Inserisci questo nella sezione CSS per dispositivi mobili:

html:not(.anon) {
  #topic-progress-wrapper,
  #reply-control.draft {
	bottom: 49px;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .1s ease-out;
  }
  .posts-filtered-notice {
	transition: all .1s ease-out;
	bottom: 49px;
  } 
}

body.tab-bar-hidden {
  .d-tab-bar {
	bottom: -49px;
	transition: all .2s ease-in;
  }
  #topic-progress-wrapper:not(.docked),
  #reply-control.draft {
	bottom: 0;
	transition: all .2s ease-in;
  }
  #reply-control.draft {
	margin-bottom: env(safe-area-inset-bottom);
	padding-bottom: 0px;
	transition: all .2s ease-in;
  }
  .posts-filtered-notice {
	transition: all .2s ease-in;
	bottom: 0;
  }
}

.d-tab-bar {
  transition: all .1s ease-out;
}

body:not(.footer-nav-ipad) .footer-nav {
  display: none;
}

Demo

17 Mi Piace

:smiley: Bella cosa che hai creato!

5 Mi Piace

Un componente utile e pratico - grazie!

C’è un modo per cui gli utenti individuali possano personalizzarlo o nasconderlo completamente?

5 Mi Piace

Ottimo lavoro, @Don, grazie! Ho appena caricato il tuo codice (con alcune piccole modifiche) nel componente.

Non esiste un’opzione integrata per consentire agli utenti individuali di personalizzare o nascondere il componente, ma c’è una soluzione alternativa nel nucleo di Discourse che puoi utilizzare per permettere agli utenti di nasconderlo: puoi creare una variante del tuo tema principale che non includa questo componente e poi renderla disponibile agli utenti da selezionare in Preferenze → Interfaccia.

Ecco come apparirebbe:

Gli utenti che non desiderano questo componente possono scegliere Grey Amber (w/o Tab Bar), che è configurato esattamente come Grey Amber, ma senza includere il componente della barra delle schede.

6 Mi Piace

Ottima idea! Grazie mille!

4 Mi Piace

Grazie @Osama, è fantastico! :heart_eyes:

Ho notato un problema nel CSS. La barra delle schede di Discourse può attivarsi e spingere verso l’alto il compositore.
Secondo me dovrebbe attivarsi solo su #reply-control.draft invece che sull’intero #reply-control.

4 Mi Piace

Ok, dovrebbe essere sistemato ora. Grazie per avermelo fatto sapere! :grinning_face_with_smiling_eyes:

6 Mi Piace

Volevo solo dire grazie mille per questo, un’ottima aggiunta per qualsiasi sito Discourse. @discoverearth sei riuscito a farlo visualizzare permanentemente a tutti gli utenti?

5 Mi Piace

Sto cercando di configurare questo per fare clic sulle schede mentre l’utente naviga sulla piattaforma. In questo caso d’uso, sto cercando di impostare dei pulsanti che aprono le schede per i plugin Kanban, Calendario e Voto.

Kanban:
Se mi trovo in una categoria o sottocategoria e aggiungo ‘?board=default’ all’URL, vengo reindirizzato alla scheda di Kanban (Board), quindi dovrebbe essere possibile. Il problema è che questo plugin utilizza il percorso relativo dalla root, anziché dal percorso in cui si trova attualmente l’utente.
(Dovrò anche trovare un workaround per la homepage, poiché la logica dell’URL lì è diversa).

Calendario:
Per la scheda Calendario è necessario aggiungere ‘/l/calendar’ alla fine dell’URL.

Sembra fattibile, ma bisogna anche eliminare qualsiasi testo nell’URL che si trovi sopra la categoria/sottocategoria in cui si trova l’utente. Ad esempio, se un utente ha navigato fino a ‘latest’ o ‘kanban’, quella parte dell’URL deve essere rimossa prima di aggiungere ‘/l/calendar’ alla fine.

Qualcuno ha idee su come procedere, dato che sarebbe incredibile poterlo utilizzare con questi plugin? Selezionatore di schede è praticamente nascosto su mobile, il che non va bene per i siti che fanno ampio uso di componenti come Kanban o Calendario.

1 Mi Piace

Questo plugin è un ottimo lavoro, ma non può essere utilizzato con DiscourseHub (almeno su iPhone) perché nasconde la scheda di navigazione nella stessa posizione. Di conseguenza, non è possibile cambiare forum.

Quindi, è utile solo per i forum che in qualche modo non supportano DiscourseHub o che rovinano notevolmente l’esperienza utente, costringendo a chiudere completamente l’app dopo ogni visita al forum :wink:

Certamente, chi sa programmare potrebbe mostrare questa barra delle schede solo quando si utilizza un browser… ma insegnare a un utente a utilizzare interfacce diverse sullo stesso dispositivo è davvero una cattiva idea.

Con questo componente:

E con DiscourseHub puro:

3 Mi Piace

Sai di quale forum si tratta? Adoro assolutamente l’interfaccia utente! :heart_eyes:

3 Mi Piace

Mi piacerebbe poter avere sul pulsante delle notifiche il contatore rosso, come nel pulsante del menu in alto nella versione predefinita. Potresti darmi un suggerimento su come farlo? Non sono molto bravo con la programmazione.

@nildarar, sei riuscito a far apparire il conteggio delle notifiche sul pulsante? Grazie.

1 Mi Piace

Ciao! Mi piace molto questo concept. Grazie.

Una domanda: preferirei utilizzare la versione contornata delle icone di FontAwesome invece di quelle piene, per mantenere maggiore coerenza con altre aree del mio sito web.

Esiste un modo per specificarlo? In genere, utilizzando il nome completo dell’icona — ad esempio far fa-star (invece di semplicemente star) — si fa questa distinzione. Ma ogni volta che provo a inserire il nome completo di un’icona in questo modo, il componente non mostra nulla al suo posto.

C’è un modo per far sì che accada?

1 Mi Piace

Sembra davvero fantastico. C’è un modo per creare una scheda che mostri il feed dei follower? In questo modo un utente può vedere facilmente un feed di tutte le persone che segue.

Inoltre, è possibile per una pagina specifica

.user-main .about {
    margin-bottom: 0;
    color: var(--secondary);
    display: none;
}

Solo per la pagina del feed?

1 Mi Piace

Solo per confermare, ti riferisci al feed dei follower di Discourse Follow? Se è così, allora imposta feed come route (il terzo segmento) nell’impostazione della scheda a cui desideri reindirizzare al feed dei follower.

4 Mi Piace

Sì, lo sono. Grazie!

3 Mi Piace

Penso che sarebbe bello se potessimo aggiungere un pulsante “Nuovo argomento” proprio al centro della barra. :thinking:

Reddit serve come ottimo esempio.

6 Mi Piace

Certo che puoi. Prova quanto segue nella terza o quarta impostazione della scheda per ottenere l’effetto centrale.

New, plus, /new-topic
6 Mi Piace

Fantastico! L’ho appena fatto e mi ricorda l’implementazione di YouTube. Nel complesso, molto bello! :grinning:


Sarebbe possibile aggiungere un pulsante che reindirizzi gli utenti alla sezione “Discourse Chat” della community?

4 Mi Piace