Darstellung der Team-Seite verändern

Hypax · Jul 23rd 2019

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.

LRDE · Jul 23rd 2019

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.

Zero /.. · Jul 23rd 2019

Versuch es einfach mal mit Flexbox:

Code

#tpl_wcf_team {
    .userList {
        display: flex;
        flex-wrap: wrap;

        > li {
            flex: 0 0 48%;
            max-width: 48%;
        }
    }
}

Display More

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.

Hypax · Jul 23rd 2019

Quote from Aze
Versuch es einfach mal mit Flexbox:
Code
#tpl_wcf_team {
    .userList {
        display: flex;
        flex-wrap: wrap;

        > li {
            flex: 0 0 48%;
            max-width: 48%;
        }
    }
}
Display More
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?

ReeN · Jul 23rd 2019

Quote from Aze

Code

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

Wieso denn 48% und nicht 50%?

Quote from Hypax

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:

CSS

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

Display More

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

Hypax · Jul 23rd 2019

Danke! Funktioniert wie gewünscht!

Share