fixes for grid and slider

collective · Sep 17, 2024 · 59a0e7b · 59a0e7b
1 parent 4eb7982
commit 59a0e7b
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 6 deletions.
diff --git a/examples/hydra-vue-f7/src/components/block.vue b/examples/hydra-vue-f7/src/components/block.vue
@@ -7,8 +7,8 @@
         <img v-for="props in [imageProps(block)]" :src="props.url" :class="['image-size-'+props.size, 'image-align-'+props.align]" />
     </f7-block>
     <f7-block v-else-if="block['@type']=='gridBlock'" :data-block-uid="block_uid" data-container-blocks="blocks,horizontail,5">
-        <div :class="['grid', 'grid-cols-'+block.blocks_layout, 'grid-gap']">
-            <div v-for="uid in block.blocks_layout"><Block :block_uid="uid" :block="block.blocks[uid]" :data="data"></Block></div>
+        <div :class="['grid', 'grid-cols-'+block.blocks_layout.items.length, 'grid-gap', 'column', 'style-bg-'+(block.styles.backgroundColor||'none')]">
+            <Block v-for="uid in block.blocks_layout.items" :block_uid="uid" :block="block.blocks[uid]" :data="data"></Block>
         </div>
     </f7-block>
     <f7-card v-else-if="block['@type']=='teaser'" :data-block-uid="block_uid">
@@ -27,10 +27,12 @@
     <swiper-container :pagination="true" class="demo-swiper-multiple" :space-between="50"
     :speed="block.autoplayDelay ? block.autoplayEnabled : ''" v-else-if="block['@type']=='slider'" :data-block-uid="block_uid">
       <swiper-slide v-for="block in block.slides">
+        <div :style="{'background-image': imageProps(block.preview_image[0]).url}">
         <f7-card>
+          <div>{{ block.head_title }}</div>
         <f7-card-header
             valign="bottom"
-            :style="{'background-image': ('url()' ? block.href.hasPreviewImage : false)}" data-editable-field="title"
+             data-editable-field="title"
             >{{block.title}}</f7-card-header
         >
         <f7-card-content>
@@ -40,26 +42,34 @@
             <f7-link :href="getUrl(block.href[0])" data-editable-field="href">{{block.buttonText}}</f7-link> 
         </f7-card-footer>
         </f7-card>
+       </div>
       </swiper-slide >
     </swiper-container>
     <hr v-else-if="block['@type']=='separator'" :data-block-uid="block_uid"></hr>
     <f7-list strong  inset-md accordion-list  v-else-if="block['@type']=='accordian'" :data-block-uid="block_uid">
       <f7-list-item v-for="block in blocks" accordion-item :title="block.title" :data-block-uid="block_uid">
         <f7-accordion-content>
           <f7-block>
-            <div v-for="uid in block.blocks_layout"><Block :block_uid="uid" :block="block.blocks[uid]" :data="data"></Block></div>
+            <div v-for="uid in block.blocks_layout.items"><Block :block_uid="uid" :block="block.blocks[uid]" :data="data"></Block></div>
           </f7-block>
         </f7-accordion-content>
       </f7-list-item>
     </f7-list>
 </template>
 <script>
   import RichText from './richtext.vue';
+  // Import Swiper Vue.js components
+  import { Swiper, SwiperSlide } from 'swiper/vue';
+
+  // Import Swiper styles
+  import 'swiper/css';
 
 export default {
   name: 'Block',
   components: {
       RichText,
+      Swiper,
+      SwiperSlide,
     },
   props: {
     block_uid: {
@@ -86,9 +96,10 @@ export default {
 
     },
     imageProps(block) {
+        var id = block.url ? block?.url : block['@id']; 
         var image_url = block?.image_scales
-            ? `${block.url}/++api++/${block?.image_scales.image[0].download}`
-            : block.url;
+            ? `${id}/++api++/${block?.image_scales.image[0].download}`
+            : id;
         image_url = image_url.startsWith("https://hydra.pretagov.com") ? image_url + "/@@images/image" : image_url;
         const size = block.size;
         const align = block.align;

diff --git a/examples/hydra-vue-f7/src/css/app.css b/examples/hydra-vue-f7/src/css/app.css
@@ -4,7 +4,28 @@
     float: right;
 }
 
+.image-align-left {
+    float: left;
+}
+
 .image-size-s {
     width: 100px;
     height: 100px;
+}
+
+.image-size-m {
+    width: 200px;
+    height: 200px;
+}
+
+.image-size-l {
+    width: 100%;
+}
+
+.grid.style-bg-none * {
+    background-color: lightgray;
+}
+
+.grid.style-bg-grey {
+    background-color: lightgrey;
 }