Use teasergroups in searchresult with toggle option

public/typo3conf/ext/ep_theme/Resources/Private/Partials/Search/Result.html

@@ -39,27 +39,49 @@
             <h4 class="headline headline--tertiary headline--underlined">
                 {section.concept.name}
             </h4>
-            <div class="flex flex-col space-y-4 md:space-y-8 mb-8">
-                <f:for each="{section.items}" as="item">
-                    <f:render partial="Product/Teaser" section="Teaser" arguments="{
-                                concept: section.concept,
-                                hotel: item.hotel,
-                                product: item.product,
-                                country: item.country,
-                                region: item.region,
-                                productImage: item.hotel.images.original.0,
-                                nights: item.nights,
-                                board: item.board,
-                                minPrice: item.minPrice,
-                                daytrip: product.daytrip,
-                                season: product.season,
-                                dateFrom: item.minDateStart,
-                                dateTo: item.maxDateEnd,
-                                forceHotelUid: 1,
-                                landscape: 1,
-                                referringPageUri: referringPageUri
-                            }"/>
-                </f:for>
+            <div class="pb-4 md:pb-8"
+                 data-controller="teasergrid"
+                 data-teasergrid-grid-class="grid-cols-2"
+                 data-teasergrid-disabled-value="false">
+                <div class="flex items-center space-x-1 mb-2 sm:hidden">
+                    <button type="button"
+                            class="opacity-50"
+                            data-action="teasergrid#grid"
+                            data-teasergrid-target="button">
+                        <svg class="w-5 h-5 text-ep-primary">
+                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-grid"></use>
+                        </svg>
+                    </button>
+                    <button type="button"
+                            data-action="teasergrid#block"
+                            data-teasergrid-target="button">
+                        <svg class="w-5 h-5 text-ep-primary">
+                            <use href="{f:uri.image(src: 'EXT:ep_theme/Resources/Public/images/icons_sprite.svg')}#icon-teaser-single"></use>
+                        </svg>
+                    </button>
+                </div>
+                <div class="grid grid-cols-2 xl:grid-cols-3 gap-4 md:gap-8"
+                     data-teasergrid-target="container">
+                    <f:for each="{section.items}" as="item">
+                        <f:render partial="Product/Teaser" section="Teaser" arguments="{
+                                    concept: section.concept,
+                                    hotel: item.hotel,
+                                    product: item.product,
+                                    country: item.country,
+                                    region: item.region,
+                                    productImage: item.hotel.images.original.0,
+                                    nights: item.nights,
+                                    board: item.board,
+                                    minPrice: item.minPrice,
+                                    daytrip: product.daytrip,
+                                    season: product.season,
+                                    dateFrom: item.minDateStart,
+                                    dateTo: item.maxDateEnd,
+                                    forceHotelUid: 1,
+                                    referringPageUri: referringPageUri
+                                }"/>
+                    </f:for>
+                </div>
             </div>
         </div>
     </f:for>

public/typo3conf/ext/ep_theme/Resources/Private/Templates/AjaxFilterPanel/Index.html

@@ -15,7 +15,7 @@
         <f:if condition="{filterOptions.resultsUri}">
             <div class="mt-4">
                 <a href="{filterOptions.resultsUri}"
-                   class="button button--primary w-full">
+                   class="button text-white bg-badge-gradient w-full">
                     {filterOptions.resultCount} Treffer anzeigen
                 </a>
             </div>