v.1.0

api/collections/fields/pagebuilder.yml

@@ -3,6 +3,7 @@ name: row
 meta:
     label: Zeile
     addElementLabel: Zeile hinzufügen
+    widget: grid
     folding:
         previewFolded: titleForWork
         previewUnfolded: titleForWork
@@ -35,6 +36,7 @@ subFields:
       type: object[]
       meta:
           label: Spalte
+          widget: grid
           addElementLabel: weitere Spalte
           folding:
               previewFolded: contentType
@@ -349,6 +351,7 @@ subFields:
             type: object[]
             meta:
                 label: Zeile
+                widget: grid
                 addElementLabel: Zeile Hinzufügen
                 dependsOn:
                     eval: $parent.contentType == "form"
@@ -367,6 +370,7 @@ subFields:
                       folding:
                           previewFolded: titleForWork
                           previewUnfolded: titleForWork
+                      widget: grid
                       direction: horizontal
                   subFields:
                       - !include titleForWork.yml

frontend/src/lib/components/pagebuilder/image.svelte

@@ -26,7 +26,7 @@
 </script>
 
 {#if siteImages.length > 1}
-    <div class="flex images">
+    <div class="flex images" id="image">
         <swiper-container
             bind:this="{swiper}"
             slides-per-view="1"
@@ -35,13 +35,18 @@
             effect="slide"
             autoplay-delay="2500"
             mousewheel="{true}"
-            navigation="{true}"
             init="{false}"
             speed="600"
             class="relative"
+            autoplay="{{
+                delay: 1000, // 5000ms = 5s
+                pauseOnMouseEnter: true,
+            }}"
+            grab-cursor="{true}"
+            pagination="{true}"
         >
             {#each siteImages as image, i (i)}
-                <swiper-slide class="relative" id="image">
+                <swiper-slide class="relative" id="imageSlide">
                     <div class="image-container">
                         <img
                             src="{`${apiBaseURL}content/${siteId}/${image.image?.src}?filter=${
@@ -71,20 +76,20 @@
     @import "../../assets/css/variables.less";
     @import "../../assets/css/swiperStyles.less";
 
-    swiper-container {
+    #image {
-        height: auto;
+        swiper-container {
-        width: 100%;
+            height: auto;
-        max-width: 100vw;
+            width: 100%;
-    }
+            max-width: 100vw;
-    swiper-slide#image {
+            padding: 0px !important;
-        width: 100% !important;
+        }
     }
+
     .flex {
         flex: 2 !important;
     }
 
     .image-container {
-        max-width: 100%;
         width: 100%;
         overflow: hidden;
         max-width: @body-maxwidth;
@@ -102,4 +107,14 @@
     .single {
         max-width: @body-small-maxwidth;
     }
+    #imageSlide {
+        & {
+            width: 100% !important;
+        }
+    }
+    .swiper-pagination {
+        & > span {
+            background-color: var(--opposite-bg-color);
+        }
+    }
 </style>

frontend/src/lib/components/pagebuilder/pagebuilder.svelte

@@ -185,12 +185,12 @@
     textarea,
     .data-protection {
         margin: 5px 0px;
-        box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.05);
+        box-shadow: 0 0 25px 10px var(--opposite-bg-color-5);
     }
 
     .success-message {
         h1 {
-            color: var(--banner-color);
+            color: var(--heading-font-color);
             font-size: 36px;
             margin-top: 50px;
         }
@@ -399,10 +399,10 @@
             textarea,
             .data-protection {
                 padding: 10px 20px;
-                border: 0px solid black;
+                border: 0px solid var(--opposite-bg-color);
                 border-bottom: 3px solid var(--heading-font-color);
-                outline: 0px solid black;
+                outline: 0px solid var(--opposite-bg-color);
-
+                color: var(--opposite-bg-color);
                 background-color: var(--background-color);
                 resize: none;
             }