Darstellung der Team-Seite verändern

  • Affected Version
    WoltLab Suite 3.1

    Moin Moin.


    Ich habe da ein "Problem" und ich kriege einfach die Lösung nicht raus. Ich habe mit allen meinen Mitteln bis jetzt probiert aber komme einfach nicht dahinter.

    Unsere Team-Seite sieht derzeit wie folgt aus:


    Alle Namen sind (standardmäßig) untereinander eingereiht. Als Referenz wie ich / wir es gerne hätten:


    D.h. alle Teammitgleider werden nebeneinander sortiert. Sollte es eine ungerade Anzahl geben wird der letzte (das "5. Rad am Wagen") wieder einzeln und in einer eigenen Reihe dargestellt.


    Vielleicht habt ihr diesbezüglich ja Ideen / Vorschläge / Lösungen oder vielleicht gibt es da ja auch ein Plugin. Ich konnte bis dato zumindest noch nichts in diese Richtung bewältigen.


    Schon mal danke für die Hilfe im Voraus! :)


    Mfg.

  • Das müsste via CSS gehen. Die Liste modifizieren bzw eventuell dann über das Template. Hatte gerade Nachtdienst, schaue wenn ich daheim bin mal nach.

  • Versuch es einfach mal mit Flexbox:

    Das müsste dementsprechend noch angepasst werden (mobil via Breakpoints https://docs.woltlab.com/view_css.html#available-breakpoints), sollte aber für die gewünschte Darstellung, dass die Teammitglieder nebeneinander stehen, sorgen.

  • Versuch es einfach mal mit Flexbox:

    Das müsste dementsprechend noch angepasst werden (mobil via Breakpoints https://docs.woltlab.com/view_css.html#available-breakpoints), sollte aber für die gewünschte Darstellung, dass die Teammitglieder nebeneinander stehen, sorgen.

    Also das hat grundsätzlich funktioniert. Jetzt versuche ich nur noch die letzte Person (bei einer ungeraden Anzahl an Mitgliedern) wieder über die volle Seite anzeigen zu lassen. Hast du dazu vielleicht noch eine Idee?

    Hypax

  • Code
                flex: 0 0 48%;
                max-width: 48%;

    Wieso denn 48% und nicht 50%?


    Jetzt versuche ich nur noch die letzte Person (bei einer ungeraden Anzahl an Mitgliedern) wieder über die volle Seite anzeigen zu lassen.

    Versuch mal:

    CSS
    #tpl_wcf_team .userList > li:nth-child(odd):last-child {
        flex: 0 0 100%;
        max-width: 100%;
    }

    Oder mit dem vorherigen zusammen dann:

    Wobei ich persönlich die 48% durch 50% ersetzen würde.

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!