Ich liebe diese Idee! Ich würde mich sehr freuen, einen PR zu prüfen und zu mergen, der diese Funktion umsetzt ![]()
Ich finde diese Idee wirklich toll
Ich habe gerade ein wenig damit experimentiert. Ich bin überzeugt, dass es einen deutlich besseren Weg gibt, dies umzusetzen, aber momentan funktioniert es auf meiner Seite ziemlich gut. ![]()
Ich verwende dafür den Code des Big Header - Little Header-Komponenten für den <head>-Bereich der Vorlage.
Leider gibt es auf dem iPhone eine Einschränkung, da die Footer-Navigation die Discourse-Tab-Leiste vollständig verdeckt. Deshalb habe ich diese ausgeblendet.
Ich habe diesen Code aktualisiert!
Jetzt teile ich den Code hier (ich bin mir nicht sicher, ob er zusammengeführt werden kann):
Fügen Sie dies im mobilen <head>-Bereich ein:
<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>
Fügen Sie dies im mobilen CSS-Bereich ein:
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
Das hast du ziemlich cool gemacht!
Praktische kleine Komponente – danke!
Gibt es eine Möglichkeit, dass einzelne Benutzer sie anpassen oder komplett ausblenden können?
Das ist großartig, @Don, danke! Ich habe deinen Code (mit kleinen Änderungen) gerade zum Component gepusht.
Es gibt keine integrierte Option, damit einzelne Benutzer den Component anpassen oder ausblenden können. Es gibt jedoch eine Workaround-Lösung im Discourse-Kern, die du nutzen kannst, um einzelnen Benutzern zu ermöglichen, den Component auszublenden: Du kannst eine Variante deines Hauptthemas erstellen, die diesen Component nicht enthält, und diese Variante dann deinen Benutzern zur Auswahl in den Einstellungen → Interface zur Verfügung stellen.
So würde es aussehen:
Benutzer, die diesen Component nicht möchten, können die Variante Grey Amber (ohne Tab-Leiste) auswählen. Diese ist exakt wie Grey Amber konfiguriert, enthält jedoch den Tab-Leisten-Component nicht.
Tolle Idee! Vielen Dank dafür!
Danke @Osama, das ist großartig! ![]()
Mir ist ein Problem im CSS aufgefallen. Die Discourse-Registerkartenleiste kann aktiviert werden und den Editor nach oben schieben.
Ich glaube, sie sollte nur bei #reply-control.draft aktiviert werden und nicht beim gesamten #reply-control.
Okay, sollte jetzt behoben sein. Danke, dass du mich darauf hingewiesen hast! ![]()
Ich wollte mich nur ganz herzlich dafür bedanken, das ist eine großartige Ergänzung für jede Discourse-Seite. @discoverearth, hast du es geschafft, dies dauerhaft für alle Benutzer anzuzeigen?
Ich versuche, dies so zu konfigurieren, dass beim Navigieren auf der Plattform automatisch auf Registerkarten geklickt wird. In diesem Anwendungsfall möchte ich Schaltflächen einrichten, die die Registerkarten für die Plugins Kanban, Kalender und Voting öffnen.
Kanban:
Wenn ich mich in einer Kategorie oder Unterkategorie befinde und ‘?board=default’ zur URL hinzufüge, navigiere ich zur Registerkarte „Board“ des Kanban-Plugins. Das sollte also möglich sein. Das Problem ist jedoch, dass dieses Plugin den relativen Pfad vom Root-Verzeichnis aus verwendet, anstatt vom aktuellen Pfad des Benutzers.
(Außerdem muss ich eine Lösung für die Startseite finden, da die URL-Logik dort anders ist.)
Kalender:
Für die Kalender-Registerkarte muss ‘/l/calendar’ ans Ende der URL angehängt werden.
Das scheint machbar, aber es müssen auch alle Textteile in der URL entfernt werden, die über der aktuellen Kategorie/Unterkategorie des Benutzers liegen. Wenn ein Benutzer beispielsweise zu „latest“ oder „kanban“ navigiert ist, muss dieser Teil der URL entfernt werden, bevor ‘/l/calendar’ ans Ende angehängt wird.
Hat jemand Ideen, wie man das angehen könnte? Es wäre großartig, dies mit diesen Plugins nutzen zu können. Die Registerkarten-Auswahl ist auf mobilen Geräten derzeit praktisch ausgeblendet, was für Seiten, die stark auf Komponenten wie Kanban oder Kalender setzen, nicht ideal ist.
Dieses Plugin ist ein schönes Stück Arbeit, kann aber nicht mit DiscourseHub verwendet werden (zumindest auf dem iPhone), da es die Navigationsleiste an derselben Position ausblendet. Dadurch kann man kein Forum mehr wechseln.
Das macht es also nur für Foren nützlich, die DiscourseHub auf irgendeine Weise nicht zulassen oder die Benutzererfahrung stark beeinträchtigen, indem man lernt, die App nach einem Forenbesuch komplett zu schließen ![]()
Natürlich könnte jemand, der programmieren kann, diese Tab-Leiste nur anzeigen lassen, wenn ein Browser verwendet wird … aber einem Benutzer eine unterschiedliche Benutzeroberfläche auf demselben Gerät beizubringen, ist wirklich eine schlechte Idee.
Mit dieser Komponente:
Und bei reinem DiscourseHub:
Kennst du, welches Forum das ist? Ich liebe die Benutzeroberfläche einfach! ![]()
Ich würde gerne, dass der Benachrichtigungs-Button wie im Standard-Layout der rote Benachrichtigungshinweis zeigt, der auch im Menü oben zu sehen ist. Könntest du mir einen Tipp geben, wie man das umsetzt? Ich bin nicht wirklich gut im Coden.
@nildarar, hast du es geschafft, dass die Anzahl der Benachrichtigungen auf dem Button erscheint? Danke.
Hallo! Das Konzept gefällt mir sehr. Danke.
Eine Frage: Ich würde lieber die umrandete Version von FontAwesome-Icons verwenden statt der gefüllten Versionen, um konsistenter mit anderen Bereichen meiner Website zu sein.
Gibt es eine Möglichkeit, das festzulegen? Normalerweise würde die Verwendung des vollständigen Namens eines Icons – z. B. far fa-star (anstatt nur star) – diese Unterscheidung ermöglichen. Aber wenn ich versuche, den vollständigen Namen eines Icons so einzugeben, zeigt die Komponente an dieser Stelle überhaupt nichts an.
Gibt es eine Möglichkeit, das zu erreichen?
Das sieht wirklich toll aus. Gibt es eine Möglichkeit, einen Tab für den Follow-Feed einzurichten? So könnte ein Benutzer leicht einen Feed von allen Personen sehen, denen er folgt.
Ist es auch möglich, dass seiten-spezifisch
.user-main .about {
margin-bottom: 0;
color: var(--secondary);
display: none;
}
Nur für die Feed-Seite?
Nur um das zu bestätigen, beziehen Sie sich auf den Follow-Feed von Discourse Follow? Wenn ja, setzen Sie feed als Route (das dritte Segment) in der Einstellung des Tabs, zu dem Sie den Follow-Feed umleiten möchten.
Ja, das bin ich. Danke!
Ich fände es schön, wenn wir einen „Neues Thema“-Button direkt in der Mitte der Leiste hinzufügen könnten. ![]()
Reddit dient als großartiges Beispiel.
Das kannst du. Versuche das Folgende in der 3. oder 4. Registerkarteneinstellung, um den mittleren Effekt zu erzielen.
Neu, Plus, /neues-thema




