diff --git a/resources/assets/js/scriptResultPage.js b/resources/assets/js/scriptResultPage.js
index 4c935c8c89bcc771593f445d2fe3eced7e9f0384..b5e90c7f15ce030ba6cd7a12c2d862390196d0ac 100644
--- a/resources/assets/js/scriptResultPage.js
+++ b/resources/assets/js/scriptResultPage.js
@@ -13,7 +13,7 @@ $(document).ready(function () {
function activateJSOnlyContent () {
$('#searchplugin').removeClass('hide');
- $('.options').removeClass('hide');
+ $('.js-only').removeClass('js-only');
}
function tabs () {
diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 54fea771557f0d454909bb904dbf9f9728850df3..fbb1184e92287b4cf874235cea48630631a4d130 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -285,14 +285,16 @@ a {
.saver-options {
display: flex;
padding-bottom: 15px;
- &>input{
+ &>input {
min-width: 35%;
max-width: 80%;
}
}
+
.ui-effects-transfer {
border: 1px dotted black;
}
+
.result {
margin-bottom: 10px;
width: 100%;
@@ -310,13 +312,11 @@ a {
cursor: pointer;
}
}
-
&>.remover {
- cursor:pointer;
+ cursor: pointer;
text-align: right;
color: #777;
}
-
.title {
color: @result-title-color;
text-decoration: none;
@@ -350,10 +350,6 @@ a {
padding-left: 8px;
padding-right: 5px;
}
- .options>a>i {
- font-size: 16px;
- color: #2A2ADE;
- }
}
.link-link {
white-space: nowrap;
@@ -399,6 +395,45 @@ a {
color: @result-hoster-a-color;
}
}
+ .options {
+ .option-opener-icon {
+ display: block;
+ padding-left: 8px;
+ padding-right: 5px;
+ font-size: 16px;
+ color: #2A2ADE;
+ }
+ .option-checkbox {
+ visibility: hidden;
+ }
+ .option-content {
+ display: none;
+ background-color: white;
+ z-index: 1000;
+ position: absolute;
+ border: grey solid 1px;
+ color: black;
+ font-size: 16px;
+ border-radius: 5px;
+ hr {
+ margin: 5px;
+ }
+ li {
+ padding: 5px
+ }
+ li:not(.option-title):hover {
+ background-color: #e0e0e0;
+ }
+ a, a:hover, a:focus, a:visited {
+ color: black;
+ display: block;
+ }
+ }
+ .option-opener:focus+.option-content, .option-content:hover {
+ display: initial;
+ animation-name: open-contents;
+ }
+ }
.proxy {
font-size: 13px;
margin-top: 0;
@@ -453,6 +488,10 @@ a {
overflow: hidden;
}
+.js-only {
+ display: none;
+}
+
/* Hier der Style für die Bilder */
diff --git a/resources/lang/de/result.php b/resources/lang/de/result.php
index 65ceae065ba98693682ec0fb47bb6260785caffd..a891febec1b253b0645dd2a6f17a11bd93b5cefa 100644
--- a/resources/lang/de/result.php
+++ b/resources/lang/de/result.php
@@ -1,6 +1,8 @@
<?php
return [
+ 'options.headline' => 'Optionen',
+ 'options.savetab' => 'Ergebnis in Tab speichern.',
'options.1' => 'Suche auf dieser Domain neu starten',
'options.2' => ':host ausblenden',
'options.3' => '*.:domain ausblenden',
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index b75fa046638c8886d50d16bea2f2d8eba67a7a59..5463430c18bca00f369c37a654c298c75ef9f8dd 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -16,38 +16,42 @@
{{ $result->anzeigeLink }}
</a>
</div>
- <div class="options hide">
- <a tabindex="0" data-toggle="popover" data-trigger="focus" data-placement="auto bottom" data-container="body" data-html="true" data-title="<i class='fa fa-cog' aria-hidden='true'></i> Optionen">
- @if(strlen($metager->getSite()) === 0)
- <i class="fa fa-caret-down" aria-hidden="true"></i>
- @endif
- </a>
- <div class="content hidden">
- <ul class="options-list list-unstyled small">
- <li>
- <a href="javascript:resultSaver({{ $result->number }});" class="saver" data-counter="{{ $result->number }}">
- <i class="glyphicon glyphicon-floppy-disk"></i> Ergebnis in Tab speichern.
- </a>
- </li>
- <li>
- <a href="{{ $metager->generateSiteSearchLink($result->strippedHost) }}">
- {!! trans('result.options.1') !!}
- </a>
- </li>
- <li>
- <a href="{{ $metager->generateRemovedHostLink($result->strippedHost) }}">
- {!! trans('result.options.2', ['host' => $result->strippedHost]) !!}
- </a>
- </li>
- @if( $result->strippedHost !== $result->strippedDomain )
+ <div class="options">
+ <a class="option-opener" href="javascript:void(0);">
+ <i class="fa fa-caret-down option-opener-icon" aria-hidden="true"></i>
+ </a>
+ <div class="option-content">
+ <ul class="option-list list-unstyled small">
+ <li class="option-title">
+ <i class="fa fa-cog"></i> {!! trans('result.options.headline') !!}
+ </li>
+ <hr>
+ <li class="js-only">
+ <a href="javascript:resultSaver({{ $result->number }});" class="saver" data-counter="{{ $result->number }}">
+ <i class="fa fa-floppy-disk"></i> {!! trans('result.options.savetab') !!}
+ </a>
+ </li>
+ @if(strlen($metager->getSite()) === 0)
+ <li>
+ <a href="{{ $metager->generateSiteSearchLink($result->strippedHost) }}">
+ {!! trans('result.options.1') !!}
+ </a>
+ </li>
+ @endif
<li>
- <a href="{{ $metager->generateRemovedDomainLink($result->strippedDomain) }}">
- {!! trans('result.options.3', ['domain' => $result->strippedDomain]) !!}
+ <a href="{{ $metager->generateRemovedHostLink($result->strippedHost) }}">
+ {!! trans('result.options.2', ['host' => $result->strippedHost]) !!}
</a>
</li>
- @endif
- </ul>
- </div>
+ @if( $result->strippedHost !== $result->strippedDomain )
+ <li>
+ <a href="{{ $metager->generateRemovedDomainLink($result->strippedDomain) }}">
+ {!! trans('result.options.3', ['domain' => $result->strippedDomain]) !!}
+ </a>
+ </li>
+ @endif
+ </ul>
+ </div>
</div>
</div>
<span class="hoster">