Closed innosmith closed 1 year ago
Ist mit CSS machbar, Aufwand ca. 0.5h (order
auf dem gewünschten li
Element und auf dem ::after
entsprechend setzen). Das wollt ihr aber nur bei einem einzelnen Projekt so machen oder? Es hat ja nicht jedes Projekt per se einen "Team" Reiter.
Bitte umsetzen für alle Organisationen. Dieser Reiter wird angezeigt, sobald ein Content-Admin ein Vorstandsteam definiert. Im Falle von deinklima haben wir Vorstand in Team umbenannt via Term Customizer.
Was ich mit CSS machen kann, ist den zweiten Reiter immer an die letzte Stelle setzen. Was ich nicht machen kann, ist "der Reiter auf dem Team steht" an die letzte Stelle setzen.
Was ich mit CSS machen kann, ist den zweiten Reiter immer an die letzte Stelle setzen. Was ich nicht machen kann, ist "der Reiter auf dem Team steht" an die letzte Stelle setzen.
Dann lass mich dies zuerst noch einmal mit ihnen challengen und noch nicht sofort umsetzen.
Hoi @innosmith ich habe das Ticket zurück ins Backlog verschoben, bitte in Ready verschieben sobald du es mit ihnen challengen konntest.
Bitte mit CSS jeweils den zweiten Reiter an die letzte Stelle platzieren.
Done auf Integration in einem neuen CSS-Block
Aus neugier, könntet ihr den CSS Code hier posten? Kann das ev. für einen anderen Tenant auch brauchen. Das ganze ist ja noch cool, wir brauchen das z.B: in Zürich um je nach Prozess selektiv Menü-Items im Hauptmenü anzuzeigen.
Ich weiss nicht genau was du mit "selektiv anzeigen" meinst, die Änderung die ich gemacht habe hat nur einen Menüpunkt verschoben. Aber sure, hier ist der CSS-Code:
#process-nav-content > ul > li:nth-child(2), #process-nav-content > ul::after {
order: 1;
}
Das order
funktioniert nur, wenn die angezeigte Liste von Elementen mit Flexbox gelayoutet ist. Elemente ohne order
haben den Wert 0. Die Lösung war somit, dem "Team"-Tab (das zweite in der Liste, also :nth-child(2)
) sowie dem in diesem Fall präsenten "Spacer-Element" (::after
) je order: 1
zuzuweisen. Für andere Orte wirst du das ziemlich sicher anpassen müssen, aber als Grundlage könnte es dir vielleicht helfen :)
Cool, danke! Mit selektiv meinte ich, dass man dann mit den Decidim Awesome scopes und diesem Trick z.B. je nach Prozess/Komponente usw. unterschiedliche Items im Menü anzeigen kann. In Zürich nutzen wir das etwa bereits, um je nach Prozess unterschiedliche Main-Menü-Items anzuzeigen (natürlich mit anderen Klassen):
Standardmenü: https://mitwirken.stadt-zuerich.ch Spezielles Menü fürs Klimaforum: https://mitwirken.stadt-zuerich.ch/assemblies/klimaforum
Okay. Also das x-te Element das zu einem Selektor passt kannst du mit nth-child(x)
ansprechen. Das hat dann nichts mit Flexbox zu tun, das geht überall :) aber man muss halt aufpassen wenn plötzlich mal mehr Elemente in der Liste sind, dann muss man die Nummer (x) gegebenenfalls auch wieder anpassen.
Besten Dank @carlobeltrame
@carlobeltrame : eben festgestellt, dass der CSS-Code auch bei Projekten und nicht nur Organisationen greift. Kannst du dies noch einfach anpassen? Merci
@innosmith done. Via CSS geht das nicht, weil Decidim die Headers von Organisationen und Projekten exakt gleich behandelt und mir keine Anhaltspunkte gibt. Aber in Decidim Awesome kann man einzelne CSS-Blöcke z.B. auf nur Organisationen einschränken. Habe das gleich auf INT und PROD umgesetzt.
Wie gross wäre der Aufwand, den "Team" Reiter jeweils an letzter Position anzuzeigen anstelle an zweiter Position, siehe Screenshot? Wie stark wäre der Eingriff ins System, so etwas umzusetzen?