Knopf und Eingabe für Mitglieder Key eingefügt

resources/assets/less/metager/searchbar.less

 /* Suchleiste */
 
+@startpage-border-color: #a2a2a2;
+/**/
+
 .searchbar {
     display: -webkit-box;
     display: -ms-flexbox;
@@ -24,33 +27,66 @@
         display: -ms-flexbox;
         display: flex;
         max-width: 600px;
-    }
-    .search-input {
-        -webkit-box-flex: 1;
-        -ms-flex-positive: 1;
-        flex-grow: 1;
-        input {
-            border: none;
-            border-bottom: none;
-            height: 40px;
-            -webkit-box-shadow: none;
-            box-shadow: none;
-            &:focus {
-                outline-color: @metager-orange;
-                -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
-                box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
-                border-color: rgba(255, 128, 0, 1);
+        .search-key {
+            display: flex;
+            border-right: 1px solid @startpage-border-color;
+            #input-key {
+                margin: 0;
+                padding: 0px;
+                border: none;
+                box-shadow: none;
+                height: 40px;
+                width: 0px;
+                &:focus {
+                    width: 200px;
+                    padding: 6px 10px 6px 10px;
+                    outline-color: @metager-orange;
+                    -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    border-color: rgba(255, 128, 0, 1);
+                    border-radius: 4px;
+                    +#key-label {
+                        display: none;
+                    }
+                }
+            }
+            #key-label {
+                cursor: pointer;
+                height: 40px;
+                width: 40px;
+                margin: 0;
+                display: flex;
+                align-items: center;
+                justify-content: center;
             }
         }
-    }
-    .search-submit {
-        button {
-            width: 50px;
-            line-height: 100%;
-            border: 0;
-            background-color: transparent;
-            padding: 0;
-            height: 100%;
+        .search-input {
+            -webkit-box-flex: 1;
+            -ms-flex-positive: 1;
+            flex-grow: 1;
+            input {
+                border: none;
+                height: 40px;
+                -webkit-box-shadow: none;
+                box-shadow: none;
+                &:focus {
+                    outline-color: @metager-orange;
+                    -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+                    border-color: rgba(255, 128, 0, 1);
+                    border-radius: 4px;
+                }
+            }
+        }
+        .search-submit {
+            button {
+                width: 50px;
+                line-height: 100%;
+                border: 0;
+                background-color: transparent;
+                padding: 0;
+                height: 100%;
+            }
         }
     }
     .search-hidden {
@@ -69,7 +105,7 @@
 
 .startpage-searchbar {
     >* {
-        border: 1px solid #a2a2a2;
+        border: 1px solid @startpage-border-color;
         &:not(:first-child) {
             border-left: none;
         }
@@ -79,9 +115,9 @@
         @media (max-width: @screen-xs-max) {
             max-width: initial;
         }
-    }
-    .search-submit {
-        border-left: 1px solid #aaa;
+        .search-submit {
+            border-left: 1px solid #aaa;
+        }
     }
     @media (max-width: @screen-xs-max) {
         .search-focus-selector {

resources/lang/de/index.php

@@ -41,6 +41,7 @@ return [
     'about.2.1'                      => 'Wir arbeiten nicht gewinnorientiert, wir sind ein <a href="/spende">gemeinnütziger Verein</a>: <a href="/beitritt">Werden Sie Mitglied!</a>',
     'about.3.1'                      => '',
 
+    'key.placeholder'                => 'Mitglieder Key eingeben',
     'placeholder'                    => 'MetaGer: Sicher suchen & finden, Privatsphäre schützen',
 
     'plugin.head.1'                  => 'MetaGer zum Firefox hinzufügen',

resources/views/parts/searchbar.blade.php

-{{-- Don't forget to @include('modals.create-focus-modal') --}}
+{{-- Don't forget @include('modals.create-focus-modal') --}}
 {{-- Don't forget <script type="text/javascript" src="{{ mix('js/searchbar.js') }}"></script> --}}
 <fieldset>
 	<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-input-submit">
+				<div class="search-key">
+					<input id="input-key" type="text" name="key" placeholder="{{ trans ('index.key.placeholder') }}">
+					<label id="key-label" for="input-key">
+						<i class="fa fa-key" aria-hidden="true"></i>
+					</label>
+				</div>
 				<div class="search-input">
-					<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" @if($class=='startpage-searchbar') @endif autocomplete="{{$autocomplete or 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="1">
+					<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required=""  autocomplete="{{$autocomplete or 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}" tabindex="1">
 					<button class="hidden" id="search-delete-btn" type="button">
 						&#xd7;
 					</button>