From dd9ef1f81ff437ecf14e786f9d2901000511ad74 Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Wed, 27 Sep 2017 11:09:54 +0200
Subject: [PATCH] Ausklappbare Quicktips sind jetzt mit einem Pfeil
gekennzeichnet
---
resources/assets/js/scriptResultPage.js | 9 +++----
.../assets/less/metager/result-page.less | 24 ++++++++++++++++---
2 files changed, 26 insertions(+), 7 deletions(-)
diff --git a/resources/assets/js/scriptResultPage.js b/resources/assets/js/scriptResultPage.js
index 8a85380fd..21ec1eeaf 100644
--- a/resources/assets/js/scriptResultPage.js
+++ b/resources/assets/js/scriptResultPage.js
@@ -19,11 +19,11 @@ $(document).ready(function () {
loadQuicktips(search, locale, sprueche); // load the quicktips
});
-function readLocaleFromUrl(defaultLocale) {
+function readLocaleFromUrl (defaultLocale) {
return location.pathname.substr(1, location.pathname.indexOf('/meta', 0) - 1) || 'de';
}
-function getURLParameter(name) {
+function getURLParameter (name) {
return decodeURIComponent((new RegExp('[?|&]' + name + '=' + '([^&;]+?)(&|#|;|$)').exec(location.search) || [null, ''])[1].replace(/\+/g, '%20')) || null;
}
@@ -588,7 +588,7 @@ function getQuicktips (search, locale, blacklist, loadedHandler) {
title: $(this).children('title').text(),
text: $(this).children('text').text(),
url: $(this).children('url').text()
- }
+ };
}).toArray()
};
}).toArray();
@@ -637,6 +637,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>');
@@ -652,7 +653,7 @@ function createQuicktips (quicktips, sprueche) {
detailElem
.append(detailHeadlineElem)
.append('<p>' + detail.text + '</p>');
- mainElem.append(detailElem);
+ mainElem.append(detailElem);
});
} else {
mainElem = $('<div class="quicktip-summary">');
diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less
index 7fbd4eef4..968f84f18 100644
--- a/resources/assets/less/metager/result-page.less
+++ b/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;
+ 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;
@@ -652,8 +664,14 @@ a {
h1 {
font-size: 16px;
font-weight: bold;
+ display: flex;
+ justify-content: space-between;
+ .quicktip-extender {
+ margin-left: 10px;
+ color: #777;
+ font-size: 20px;
+ }
}
- p {}
}
.quicktip-detail {
border-top: 1px solid #ddd;
--
GitLab