Lightbox dreht die Karte um

[Rolf B]

Hallo horstmann,

so, habe noch etwas Zeit gehabt und etwas zu UIKit gelernt 😀

Und ich habe deine Seite mal in ein Fiddle geclont. Mein Vorschlag oben, der den HTML Rahmen für die Zellen darstellt, reicht aus. Dabei hab ich auch gleich einen Bug in jsFiddle entdeckt und gemeldet: so lange URLs, wie Du sie für Google Maps übertragen willst, zerreißen das Fiddle Layout. Man muss in den Settings "wrap lines" einschalten...

Ein height:100% an den direkten Kindern von uk-card ist nicht nötig, dafür hast Du uk-grid-match gesetzt. Sorry - UIKit war mir bis heute unbekannt.

Die -webkit- Prefixe in den CSS Regeln brauchst Du nicht mehr. Die dadurch angesprochenen Brower beherrschen diese Funktionen seit mehreren Jahren ohne Präfix. Du kannst sowas auf caniuse.com überprüfen.

Jetzt weiß ich auch, warum Du das card-flip div eingezogen hast - ohne das beißt sich deine Flipperei mit dem UIKit-Grid. Das UIKit ist da ziemlich umständlich, sie fummeln mit Margins und Paddings herum, nur um einen Zwischenraum zwischen die Cards zu bekommen. Mit display:grid und einem einfachen gap wäre das alles viel leichter. Aber dann müsstest Du vom UIKit weg und alles selbst machen.

Dann bin ich meinem Button-Vorschlag nachgegangen. Nicht so trivial; vor allem dein opacity:0.1 für die Front-Seite macht es schwer, den Button-Fokus zu erkennen. Ich würde Dir empfehlen, das CSG-Logo mit einem Grafikprogramm zu bearbeiten und damit die Transparenz herzustellen, so dass der Button selbst nicht transparent sein muss. Eine CSS Eigenschaft "background-opacity" würde es vereinfachen, aber die gibt es nicht. Ich habe mir jetzt mit einem absolut positionierten ::after Element im Button beholfen. Absolut deshalb, weil der Button einen unsichtbaren Text "Öffnen" enthält, der von einem Screenreader vorgelesen würde. Ich weiß natürlich nicht, ob man diese Seite für Nichtsehende irgendwie nutzbar machen kann, aber ein Button braucht einen Text.

Nachdem man draufgeklickt hat, ist die Card geflippt und der Button versteckt. Damit ist auch keine sichtbare Buttonfokussierung mehr da. D.h. man muss im Click-Event auch den Umschaltbutton der "anderen Seite" aktivieren.

Aber schön ist das noch alles nicht - hier ist mein aktueller Bastelstand. Er verwendet CSS Grid statt uk-grid, das ist deutlich weniger Gefummel für die Grid-Darstellung.

https://jsfiddle.net/Rolf_b/35fmqkte/1/

Wenn Du bei UK-Grid bleiben und die Button-Spielerei nicht haben willst - hier nur kurz und bündig: Frage, ähnlich wie ich das in flipCard mache, den tagName des eventTarget ab. Nur wenn es DIV ist schalte den flipped-Status um. Aber wie gesagt: Interaktiv gefummelte divs sind nicht das, wofür HTML gemacht ist.

Rolf