Skip to content

GitLab

Commit 15d00a4b authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files
Options

Improved: Suchleiste der Startseite hat jetzt ein neues Design per Flexbox und... 

Improved: Suchleiste der Startseite hat jetzt ein neues Design per Flexbox und ist somit sehr responsiv
parent e4dfbe1b
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 62 deletions
resources/assets/less/metager/start-page.less
View file @ 15d00a4b
#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;
......
resources/assets/less/metager/static-pages.less
View file @ 15d00a4b
......@@ -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);
......
resources/views/index.blade.php
View file @ 15d00a4b
......@@ -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 >&#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-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 >&#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>
<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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment