diff --git a/resources/assets/js/scriptResultPage.js b/resources/assets/js/scriptResultPage.js index aba8f4f3250638847b958a6c7aaad33da5f72de5..de1826bce04046811c88a63da9d469bb8bde6c8e 100644 --- a/resources/assets/js/scriptResultPage.js +++ b/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>'); diff --git a/resources/assets/less/metager/result-page.less b/resources/assets/less/metager/result-page.less index d20107f0da846f6200bedef881f214a3de26fd95..81580746048131ba8ab38ce4df1c12970b3bcfdb 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; + 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 {