added "less" button when result options are expanded

resources/lang/de/result.php

@@ -11,5 +11,6 @@ return [
     'options.6' => 'IN NEUEM TAB ÖFFNEN',
     'options.7' => 'ÖFFNEN',
     'options.more' => 'MEHR',
+    'options.less' => 'WENIGER',
     'proxytext' => 'Der Link wird anonymisiert geöffnet. Ihre Daten werden nicht zum Zielserver übertragen. Möglicherweise funktionieren manche Webseiten nicht wie gewohnt.',
 ];

resources/less/metager/pages/resultpage/result.less

@@ -177,14 +177,33 @@
                 margin-right: 2px;
             }
         }
-        .open-result-options {
+        .open-result-options, .close-result-options {
             font-weight: normal;
             font-size: @result-font-small;
             flex-grow: 1;
             text-align: right;
             margin-right: 0;
         }
+        .close-result-options {
+            display: none;
+        }
+    }
+
+    /* CSS Rules for the result options */
+    .result-toggle{
+        &:checked + .result-footer > .open-result-options {
+            display: none;
+        }
+        &:checked + .result-footer > .close-result-options {
+            display: initial;
+        }
+        &:checked + .result-footer + .result-options > .options {
+            max-height: 150px;
+            overflow: initial;
+            opacity: 1;
+        }
     }
+
     .result-footer * {
         font-size: 10px !important;
     }
@@ -215,11 +234,6 @@
             -webkit-transition: all 1s;
             opacity: 0;
         }
-        &>.result-toggle:checked+.options {
-            max-height: 150px;
-            overflow: initial;
-            opacity: 1;
-        }
         ul {
             display: flex;
             flex-wrap: wrap;

resources/views/layouts/result.blade.php

@@ -47,6 +47,7 @@
 			</div>
 		@endif
 	</div>
+	<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
 	<div class="result-footer">
 		<a class="result-open" href="{{ $result->link }}" target="_self" rel="noopener">
 			{!! trans('result.options.7') !!}
@@ -60,9 +61,11 @@
 		<label class="open-result-options navigation-element" for="result-toggle-{{$result->number}}">
 			{{ trans('result.options.more')}}
 		</label>
+		<label class="close-result-options navigation-element" for="result-toggle-{{$result->number}}">
+			{{ trans('result.options.less')}}
+		</label>
 	</div>
 	<div class="result-options">
-		<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
 		<div class="options">
 				<ul class="option-list list-unstyled small">
 					<li class="js-only">