Add breadcrumb navigation, adjust background color of sidebar boxes

2021-09-06 18:03:11 +02:00
parent 921092214c
commit 7efd53aa0d
29 changed files with 50 additions and 35 deletions
@@ -0,0 +1,14 @@
+lib.breadcrumb = HMENU
+lib.breadcrumb {
+    special = rootline
+    special.range = 1|-1
+    1 = TMENU
+    1.wrap = <div class="container mb-8 text-sm text-gray-800 flex">|</div>
+    1.NO {
+        stdWrap.htmlSpecialChars = 1
+        ATagParams = class="text-gray-400"
+        ATagTitle.field = nav_title // title
+        linkWrap = |<span class="text-gray-400 px-1">/</span>|*||*| |
+        doNotLinkIt = |*| 0 |*| 1
+    }
+}
@@ -157,13 +157,6 @@ page {
                titleField = title
                as = mobilenav
            }
-            70 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
-            70 {
-                special = rootline
-                special.range = 0|-1
-                includeNotInMenu = 1
-                as = breadcrumb
-            }
        }

        settings < plugin.tx_eptheme.settings
@@ -1,8 +1,8 @@
 <template>
    <div id="myep" class="relative mb-16">
-        <nav class="w-full bg-gray-200 flex items-center justify-between mb-8 relative" v-if="isLoggedIn">
+        <nav class="w-full bg-gray-50 flex items-center justify-between mb-8 relative" v-if="isLoggedIn">
            <span class="block text-2xl px-4">My E&P</span>
-            <div class="absolute z-10 top-100 left-0 w-full bg-gray-200 shadow lg:relative lg:top-auto lg:left-auto lg:w-auto lg:shadow-none lg:flex lg:space-x-4"
+            <div class="absolute z-10 top-100 left-0 w-full bg-gray-50 shadow lg:relative lg:top-auto lg:left-auto lg:w-auto lg:shadow-none lg:flex lg:space-x-4"
                :class="{ 'hidden': !navVisible }">
              <div class="lg:flex lg:items-center m-0">
                <router-link @click.native="navVisible = false" :to="{ name: 'address' }" class="block p-4 text-black hover:bg-gray-400 hover:text-gray-800" active-class="bg-gray-400 text-gray-800">Adressdaten</router-link>
@@ -32,7 +32,7 @@
                    </tr>
                </thead>
                <tbody>
-                    <tr v-for="event of events" class="even:bg-gray-200">
+                    <tr v-for="event of events" class="even:bg-gray-50">
                        <td class="px-2 py-1 border border-gray-200">
                            {{ formatBookingDate(event.dateBooking) }}
                        </td>
@@ -1,6 +1,6 @@
 <template>
    <div class="border border-gray-200 rounded mb-4">
-        <div class="bg-gray-200 p-2">
+        <div class="bg-gray-50 p-2">
            <h3 class="text-base font-bold">
                <a role="button" href="#" class="flex items-center justify-between"
                   @click.prevent="expanded = !expanded">
@@ -1,6 +1,6 @@
 <template>
-    <div class="border border-gray-200 rounded mb-4">
-        <div class="bg-gray-200 p-2">
+    <div class="border border-gray-50 rounded mb-4">
+        <div class="bg-gray-50 p-2">
            <h3 class="text-base font-bold">
                {{ title }}
            </h3>
@@ -11,6 +11,7 @@
            <f:cObject typoscriptObjectPath="lib.searchBar"/>
        </f:else>
    </f:if>
+    <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
    <f:render section="Content"/>
    <f:render section="Teasers"/>
    <f:render partial="Footer" arguments="{_all}"/>
@@ -11,6 +11,7 @@
            <f:cObject typoscriptObjectPath="lib.searchBar"/>
        </f:else>
    </f:if>
+    <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
    <f:render section="Header" optional="true"/>
    <div class="container grid grid-cols-3 gap-8">
        <div class="col-span-3 lg:col-span-1">
@@ -11,6 +11,7 @@
            <f:cObject typoscriptObjectPath="lib.searchBar"/>
        </f:else>
    </f:if>
+    <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
    <f:render section="Header" optional="true"/>
    <div class="container grid grid-cols-3 gap-8">
        <div class="col-span-3 lg:col-span-2">
@@ -1,5 +1,5 @@
 <f:if condition="{facts -> f:count()} > 0">
-    <div class="bg-gray-200 p-4 mb-4">
+    <div class="bg-gray-50 p-4 mb-4">
        <h2 class="text-base font-bold mb-1">
            <f:if condition="{title}">
                <f:then>
@@ -1,5 +1,5 @@
 <f:if condition="{officetip}">
-    <div class="bg-gray-200 p-4">
+    <div class="bg-gray-50 p-4">
        <div class="grid grid-cols-3 gap-4">
            <div class="col-span-3">
                <p class="font-bold">
@@ -28,7 +28,7 @@
                        </thead>
                        <tbody>
                            <f:for each="{pricetable}" as="row" iteration="iteration">
-                                <tr class="even:bg-gray-200">
+                                <tr class="even:bg-gray-50">
                                    <td class="px-2 py-1 border border-gray-200 whitespace-nowrap">
                                        {row.roomName}
                                        <div class="lg:hidden">
@@ -3,7 +3,7 @@
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers"
      xmlns:ep="http://typo3.org/ns/EP/EpTheme/ViewHelpers">

-    <div class="bg-cover bg-center bg-header-season-{product.region.season} mb-8">
+    <div class="bg-cover bg-center bg-header-season-{product.region.season} mb-4">
        <div class="md:container">
            <div class="md:flex md:flex-row-reverse md:items-stretch">
                <div class="md:w-5/12 md:py-4 splide"
@@ -1,7 +1,6 @@
-{namespace ep=EP\EpTheme\ViewHelpers}
 <f:if condition="{product.ratingVotesCount} > 0">
    <a href="{f:uri.typolink(parameter: targetPageUid)}"
-       class="block bg-gray-200 p-4 mb-4"
+       class="block bg-gray-50 p-4 mb-4"
       title="Reisebewertungen">
        <p class="font-bold mb-1">
            {label}
@@ -10,7 +9,7 @@
    </a>
 </f:if>
 <f:if condition="{product.testimonials}">
-    <div class="bg-gray-200 p-4 mb-8">
+    <div class="bg-gray-50 p-4 mb-8">
        <p class="font-bold">
            Kundenstimmen
        </p>
@@ -1,5 +1,5 @@
 <f:if condition="{region.webcam.available}">
-    <div class="bg-gray-200 p-4 mb-8">
+    <div class="bg-gray-50 p-4 mb-8">
        <p class="font-bold">
            Webcam
        </p>
@@ -3,7 +3,7 @@
      xmlns:f="http://typo3.org/ns/fluid/ViewHelpers">

    <f:if condition="{region.awardImage}">
-        <div class="bg-gray-200 p-4 mb-8">
+        <div class="bg-gray-50 p-4 mb-8">
            <span class="block font-bold mb-8">
                {region.awardLabel -> v:or(alternative: 'Auszeichnung')}
            </span>
@@ -1,5 +1,5 @@
 <f:if condition="{region.regionMaps}">
-    <div class="bg-gray-200 p-4 mb-4"
+    <div class="bg-gray-50 p-4 mb-4"
         data-controller="lightbox">
        <p class="font-bold mb-1">
            Pistenplan
@@ -1,4 +1,4 @@
-<div class="bg-gray-200 p-4 mb-4">
+<div class="bg-gray-50 p-4 mb-4">
    <p class="font-bold mb-1">
        Gebietsinfo
    </p>
@@ -1,5 +1,5 @@
 <f:if condition="{snowreport.snowLevelMountain}">
-    <div class="bg-gray-200 p-4 mb-4">
+    <div class="bg-gray-50 p-4 mb-4">
        <p class="font-bold mb-1">
            Schneehöhe aktuell
        </p>
@@ -1,7 +1,7 @@
 {namespace v=FluidTYPO3\Vhs\ViewHelpers}
 <f:if condition="{teamer -> f:count()} > 0">
    {teamer -> v:iterator.first() -> v:variable.set(name: 'teamerInCharge')}
-    <div class="bg-gray-200 p-4 mb-4">
+    <div class="bg-gray-50 p-4 mb-4">
        <p class="font-bold">
            Teamer vor Ort
        </p>
@@ -67,7 +67,7 @@
                    </thead>
                    <tbody>
                    <f:for each="{dates}" as="row" iteration="iteration">
-                        <tr class="even:bg-gray-200{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
+                        <tr class="even:bg-gray-50{f:if(condition: '{iteration.cycle} > 5', then: ' hidden')}"
                            data-pricetable-target="row">
                            <td class="px-2 py-1">
                                <f:if condition="{bookable} && {row.available} && {row.showBookingButton}">
@@ -63,7 +63,7 @@
                    </thead>
                    <tbody>
                    <f:for each="{prices}" as="row">
-                        <tr class="even:bg-gray-200"
+                        <tr class="even:bg-gray-50"
                            data-pricetable-target="row">
                            <td class="px-2 py-1">
                                <f:if condition="{row.showBookingButton} && {row.available}">
@@ -188,7 +188,7 @@
            <div class="headerbar">
                Inklusivleistungen
            </div>
-            <div class="bg-gray-200 p-4 mb-8">
+            <div class="bg-gray-50 p-4 mb-8">
                <ul class="list-none m-0 p-0">
                    <f:for each="{servicesIncluded}" as="service">
                        <li class="flex items-center space-x-2">
@@ -233,7 +233,7 @@
                                        {section.label}
                                    </div>
                                    <f:for each="{section.services}" as="service">
-                                        <dl class="flex items-start justify-between p-1 hover:bg-gray-200">
+                                        <dl class="flex items-start justify-between p-1 hover:bg-gray-50">
                                            <dt class="font-normal">
                                                {service.label}:
                                            </dt>
@@ -8,6 +8,7 @@

    <f:section name="Main">
        <f:render partial="SubpageHeader" arguments="{images: city.headerImages, topline: city.headerSubtitle, headline: city.headerTitle, settings: settings}"/>
+        <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
        <div class="container">
            <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                <div class="mb-8 lg:hidden">
@@ -8,6 +8,7 @@

    <f:section name="Main">
        <f:render partial="SubpageHeader" arguments="{images: concept.headerImages, topline: concept.headerSubtitle, headline: concept.headerTitle, settings: settings}"/>
+        <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
        <div class="container">
            <f:if condition="{teasers}">
                <div class="mb-8 lg:hidden">
@@ -8,6 +8,7 @@

    <f:section name="Main">
        <f:render partial="SubpageHeader" arguments="{images: country.headerImages, topline: country.headerSubtitle, headline: country.headerTitle, settings: settings}"/>
+        <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
        <div class="container">
            <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                <div class="mb-8 lg:hidden">
@@ -7,7 +7,7 @@
    <f:layout name="Default"/>

    <f:section name="Main">
-        <div class="bg-gray-200 p-4 mb-8">
+        <div class="bg-gray-50 p-4 mb-8">
            <div class="grid grid-cols-3 gap-4">
                <div class="col-span-1">
                    <f:if condition="{contact.0.image.0}">
@@ -7,6 +7,7 @@

    <f:section name="Main">
        <f:render partial="SubpageHeader" arguments="{images: hotel.headerImages, topline: hotel.headerSubtitle, headline: hotel.headerTitle, settings: settings}"/>
+        <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
        <div class="container">
            <f:if condition="{v:content.get(column: 1) -> f:count()} > 0">
                <div class="mb-8 lg:hidden">
@@ -39,7 +40,7 @@
                        <f:render partial="Snowreport" arguments="{snowreport: hotel.region.snowreport}"/>
                        <f:render partial="Regioninfo" arguments="{region: hotel.region}"/>
                    </f:if>
-                    <div class="bg-gray-200 p-4">
+                    <div class="bg-gray-50 p-4">
                        <p><strong>Lage</strong></p>
                        <div>
                            <div class="w-full aspect-w-16 aspect-h-9"
@@ -8,6 +8,7 @@
    <f:section name="Main">
        <article>
            <f:render partial="Product/HeaderDetail" arguments="{_all}"/>
+            <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
            <div class="container"
                 data-controller="product-details"
                 data-action="tabs:selected->product-details#switchView"
@@ -204,7 +205,7 @@
                        src="{ep:uri.video(value: product.video)}"></iframe>
            </div>
        </f:if>
-        <div class="bg-gray-200 p-4 mb-4">
+        <div class="bg-gray-50 p-4 mb-4">
            <p class="font-bold">
                Lage
            </p>
@@ -219,7 +220,7 @@
        <f:render partial="RegionMaps" arguments="{region: product.region}"/>
        <f:render partial="RegionAward" arguments="{region: product.region}"/>
        <f:if condition="{product.banner}">
-            <div class="bg-gray-200 p-4 mb-4">
+            <div class="bg-gray-50 p-4 mb-4">
                <f:link.typolink parameter="{product.banner.originalResource.link}"
                                 title="{product.banner.title}">
                    <f:image src="{product.banner.uid}" treatIdAsReference="1"
@@ -284,7 +285,7 @@
                    Preisberechnung
                </button>
            </f:if>
-            <div class="bg-gray-200 p-4 relative mb-8">
+            <div class="bg-gray-50 p-4 relative mb-8">
                <span class="block font-bold mb-2">
                    Belegungskalender
                </span>
@@ -8,6 +8,7 @@

    <f:section name="Main">
        <f:render partial="SubpageHeader" arguments="{images: region.headerImages, topline: region.headerSubtitle, headline: region.headerTitle, settings: settings, badge: badge}"/>
+        <f:cObject typoscriptObjectPath="lib.breadcrumb"/>
        <div class="container">
            <f:if condition="{teasers}">
                <div class="mb-8 lg:hidden">