F NAV - Mobile Navigation Tabs

Themenkomponente
22

Danke, Don. Das ist die Antwort, nach der ich gesucht habe. :+1:

Ich muss jedoch im Detail prüfen, wie diese Einstellung aktiviert werden kann.

2 „Gefällt mir“
23

Sie finden die Option „Bewegung reduzieren“ in den Bedienungshilfeneinstellungen Ihres Telefons. Sie ist wahrscheinlich jetzt aktiviert. Wenn Sie sie also deaktivieren, funktioniert der Klick außerhalb des Menüs. Aber wahrscheinlich ist sie aus gutem Grund aktiviert und es ist einfacher, das Menü mit einer Wischgeste zu schließen. :slightly_smiling_face:

3 „Gefällt mir“
24

Ich liebe es, Don

Aber es scheint ein Problem mit dem fkb pro Theme zu geben, wenn man das Hamburger-Menü ausblenden möchte, wie hier und hier:

Das Bild scheint Teil einer Benutzeroberfläche mit einem Menü zu sein, das Schaltflächen und ein Profilbild zeigt, mit einem dunklen Thema mit Symbolen und einem Wasserzeichen. (Von KI untertitelt)
Das Bild scheint Teil einer Benutzeroberfläche mit einem Menü zu sein, das Schaltflächen und ein Profilbild zeigt, mit einem dunklen Thema mit Symbolen und einem Wasserzeichen. (Von KI untertitelt)651×322 32.3 KB

Es gibt immer noch den Platz für das Hamburger-Symbol

2 „Gefällt mir“
25

Hallo :wave:
Danke für den Bericht, ich habe eine Korrektur dafür im FKB Pro - Social theme zusammengeführt :slightly_smiling_face:

3 „Gefällt mir“
26

Bug-Bericht: Auf 3.4.0beta wird das Chat-Symbol nicht ausgeblendet, sobald Sie zum Chat wechseln:

CleanShot 2025-02-18 at 14.56.01@2x
CleanShot 2025-02-18 at 14.56.01@2x836×1390 32.5 KB

27

Hallo :waving_hand:

Das ist beabsichtigt. Wir blenden die f-Navigation auf /chat-Seiten aus und verwenden die Standard-Chat-Header.

Wie hier auf Meta:

Der Screenshot zeigt die Benutzeroberfläche einer Messaging-App mit einem Chat-Kanal namens „lounge“ und einem Profilbild mit einem Kappen-Symbol oben rechts. (Beschriftet von KI)
Der Screenshot zeigt die Benutzeroberfläche einer Messaging-App mit einem Chat-Kanal namens „lounge“ und einem Profilbild mit einem Kappen-Symbol oben rechts. (Beschriftet von KI)750×838 51.3 KB

28

Ok, verstanden. Dann wäre die einzige Möglichkeit, es manuell über CSS zu verstecken?

29

Sie können es mit CSS vollständig ausblenden.

Mobile/CSS

.d-header-icons {
  .header-dropdown-toggle {
    &.chat-header-icon {
      display: none;
    }
  }
}

Hinweis: Wenn Sie sich in einem Kanal befinden, ist dies der einzige Ort, an dem Sie die Chat-Benachrichtigungen sehen können.

1 „Gefällt mir“
30

Wäre es möglich, das Chat-Symbol zu entfernen, aber die Anzeige für neue Nachrichten beizubehalten?

Bearbeitung: Habe es selbst geschafft, indem ich ein svg hinzugefügt habe.

.d-header-icons {
  .header-dropdown-toggle {
    &.chat-header-icon a svg {
      display: none;
    }
  }
}
31

Hallo @don, kann ich Text wie Homepage, Menü usw. unter den Symbolen hinzufügen?

32

I have a problem with the messages - they don’t load.

The image shows a social media post by a user named Justine with a photo of hands holding each other, along with text in German, and a circle highlighting an envelope icon. (Beschriftet durch KI)
The image shows a social media post by a user named Justine with a photo of hands holding each other, along with text in German, and a circle highlighting an envelope icon. (Beschriftet durch KI)1179×1180 133 KB

This image shows a mobile app notification panel with information about an upcoming ADHS SHG appointment scheduled for Monday, 08.05.25, with a time reminder set for 19:30. (Beschriftet durch KI)
This image shows a mobile app notification panel with information about an upcoming ADHS SHG appointment scheduled for Monday, 08.05.25, with a time reminder set for 19:30. (Beschriftet durch KI)1179×2556 66.5 KB

1 „Gefällt mir“
33

Können Sie einige Setup-Details mitteilen? Ich bin bei „Tests bestanden“ und die Nachrichten funktionieren korrekt

Das Bild zeigt einen Benachrichtigungsbildschirm mit mehreren Nachrichten „Neue Ratschläge auf Ihrem Website-Dashboard“ aus dem Spiel „Xenoblade Chronicles Definitive Edition“. (Beschriftet von KI)
Das Bild zeigt einen Benachrichtigungsbildschirm mit mehreren Nachrichten „Neue Ratschläge auf Ihrem Website-Dashboard“ aus dem Spiel „Xenoblade Chronicles Definitive Edition“. (Beschriftet von KI)864×1920 171 KB

34

Auf dem iPhone in Safari funktioniert es nicht, im Chrome-Browser schon.

1 „Gefällt mir“
35

Danke für die zusätzlichen Details. Ich bin auf Android.

1 „Gefällt mir“
36

The image shows a screenshot of a social media profile with a status line and categories list, timestamped at 21:30 and indicating the last post was made 11 hours ago. (Von KI generierter Titel)
The image shows a screenshot of a social media profile with a status line and categories list, timestamped at 21:30 and indicating the last post was made 11 hours ago. (Von KI generierter Titel)1080×524 53.9 KB

This image is a screenshot of a Discord server's community chat interface, showing various community posts under different categories such as "Support," "Site Management," and "Developers" with their respective comments and likes. (Von KI generierter Titel)
This image is a screenshot of a Discord server's community chat interface, showing various community posts under different categories such as "Support," "Site Management," and "Developers" with their respective comments and likes. (Von KI generierter Titel)1080×2400 126 KB

Wenn das Horizon-Theme verwendet wird, verursacht eine Komponente in der Themenliste, dass der obere Bereich (Logo-/Elementbereich) beim Scrollen leer ist.

37

Leider kann ich es nicht reproduzieren.

Es scheint, dass es nicht allzu kompatibel mit den Header-Änderungen ist. Ich werde prüfen, was bei Horizon passiert.

3 „Gefällt mir“
38

Okay, ich glaube, ich sehe, was hier passiert. Die list-controls bleiben in Horizon beim Scrollen nach unten haften, und die F NAV versteckt gleichzeitig den Header standardmäßig. Das verursacht diese Lücke, die Sie auf Ihrem Screenshot geteilt haben.

Dieser kleine CSS-Schnipsel sollte mit dem Horizon-Theme funktionieren.

Er wird beim Scrollen nach unten am oberen Rand der Seite angeheftet, anstatt an der Header-Höhe.

Mobil / CSS

body.f-nav-hidden {
  .list-controls {
    top: 0;
  }
}

Für die Zukunft wäre es vielleicht eine gute Idee, eine Einstellung hinzuzufügen, um das Erscheinungsbild des Headers zu steuern.

4 „Gefällt mir“
39

Funktioniert nicht mit dem neuesten Discourse.

40

Können Sie es klären?

41

Okay, verstanden. Danke für den Bericht. Das scrollTop-Mixin wurde aus dem Kern entfernt, und das hat das Problem verursacht. Aber wir verwenden es eigentlich nicht, also wurde es wahrscheinlich nur versehentlich dort belassen. Hier behoben: FIX: ScrollTop mixin removed from core · VaperinaDEV/f-nav-for-mobile@6ec554c · GitHub

Bitte aktualisieren Sie die Komponente.

3 „Gefällt mir“