Commit 620bf053 authored by Dominik Hebeler's avatar Dominik Hebeler

Suchleiste an das neue Design angepasst

Außerdem habe ich die Ergebnisoptionen umformatiert, sodass diese auf allen Displays und ohne JS gut zu benutzen sind.
parent 174c6052
......@@ -9,10 +9,10 @@
}
.quicktip {
margin: 10px 0px;
padding: 10px 0px 10px 10px;
padding: 10px 10px 10px 10px;
width: 100%;
border: 1px solid #ccc;
border-left: 3px solid #fb0;
background-color: white;
@media(max-width: @screen-xs-max) {
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
......@@ -27,7 +27,6 @@
h1 {
margin: 0px 0px 5px 0px;
font-size: 18px;
font-weight: bold;
display: flex;
justify-content: space-between;
.quicktip-extender {
......@@ -73,6 +72,7 @@
&[type=spendenaufruf] {
border: none;
color: #ff8000;
background-color: inherit;
.quicktip-summary {
display: flex;
justify-content: space-between;
......
......@@ -350,6 +350,7 @@ p.mg-logo {
#header-logo {
z-index: 0;
padding-right: 10px;
a h1 {
margin: 0px;
}
......
......@@ -8,6 +8,7 @@
padding: 15px;
width: 100%;
border: 1px solid #ccc;
background-color: white;
@media(max-width: @screen-xs-max) {
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
......@@ -30,6 +31,7 @@
}
}
.result-link {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
......@@ -48,6 +50,7 @@
margin-top: 20px;
.result-description {
margin-bottom: 3px;
word-break: break-word;
color: @result-description-color;
font-size: @result-font-medium;
line-height: 1.3;
......@@ -80,6 +83,7 @@
margin-top: 25px;
display: flex;
flex-wrap: wrap;
overflow: auto;
&>*:not(:first-child) {
margin-left: 20px;
}
......@@ -102,6 +106,12 @@
font-size: @result-font-small;
text-decoration: none;
}
margin-left: 25px;
}
@media (max-width: 499px) {
.result-open-newtab {
display: none;
}
}
.result-open-proxy {
&,
......@@ -114,45 +124,18 @@
text-decoration: none;
}
white-space: nowrap;
margin-left: 25px;
img {
margin-bottom: 0px;
margin-right: 2px
}
}
.result-options {
margin-left: auto;
.option-opener-icon {
display: block;
font-size: @result-font-small;
color: black;
}
.option-content {
background-color: white;
z-index: 1000;
position: absolute;
border: grey solid 1px;
color: black;
font-size: 16px;
border-radius: 5px;
hr {
margin: 5px;
}
li {
padding: 5px
}
li:not(.option-title):hover {
background-color: #e0e0e0;
}
a,
a:active,
a:hover,
a:focus,
a:visited {
color: black;
display: block;
}
}
.open-result-options {
font-weight: normal;
flex-grow: 1;
text-align: right;
}
}
&.ad .ad-label {
&,
......@@ -170,4 +153,30 @@
text-align: right;
color: #777;
}
&>.result-options {
&>.options {
width: 100%;
text-align: right;
overflow: hidden;
max-height: 0px;
transition: max-height 1.0s;
-webkit-transition: max-height 1.0s;
}
&>.result-toggle:checked + .options {
max-height: 150px;
}
li {
font-size: 14px;
text-transform: uppercase;
margin: 10px 0;
}
li > a {
color: black;
}
}
}
......@@ -140,7 +140,9 @@
flex-grow: 1;
input {
border: none;
border-bottom: 1px solid #ccc;
height: 40px;
box-shadow: none;
&:focus {
outline-color: rgb(255, 128, 0);
-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
......@@ -186,13 +188,13 @@ div:hover>.searchbar-tooltip {
.startpage-searchbar {
>* {
border: 1px solid #aaa;
border: 1px solid #a2a2a2;
&:not(:first-child) {
border-left: none;
}
}
.search-input-submit {
border-radius: 0px 5px 5px 0px;
border-radius: 5px;
}
.search-submit {
border-left: 1px solid #aaa;
......@@ -220,21 +222,15 @@ div:hover>.searchbar-tooltip {
.resultpage-searchbar {
padding: 5px;
:first-child {
border-left: none;
}
@media (max-width: @screen-xs-max) {
.search-focus-selector {
border: 1px solid #aaa;
border-top: none;
border-radius: 5px;
}
.search-input-submit {
border: 1px solid #aaa;
border-radius: 5px;
}
>* {
border: 1px solid #aaa;
border-radius: 5px;
min-height: 40px;
&:not(:first-child) {
......@@ -276,18 +272,36 @@ div:hover>.searchbar-tooltip {
}
}
#research-bar {
header {
margin-left: 50px;
padding-top: 10px;
display:flex;
position: fixed;
z-index: 100;
width: 100%;
padding: 10px 60px 0px 10px;
max-width: 700px;
width:100%;
background-color: #FAFAFA;
@media (max-width: 799px) {
margin-left: 0px;
-webkit-box-pack: center;
justify-content: center;
max-width: 799px;
}
}
#research-bar {
max-width: 700px;
width:100%;
padding: 0px 30px 0px 10px;
background-color: white;
border: 1px solid #ccc;
border-bottom: 2px solid rgb(255, 128, 0);
display: flex;
align-items: center;
justify-content: center;
@media (max-width: @screen-xs-max) {
flex-direction: column;
padding-right: 10px;
@media (max-width: 799px) {
margin: 0px 8px;
box-shadow: 0px 1px 1.5px 0px rgba(0, 0, 0, 0.12), 1px 0px 1px 0px rgba(0, 0, 0, 0.24);
}
}
......@@ -295,6 +309,6 @@ div:hover>.searchbar-tooltip {
width: 100%;
height: 60px;
@media (max-width: @screen-xs-max) {
height: 100px;
height: 65px;
}
}
\ No newline at end of file
......@@ -146,8 +146,8 @@ input#sideBarToggle:checked {
label#openSidebar {
position: fixed;
top: 15px;
right: 20px;
top: 23px;
right: 25px;
z-index: 998;
font-size: 36px;
line-height: 23px;
......
......@@ -2,7 +2,7 @@
@search-bar-width: 1000px;
#mglogo {
font-size: 90px;
font-size: 75px;
@media(max-width: @screen-xs-max) {
font-size: 50px;
}
......@@ -20,7 +20,7 @@
width: @search-bar-width;
}
#mglogo {
margin: 0px 0px 30px 0px;
margin: 0px 0px 45px 0px;
}
.settings-modal-buttons {
padding: 5px;
......
......@@ -21,7 +21,7 @@ Helvetica,
Arial,
sans-serif;
// Global textual link color.
@link-color: #2A2ADE;
@link-color: rgb(255,128,0);
// static-pages.less
@static-pages-color-white: @color-white;
@static-pages-color-almost-white: @color-almost-white;
......@@ -45,7 +45,7 @@ sans-serif;
//
@result-page-body-background-color: @background-color;
@result-page-a-hover-color: red;
@result-page-a-visited-color: #792ea1;
@result-page-a-visited-color: rgb(255,128,0);
@result-page-product-shop-color: green;
// start-page.less
@focus-hover-focus-edit-background-color: #e3e3e3;
......
......@@ -3,7 +3,7 @@
return [
'options.headline' => 'Optionen',
'options.savetab' => 'Ergebnis in Tab speichern.',
'options.1' => 'Suche auf dieser Domain neu starten',
'options.1' => 'Auf dieser Domain neu suchen',
'options.2' => ':host ausblenden',
'options.3' => '*.:domain ausblenden',
'options.4' => 'Partnershop',
......
......@@ -17,5 +17,13 @@
{{ $ad->descr }}
</div>
</div>
<div class="result-footer">
<a class="result-open" href="{{ $ad->link }}" target="_self" rel="noopener">
ÖFFNEN
</a>
<a class="result-open-newtab" href="{{ $ad->link }}" target="_blank" rel="noopener">
IN NEUEM TAB
</a>
</div>
</div>
@endif
......@@ -8,13 +8,16 @@
</div>
</div>
@endif
<header id="research-bar">
<header>
<div id="research-bar">
<div id="header-logo">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
<a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
<a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">M</h1></a>
</div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
</div>
</header>
<div id="research-bar-placeholder"></div>
<div id="resultpage-container">
......
......@@ -50,19 +50,16 @@
IN NEUEM TAB
</a>
<a class="result-open-proxy" onmouseover="$(this).popover('show');" onmouseout="$(this).popover('hide');" data-toggle="popover" data-placement="auto right" data-container="body" data-content="@lang('result.proxytext')" href="{{ $result->proxyLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">
<img src="/img/proxyicon.png" alt="" />
ANONYM ÖFFNEN
</a>
<label class="open-result-options" for="result-toggle-{{$result->number}}" role="button">
MEHR
</label>
</div>
<div class="result-options">
<a class="dropdown-opener" href="javascript:void(0);">
<i class="fa fa-chevron-down option-opener-icon" aria-hidden="true"></i>
</a>
<div class="dropdown-content option-content">
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="options">
<ul class="option-list list-unstyled small">
<li class="option-title">
<i class="fa fa-cog"></i> {!! trans('result.options.headline') !!}
</li>
<hr>
<li class="js-only">
<a href="javascript:resultSaver({{ $result->number }});" class="saver">
<i class="fa fa-floppy-o"></i> {!! trans('result.options.savetab') !!}
......@@ -90,5 +87,4 @@
</ul>
</div>
</div>
</div>
</div>
......@@ -2,7 +2,7 @@
{{-- Don't forget <script type="text/javascript" src="{{ elixir('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="searchbar {{$class or ''}}"><!--
<div class="search-focus-selector">
<button type="button" id="toggleOptBtn" class="js-only" data-mode="o">
<i class="fa fa-sliders"></i>
......@@ -75,10 +75,10 @@
</div>
</div>
</div>
</div>
</div>-->
<div class="search-input-submit">
<div class="search-input">
<input type="text" name="eingabe" required="" autofocus="" autocomplete="{{$autocomplete or 'off'}}" class="form-control"placeholder="{{ trans('index.placeholder') }}">
<input type="text" name="eingabe" value="@if(isset($eingabe)){{$eingabe}}@endif" required="" autocomplete="{{$autocomplete or 'off'}}" class="form-control" placeholder="{{ trans('index.placeholder') }}">
</div>
<div class="search-submit" id="submit-inputgroup">
<button type="submit">
......
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