Do not use carousel if other extensions are less than 4

extensions/ter_fe2/Resources/Private/Partials/OtherExtensionsByUser.html

@@ -2,54 +2,67 @@
 
 <div class="text-center my-3">
 	<div class="row mx-auto my-auto">
-		<div id="extensionCarousel" class="carousel slide w-100" data-ride="carousel">
-			<div class="carousel-inner w-100" role="listbox">
-				<f:for each="{extensionsByUser}" iteration="it" as="extension">
-					<div class="carousel-item{f:if(condition:it.isFirst,then:' active')}">
-						<div class="col-md-4">
-								<div class="card">
-								<div class="card-header">
-									<h5 class="card-title">
-										<terfe2:extensionIcon version="{extension.lastVersion}" alt="{extension.lastVersion.title}" class="ter-ext-icon" />
-										<f:link.action action="show" arguments="{extension: extension}">
-											<span title="Extension title: {extension.lastVersion.title}" itemprop="alternateName">
-												{extension.lastVersion.title}
-											</span>
-										</f:link.action>
-										<br>
-										<small>({extension.extKey})</small>
-									</h5>
-								</div>
-								<div class="card-body">
-									<p>{extension.lastVersion.description}</p>
-									<small>
-										Supported TYPO3 versions:<br>
-										<f:for each="{extension.allSupportedVersions}" as="version">
-											<button class="btn btn-{version.badgeClass} btn-sm mr-2" disabled title="{f:translate(key:'title_{version.badgeClass}', arguments: {0: version.label})}">{version.label}</button>
-										</f:for>
-									</small>
-								</div>
-								<div class="card-footer">
-									<small>
-										Last upload:
-										<f:format.date format="%d. %b %Y">@{extension.lastVersion.uploadDate}</f:format.date>
-									</small>
-								</div>
+		<f:if condition="{extensionsByUser -> f:count()} > 3">
+			<f:then>
+				<div id="extensionCarousel" class="carousel slide w-100" data-ride="carousel">
+					<div class="carousel-inner w-100" role="listbox">
+						<f:for each="{extensionsByUser}" iteration="it" as="extension">
+							<div class="carousel-item{f:if(condition:it.isFirst,then:' active')}">
+								<f:render section="ExtensionCard" arguments="{_all}" />
 							</div>
-						</div>
+						</f:for>
 					</div>
+					<a class="carousel-control-prev w-auto" href="#extensionCarousel" role="button" data-slide="prev">
+						<span class="carousel-control-prev-icon bg-primary border border-primary rounded-circle" aria-hidden="true"></span>
+						<span class="sr-only">Previous</span>
+					</a>
+					<a class="carousel-control-next w-auto" href="#extensionCarousel" role="button" data-slide="next">
+						<span class="carousel-control-next-icon bg-primary border border-primary rounded-circle" aria-hidden="true"></span>
+						<span class="sr-only">Next</span>
+					</a>
+				</div>
+			</f:then>
+			<f:else>
+				<f:for each="{extensionsByUser}" iteration="it" as="extension">
+					<f:render section="ExtensionCard" arguments="{_all}" />
 				</f:for>
+			</f:else>
+		</f:if>
+	</div>
+</div>
+
+<f:section name="ExtensionCard">
+	<div class="col-md-4">
+		<div class="card">
+			<div class="card-header">
+				<h5 class="card-title">
+					<terfe2:extensionIcon version="{extension.lastVersion}" alt="{extension.lastVersion.title}" class="ter-ext-icon" />
+					<f:link.action action="show" arguments="{extension: extension}">
+						<span title="Extension title: {extension.lastVersion.title}" itemprop="alternateName">
+							{extension.lastVersion.title}
+						</span>
+					</f:link.action>
+					<br>
+					<small>({extension.extKey})</small>
+				</h5>
+			</div>
+			<div class="card-body">
+				<p>{extension.lastVersion.description}</p>
+				<small>
+					Supported TYPO3 versions:<br>
+					<f:for each="{extension.allSupportedVersions}" as="version">
+						<button class="btn btn-{version.badgeClass} btn-sm mr-2" disabled title="{f:translate(key:'title_{version.badgeClass}', arguments: {0: version.label})}">{version.label}</button>
+					</f:for>
+				</small>
+			</div>
+			<div class="card-footer">
+				<small>
+					Last upload:
+					<f:format.date format="%d. %b %Y">@{extension.lastVersion.uploadDate}</f:format.date>
+				</small>
 			</div>
-			<a class="carousel-control-prev w-auto" href="#extensionCarousel" role="button" data-slide="prev">
-				<span class="carousel-control-prev-icon bg-primary border border-primary rounded-circle" aria-hidden="true"></span>
-				<span class="sr-only">Previous</span>
-			</a>
-			<a class="carousel-control-next w-auto" href="#extensionCarousel" role="button" data-slide="next">
-				<span class="carousel-control-next-icon bg-primary border border-primary rounded-circle" aria-hidden="true"></span>
-				<span class="sr-only">Next</span>
-			</a>
 		</div>
 	</div>
-</div>
+</f:section>
 
 </html>

extensions/ter_fe2/Resources/Private/Templates/Extension/Show.html

@@ -227,8 +227,10 @@
 		<f:render partial="InstallationHowTo" arguments="{_all}" />
 
 		<f:if condition="{extensionsByUser -> f:count()} > 0">
-			<h3>Other extensions by this user ({extensionsByUser -> f:count()})</h3>
-			<f:render partial="OtherExtensionsByUser" arguments="{extensionsByUser: extensionsByUser}" />
+			<div class="other-extensions-by-user">
+				<h3>Other extensions by this user ({extensionsByUser -> f:count()})</h3>
+				<f:render partial="OtherExtensionsByUser" arguments="{extensionsByUser: extensionsByUser}" />
+			</div>
 		</f:if>
 
 

extensions/ter_layout/Resources/Public/Css/ter.css

@@ -136,7 +136,7 @@ span.ter-ext-state-expiremental {
     display: flex;
 }
 
-.carousel-inner .card-body {
+.other-extensions-by-user .card-body {
     display: block;
 }