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 @@ ...@@ -9,10 +9,10 @@
} }
.quicktip { .quicktip {
margin: 10px 0px; margin: 10px 0px;
padding: 10px 0px 10px 10px; padding: 10px 10px 10px 10px;
width: 100%; width: 100%;
border: 1px solid #ccc; border: 1px solid #ccc;
border-left: 3px solid #fb0; background-color: white;
@media(max-width: @screen-xs-max) { @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); 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 @@ ...@@ -27,7 +27,6 @@
h1 { h1 {
margin: 0px 0px 5px 0px; margin: 0px 0px 5px 0px;
font-size: 18px; font-size: 18px;
font-weight: bold;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
.quicktip-extender { .quicktip-extender {
...@@ -73,6 +72,7 @@ ...@@ -73,6 +72,7 @@
&[type=spendenaufruf] { &[type=spendenaufruf] {
border: none; border: none;
color: #ff8000; color: #ff8000;
background-color: inherit;
.quicktip-summary { .quicktip-summary {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
......
...@@ -350,6 +350,7 @@ p.mg-logo { ...@@ -350,6 +350,7 @@ p.mg-logo {
#header-logo { #header-logo {
z-index: 0; z-index: 0;
padding-right: 10px;
a h1 { a h1 {
margin: 0px; margin: 0px;
} }
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
padding: 15px; padding: 15px;
width: 100%; width: 100%;
border: 1px solid #ccc; border: 1px solid #ccc;
background-color: white;
@media(max-width: @screen-xs-max) { @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); 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 @@ ...@@ -30,6 +31,7 @@
} }
} }
.result-link { .result-link {
display: block;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -48,6 +50,7 @@ ...@@ -48,6 +50,7 @@
margin-top: 20px; margin-top: 20px;
.result-description { .result-description {
margin-bottom: 3px; margin-bottom: 3px;
word-break: break-word;
color: @result-description-color; color: @result-description-color;
font-size: @result-font-medium; font-size: @result-font-medium;
line-height: 1.3; line-height: 1.3;
...@@ -80,6 +83,7 @@ ...@@ -80,6 +83,7 @@
margin-top: 25px; margin-top: 25px;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
overflow: auto;
&>*:not(:first-child) { &>*:not(:first-child) {
margin-left: 20px; margin-left: 20px;
} }
...@@ -102,6 +106,12 @@ ...@@ -102,6 +106,12 @@
font-size: @result-font-small; font-size: @result-font-small;
text-decoration: none; text-decoration: none;
} }
margin-left: 25px;
}
@media (max-width: 499px) {
.result-open-newtab {
display: none;
}
} }
.result-open-proxy { .result-open-proxy {
&, &,
...@@ -114,45 +124,18 @@ ...@@ -114,45 +124,18 @@
text-decoration: none; text-decoration: none;
} }
white-space: nowrap; white-space: nowrap;
margin-left: 25px;
img { img {
margin-bottom: 0px; margin-bottom: 0px;
margin-right: 2px margin-right: 2px
} }
} }
.result-options { .open-result-options {
margin-left: auto; font-weight: normal;
.option-opener-icon { flex-grow: 1;
display: block; text-align: right;
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;
}
}
} }
} }
&.ad .ad-label { &.ad .ad-label {
&, &,
...@@ -170,4 +153,30 @@ ...@@ -170,4 +153,30 @@
text-align: right; text-align: right;
color: #777; color: #777;
} }
}
\ No newline at end of file
&>.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 @@ ...@@ -140,7 +140,9 @@
flex-grow: 1; flex-grow: 1;
input { input {
border: none; border: none;
border-bottom: 1px solid #ccc;
height: 40px; height: 40px;
box-shadow: none;
&:focus { &:focus {
outline-color: rgb(255, 128, 0); outline-color: rgb(255, 128, 0);
-webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1); -webkit-box-shadow: 0px 0px 2px 2px rgba(255, 128, 0, 1);
...@@ -186,13 +188,13 @@ div:hover>.searchbar-tooltip { ...@@ -186,13 +188,13 @@ div:hover>.searchbar-tooltip {
.startpage-searchbar { .startpage-searchbar {
>* { >* {
border: 1px solid #aaa; border: 1px solid #a2a2a2;
&:not(:first-child) { &:not(:first-child) {
border-left: none; border-left: none;
} }
} }
.search-input-submit { .search-input-submit {
border-radius: 0px 5px 5px 0px; border-radius: 5px;
} }
.search-submit { .search-submit {
border-left: 1px solid #aaa; border-left: 1px solid #aaa;
...@@ -220,21 +222,15 @@ div:hover>.searchbar-tooltip { ...@@ -220,21 +222,15 @@ div:hover>.searchbar-tooltip {
.resultpage-searchbar { .resultpage-searchbar {
padding: 5px; padding: 5px;
:first-child {
border-left: none;
}
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
.search-focus-selector { .search-focus-selector {
border: 1px solid #aaa;
border-top: none; border-top: none;
border-radius: 5px; border-radius: 5px;
} }
.search-input-submit { .search-input-submit {
border: 1px solid #aaa;
border-radius: 5px; border-radius: 5px;
} }
>* { >* {
border: 1px solid #aaa;
border-radius: 5px; border-radius: 5px;
min-height: 40px; min-height: 40px;
&:not(:first-child) { &:not(:first-child) {
...@@ -276,18 +272,36 @@ div:hover>.searchbar-tooltip { ...@@ -276,18 +272,36 @@ div:hover>.searchbar-tooltip {
} }
} }
#research-bar { header {
margin-left: 50px;
padding-top: 10px;
display:flex;
position: fixed; position: fixed;
z-index: 100; z-index: 100;
width: 100%; max-width: 700px;
padding: 10px 60px 0px 10px; 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; background-color: white;
border: 1px solid #ccc;
border-bottom: 2px solid rgb(255, 128, 0); border-bottom: 2px solid rgb(255, 128, 0);
display: flex; display: flex;
justify-content: center; align-items: center;
@media (max-width: @screen-xs-max) { justify-content: center;
flex-direction: column; @media (max-width: 799px) {
padding-right: 10px; 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 { ...@@ -295,6 +309,6 @@ div:hover>.searchbar-tooltip {
width: 100%; width: 100%;
height: 60px; height: 60px;
@media (max-width: @screen-xs-max) { @media (max-width: @screen-xs-max) {
height: 100px; height: 65px;
} }
} }
\ No newline at end of file
...@@ -146,8 +146,8 @@ input#sideBarToggle:checked { ...@@ -146,8 +146,8 @@ input#sideBarToggle:checked {
label#openSidebar { label#openSidebar {
position: fixed; position: fixed;
top: 15px; top: 23px;
right: 20px; right: 25px;
z-index: 998; z-index: 998;
font-size: 36px; font-size: 36px;
line-height: 23px; line-height: 23px;
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
@search-bar-width: 1000px; @search-bar-width: 1000px;
#mglogo { #mglogo {
font-size: 90px; font-size: 75px;
@media(max-width: @screen-xs-max) { @media(max-width: @screen-xs-max) {
font-size: 50px; font-size: 50px;
} }
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
width: @search-bar-width; width: @search-bar-width;
} }
#mglogo { #mglogo {
margin: 0px 0px 30px 0px; margin: 0px 0px 45px 0px;
} }
.settings-modal-buttons { .settings-modal-buttons {
padding: 5px; padding: 5px;
......
...@@ -21,7 +21,7 @@ Helvetica, ...@@ -21,7 +21,7 @@ Helvetica,
Arial, Arial,
sans-serif; sans-serif;
// Global textual link color. // Global textual link color.
@link-color: #2A2ADE; @link-color: rgb(255,128,0);
// static-pages.less // static-pages.less
@static-pages-color-white: @color-white; @static-pages-color-white: @color-white;
@static-pages-color-almost-white: @color-almost-white; @static-pages-color-almost-white: @color-almost-white;
...@@ -45,7 +45,7 @@ sans-serif; ...@@ -45,7 +45,7 @@ sans-serif;
// //
@result-page-body-background-color: @background-color; @result-page-body-background-color: @background-color;
@result-page-a-hover-color: red; @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; @result-page-product-shop-color: green;
// start-page.less // start-page.less
@focus-hover-focus-edit-background-color: #e3e3e3; @focus-hover-focus-edit-background-color: #e3e3e3;
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
return [ return [
'options.headline' => 'Optionen', 'options.headline' => 'Optionen',
'options.savetab' => 'Ergebnis in Tab speichern.', '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.2' => ':host ausblenden',
'options.3' => '*.:domain ausblenden', 'options.3' => '*.:domain ausblenden',
'options.4' => 'Partnershop', 'options.4' => 'Partnershop',
......
...@@ -17,5 +17,13 @@ ...@@ -17,5 +17,13 @@
{{ $ad->descr }} {{ $ad->descr }}
</div> </div>
</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> </div>
@endif @endif
...@@ -8,12 +8,15 @@ ...@@ -8,12 +8,15 @@
</div> </div>
</div> </div>
@endif @endif
<header id="research-bar"> <header>
<div id="header-logo"> <div id="research-bar">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a> <div id="header-logo">
</div> <a class="hidden-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
<div id="header-searchbar"> <a class="visible-xs" href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">M</h1></a>
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()]) </div>
<div id="header-searchbar">
@include('parts.searchbar', ['class' => 'resultpage-searchbar', 'request' => Request::method()])
</div>
</div> </div>
</header> </header>
<div id="research-bar-placeholder"></div> <div id="research-bar-placeholder"></div>
......
...@@ -50,19 +50,16 @@ ...@@ -50,19 +50,16 @@
IN NEUEM TAB IN NEUEM TAB
</a> </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"> <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 ANONYM ÖFFNEN
</a> </a>
<div class="result-options"> <label class="open-result-options" for="result-toggle-{{$result->number}}" role="button">
<a class="dropdown-opener" href="javascript:void(0);"> MEHR
<i class="fa fa-chevron-down option-opener-icon" aria-hidden="true"></i> </label>
</a> </div>
<div class="dropdown-content option-content"> <div class="result-options">
<input type="checkbox" id="result-toggle-{{$result->number}}" class="result-toggle" style="display: none">
<div class="options">
<ul class="option-list list-unstyled small"> <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"> <li class="js-only">
<a href="javascript:resultSaver({{ $result->number }});" class="saver"> <a href="javascript:resultSaver({{ $result->number }});" class="saver">
<i class="fa fa-floppy-o"></i> {!! trans('result.options.savetab') !!} <i class="fa fa-floppy-o"></i> {!! trans('result.options.savetab') !!}
...@@ -88,7 +85,6 @@ ...@@ -88,7 +85,6 @@
</li> </li>
@endif @endif
</ul> </ul>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
{{-- Don't forget <script type="text/javascript" src="{{ elixir('js/searchbar.js') }}"></script> --}} {{-- Don't forget <script type="text/javascript" src="{{ elixir('js/searchbar.js') }}"></script> --}}
<fieldset> <fieldset>
<form id="searchForm" method={{ $request }} action="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/meta/meta.ger3 ") }}" accept-charset="UTF-8"> <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"> <div class="search-focus-selector">
<button type="button" id="toggleOptBtn" class="js-only" data-mode="o"> <button type="button" id="toggleOptBtn" class="js-only" data-mode="o">
<i class="fa fa-sliders"></i> <i class="fa fa-sliders"></i>
...@@ -75,10 +75,10 @@ ...@@ -75,10 +75,10 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>-->
<div class="search-input-submit"> <div class="search-input-submit">
<div class="search-input"> <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>
<div class="search-submit" id="submit-inputgroup"> <div class="search-submit" id="submit-inputgroup">
<button type="submit"> <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