From 57d47acbd64a46f7b991d485918daad56a8ec20c Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Fri, 22 Jun 2018 10:27:53 +0200
Subject: [PATCH] =?UTF-8?q?Knopf=20und=20Eingabe=20f=C3=BCr=20Mitglieder?=
=?UTF-8?q?=20Key=20eingef=C3=BCgt?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
resources/assets/less/metager/searchbar.less | 94 ++++++++++++++------
resources/lang/de/index.php | 1 +
resources/views/parts/searchbar.blade.php | 10 ++-
3 files changed, 74 insertions(+), 31 deletions(-)
diff --git a/resources/assets/less/metager/searchbar.less b/resources/assets/less/metager/searchbar.less
index e3a41ba77..f53bd066d 100644
--- a/resources/assets/less/metager/searchbar.less
+++ b/resources/assets/less/metager/searchbar.less
@@ -1,5 +1,8 @@
/* 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 {
diff --git a/resources/lang/de/index.php b/resources/lang/de/index.php
index 73fc4f365..95f186e99 100644
--- a/resources/lang/de/index.php
+++ b/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',
diff --git a/resources/views/parts/searchbar.blade.php b/resources/views/parts/searchbar.blade.php
index 4a3e42572..3936bd0d4 100644
--- a/resources/views/parts/searchbar.blade.php
+++ b/resources/views/parts/searchbar.blade.php
@@ -1,11 +1,17 @@
-{{-- 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">
×
</button>
--
GitLab