dropdowns können jetzt allgemein per .dropdown-content und .drowdown-opener verwendet werden

1ba43ba7 · Karl Hasselbring · aade9a70 · 1ba43ba7 · 1ba43ba7 · 1ba43ba7
Commit 1ba43ba7 authored 7 years ago by Karl Hasselbring
--- 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;

--- a/resources/assets/less/utility.less
+++ b/resources/assets/less/utility.less
+/* 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;
+  }
+}
--- 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') !!}

--- 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) )