fix(default-theme): display text next to image in block (#1056)

packages/default-theme/cms/blocks/CmsBlockTextOnImage.vue

@@ -1,9 +1,12 @@
 <template>
  <article class="cms-block-text-on-image">
  <CmsGenericElement
- v-if="getContent"
- :content="getContent"
- class="cms-block-text-on-image__content"
+ :content="getLeftContent"
+ class="cms-block-text-on-image__image"
+ />
+ <CmsGenericElement
+ :content="getRightContent"
+ class="cms-block-text-on-image__text"
  />
  </article>
 </template>
@@ -29,20 +32,53 @@ export default {
  getSlots() {
  return this.content.slots || []
  },
- getContent() {
- return this.getSlots.length && this.getSlots[0]
+
+ getLeftContent() {
+ return this.getSlots.find(({ slot }) => slot === "left")
+ },
+ getRightContent() {
+ return this.getSlots.find(({ slot }) => slot === "right")
  },
  },
 }
 </script>
 
 <style lang="scss" scoped>
+@import "@/assets/scss/variables";
+
 .cms-block-text-on-image {
- background-position: center;
- background-size: cover;
+ display: flex;
+ flex-direction: column;
+ margin-right: 0;
+ margin-left: 0;
+
+ &__image,
+ &__text {
+ margin: var(--spacer-sm);
+ flex: 1;
+ & img {
+ height: 340px;
+ object-fit: cover;
+ width: 100%;
+ }
+ }
+
+ @include for-desktop {
+ align-items: center;
+ flex-direction: row;
+ justify-content: space-around;
+
+ .cms-block-text-on-image__image {
+ margin-bottom: 0;
+ margin-right: var(--spacer-sm);
+ margin-top: 0;
+ }
 
- &__content {
- padding: var(--spacer-2xl) var(--spacer-xl);
+ .cms-block-text-on-image__text {
+ margin-bottom: 0;
+ margin-left: var(--spacer-sm);
+ margin-top: 0;
+ }
  }
 }
 </style>