collapse app descriptions by default, make expandable, fix #13112

settings/css/settings.css

@@ -217,6 +217,21 @@ span.version { margin-left:1em; margin-right:1em; color:#555; }
 .recommendedapp {
 	display: inline-block;
 }
+
+.app-description-toggle-show,
+.app-description-toggle-hide {
+	clear: both;
+	padding: 7px 0;
+	cursor: pointer;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
+	opacity: .5;
+}
+.app-description-container {
+	clear: both;
+	position: relative;
+	top: 7px;
+}
+
 .app-description {
 	clear: both;
 }

settings/js/apps.js

@@ -369,6 +369,17 @@ OC.Settings.Apps = OC.Settings.Apps || {
 			OC.Settings.Apps.loadCategory(categoryId);
 		});
 
+		$(document).on('click', '.app-description-toggle-show', function () {
+			$(this).addClass('hidden');
+			$(this).siblings('.app-description-toggle-hide').removeClass('hidden');
+			$(this).siblings('.app-description-container').slideDown();
+		});
+		$(document).on('click', '.app-description-toggle-hide', function () {
+			$(this).addClass('hidden');
+			$(this).siblings('.app-description-toggle-show').removeClass('hidden');
+			$(this).siblings('.app-description-container').slideUp();
+		});
+
 		$(document).on('click', '#apps-list input.enable', function () {
 			var appId = $(this).data('appid');
 			var element = $(this);

settings/templates/apps.php

@@ -33,24 +33,30 @@
 	<div class="{{internalclass}} icon-checkmark">{{internallabel}}</div>
 	{{/if}}
 	<div class="app-detailpage"></div>
-	<div class="app-description"><pre>{{description}}</pre></div>
-	<!--<div class="app-changed">{{changed}}</div>-->
-	{{#if documentation}}
-	<p class="documentation">
-		<?php p($l->t("Documentation:"));?>
-		{{#if documentation.user}}
-		<span class="userDocumentation appslink">
-		<a id='userDocumentation' href='{{documentation.user}}' target="_blank"><?php p($l->t("User Documentation"));?></a>
-		</span>
-		{{/if}}
 
-		{{#if documentation.admin}}
-		<span class="adminDocumentation appslink">
-		<a id='adminDocumentation' href='{{documentation.admin}}' target="_blank"><?php p($l->t("Admin Documentation"));?></a>
-		</span>
+	<div class="app-description-container hidden">
+		<div class="app-description"><pre>{{description}}</pre></div>
+		<!--<div class="app-changed">{{changed}}</div>-->
+		{{#if documentation}}
+		<p class="documentation">
+			<?php p($l->t("Documentation:"));?>
+			{{#if documentation.user}}
+			<span class="userDocumentation appslink">
+			<a id='userDocumentation' href='{{documentation.user}}' target="_blank"><?php p($l->t("User Documentation"));?></a>
+			</span>
+			{{/if}}
+
+			{{#if documentation.admin}}
+			<span class="adminDocumentation appslink">
+			<a id='adminDocumentation' href='{{documentation.admin}}' target="_blank"><?php p($l->t("Admin Documentation"));?></a>
+			</span>
+			{{/if}}
+		</p>
 		{{/if}}
-	</p>
-	{{/if}}
+	</div><!-- end app-description-container -->
+	<div class="app-description-toggle-show"><?php p($l->t("Show description …"));?></div>
+	<div class="app-description-toggle-hide hidden"><?php p($l->t("Hide description …"));?></div>
+
 	{{#unless canInstall}}
 	<div class="app-dependencies">
 	<p><?php p($l->t('This app cannot be installed because the following dependencies are not fulfilled:')); ?></p>