Adoro questa idea! Sarò più che felice di revisionare e unire una PR che implementa questa funzionalità ![]()
Mi piace molto questa idea
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. ![]()
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
Bella cosa che hai creato!
Un componente utile e pratico - grazie!
C’è un modo per cui gli utenti individuali possano personalizzarlo o nasconderlo completamente?
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.
Ottima idea! Grazie mille!
Grazie @Osama, è fantastico! ![]()
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.
Ok, dovrebbe essere sistemato ora. Grazie per avermelo fatto sapere! ![]()
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?
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.
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 ![]()
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:
Sai di quale forum si tratta? Adoro assolutamente l’interfaccia utente! ![]()
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.
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?
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?
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.
Sì, lo sono. Grazie!
Penso che sarebbe bello se potessimo aggiungere un pulsante “Nuovo argomento” proprio al centro della barra. ![]()
Reddit serve come ottimo esempio.
Certo che puoi. Prova quanto segue nella terza o quarta impostazione della scheda per ottenere l’effetto centrale.
New, plus, /new-topic




