Lightbox dreht die Karte um

[Rolf B]

Hallo horstmann,

das ist dein HTML - pro Feld. Das UIKit macht daraus eine Card-Ansicht mit 2-6 Feldern pro Zeile und verwendet dafür Flexbox. Ich würde annehmen, dass das ohne UiKit und mit einem selbstgemachten display:grid deutlich eleganter ginge, aber vermutlich überfordere ich Dich damit.

<div class="card-flip">
   <div class="uk-card uk-card-default uk-card-hover card">

      <div class="front uk-background-cover uk-height-small height-medium " style="background-image: url(img/csg-logo-200.png);">
      </div>
      <div class="back card-face uk-background-cover uk-height-small height-medium  " style="background-image: url(img/white_300.png);">
        <div uk-lightbox="animation: fade">
          <a class="uk-button uk-position-bottom-center uk-text-emphasis uk-button-default " href="img/platzhalter_ny_1200.png" data-caption="Happy NY">Lightbox</a>
        </div>
      </div>
    </div>
  </div>
</div>

Was Du - vom Markup her - tun solltest, ist aufräumen.

• Die Klasse "card" scheint nicht benutzt zu werden.
• Hintergrundbilder per style-Attribut? Du hast doch eh eigenes CSS, warum setzt Du das background-image nicht dort?
• Klasse card-face, für display:block. Unnötig, ein div hat diese Eigenschaft ohnehin. Du hast davor noch .card-face.back stehen, da müsste das .card-face dann entfernt werden, wenn .card-face verschwindet
• Klasse card - die verwendest Du gar nicht (und hast sie auf einigen uk-card auch vergessen)
• Das card-flip div? Ich würde annehmen, dass Du margin:10px auch auf .uk-card legen und auf dieses div dann völlig verzichten kannst. Ausprobiert habe ich es nicht, es ist mir jetzt zu lästig deinen Sourcecode zusammenzusaugen.
• Klassen height-medium und uk-height-small auf den Vorder- und Rückseiten: Ich würde behaupten, dass Du die nicht brauchst. Setze in der media-Query die Höhe direkt für uk-card. Du kannst dann allerdings keinen Bezug auf die uk-height... Klassen des UIKit nehmen, aber ich denke, das ist auch nicht nötig. Die div-Kinder von uk-card sollten dann height:100% bekommen.
• die Klasse uk-background-cover bringt die Eigenschaften background-size:cover, background-repeat:no-repeat und background-position:50% 50% mit. Die drei kannst Du auch direkt an dein eigene style-Regel für die div-Kinder von uk-card kleben und musst dein Markup nicht mit Klassen vollmüllen, die rein zur Layout-Steuerung da sind. Sowas ist eigentlich keine gute Praxis, auch wenn die "CSS Frameworks" einen damit vollschmeißen.
• Ich wollte mich schon über das <a> Element für die Bilder aufregen, aber (a) gibt UIKit das für die Lightbox so vor und (b) ist der Link der Fallback für den Fall dass JavaScript aus ist. Also: ok.

Ich hätte also an Zusatz-CSS:

.uk-card > div {
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.uk-card .front {
   background-image: url(img/csg-logo-200.png);
}
.uk-card .back {
   background-image: url(img/white_300.png);
}

Das ">" im Selektor ".uk-card > div" bedeutet: beziehe Dich nur auf die div, die direkte Kinder des uk-card Elements sind.

<div class="uk-card uk-card-default uk-card-hover">
  <div class="front">
  </div>
  <div class="back">
    <div uk-lightbox="animation: fade">
      <a class="uk-button uk-position-bottom-center uk-text-emphasis uk-button-default " href="img/platzhalter_ny_1200.png" data-caption="Happy NY">Lightbox</a>
    </div>
  </div>
</div>

Nun zum Klicken. Du registrierst deine Eventhandler auf allen uk-card Elementen und reagierst dann auf Klicks. Zum einen ist das prinzipiell falsch. DIVs sind keine interaktiven Elemente. Versuche mal, ohne Maus (und Touchscreen) eins deiner Kärtchen zu flippen. Geht nicht. Weil ein div nicht per Tastatur annavigiert werden kann.

Buttons sind interaktiv, und <a> Elemente sind interaktiv. Du erlebst auch prompt die Folgen, was passiert, wenn man interaktive Elemente schachtelt: Sie stören sich gegenseitig. Der Klick ins <a> Element blubbert im DOM nach oben (Event bubbling) und gelangt zu deinem div. Deshalb reagiert dein div auf den Klick, der eigentlich dem a Element galt

Was tun? Das Schachteln interaktiver Inhalte ist in den Inhaltsmodellen von HTML nicht vorgesehen. Genau genommen ist es verboten, dass ein <a> Element oder ein <button> Element interaktive Elemente enthalten.

Die richtige Lösung wäre also, wenn Du dein front-div durch einen Button ersetzt. Den kannst Du so stylen, dass er als Button erstmal nicht erkennbar ist, aber den Fokus-Outline solltst Du nicht entfernen. Dein back-div ist komplizierter. Das lightbox-Element positioniert sind selbst, aber du müsstest noch einen Button hineinlegen, der das div füllt. Analog zu front. Das lightbox-Element darf kein Kind-Element des Button sein.

Im click-Eventhandler kannst Du dann abfragen, ob einer deiner Buttons geklickt wurde. Dazu schreib ich nachher noch was - ich muss jetzt erstmal weg vom PC.

Rolf