Merge branch 'main' of github.com:collective/volto-hydra

collective · Sep 24, 2024 · 5bf43b9 · 5bf43b9
2 parents 0a966b4 + 50703e1
commit 5bf43b9
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 6 deletions.
diff --git a/examples/hydra-vue-f7/src/components/block.vue b/examples/hydra-vue-f7/src/components/block.vue
@@ -1,14 +1,14 @@
 <template>
-    <f7-block-title v-if="block['@type']=='title'" :data-block-uid="block_uid">{{ data.title}}</f7-block-title>
-    <div v-else-if="block['@type']=='slate'" :data-block-uid="block_uid" data-editable-field="value">
+    <div v-if="block['@type']=='slate'" :data-block-uid="block_uid" data-editable-field="value">
         <RichText v-for="node in block['value']" :key="node" :node="node" />
     </div>
+    <!-- <f7-block-title v-else-if="block['@type']=='title'" :data-block-uid="block_uid">{{ data.title}}</f7-block-title> -->
     <f7-block v-else-if="block['@type']=='image'" :data-block-uid="block_uid">
         <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">
@@ -24,14 +24,52 @@
             <f7-link :href="getUrl(block.href[0])" data-editable-field="href">Read more</f7-link> 
         </f7-card-footer>
     </f7-card>
+    <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"
+             data-editable-field="title"
+            >{{block.title}}</f7-card-header
+        >
+        <f7-card-content>
+            <p data-editable-field="description">{{block.description}}</p>
+        </f7-card-content>
+        <f7-card-footer>
+            <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.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: {
@@ -58,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;
 }
diff --git a/examples/hydra-vue-f7/src/pages/sidenav.vue b/examples/hydra-vue-f7/src/pages/sidenav.vue
@@ -2,6 +2,7 @@
       <f7-page>
         <f7-navbar title="Navigation"></f7-navbar>
         <f7-list dividers-ios strong-ios outline-ios>
+          <f7-list-item title="Home" link="/" panel-close/>
           <template  v-for="(item) in navigation" >
             <f7-list-item :title="item.title" :link="getUrl(item)"   
              panel-close/>