decidim-swiss / decidim.swiss

2 stars 0 forks source link

"Team" standardmässig an letzter Stelle #61

Closed innosmith closed 1 year ago

innosmith commented 1 year ago

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?

Google Chrome - Wyss Academy for Nature - deinklima ch 2023-05-06 um 12 35 11

carlobeltrame commented 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.

innosmith commented 1 year ago

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.

carlobeltrame commented 1 year ago

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.

innosmith commented 1 year ago

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.

bsantschi commented 1 year ago

Hoi @innosmith ich habe das Ticket zurück ins Backlog verschoben, bitte in Ready verschieben sobald du es mit ihnen challengen konntest.

innosmith commented 1 year ago

Bitte mit CSS jeweils den zweiten Reiter an die letzte Stelle platzieren.

carlobeltrame commented 1 year ago

Done auf Integration in einem neuen CSS-Block

larsUE commented 1 year ago

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.

carlobeltrame commented 1 year ago

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 :)

larsUE commented 1 year ago

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

carlobeltrame commented 1 year ago

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.

innosmith commented 1 year ago

Besten Dank @carlobeltrame

innosmith commented 1 year ago

@carlobeltrame : eben festgestellt, dass der CSS-Code auch bei Projekten und nicht nur Organisationen greift. Kannst du dies noch einfach anpassen? Merci

carlobeltrame commented 1 year ago

@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.