Boxen der rechten Leiste im User Profil sortieren?

PoooMukkel · September 28, 2019 at 1:28 PM

Ich habe mir zuletzt das Freunde-System (ursprünglich von Feuerfuchs , überarbeitet von mipu ) installiert. Es gefällt mir sehr gut, aber mich stört eine Sache sehr. In den Benutzerprofilen wird die Box "Freunde" ganz unten angezeigt. Ich hätte diese Box aber an erste Stelle.

Leider scheint es sich bei diesen Boxen nicht um wirkliche Boxen zu handeln, die ich im ACP sortieren kann. Diese stehen mir dort gar nicht zur Verfügung.

Lässt sich eine solche Sortierung vielleicht per CSS vornehmen? Oder muss diese Sortierung per Template vorgenommen werden? Wenn ja welches?

LRDE · September 28, 2019 at 2:53 PM

Sollte via CSS order gehen.

https://www.w3schools.com/cssref/css3_pr_order.asp

AD1 · September 28, 2019 at 3:16 PM

Deaktiviere 1x alle Boxen auf der rechten Seite, danach wieder aktivieren. Bei mir steht die Box oben.

PoooMukkel · September 28, 2019 at 6:23 PM

Quote from AD1

Deaktiviere 1x alle Boxen auf der rechten Seite, danach wieder aktivieren.

Aber wie? Es sind ja anscheinend keine wirklichen Boxen, die man über das ACP steuern kann...

Quote from LRDE

Sollte via CSS order gehen.

https://www.w3schools.com/cssref/css3_pr_order.asp

Damit kann ich leider gar nichts anfangen...

AD1 · September 28, 2019 at 6:47 PM

Welche Boxen sind denn da noch? Bei mir Bilder und Videos, die kann man im acp an- und abschalten.

PoooMukkel · September 28, 2019 at 7:32 PM

Schau mal im ersten Beitrag. Da habe ich die Browser Konsole angehangen...

Hier mal die rechte Seitenleiste von meinem Profil:

Und bezüglich "Freunde" habe ich nur 1 Box, die bereits ganz oben steht...

Schaue ich mir im ACP die Seite "Benutzerprofil" an, dann sind auch nur diese Boxen aktiv.

Morik · September 28, 2019 at 10:39 PM

Die Reihenfolge der Boxen Fogen und gefolgt sowie visitor sind hardcoded im Template.

Du könntest die Box ohne großen Änderungen an 4. Stelle bekommen wenn der nice value des TemplateListeners angepasst wird.

Mit CSS könntest du sie auch durchaus weiter hoch bekommen, aber dazu wäre es sinnvoll das freunde template zu bearbeiten damit die box einen eigenen identifyer hat.

PoooMukkel · September 28, 2019 at 10:48 PM

Quote from Morik

Mit CSS könntest du sie auch durchaus weiter hoch bekommen, aber dazu wäre es sinnvoll das freunde template zu bearbeiten damit die box einen eigenen identifyer hat.

Könntest du mir hierbei behilflich sein? Wie verpasse ich der Box einen Identifier, den ich dann per CSS ansprechen kann?

Morik · September 28, 2019 at 11:04 PM

Ich hab aktuell nicht die mipu Version zur Hand, aber wenn er nichts an den Templates geändert hat müsstest du das template ffFriendsUserSidebar bearbeiten und dort aus <section class="box"> ein <section class="box" data-static-box-identifier="eu.feuerfuchs.wcf.friends.ffFriendsUserSidebar"> oder vergleichbares machen, den genauen Namen des identifiers kannst du frei wählen, ich hab ihn nur analog zum WSC aus dem paketnamen plus boxnamen zusammengesetzt.

Damit könntest du dann folgendes CSS verwenden um die Reihenfolge anzupassen, aber nur grob getestet, durchaus möglich dass es mobil zu fehlern kommt:

Code

#tpl_wcf_user aside.boxesSidebarRight > div.boxContainer {
    display: flex;
    flex-direction: column;
    
    &> .box {
        order: 2
    }
    &> section[data-static-box-identifier="eu.feuerfuchs.wcf.friends.ffFriendsUserSidebar"].box {
        order: 1;
        margin-top: 0px;
        margin-bottom: 30px;
    }
}
@include screen-xs {
    #tpl_wcf_user aside.boxesSidebarRight:not(.open) > div.boxContainer {
        display: none;
    }
}

Display More

PoooMukkel · September 28, 2019 at 11:14 PM

Wow, das funktioniert...

Aber, wie bekomme ich am Ende der Box nun etwas Platz, so dass die zweite Box nicht mehr an der Freundebox klebt?

Morik · September 28, 2019 at 11:30 PM

siehe den editierten code

PoooMukkel · September 29, 2019 at 3:20 PM

Du bist mein Held! Das war es. So passt es nun perfekt!

PoooMukkel · September 29, 2019 at 5:42 PM

Leider funktioniert das Ganze mobil doch noch nicht so toll...

Ist der CSS Code aktiv, wird das eigentliche Profil erst ganz unten angezeigt. Zuerst werden die Boxen dargestellt.

Man muss also erst runter scrollen, um das Profil zu sehen.

Ist der CSS Code nicht aktiv, passt das. Aber dann ist die Freunde Box wieder ganz unten. 😩

Kann man das noch irgendwie mit berücksichtigen Morik ?

Morik · September 29, 2019 at 5:55 PM

ich hab mal noch ne ausnahme für die mobile version hinzugefügt, damit sollte es eigentlich dann klappen.

PoooMukkel · September 29, 2019 at 6:05 PM

Super. Nun klappt es auch mobil!

Das Profil wird angezeigt, aber die Sidebar nicht. Wähle ich "Sidebar anzeigen", wird die Sidebar angezeigt und das Profil dann unten drunter. So ist das perfekt!

LRDE · September 29, 2019 at 6:41 PM

Quote from PoooMukkel

Du bist mein Held! Das war es. So passt es nun perfekt!

Ist übrigens das was ich dir geschrieben hatte 😂. Also das mit CSS Order

PoooMukkel · September 29, 2019 at 7:18 PM

Quote from LRDE

Ist übrigens das was ich dir geschrieben hatte 😂. Also das mit CSS Order

Das ist ja schön und gut, aber wie ich bereits schrieb, half mir deine Antwort leider nicht weiter...

Participate now!