Commit 328c8df9 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

Merge branch...

Merge branch '553-ergebnis-optionen-dropdown-ohne-javascript-mit-css-animationen' into 'development'

Resolve "Ergebnis-Optionen-Dropdown ohne Javascript mit css animationen"

Closes #553

See merge request !991
parents ba5b367f 22fd61b5
...@@ -13,7 +13,7 @@ $(document).ready(function () { ...@@ -13,7 +13,7 @@ $(document).ready(function () {
function activateJSOnlyContent () { function activateJSOnlyContent () {
$('#searchplugin').removeClass('hide'); $('#searchplugin').removeClass('hide');
$('.options').removeClass('hide'); $('.js-only').removeClass('js-only');
} }
function tabs () { function tabs () {
......
...@@ -285,14 +285,16 @@ a { ...@@ -285,14 +285,16 @@ a {
.saver-options { .saver-options {
display: flex; display: flex;
padding-bottom: 15px; padding-bottom: 15px;
&>input{ &>input {
min-width: 35%; min-width: 35%;
max-width: 80%; max-width: 80%;
} }
} }
.ui-effects-transfer { .ui-effects-transfer {
border: 1px dotted black; border: 1px dotted black;
} }
.result { .result {
margin-bottom: 10px; margin-bottom: 10px;
width: 100%; width: 100%;
...@@ -310,13 +312,11 @@ a { ...@@ -310,13 +312,11 @@ a {
cursor: pointer; cursor: pointer;
} }
} }
&>.remover { &>.remover {
cursor:pointer; cursor: pointer;
text-align: right; text-align: right;
color: #777; color: #777;
} }
.title { .title {
color: @result-title-color; color: @result-title-color;
text-decoration: none; text-decoration: none;
...@@ -350,10 +350,6 @@ a { ...@@ -350,10 +350,6 @@ a {
padding-left: 8px; padding-left: 8px;
padding-right: 5px; padding-right: 5px;
} }
.options>a>i {
font-size: 16px;
color: #2A2ADE;
}
} }
.link-link { .link-link {
white-space: nowrap; white-space: nowrap;
...@@ -399,6 +395,45 @@ a { ...@@ -399,6 +395,45 @@ a {
color: @result-hoster-a-color; 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 { .proxy {
font-size: 13px; font-size: 13px;
margin-top: 0; margin-top: 0;
...@@ -453,6 +488,10 @@ a { ...@@ -453,6 +488,10 @@ a {
overflow: hidden; overflow: hidden;
} }
.js-only {
display: none;
}
/* Hier der Style für die Bilder */ /* Hier der Style für die Bilder */
......
<?php <?php
return [ return [
'options.headline' => 'Optionen',
'options.savetab' => 'Ergebnis in Tab speichern.',
'options.1' => 'Suche auf dieser Domain neu starten', 'options.1' => 'Suche auf dieser Domain neu starten',
'options.2' => ':host ausblenden', 'options.2' => ':host ausblenden',
'options.3' => '*.:domain ausblenden', 'options.3' => '*.:domain ausblenden',
......
...@@ -16,38 +16,42 @@ ...@@ -16,38 +16,42 @@
{{ $result->anzeigeLink }} {{ $result->anzeigeLink }}
</a> </a>
</div> </div>
<div class="options hide"> <div class="options">
<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"> <a class="option-opener" href="javascript:void(0);">
@if(strlen($metager->getSite()) === 0) <i class="fa fa-caret-down option-opener-icon" aria-hidden="true"></i>
<i class="fa fa-caret-down" aria-hidden="true"></i> </a>
@endif <div class="option-content">
</a> <ul class="option-list list-unstyled small">
<div class="content hidden"> <li class="option-title">
<ul class="options-list list-unstyled small"> <i class="fa fa-cog"></i> {!! trans('result.options.headline') !!}
<li> </li>
<a href="javascript:resultSaver({{ $result->number }});" class="saver" data-counter="{{ $result->number }}"> <hr>
<i class="glyphicon glyphicon-floppy-disk"></i> Ergebnis in Tab speichern. <li class="js-only">
</a> <a href="javascript:resultSaver({{ $result->number }});" class="saver" data-counter="{{ $result->number }}">
</li> <i class="fa fa-floppy-disk"></i> {!! trans('result.options.savetab') !!}
<li> </a>
<a href="{{ $metager->generateSiteSearchLink($result->strippedHost) }}"> </li>
{!! trans('result.options.1') !!} @if(strlen($metager->getSite()) === 0)
</a> <li>
</li> <a href="{{ $metager->generateSiteSearchLink($result->strippedHost) }}">
<li> {!! trans('result.options.1') !!}
<a href="{{ $metager->generateRemovedHostLink($result->strippedHost) }}"> </a>
{!! trans('result.options.2', ['host' => $result->strippedHost]) !!} </li>
</a> @endif
</li>
@if( $result->strippedHost !== $result->strippedDomain )
<li> <li>
<a href="{{ $metager->generateRemovedDomainLink($result->strippedDomain) }}"> <a href="{{ $metager->generateRemovedHostLink($result->strippedHost) }}">
{!! trans('result.options.3', ['domain' => $result->strippedDomain]) !!} {!! trans('result.options.2', ['host' => $result->strippedHost]) !!}
</a> </a>
</li> </li>
@endif @if( $result->strippedHost !== $result->strippedDomain )
</ul> <li>
</div> <a href="{{ $metager->generateRemovedDomainLink($result->strippedDomain) }}">
{!! trans('result.options.3', ['domain' => $result->strippedDomain]) !!}
</a>
</li>
@endif
</ul>
</div>
</div> </div>
</div> </div>
<span class="hoster"> <span class="hoster">
......
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