Seitenleistentitelumbruch und -scrollen

UX
1

Das gefällt mir nicht besonders. Navigationsseitenleiste im Dropdown-Modus:

IMG_3301
IMG_3301633×399 77.7 KB

Außerdem muss im Dropdown-Modus nicht viel passieren, damit das Menü eine Scrollleiste bekommt, auch wenn noch Desktop-Bildschirmplatz vorhanden ist, damit es sich ausdehnen kann und keine Scrollleiste benötigt. Kann das behoben werden?

menu
menu391×679 42.7 KB

Meine Benutzer bevorzugen die Dropdown-Seitenleiste gegenüber der erweiterten, da sie dem alten Legacy-Hamburger-Menü ähnelt und sich auf der rechten Seite befindet.

Und warum enthält Alles neue und ungelesene Elemente? Diese sollten getrennt sein?

Ich muss auch den FAQ-Link dort entfernen und habe das CSS dafür noch nicht ganz herausgefunden.

1 „Gefällt mir“
2

Es mag elegantere oder genauere Lösungen geben, und ich denke, die Seitenleiste wird in Zukunft besser anpassbar sein, aber eine potenziell unzuverlässige CSS-Lösung wäre:

.sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

image
image745×254 25.9 KB

Sie zielt auf die aktuelle Position des Elternelements des FAQ-Links (letztes Element -1). Wenn sich andere Elemente zwischen dem FAQ-Link und dem Ende der Liste befinden, wird der CSS-Selektor nicht mehr das richtige Element ansprechen.

Aber wenn Sie zuversichtlich sind, dass sich dieser Teil der Liste nicht ändern wird, können Sie ihn verwenden.

1 „Gefällt mir“
3

Danke @Canapin - ich bin ziemlich gut mit CSS und benutze es ziemlich viel in meinem Forum und ich komme damit zurecht. Ich hatte noch nicht ganz herausgefunden, wie ich diese Elemente ansprechen kann, und ich hoffte, es ohne den Code für untergeordnete Elemente aus dem von Ihnen genannten Grund tun zu können. Ich habe auch viel CSS verwendet, um den Inhalt des alten Legacy-Menüs zu ändern, aber es war mit CSS leichter zugänglich. Ich möchte diesen gesamten Abschnitt unter „Community“ tatsächlich manipulieren und die Dinge in eine andere Reihenfolge bringen, daher vermute ich, dass ich auch etwas JavaScript verwenden muss. Ich möchte wirklich, dass dieser Teil für Administratoren anpassbar ist. Nochmals vielen Dank für den Tipp! :slight_smile:

Außerdem ist mir noch nicht ganz klar, was „alles“ ist. Ich möchte es umbenennen, um es spezifischer zu machen. :thinking:

5

Ja, der Link-Container hat keine eindeutigen Klassen, daher ist es schwierig, ihn im aktuellen Zustand anzusprechen.

Das könnte Sie interessieren: sidebarMod: Add/Remove Sidebar Links and Sections

Sie können nach js.sidebar.sections.community.links.everything.content in Anpassen → Text suchen :slight_smile:

1 „Gefällt mir“
6

ok, dieser CSS-Code hat funktioniert. Ich befürchtete, er würde die Ansicht des Personals dieses Teils des Menüs beeinträchtigen. Danke! :innocent:

Leider kann ich die Textersetzung nicht zum Laufen bringen :expressionless:

Bearbeiten: Selbst nachdem ich den Browser mehrmals neu geladen hatte, musste ich das Theme wechseln, um die Textersetzung zum Laufen zu bringen. Caching in Chrome ist eine Qual. :woman_facepalming:

1 „Gefällt mir“
7

Ich habe auch den entsprechenden Mouseover-Text geändert:

IMG_3332
IMG_3332873×143 58.2 KB

1 „Gefällt mir“
8

Daher funktioniert dies, um die FAQ auszublenden, aber ich habe seitdem festgestellt, dass es auch den unerwünschten Nebeneffekt hat, ein Element in jedem Menüabschnitt auszublenden :sweat_smile: aber natürlich tut es das :woman_facepalming: :upside_down_face:
Ich sollte mich wirklich damit befassen und eine FAQ schreiben oder sie an einen Benutzer delegieren.

9

Ah, ja.

#sidebar-section-content-community .sidebar-section-link-wrapper:nth-last-child(2) {
    display: none;
}

Sollte besser sein.

1 „Gefällt mir“
10

Hallo,

Sie können diese auch mit dem data-link-name-Attribut ansprechen.
z. B.

.sidebar-section-link-wrapper {
  .sidebar-section-link {
    &[data-link-name="faq"] {
      display: none;
    }
  }
}
1 „Gefällt mir“
11

Ja, ich habe versucht, diese Methode beim ersten Mal zu verwenden, und die Syntax für data-link war falsch. Ich habe den Teil “-name” vergessen und dachte, es sei irgendwie nicht machbar. Dumm von mir, denn so ähnlich habe ich es auch mit dem alten Legacy-Menü gemacht. DOH :woman_facepalming: Danke.

Nur am Rande: Die child-Methode ist nur für die Desktop-Ansicht verwendbar.

1 „Gefällt mir“
12

Das Problem ist, dass sich alle Links innerhalb von Listenelementen befinden, die alle exakt die gleichen Klassen haben.
Wenn Sie den Link ausblenden, bleibt das Listenelement bestehen und nimmt Platz ein, obwohl es “leer” ist.
Es sei denn, ich übersehe etwas?

2 „Gefällt mir“
13

Es wird schön sein, wenn die Community-Sektion in Core voll funktionsfähig ist. Ich konnte den Titel „Community“ leicht ändern. Aber ich möchte die Reihenfolge der Elemente ändern. Zum Beispiel ist in der mobilen Ansicht der Link „Meine Beiträge“ über „Admin“ und „Überprüfung“, und daher ist „Überprüfung“ im Abschnitt „Mehr“. Mein Personal mag das nicht, und ich stimme zu, dass die Mod-Steuerelemente Vorrang vor „Meine Beiträge“ haben sollten. Ich sollte wahrscheinlich ein Thema für Funktionswünsche im Bereich Benutzererfahrung erstellen, aber ich weiß, dass das Team daran arbeitet, dies in Zukunft für uns anpassbar zu machen. Ich schätze, ich kann den Link zu meinen Beiträgen immer ausblenden und ihn dann in den Abschnitt „Globale Links“ verschieben. Ich weiß nicht, ich bin sicher, ich versuche, zu viel mit diesem Menü zu machen.

2 „Gefällt mir“
14

Ja, ich verstehe. Für diese Art von Problemen wäre es cool, die :has-Pseudoklasse zu verwenden, aber sie ist ein wenig eingeschränkt.

.sidebar-section-link-wrapper {
  &:has(.sidebar-section-link[data-link-name="faq"]) {
    display: none;
  }
}
2 „Gefällt mir“