Merge branch '593-hinweis-zum-ausklappen-der-quicktip-details' into 'development'

Resolve "Hinweis zum ausklappen der Quicktip Details"

Closes #593

See merge request !1052

resources/assets/js/scriptResultPage.js

@@ -21,7 +21,7 @@ $(document).ready(function () {
 });
 
 /*
-function readLocaleFromUrl(defaultLocale) {
+function readLocaleFromUrl (defaultLocale) {
   return location.pathname.substr(1, location.pathname.indexOf('/meta', 0) - 1) || 'de'
 }
 */
@@ -651,6 +651,7 @@ function createQuicktips (quicktips, sprueche) {
       } else {
         headlineElem.text(quicktip.title);
       }
+      headlineElem.append('<i class="quicktip-extender fa fa-chevron-circle-down" aria-hidden="true"></i>');
       summaryElem
         .append(headlineElem)
         .append('<p>' + quicktip.summary + '</p>');

resources/assets/less/metager/result-page.less

@@ -640,10 +640,22 @@ a {
  * </...>
  */
 
+@keyframes quicktip-extender-turn {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(180deg);
+    }
+}
+
 #quicktips {
     display: flex;
     flex-direction: column;
-    // border: 2px solid #ccc;
+    details[open=""] .quicktip-extender {
+        animation-name: quicktip-extender-turn;
+        animation-fill-mode: forwards;
+    }
     .quicktip {
         margin: 10px 0px;
         padding-left: 10px;
@@ -659,6 +671,13 @@ a {
             h1 {
                 font-size: 16px;
                 font-weight: bold;
+                display: flex;
+                justify-content: space-between;
+                .quicktip-extender {
+                    margin-left: 10px;
+                    color: #777;
+                    font-size: 20px;
+                }
             }
         }
         .quicktip-detail {