diff --git a/resources/assets/js/scriptStartPage.js b/resources/assets/js/scriptStartPage.js index 5cd58ba70b32c7c00fa258309827711b0bb0bc30..61ca05078fb3046daac5f733fd1dcb91f9b0216d 100644 --- a/resources/assets/js/scriptStartPage.js +++ b/resources/assets/js/scriptStartPage.js @@ -62,7 +62,7 @@ function setActionListeners() { /** * Loads stored settings from local storage */ -function setSettings () { +function setSettings() { if ($('fieldset#foki.mobile').length) { $('fieldset.mobile input#bilder').val('angepasst'); $('fieldset.mobile input#bilder').prop('checked', true); @@ -156,7 +156,7 @@ var isChrome = !!window.chrome && !!window.chrome.webstore; var isBlink = (isChrome || isOpera) && !!window.CSS; // Prüft, ob der URL-Parameter "usage" auf "once" gesetzt ist. -function loadSavedResults () { +function loadSavedResults() { var results = new Results(); if (results.length > 0) { var html = $('\ diff --git a/resources/assets/js/searchbar.js b/resources/assets/js/searchbar.js index f04e61b93af0baf36515b7c73eeb439345f31a25..6c9a0b17633bfb712c307315b156b67866a7d31b 100644 --- a/resources/assets/js/searchbar.js +++ b/resources/assets/js/searchbar.js @@ -1,6 +1,7 @@ $(function () { loadLocalStorage(); setActionListenersSearchbar(); + updateLangLabelCode(); }); function setActionListenersSearchbar() { @@ -21,14 +22,15 @@ function loadKey() { } function saveLang() { - var key = $('#input-lang').val(); - localStorage.setItem('lang', key); + var lang = $('#input-lang').val(); + localStorage.setItem('lang', lang); + updateLangLabelCode(lang); } function loadLang() { - var key = localStorage.getItem('lang'); - if (key != null) { - $('#input-lang').val(key); + var lang = localStorage.getItem('lang'); + if (lang != null) { + $('#input-lang').val(lang); } } @@ -68,4 +70,11 @@ function setSettings() { if (requestMethod !== null && (requestMethod === 'GET' || requestMethod === 'POST')) { $('#searchForm').attr('method', requestMethod); } +} + +function updateLangLabelCode(langcode = null) { + if (!langcode) { + var langcode = localStorage.getItem('lang'); + } + $('#lang-label-code').html(langcode); } \ No newline at end of file diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less index 4f470d6cef76270bc4d6c95f491d4120360f6028..02a39bc71c0dea3cbe3b697f0ae2b6358e0a0c46 100644 --- a/resources/assets/less/metager/searchbar.less +++ b/resources/assets/less/metager/searchbar.less @@ -35,6 +35,8 @@ } #search-lang, #search-key { + display: -webkit-box; + display: -ms-flexbox; display: flex; z-index: 1; #input-lang, @@ -42,11 +44,16 @@ margin: 0; padding: 0px; border: none; + -webkit-box-shadow: none; box-shadow: none; height: 40px; width: 0px; outline-color: green; + -webkit-transition: width 0.5s, padding 0.5s, outline-color 0s, border-color 0s, -webkit-box-shadow 0s; + transition: width 0.5s, padding 0.5s, outline-color 0s, border-color 0s, -webkit-box-shadow 0s; transition: width 0.5s, padding 0.5s, outline-color 0s, border-color 0s, box-shadow 0s; + transition: width 0.5s, padding 0.5s, outline-color 0s, border-color 0s, box-shadow 0s, -webkit-box-shadow 0s; + -webkit-transition-delay: 0.3s; transition-delay: 0.3s; &:focus { width: 200px; @@ -69,11 +76,22 @@ height: 40px; width: 40px; margin: 0; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; justify-content: center; + -webkit-transition: width 0s, visibility 0s; transition: width 0s, visibility 0s; + -webkit-transition-delay: 0.3s; transition-delay: 0.3s; + #lang-label-code { + margin-left: 5px; + } } } .search-input { diff --git a/resources/views/parts/searchbar.blade.php b/resources/views/parts/searchbar.blade.php index cd7825c1f0a42463f134457aadbe8368765420bb..976817e1812a0a37c3370de4ba6eeff8a83b5042 100644 --- a/resources/views/parts/searchbar.blade.php +++ b/resources/views/parts/searchbar.blade.php @@ -13,6 +13,7 @@ </select> <label id="lang-label" for="input-lang" data-tooltip="{{ trans ('index.lang.tooltip') }}"> <i class="fa fa-globe" aria-hidden="true"></i> + <span id="lang-label-code"></span> </label> </div> <div id="search-key">