diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 8866a211f8a17395b8ad65ac42209cbf27a9b2d8..5e8bdff4bb96f4dd07b30fc57fc495aaf67bbb84 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/resources/assets/less/metager/result-page.less
@@ -406,11 +406,7 @@ a {
font-size: 16px;
color: #2A2ADE;
}
- .option-checkbox {
- visibility: hidden;
- }
.option-content {
- display: none;
background-color: white;
z-index: 1000;
position: absolute;
@@ -432,10 +428,6 @@ a {
display: block;
}
}
- .option-opener:focus+.option-content, .option-content:hover {
- display: initial;
- animation-name: open-contents;
- }
}
.proxy {
font-size: 13px;
diff --git a/resources/assets/less/utility.less b/resources/assets/less/utility.less
index 93c08ad65626a74c4fd0708a2be46006e763642f..4e5270e061c7ff377085b531dad1d8b70d7eca83 100644
--- a/resources/assets/less/utility.less
+++ b/resources/assets/less/utility.less
@@ -1,3 +1,34 @@
+/* Zweck: Inhalt der nur gezeigt werden soll wenn Javascript aktiviert ist
+ */
.js-only {
display: none !important;
}
+
+/* Zweck: Beim klick auf den .dropdown-opener soll der .dropdown-content angezeigt werden.
+ * Verwendung: <a class="dropdown-opener" href="javascript:void(0);">...</a>
+ * <div class="dropdown-content">...</div>
+ */
+.dropdown-content {
+ display: none;
+ background-color: white;
+ z-index: 1000;
+ position: absolute;
+ border: grey solid 1px;
+ border-radius: 5px;
+}
+
+.dropdown-opener:focus+.dropdown-content, .dropdown-content:hover {
+ display: initial;
+ animation-name: dropdown-open-contents;
+ animation-fill-mode: forwards;
+ animation-duration: 0.5s;
+}
+
+@keyframes dropdown-open-contents {
+ 0% {
+ max-height: 200px;
+ }
+ 100% {
+ max-height: 1000px;
+ }
+}
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index 5a8f828b1982cef73c28c904e5e5d5a34ffe82ce..3bc6287b2eb3006b803a552324827d52180bdecd 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -17,10 +17,10 @@
</a>
</div>
<div class="options">
- <a class="option-opener" href="javascript:void(0);">
+ <a class="dropdown-opener" href="javascript:void(0);">
<i class="fa fa-caret-down option-opener-icon" aria-hidden="true"></i>
</a>
- <div class="option-content">
+ <div class="dropdown-content option-content">
<ul class="option-list list-unstyled small">
<li class="option-title">
<i class="fa fa-cog"></i> {!! trans('result.options.headline') !!}
diff --git a/resources/views/layouts/resultPage.blade.php b/resources/views/layouts/resultPage.blade.php
index fe3801e9cb7d5f359dcf2f34a0032c502b8dda6b..0fc7f595b20ad19d19cb64e9724876f7375ea39d 100644
--- a/resources/views/layouts/resultPage.blade.php
+++ b/resources/views/layouts/resultPage.blade.php
@@ -16,6 +16,7 @@
<link type="text/css" rel="stylesheet" href="/css/lightslider.css" />
<link type="text/css" rel="stylesheet" href="/font-awesome/css/font-awesome.min.css" />
<link id="theme" type="text/css" rel="stylesheet" href="/css/theme.css.php" />
+ @include('layouts.utility')
</head>
<body id="resultBody">
@if( !isset($suspendheader) )