Chat aktivieren ändert den Abstand von main-outlet auf Mobilgeräten

Wenn der Chat aktiviert wird, ändert sich der Abstand auf meinem main-outlet auf Mobilgeräten wie folgt:

vorher

nachher

Das relevante Chat-CSS ist hier:


(Padding wird von 1em auf 0 überschrieben)

Ich verstehe, dass es sich noch in der Entwicklung befindet und sich Dinge ändern können. Ich vermute, es ist sinnvoll, den Abstand auf der Chat-Seite auf Null zu setzen, aber er wird auf jeder Seite angewendet.


Eine zweite Sache, die mir aufgefallen ist, ist, dass auf Mobilgeräten meine Tastatur das verdeckt, was ich tippe (Android/Chrome):

Vergleichen Sie das mit Discord, wo das Textfeld über der Tastatur platziert ist

Dies fühlt sich eher wie ein Fehler an als etwas, das einfach übersehen wurde. Ich kann weiter nach diesem Problem suchen, um zu sehen, ob es sich um eine andere Theme-Komponente oder etwas handelt, das es verursacht, wenn es sich um einen Fehler handelt, der nur auf meiner Seite auftritt.

Haben Sie bitte die Android-Version / Chrome-Version?

Bist du sicher, dass das vom Chat kommt? Soweit ich weiß, haben wir keine chat-mobile.scss-Datei.

Lass mich zuerst klären, ob ich Chat richtig installiert habe. Ich habe meine Instanz gestern Abend neu erstellt. Ich habe den Chat nicht in meine app.yml-Datei aufgenommen – nach meinem Verständnis ist er jetzt ein Plugin, das mit Discourse Core geliefert wird?


Die URL verweist hierhin: discourse/plugins/chat at main · discourse/discourse · GitHub

Ich werde herausfinden, woher diese chat-mobile.scss stammt.

Ja, das ist jetzt ein Kern-Plugin

Es ist möglich, dass ich hier etwas übersehe … aber aus dem Stegreif weiß ich nicht, wo das derzeit im Plugin sein sollte. Wir haben etwas mit Padding, aber das sollte auf .has-full-page-chat beschränkt sein und sollte daher keine Auswirkungen auf andere Seiten haben.

1 „Gefällt mir“

Ich habe es gefunden, es scheint vom Discourse Air-Theme zu stammen, das ich verwende

Ich verwende das mit meinem eigenen überschreibenden CSS, daher denke ich, dass dies in diesem Fall ein “Ich”-Problem ist.


Ich werde mich mit dem Tastaturproblem befassen. Ich gehe davon aus, dass dieses Verhalten nicht beabsichtigt ist, oder?

1 „Gefällt mir“

Ja, nicht beabsichtigt :slight_smile:

Ich habe das Problem eingegrenzt. Ich habe ein paar Komponenten, die den below-site-header-Outlet verwenden (z. B. ein rotierendes Banner und eine Navbar). Ich vermute, dass ihre Höhe nicht richtig berücksichtigt wird?

Vollständiger Screenshot

Dies sind benutzerdefinierte Komponenten, die ich geschrieben habe, also ist es vielleicht wieder ein „Ich“-Problem, aber es könnte auch sein, dass alles in below-site-header ein Problem darstellen könnte, in welchem Fall es zu einem „Wir“-Problem wird :slight_smile:

1 „Gefällt mir“

Aber wie würde das funktionieren? Dann blieben Ihnen 50 Pixel Höhe für den Chat.

Ich denke, das Hauptproblem ist, dass beim Berühren des Chat-Textfelds der Bildschirm ganz nach oben springt und die Elemente unter below-site-header sichtbar werden.

Video-Beispiel

Ich denke, es wäre sinnvoller, wenn die Seite stattdessen zu einer Position springt, an der sich die Unterseite des Chat-Divs direkt über der Tastatur befindet. Oder das Textfeld-Div am unteren Rand der Seite (und am oberen Rand der Tastatur) fixieren, sodass es immer sichtbar ist und alles überlagert.

Unabhängig von der idealen Lösung sollte das Textfeld die allererste Priorität dessen sein, was auf dem Bildschirm sichtbar ist, auch wenn nur 50 Pixel verfügbar sind.