comand-component-library 3.2.3 → 3.2.5

package/src/components/CmdSiteHeader.vue

@@ -6,34 +6,33 @@
         </div>
         <!-- end for elements above header -->
 
-        <!-- begin header-wrapper with slots for logo and other header elements -->
-        <header
-            v-if="$slots.logo || $slots.header || $slots.navigation"
-            :class="[useGrid ? 'grid-container-create-columns': 'flex-container', {'has-navigation': cmdMainNavigation || $slots.navigation, 'one-child-only' : oneChildOnly},]">
-            <slot name="logo"></slot>
-            <slot name="header"></slot>
-            <slot name="navigation"></slot>
-        </header>
-        <!-- end header-wrapper with slots for logo and other header elements -->
-
-        <header
-            v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length"
-            :class="[{'has-navigation': cmdMainNavigation, 'one-child-only' : oneChildOnly}, useGrid ? 'grid-container-create-columns': 'flex-container']">
-
-            <!-- begin CmdCompanyLogo -->
-            <CmdCompanyLogo
-                v-if="cmdCompanyLogo"
-                v-bind="cmdCompanyLogo"
-            />
-            <!-- end CmdCompanyLogo -->
-
-            <!-- begin CmdMainNavigation -->
-            <CmdMainNavigation
-                v-if="cmdMainNavigation?.navigationEntries?.length"
-                :navigationEntries="cmdMainNavigation.navigationEntries"
-                :closeOffcanvas="closeOffcanvas"
-            />
-            <!-- end CmdMainNavigation -->
+        <header :class="[useGrid ? 'grid-container-create-columns': 'flex-container', {'has-navigation': cmdMainNavigation || $slots.navigation, 'one-child-only' : oneChildOnly}]">
+            <!-- begin slots for logo and other header elements -->
+            <template v-if="$slots.logo || $slots.header || $slots.navigation">
+                <slot name="logo"></slot>
+                <slot name="header"></slot>
+                <slot name="navigation"></slot>
+            </template>
+            <!-- end slots for logo and other header elements -->
+
+            <!-- begin content given by data -->
+            <template v-if="cmdCompanyLogo || cmdMainNavigation?.navigationEntries?.length">
+                <!-- begin CmdCompanyLogo -->
+                <CmdCompanyLogo
+                    v-if="cmdCompanyLogo"
+                    v-bind="cmdCompanyLogo"
+                />
+                <!-- end CmdCompanyLogo -->
+
+                <!-- begin CmdMainNavigation -->
+                <CmdMainNavigation
+                    v-if="cmdMainNavigation?.navigationEntries?.length"
+                    :navigationEntries="cmdMainNavigation.navigationEntries"
+                    :closeOffcanvas="closeOffcanvas"
+                />
+                <!-- end CmdMainNavigation -->
+            </template>
+            <!-- end content given by data -->
         </header>
     </div>
 </template>

package/src/components/CmdThumbnailScroller.vue

@@ -182,10 +182,6 @@ export default {
 
             a {
                 text-align: center;
-
-                figcaption {
-                    opacity: var(--reduced-opacity);
-                }
             }
 
             img {
@@ -234,12 +230,51 @@ export default {
     }
 
     &.gallery-scroller {
-        > ul {
-            > li {
-                a {
-                    color: var(--pure-white);
+        max-width: 80%;
+        left: 0;
+        right: 0;
+        position: fixed;
+        bottom: var(--default-margin);
+        margin: auto;
+
+        li {
+            a {
+                color: var(--color-scheme-text-color);
+                text-decoration: none;
+            }
+
+            &.active {
+                img {
+                    border-color: var(--primary-color);
+                }
+
+                figcaption {
+                    color: var(--primary-color);
+                }
+            }
+
+            &:not(.active) {
+                img {
+                    border: var(--default-border);
+                    opacity: var(--reduced-opacity);
+                }
+
+                figcaption {
                     text-decoration: none;
                 }
+
+                a {
+                    &:hover, &:active, &:focus {
+                        figcaption {
+                            color: var(--primary-color);
+                        }
+
+                        img {
+                            border-color: var(--primary-color);
+                            opacity: 1;
+                        }
+                    }
+                }
             }
         }
     }
@@ -258,8 +293,11 @@ export default {
 @media only screen and (max-width: $medium-max-width) {
     .cmd-thumbnail-scroller {
         display: block;
+
+        &.gallery-scroller {
+            max-width: calc(100% - calc(var(--default-margin) * 3));
+        }
     }
 }
-
 /* end cmd-thumbnail-scroller ------------------------------------------------------------------------------------------ */
 </style>

package/src/components/CmdWidthLimitationWrapper.vue

@@ -5,7 +5,7 @@
             <!-- begin cmd-headline -->
             <CmdHeadline
                 v-if="cmdHeadline"
-                :pre-headline-text="cmdHeadline.preHeadlineLevel"
+                :pre-headline-text="cmdHeadline.preHeadlineText"
                 :headline-text="cmdHeadline.headlineText"
                 :headline-level="cmdHeadline.headlineLevel"
             />

package/src/documentation/generated/CmdFancyBoxPropertyDescriptions.json

@@ -14,6 +14,11 @@
             "set if content should be loaded by url"
         ]
     },
+    "figcaption": {
+        "comments": [
+            "figcaption if image is given by url"
+        ]
+    },
     "fancyboxOptions": {
         "comments": [
             "options to show at top (closeIcon, printButtons)"