FEATURE: Improve service provider listing

DistributionPackages/Neos.NeosIo.ServiceOfferings/Resources/Private/Fusion/Components/ProviderList.fusion

@@ -68,6 +68,7 @@ prototype(Neos.NeosIo.ServiceOfferings:Component.ProviderList) < prototype(Neos.
         }
 
         renderer = afx`
+            <h2 class="headline">{I18n.id('serviceListing.headline').value('serviceListing.headline').package('Neos.NeosIo.ServiceOfferings').source('Main')}</h2>
             <div class="service-providers__list" id="service-providers-listing"
                  data-provider-data={Json.stringify(props.serviceProvidersData)}
                  data-translation-data={Json.stringify(props.translationData)}

DistributionPackages/Neos.NeosIo.ServiceOfferings/Resources/Private/Fusion/Documents/ServiceProviderCollection.fusion

@@ -1,6 +1,10 @@
 prototype(Neos.NeosIo.ServiceOfferings:Document.ServiceProviderCollection) < prototype(Neos.NeosIo:DefaultPage) {
     body {
         content {
+            keyVisual = Neos.NeosIo:KeyVisual {
+                keyVisualSize = 'small'
+            }
+
             main = Neos.Fusion:Join {
                 top = Neos.Neos:PrimaryContent {
                     nodePath = 'main'

DistributionPackages/Neos.NeosIo.ServiceOfferings/Resources/Private/JavaScript/ProviderListing.tsx

@@ -58,6 +58,17 @@ export default function ProviderListing() {
         }
     };
 
+    const sortByFirstNumberInString = (a: string, b: string) => {
+        const regex = /\d+/; // Regular expression to extract the first number in the string
+        const numberA = parseInt(a.match(regex)[0]);
+        const numberB = parseInt(b.match(regex)[0]);
+
+        // Sort descending by the first number in the string
+        return numberB - numberA;
+    }
+
+    sizes.sort(sortByFirstNumberInString);
+
     const switchToGrid = (state: boolean) => { setGrid(state)};
 
     useEffect(() => {
@@ -87,9 +98,9 @@ export default function ProviderListing() {
     return (
         <div>
             <div>
-                <header class="service-providers__grid-tableview">
-                    <div class="service-providers__grid-row remove-border form form--inline">
-                        <div class="service-providers__grid-cell">
+                <header class="service-providers__grid-filter">
+                    <div class="service-providers__grid-row remove-border form">
+                        <div class="service-providers__grid-cell row">
                             <div class="form__item">
                                 <i class={'grid-switcher fas fa-th-large' + (grid ? ' selected' : '')}
                                    onclick={e => switchToGrid(true)}
@@ -105,12 +116,9 @@ export default function ProviderListing() {
                                    onclick={() => sortBy('title')}
                                    title={translationData['name']}></i>
                             </div>
-                            <div className="form__item" title={`${providers.length} ${translationData['providers']}`}>
-                                {providers.length} <i class="fas fa-user-ninja"></i>
-                            </div>
                         </div>
                         <div class="service-providers__grid-cell">
-                            <div class="form__item">
+                            <div class="form__item form__item--with-icon">
                                 <input type="text"
                                        id="service-provider-search"
                                        placeholder={translationData['search']}
@@ -146,6 +154,9 @@ export default function ProviderListing() {
                             </select>
                         </div>
                     </div>
+                    <div className="form__item">
+                        <strong>{providers.length}</strong> {translationData['providers']}
+                    </div>
                 </header>
                 <section className={grid ? 'service-providers__grid-gridview' : 'service-providers__grid-tableview'}>
                     {providers.length ? providers.map(provider => (grid ? <ProviderListGridItem provider={provider}/> : <ProviderListTableRow provider={provider}/>)) : (

DistributionPackages/Neos.NeosIo.ServiceOfferings/Resources/Private/Scss/Main.scss

@@ -135,34 +135,53 @@
       }
     }
 
-    .service-providers__grid-tableview {
+    .service-providers__grid-filter {
       .service-providers__grid-row {
-        display: grid;
-        grid-template-columns: repeat(4, 1fr);
-        border-top: 1pt solid #eee;
-        padding: 1rem;
-
-        @media(max-width: 1023px) {
-          grid-template-columns: none;
-          grid-template-rows: 1fr;
-          grid-gap: 1rem;
-        }
-
         &.form {
           padding: 0;
-          grid-template-columns: repeat(5, auto);
+          display: flex;
           justify-content: space-between;
 
           .service-providers__grid-cell {
             padding-top: 0;
+            width: 100%;
+            &:nth-child(n+2) {
+              padding-left: 16px;
+            }
+
+            &.row {
+              width: auto;
+
+              .form__item {
+                padding-right: 16px;
+              }
+            }
+          }
+
+          select {
+            width: 100%;
           }
         }
 
         .form__item {
-          display: inline-block;
           white-space: nowrap;
         }
       }
+    }
+
+    .service-providers__grid-tableview {
+      .service-providers__grid-row {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr);
+        border-top: 1pt solid #eee;
+        padding: 1rem;
+
+        @media(max-width: 1023px) {
+          grid-template-columns: none;
+          grid-template-rows: 1fr;
+          grid-gap: 1rem;
+        }
+      }
       .service-providers__grid-cell {
         z-index: 2;
 
@@ -179,12 +198,14 @@
         }
       }
 
+
     }
 
     .service-providers__grid-gridview {
       display: grid;
       grid-template-columns: repeat(3, 1fr);
       grid-gap: 2rem;
+      padding-top: 16px;
 
       @media(max-width: 1023px) {
         grid-template-columns: repeat(2, 1fr);

DistributionPackages/Neos.NeosIo.ServiceOfferings/Resources/Private/Translations/de/Main.xlf

@@ -2,6 +2,9 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
     <file original="" product-name="Neos.NeosIo.ServiceOfferings" source-language="en" target-language="de" datatype="plaintext">
         <body>
+            <trans-unit id="serviceListing.headline" xml:space="preserve">
+                <target>Finde Deinen passenden Neos-Partner</target>
+            </trans-unit>
             <trans-unit id="serviceListing.name" xml:space="preserve">
                 <target>Name</target>
             </trans-unit>

DistributionPackages/Neos.NeosIo.ServiceOfferings/Resources/Private/Translations/en/Main.xlf

@@ -2,6 +2,9 @@
 <xliff version="1.2" xmlns="urn:oasis:names:tc:xliff:document:1.2">
     <file original="" product-name="Neos.NeosIo.ServiceOfferings" source-language="en" datatype="plaintext">
         <body>
+            <trans-unit id="serviceListing.headline" xml:space="preserve">
+                <target>Find the right Neos partner for you</target>
+            </trans-unit>
             <trans-unit id="serviceListing.name" xml:space="preserve">
                 <source>Name</source>
             </trans-unit>

DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Components/KeyVisual.fusion

@@ -5,6 +5,7 @@ prototype(Neos.NeosIo:KeyVisual) < prototype(Neos.Fusion:Component) {
     // API
     keyVisualImage = null
     keyVisualImageSmall = null
+    keyVisualSize = 'default'
     isKeyVisualContentsInverted = false
     content = null
 

DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Components/KeyVisual/AbstractRenderer.fusion

@@ -10,7 +10,7 @@ prototype(Neos.NeosIo:KeyVisual.AbstractRenderer) < prototype(Neos.Fusion:Compon
     highQualityImageUri = ''
     imageSrcSet = ''
 
-    classes = "keyVisual print-hidden"
+    classes = ${"keyVisual keyVisual--" + props.keyVisualSize + " print-hidden"}
 
     divClasses = ${"keyVisual__contents u-alignCenter " + (this.isKeyVisualContentsInverted ? "u-invertText" : "")}
     previewImageStyleAttribute = ${"background-image: url('" + this.previewImageUri + "')"}

DistributionPackages/Neos.NeosIo/Resources/Private/Fusion/Components/KeyVisual/StaticPlaceholderImageRenderer.fusion

@@ -13,4 +13,6 @@ prototype(Neos.NeosIo:KeyVisual.StaticPlaceholderImageRenderer) < prototype(Neos
         highRes = ${staticUrlPrefix + "-1280w.jpg 1280w, "}
         mediumRes = ${staticUrlPrefix + "-658w.jpg 658w"}
     }
+
+    keyVisualSize = ${props.keyVisualSize}
 }

DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Molecules/_Form.scss

@@ -81,3 +81,20 @@
 		margin-#{$end}: .3em;
 	}
 }
+
+.form__item {
+  &--with-icon {
+    position: relative;
+
+    input {
+      width: 100%;
+    }
+
+    label {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+  }
+}

DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Organisms/_KeyVisual.scss

@@ -6,6 +6,12 @@
   overflow: hidden;
   background: #000;
 
+  &--small {
+    .keyVisual__contents {
+      height: MIN(250px, 25vw);
+    }
+  }
+
   &:before {
     content: '';
     position: absolute;

DistributionPackages/Neos.NeosIo/Resources/Private/Scss/Utilities/_Layout.scss

@@ -53,3 +53,7 @@
 .u-clearfix {
 	@include u-cf();
 }
+
+.row {
+  display: flex;
+}