diff --git a/resources/assets/js/scriptResultPage.js b/resources/assets/js/scriptResultPage.js index 8a85380fd1e4cf7bb39e34adbae7db754f743744..21ec1eeafd40cc123092ca1265520ab6996ad76f 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 7fbd4eef47c3db461f2cfc1eec678af391406b0e..968f84f18df63324b3578b4e059271f12fdacbfd 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;