image styling for flip cards

Author: hmillersarah

h5p-player/h5p-content-flipcards/.DS_Store

@@ -24,6 +24,10 @@
 .h5p-dialogcards-card-text-area {
   outline: 0;
   font-size: 1.125em;
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  align-items: center;
 }
 
 .h5p-dialogcards {
@@ -96,6 +100,9 @@
   height: 100%;
   -webkit-transition: -webkit-transform 0.2s ease-in-out;
   transition: transform 0.2s ease-in-out;
+  display: flex;
+  flex-flow: column nowrap;
+  justify-content: center;
 }
 
 .h5p-dialogcards .h5p-dialogcards-card-content {
@@ -121,6 +128,10 @@
   position: relative;
 }
 
+.h5p-dialogcards-image-wrapper-no-image {
+  height: 0em !important;
+}
+
 .h5p-dialogcards .h5p-dialogcards-image-wrapper > .h5p-dialogcards-image {
   text-align: center;
   max-height: 100%;

h5p-player/h5p-libraries/H5P.Dialogcards-1.9/dist/h5p-dialogcards.css

@@ -74,7 +74,8 @@
           var e = r("<div>", { class: "h5p-dialogcards-image-wrapper" });
           return (
             void 0 !== t.image
-              ? ((this.image = t.image),
+              ? ((e = r("<div>", { class: "h5p-dialogcards-image-wrapper" })),
+                (this.image = t.image),
                 (this.$image = r(
                   '<img class="h5p-dialogcards-image" src="' +
                     H5P.getPath(t.image.path, this.contentId) +
@@ -85,7 +86,10 @@
                     "alt",
                     this.massageAttributeOutput(t.imageAltText)
                   ))
-              : (this.$image = r('<div class="h5p-dialogcards-image"></div>')),
+              : ((e = r("<div>", {
+                  class: "h5p-dialogcards-image-wrapper-no-image",
+                })),
+                (this.$image = r('<div class="h5p-dialogcards-image"></div>'))),
             this.$image.appendTo(e),
             e
           );

h5p-player/h5p-libraries/H5P.Dialogcards-1.9/dist/h5p-dialogcards.js

@@ -114,7 +114,6 @@ class Card {
       class: "h5p-dialogcards-image-wrapper",
     });
 
-    console.log(card.image);
     if (card.image !== undefined) {
       this.$image = $(
         '<img class="h5p-dialogcards-image" src="/' +