Fokus-Selector aus dem Dropdown ausgelagert

public/js/searchbar.js

@@ -390,7 +390,7 @@ 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', 'inline-block');
+  $('.search-option-frame').css('display', 'flex');
 
 }
 

resources/assets/js/searchbar.js

@@ -390,7 +390,7 @@ 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', 'inline-block');
+  $('.search-option-frame').css('display', 'flex');
 
 }
 

resources/assets/less/metager/searchbar.less

@@ -12,6 +12,7 @@
 
         &>button {
             border: none;
+            border-right: 1px solid rgb(170, 170, 170);
             background-color: white;
             margin: 5px;
         }
@@ -24,19 +25,21 @@
             appearance: none;
             background-color: transparent;
             padding-right: 35px;
-            border: 1px solid #ccc;
-            border-radius: 4px;
         }
     }
 
     .search-option-frame {
         display: none;
         position: absolute;
-        margin-top: 150px;
+        top: 290px;
         padding: 1%;
         border: 1px solid rgb(175, 175, 175);
         border-radius: 4px;
 
+        @media (max-width: @screen-xs-max) {
+            top: 160px;
+        }
+
         .searchbar-options-arrow {
             width: 0;
             height: 0;
@@ -167,7 +170,7 @@
                 border-left: 1px solid #aaa;
             }
         }
-        *:not(.search-submit) {
+        *:not(.search-submit, .searchbar-options-arrow) {
             width: 100%;
         }
     }
@@ -185,12 +188,14 @@
     position: absolute;
     margin-top: 40px;
     &>.searchbar-tooltip-arrow {
+        position: absolute;
+        top: -5px;
+        left: -20px;
         width: 0;
         height: 0;
         border-left: 5px solid transparent;
         border-right: 5px solid transparent;
         border-bottom: 5px solid #ff8000;
-        margin-left: 5%;
     }
     &>.searchbar-tooltip-content {
         position: relative;

resources/views/parts/searchbar.blade.php

@@ -7,16 +7,16 @@
 				<button type="button" id="toggleOptBtn" data-mode="o">
 					<i class="fa fa-chevron-down"></i>
 				</button>
+				<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>
+					<option value="wissenschaft" style="font-family: FontAwesome, sans-serif;">&#xf15c; Wissenschaftssuche</option>
+					<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="searchbar-options-arrow">
 					</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>
-						<option value="wissenschaft" style="font-family: FontAwesome, sans-serif;">&#xf15c; Wissenschaftssuche</option>
-						<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-button-container">
 						<div class="search-add-focus js-only">
 							<button type="button" id="addFocusBtn">