Refactoring: Optionsbox der Suchleiste

public/js/searchbar.js

@@ -390,14 +390,14 @@ function toggleOptionsDialog() {
 function openOptionsDialog() {
   $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
   $('#toggleOptBtn').attr('data-mode', 'c');
-  $('.search-option-frame').css('display', 'flex');
+  $('.search-option-frame').removeClass('hide');
 
 }
 
 function closeOptionsDialog() {
   $('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
   $('#toggleOptBtn').attr('data-mode', 'o');
-  $('.search-option-frame').css('display', 'none');
+  $('.search-option-frame').addClass('hide');
 }
 
 

public/js/utility.js

 $(document).ready(function () {
   $('.js-only').removeClass('js-only');
+  $('.no-js').addClass('hide');
 });
 
 //# sourceMappingURL=utility.js.map

resources/assets/js/searchbar.js

@@ -390,14 +390,14 @@ function toggleOptionsDialog() {
 function openOptionsDialog() {
   $('#toggleOptBtn').html('<i class="fa fa-chevron-up" aria-hidden="true"></i>');
   $('#toggleOptBtn').attr('data-mode', 'c');
-  $('.search-option-frame').css('display', 'flex');
+  $('.search-option-frame').removeClass('hide');
 
 }
 
 function closeOptionsDialog() {
   $('#toggleOptBtn').html('<i class="fa fa-chevron-down" aria-hidden="true"></i>');
   $('#toggleOptBtn').attr('data-mode', 'o');
-  $('.search-option-frame').css('display', 'none');
+  $('.search-option-frame').addClass('hide');
 }
 
 

resources/assets/js/utility.js

 $(document).ready(function () {
   $('.js-only').removeClass('js-only');
+  $('.no-js').addClass('hide');
 });

resources/assets/less/metager/searchbar.less

@@ -20,6 +20,11 @@
             margin: 5px;
         }
 
+        .search-settings:only-child {
+            padding: 5px;
+            border-right: solid 1px #ccc;
+        }
+
         select {
             width: 100%;
             -webkit-appearance: none;
@@ -47,7 +52,7 @@
     }
 
     .search-option-frame {
-        display: none;
+        display: flex;
         position: absolute;
         background-color: white;
         top: 50px;

resources/views/parts/searchbar.blade.php

@@ -4,25 +4,16 @@
 	<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8">
 		<div class="searchbar {{$class or ''}}">
 			<div class="search-focus-selector">
-				<button type="button" id="toggleOptBtn" data-mode="o">
+				<button type="button" id="toggleOptBtn" class="js-only" data-mode="o">
 					<i class="fa fa-chevron-down"></i>
 				</button>
-				<noscript>
-					<style>
-						#toggleOptBtn {
-							display: none;
-						}
-						.search-settings {
-							padding: 5px;
-    						border-right: solid 1px #ccc;
-						}
-					</style>
+				<div class="no-js">
 					<div class="search-settings">
 						<a id="settings-btn" class="mutelink btn btn-default" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "settings ") }}">
 							<i class="fa fa-cog" aria-hidden="true"></i>
 						</a>
 					</div>
-				</noscript>
+				</div>
 				<select id="focus-select" name="focus" style="font-family: FontAwesome, sans-serif;">
 					<option value="web" style="font-family: FontAwesome, sans-serif;" selected>&#xf0ac; Websuche</option>
 					<option value="nachrichten" style="font-family: FontAwesome, sans-serif;">&#xf0a1; Nachrichtensuche</option>
@@ -30,7 +21,7 @@
 					<option value="produktsuche" style="font-family: FontAwesome, sans-serif;">&#xf07a; Produktsuche</option>
 					<option value="maps" style="font-family: FontAwesome, sans-serif;">&#xf279; Kartensuche</option>
 				</select>
-				<div class="search-option-frame" style="display:none;">
+				<div class="search-option-frame hide">
 					<div class="searchbar-options-arrow">
 					</div>
 					<div class="search-button-container">