From 15d00a4bf4f6ec009a9097f35e3edfd97994953d Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Tue, 24 Oct 2017 10:23:28 +0200
Subject: [PATCH] Improved: Suchleiste der Startseite hat jetzt ein neues
Design per Flexbox und ist somit sehr responsiv
---
resources/assets/less/metager/start-page.less | 93 ++++++++++++++-----
.../assets/less/metager/static-pages.less | 15 ---
resources/views/index.blade.php | 58 ++++++------
3 files changed, 104 insertions(+), 62 deletions(-)
diff --git a/resources/assets/less/metager/start-page.less b/resources/assets/less/metager/start-page.less
index cf0c02314..778dd96d8 100644
--- a/resources/assets/less/metager/start-page.less
+++ b/resources/assets/less/metager/start-page.less
@@ -1,41 +1,92 @@
-#searchForm {
- select {
- font-size: 15px;
- -webkit-appearance: none;
- -moz-appearance: none;
- appearance: none;
- background-color: white;
- padding-right: 35px;
+.mg-panel {
+ @media(max-width: @screen-sm) {
+ width: 100%;
}
- input {
- height: 40px;
- font-size: 16px;
- }
- button {
- font-size: 16px;
+ @media(min-width: @screen-sm) {
+ width: @screen-sm;
}
- @media (max-width: @screen-xs-max) {
+}
+
+.search-bar {
+ display: flex;
+ align-items: stretch;
+ font-size: 16px;
+ .search-focus-selector {
+ border: 1px solid #aaa;
+ border-radius: 5px 0px 0px 5px;
select {
width: 100%;
- float: left;
+ color: #777;
+ -webkit-appearance: none;
+ -moz-appearance: none;
+ appearance: none;
+ background-color: transparent;
+ padding-right: 35px;
}
+ }
+ .search-input-submit {
+ flex-grow: 1;
+ border-left: none;
+ border: 1px solid #aaa;
+ border-radius: 0px 5px 5px 0px;
+ display: flex;
+ }
+ .search-input {
+ flex-grow: 1;
input {
+ border: none;
height: 40px;
- font-size: 16px;
+ &:focus {
+ outline-color: rgb(255, 128, 0);
+ -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+ -moz-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-submit {
+ border-left: 1px solid #aaa;
button {
- font-size: 16px;
+ width: 50px;
+ line-height: 100%;
+ border: 0;
+ background-color: transparent;
+ padding: 0;
+ height: 100%;
+ &:focus {
+ outline-color: rgb(255, 128, 0);
+ -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
+ -moz-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-hidden {
+ display: none;
+ }
+ @media (max-width: @screen-xs-max) {
+ flex-direction: column-reverse;
+ .search-focus-selector {
+ border: 1px solid #aaa;
+ border-top: none;
+ border-radius: 5px;
+ }
+ .search-input-submit {
+ border: 1px solid #aaa;
+ border-radius: 5px;
}
}
}
-.focus-selector {
+.search-focus-selector {
background-color: white;
position: relative;
+ text-overflow: ellipsis;
&:after {
content: "\f078";
- font: 15px "FontAwesome", sans-serif;
- //text-align: center;
+ font: 15px "FontAwesome", sans-serif; //text-align: center;
line-height: 30px;
color: #aaa;
background-color: transparent;
diff --git a/resources/assets/less/metager/static-pages.less b/resources/assets/less/metager/static-pages.less
index 357a3ee1d..5be98ca8c 100644
--- a/resources/assets/less/metager/static-pages.less
+++ b/resources/assets/less/metager/static-pages.less
@@ -206,15 +206,6 @@ nav {
}
}
-#searchForm button {
- width: 50px;
- line-height: 100%;
- height: 28px;
- border: 0;
- background-color: transparent;
- padding: 0;
-}
-
li#info {
white-space: pre-line;
}
@@ -553,12 +544,6 @@ label a {
}
}
-#submit-inputgroup {
- background-color: inherit;
- border-left: 0;
- box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-}
-
input[name=eingabe] {
border-right: 0;
box-shadow: inset 0 1px 0px rgba(0, 0, 0, 0.075);
diff --git a/resources/views/index.blade.php b/resources/views/index.blade.php
index 737c50279..b7336e05b 100644
--- a/resources/views/index.blade.php
+++ b/resources/views/index.blade.php
@@ -264,33 +264,39 @@
</div>-->
<fieldset>
<form id="searchForm" @if(Request::has('request') && Request::input('request') === "POST") method="POST" @elseif(Request::has('request') && Request::input('request') === "GET") method="GET" @else method="GET" @endif action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3") }}" accept-charset="UTF-8">
- <div class="input-group">
- <div class="focus-selector input-group-addon">
- <select name="focus" style="font-family: FontAwesome, sans-serif;">
- <option value="web" style="font-family: FontAwesome, sans-serif;" selected > Websuche</option>
- <option value="nachrichten" style="font-family: FontAwesome, sans-serif;" > Nachrichtensuche</option>
- <option value="wissenschaft" style="font-family: FontAwesome, sans-serif;" > Wissenschaftssuche</option>
- <option value="produktsuche" style="font-family: FontAwesome, sans-serif;" > Produktsuche</option>
- <option value="maps" style="font-family: FontAwesome, sans-serif;" > Kartensuche</option>
- </select>
+ <div class="search-bar">
+ <div class="search-focus-selector">
+ <select name="focus" style="font-family: FontAwesome, sans-serif;">
+ <option value="web" style="font-family: FontAwesome, sans-serif;" selected > Websuche</option>
+ <option value="nachrichten" style="font-family: FontAwesome, sans-serif;" > Nachrichtensuche</option>
+ <option value="wissenschaft" style="font-family: FontAwesome, sans-serif;" > Wissenschaftssuche</option>
+ <option value="produktsuche" style="font-family: FontAwesome, sans-serif;" > Produktsuche</option>
+ <option value="maps" style="font-family: FontAwesome, sans-serif;" > Kartensuche</option>
+ </select>
</div>
- <input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
- <input type="hidden" name="encoding" value="utf8">
- <input type="hidden" name="lang" value={{ $lang }} >
- <input type="hidden" name="resultCount" value={{ $resultCount }} >
- <input type="hidden" name="time" value={{ $time }} >
- <input type="hidden" name="sprueche" value={{ $sprueche }} >
- <input type="hidden" name="newtab" value={{ $newtab }} >
- <input type="hidden" name="maps" value={{ $maps }} >
- <input type="hidden" name="key" value={{ $key }} >
- @foreach ($focusPages as $fp)
- <input type="hidden" name={{ $fp }} value="on">
- @endforeach
- <input type="hidden" name="theme" value={{ $theme }}>
- <div class="input-group-addon" id="submit-inputgroup">
- <button type="submit">
- <i class="fa fa-search" aria-hidden="true"></i>
- </button>
+ <div class="search-input-submit">
+ <div class="search-input">
+ <input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
+ </div>
+ <div class="search-submit" id="submit-inputgroup">
+ <button type="submit">
+ <i class="fa fa-search" aria-hidden="true"></i>
+ </button>
+ </div>
+ </div>
+ <div class="search-hidden">
+ <input type="hidden" name="encoding" value="utf8">
+ <input type="hidden" name="lang" value={{ $lang }} >
+ <input type="hidden" name="resultCount" value={{ $resultCount }} >
+ <input type="hidden" name="time" value={{ $time }} >
+ <input type="hidden" name="sprueche" value={{ $sprueche }} >
+ <input type="hidden" name="newtab" value={{ $newtab }} >
+ <input type="hidden" name="maps" value={{ $maps }} >
+ <input type="hidden" name="key" value={{ $key }} >
+ @foreach ($focusPages as $fp)
+ <input type="hidden" name={{ $fp }} value="on">
+ @endforeach
+ <input type="hidden" name="theme" value={{ $theme }}>
</div>
</div>
</form>
--
GitLab