Merge branch '552-metager-navigationsleiste-dropdowns-schoner-machen' into 'development'

Resolve "Metager Navigationsleiste-Dropdowns schöner machen"

Closes #552

See merge request !984

resources/assets/less/metager/static-pages.less

@@ -111,11 +111,11 @@ ul.metager-dropdown-menu {
     -ms-transition: max-height 1s ease, padding 1s ease;
     -o-transition: max-height 1s ease, padding 1s ease;
     transition: max-height 1s ease, padding 1s ease;
-    -webkit-transition-delay:.2s;
-    -moz-transition-delay:.2s;
-    -ms-transition-delay:.2s;
-    -o-transition-delay:.2s;
-    transition-delay:.2s;
+    -webkit-transition-delay: .2s;
+    -moz-transition-delay: .2s;
+    -ms-transition-delay: .2s;
+    -o-transition-delay: .2s;
+    transition-delay: .2s;
     &>li>a {
         display: block;
         padding: 3px 20px;
@@ -168,13 +168,32 @@ ul.metager-dropdown-menu {
     }
 }
 
-a.metager-dropdown-toggle:hover+ul.metager-dropdown-menu,
-a.metager-dropdown-toggle:focus+ul.metager-dropdown-menu,
-ul.metager-dropdown-menu:hover,
-#gutscheine>a:first-child:hover+a+ul.metager-dropdown-menu {
-    max-height: 1000px;
-    padding: 5px 0;
-    border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
+@keyframes dropdown-animation {
+    0% {
+        max-height: 0px;
+        padding: 0px 0;
+        border: none
+    }
+    1% {
+        padding: 5px 0;
+        border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
+    }
+    100% {
+        max-height: 1000px;
+        padding: 5px 0;
+        border: 1px solid @metager-dropdown-toggle-hover-or-focus-color;
+    }
+}
+
+.metager-dropdown:hover {
+    background-color: @metager-navbar-toggle-hover-background-color;
+    &>.metager-dropdown-menu {
+        animation-name: dropdown-animation;
+        animation-duration: 0.7s;
+        animation-timing-function: ease-out;
+        animation-fill-mode: forwards;
+        animation-delay: 0.1s;
+    }
 }
 
 .metager-navbar-toggle {
@@ -190,9 +209,6 @@ ul.metager-dropdown-menu:hover,
     &:visited {
         color: @metager-navbar-toggle-visited-color;
     }
-    &:hover {
-        background-color: @metager-navbar-toggle-hover-background-color;
-    }
 }
 
 #toggle-nav-hide .metager-navbar-toggle {

resources/lang/de/staticPages.php

@@ -28,7 +28,7 @@ return [
     'nav23'               => 'Beitrittsformular SUMA-EV',
     'nav24'               => 'MetaGer Quellcode',
     'nav25'               => 'MetaGer App',
-    'gutscheineToggle'	  => '<a href="https://metager.de/gutscheine/">Gutscheine</a>',
+    'gutscheineToggle'	  => 'Gutscheine',
     'gutscheine.1'	  => 'Gutscheine',
     'gutscheine.2'	  => 'Congstar Gutschein',
     'gutscheine.3'	  => 'Check24 Gutschein',

resources/lang/en/staticPages.php

@@ -27,7 +27,7 @@ return [
     "nav23"	=>	"Admitting formular SUMA-EV",
     "nav24"	=>	"MetaGer source code",
     "nav25"	=>	"MetaGer App",
-    "gutscheineToggle"	=>	" \t<a href=\"https://metager.de/gutscheine/\">Coupons</a>",
+    "gutscheineToggle"	=>	"Coupons",
     "gutscheine.1"	=>	"Coupons",
     "gutscheine.2"	=>	"Congstar Coupons",
     "gutscheine.3"	=>	"Check 24 Coupons",

resources/views/layouts/staticPages.blade.php

@@ -69,7 +69,7 @@
 							</li>
 							@if(LaravelLocalization::getCurrentLocale() === "de")
 							<li id="gutscheine"@if (isset($navbarFocus) && $navbarFocus === 'gutscheine') class="metager-dropdown active" @else class="metager-dropdown" @endif >
-								{!! trans('staticPages.gutscheineToggle') !!}
+								<a href="https://metager.de/gutscheine/">{!! trans('staticPages.gutscheineToggle') !!}</a>
 								<a class="metager-dropdown-toggle" data-role="button" aria-expanded="false" tabindex="205"><span class="caret"></span></a>
 								<ul class="metager-dropdown-menu">
 									<li>