Commit df75ec31 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

added "less" button when result options are expanded

parent cfc18d1a
...@@ -11,5 +11,6 @@ return [ ...@@ -11,5 +11,6 @@ return [
'options.6' => 'IN NEUEM TAB ÖFFNEN', 'options.6' => 'IN NEUEM TAB ÖFFNEN',
'options.7' => 'ÖFFNEN', 'options.7' => 'ÖFFNEN',
'options.more' => 'MEHR', '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.', 'proxytext' => 'Der Link wird anonymisiert geöffnet. Ihre Daten werden nicht zum Zielserver übertragen. Möglicherweise funktionieren manche Webseiten nicht wie gewohnt.',
]; ];
...@@ -177,14 +177,33 @@ ...@@ -177,14 +177,33 @@
margin-right: 2px; margin-right: 2px;
} }
} }
.open-result-options { .open-result-options, .close-result-options {
font-weight: normal; font-weight: normal;
font-size: @result-font-small; font-size: @result-font-small;
flex-grow: 1; flex-grow: 1;
text-align: right; text-align: right;
margin-right: 0; 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 * { .result-footer * {
font-size: 10px !important; font-size: 10px !important;
} }
...@@ -215,11 +234,6 @@ ...@@ -215,11 +234,6 @@
-webkit-transition: all 1s; -webkit-transition: all 1s;
opacity: 0; opacity: 0;
} }
&>.result-toggle:checked+.options {
max-height: 150px;
overflow: initial;
opacity: 1;
}
ul { ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
......
...@@ -47,6 +47,7 @@ ...@@ -47,6 +47,7 @@
</div> </div>
@endif @endif
</div> </div>
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="result-footer"> <div class="result-footer">
<a class="result-open" href="{{ $result->link }}" target="_self" rel="noopener"> <a class="result-open" href="{{ $result->link }}" target="_self" rel="noopener">
{!! trans('result.options.7') !!} {!! trans('result.options.7') !!}
...@@ -60,9 +61,11 @@ ...@@ -60,9 +61,11 @@
<label class="open-result-options navigation-element" for="result-toggle-{{$result->number}}"> <label class="open-result-options navigation-element" for="result-toggle-{{$result->number}}">
{{ trans('result.options.more')}} {{ trans('result.options.more')}}
</label> </label>
<label class="close-result-options navigation-element" for="result-toggle-{{$result->number}}">
{{ trans('result.options.less')}}
</label>
</div> </div>
<div class="result-options"> <div class="result-options">
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="options"> <div class="options">
<ul class="option-list list-unstyled small"> <ul class="option-list list-unstyled small">
<li class="js-only"> <li class="js-only">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment