Commit 7bc1c8fe authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Ergebnisseite sieht wieder annehmbar aus

parent 69570a7b
...@@ -27,9 +27,6 @@ body { ...@@ -27,9 +27,6 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: 0; margin: 0;
&>div {
padding-top: 50px;
}
} }
.wrapper { .wrapper {
......
...@@ -216,12 +216,6 @@ nav .input-group { ...@@ -216,12 +216,6 @@ nav .input-group {
height: 100%; height: 100%;
} }
.content-wrapper {
padding: 0px;
padding-top: 52px;
background-color: white;
}
#helpButton { #helpButton {
color: black; color: black;
} }
...@@ -317,7 +311,6 @@ a { ...@@ -317,7 +311,6 @@ a {
.mg-logo { .mg-logo {
color: #ff8000; color: #ff8000;
font-family: Liberation Sans, sans-serif; font-family: Liberation Sans, sans-serif;
padding: 5px 30px 0px 0px;
} }
#header-searchbar { #header-searchbar {
...@@ -727,12 +720,12 @@ a { ...@@ -727,12 +720,12 @@ a {
border-bottom: 1px solid #ddd; border-bottom: 1px solid #ddd;
h2 { h2 {
margin: 10px 0px; margin: 10px 0px;
font-size: 17px; font-size: 16px;
font-weight: bold; font-weight: bold;
} }
p { p {
display: none; display: none;
font-size: 15px; font-size: 14px;
} }
} }
.gefVon { .gefVon {
...@@ -777,4 +770,92 @@ a { ...@@ -777,4 +770,92 @@ a {
} }
} }
} }
}
/* New result style */
@result-width: 700px;
@quicktip-width: 500px;
html,
body,
.content-wrapper {
width: 100%;
}
.content-wrapper {
display: flex;
flex-direction: column;
}
#header-logo a h1 {
margin: 0px;
}
#research-bar {
padding: 10px;
border-bottom: 2px solid rgb(255, 128, 0);
display: flex;
justify-content: center;
#header-searchbar {
margin-left: 10px;
}
@media (max-width: @screen-xs-max) {
flex-direction: column;
}
}
.resultpage-container {
width: @result-width + @quicktip-width;
align-self: center;
@media (max-width: (@result-width + @quicktip-width - 1px)) {
width: @result-width;
#quicktips {
display: none;
}
}
@media (max-width: @result-width) {
width: 100%;
}
display: flex;
justify-content: center;
#results {
max-width: @result-width;
width: 100%;
}
#quicktips {
padding-left: 50px;
width: @quicktip-width;
}
}
.result {
.result-title a {
color: black;
font-size: 18px;
font-weight: bold;
}
.result-header {
display: flex;
>* {
white-space: nowrap;
}
>*:not(:first-child) {
margin-left: 5px;
}
.result-link {
overflow: auto;
a {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
}
}
}
@media (max-width: @screen-xs-max) {
// mobile
} }
\ No newline at end of file
.searchbar { .searchbar {
display: flex; display: flex;
align-items: stretch; align-items: stretch;
justify-content: center;
font-size: 16px; font-size: 16px;
background-color: white; background-color: white;
.search-focus-selector { .search-focus-selector {
...@@ -16,7 +17,7 @@ ...@@ -16,7 +17,7 @@
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background-color: transparent; background-color: transparent;
padding-right: 35px; padding: 0px 35px 0px 5px;
font-family: FontAwesome, sans-serif; font-family: FontAwesome, sans-serif;
border: none; border: none;
&>option { &>option {
...@@ -73,6 +74,10 @@ ...@@ -73,6 +74,10 @@
.search-input-submit { .search-input-submit {
flex-grow: 1; flex-grow: 1;
display: flex; display: flex;
max-width: 600px;
@media (max-width: @screen-xs-max) {
max-width: initial;
}
} }
.search-input { .search-input {
flex-grow: 1; flex-grow: 1;
...@@ -178,7 +183,7 @@ ...@@ -178,7 +183,7 @@
} }
.resultpage-searchbar { .resultpage-searchbar {
padding: 5px; padding: 5px 45px 5px 5px;
:first-child { :first-child {
border-left: none; border-left: none;
} }
......
...@@ -8,26 +8,16 @@ ...@@ -8,26 +8,16 @@
</div> </div>
</div> </div>
@endif @endif
<div class="content-wrapper container"> <div class="content-wrapper">
<header id="research" class="row"> <header id="research-bar">
<nav class="navbar navbar-default navbar-fixed-top navbar-resultpage"> <div id="header-logo">
<div class="container"> <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</h1></a>
<div class="row" id="logo-searchbar-container"> </div>
<div id="header-logo"> <div id="header-searchbar">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/") }}"><h1 class="mg-logo">MetaGer</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>
</nav>
</header>
<main id="main-content-tabs" class="row">
<div>
<div class="row">
@yield('results')
</div>
</div> </div>
</header>
<main class="resultpage-container">
@yield('results')
</main> </main>
</div> </div>
\ No newline at end of file
<div class="result row" data-count="{{ $result->number }}"> <div class="result" data-count="{{ $result->number }}">
<div class="resultInformation col-xs-12 col-sm-11"> <h2 class="result-title">
<div class="col-xs-10 col-sm-11" style="padding:0; "> <a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener">
<p class="title"> {!! $result->titel !!}
<a class="title" href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener"> </a>
{!! $result->titel !!} </h2>
</a> <div class="result-header">
</p> <div class="result-link">
<div class="link"> <a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener">
<div> {{ $result->anzeigeLink }}
<div class="link-link"> </a>
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener"> </div>
{{ $result->anzeigeLink }} <div class="result-options">
<a class="dropdown-opener" href="javascript:void(0);">
<i class="fa fa-caret-down option-opener-icon" aria-hidden="true"></i>
</a>
<div class="dropdown-content option-content">
<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" data-counter="{{ $result->number }}">
<i class="fa fa-floppy-disk"></i> {!! trans('result.options.savetab') !!}
</a> </a>
</div> </li>
<div class="options"> @if(strlen($metager->getSite()) === 0)
<a class="dropdown-opener" href="javascript:void(0);"> <li>
<i class="fa fa-caret-down option-opener-icon" aria-hidden="true"></i> <a href="{{ $metager->generateSiteSearchLink($result->strippedHost) }}">
{!! trans('result.options.1') !!}
</a> </a>
<div class="dropdown-content option-content"> </li>
<ul class="option-list list-unstyled small"> @endif
<li class="option-title"> <li>
<i class="fa fa-cog"></i> {!! trans('result.options.headline') !!} <a href="{{ $metager->generateRemovedHostLink($result->strippedHost) }}">
</li> {!! trans('result.options.2', ['host' => $result->strippedHost]) !!}
<hr> </a>
<li class="js-only"> </li>
<a href="javascript:resultSaver({{ $result->number }});" class="saver" data-counter="{{ $result->number }}"> @if( $result->strippedHost !== $result->strippedDomain )
<i class="fa fa-floppy-disk"></i> {!! trans('result.options.savetab') !!} <li>
</a> <a href="{{ $metager->generateRemovedDomainLink($result->strippedDomain) }}">
</li> {!! trans('result.options.3', ['domain' => $result->strippedDomain]) !!}
@if(strlen($metager->getSite()) === 0) </a>
<li> </li>
<a href="{{ $metager->generateSiteSearchLink($result->strippedHost) }}"> @endif
{!! trans('result.options.1') !!} </ul>
</a>
</li>
@endif
<li>
<a href="{{ $metager->generateRemovedHostLink($result->strippedHost) }}">
{!! trans('result.options.2', ['host' => $result->strippedHost]) !!}
</a>
</li>
@if( $result->strippedHost !== $result->strippedDomain )
<li>
<a href="{{ $metager->generateRemovedDomainLink($result->strippedDomain) }}">
{!! trans('result.options.3', ['domain' => $result->strippedDomain]) !!}
</a>
</li>
@endif
</ul>
</div>
</div>
</div>
<span class="hoster">
von {!! $result->gefVon !!}
</span>
@if( isset($result->partnershop) && $result->partnershop === TRUE )
<span class="partnershop-info">
<img src="/img/boosticon.png" height="13" alt="">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/partnershops") }}" target="_blank" rel="noopener">{!! trans('result.options.4') !!}</a>
</span>
@endif
<a class="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="" />
{!! trans('result.options.5') !!}
</a>
</div> </div>
</div> </div>
<span class="result-hoster">
<span>von {!! $result->gefVon !!}</span>
</span>
@if( isset($result->partnershop) && $result->partnershop === TRUE )
<span class="partnershop-info">
<img src="/img/boosticon.png" height="13" alt="">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/partnershops") }}" target="_blank" rel="noopener">{!! trans('result.options.4') !!}</a>
</span>
@endif
<a class="result-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="" />
<span>{!! trans('result.options.5') !!}</span>
</a>
</div>
<div>
@if( isset($result->logo) ) @if( isset($result->logo) )
<div class="col-xs-2 col-sm-1" style="padding: 0;"> <div>
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}"> <a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}">
<img src="{{ $metager->getImageProxyLink($result->logo) }}" alt="" /> <img src="{{ $metager->getImageProxyLink($result->logo) }}" alt="" />
</a> </a>
...@@ -82,11 +78,10 @@ ...@@ -82,11 +78,10 @@
</div> </div>
@else @else
@if( $metager->getFokus() == "nachrichten" ) @if( $metager->getFokus() == "nachrichten" )
<div class="description"><span class="date">{{ isset($result->additionalInformation["date"])?date("Y-m-d H:i:s", $result->additionalInformation["date"]):"" }}</span> {{ $result->descr }}</div> <div class="description"><span class="date">{{ isset($result->additionalInformation["date"])?date("Y-m-d H:i:s", $result->additionalInformation["date"]):"" }}</span> {{ $result->descr }}</div>
@else @else
<div class="description">{{ $result->descr }}</div> <div class="description">{{ $result->descr }}</div>
@endif @endif
@endif @endif
</div> </div>
</div> </div>
...@@ -25,15 +25,15 @@ ...@@ -25,15 +25,15 @@
@include('modals.create-focus-modal') @include('modals.create-focus-modal')
@include('layouts.researchandtabs') @include('layouts.researchandtabs')
@else @else
<div class="tab-content container-fluid"> <div class="resultpage-container">
@yield('results') @yield('results')
</div> </div>
@endif @endif
<div id="feedback" style="width:50%;margin-left:25%;position: relative; top:10px;" class="alert alert-danger alert-dismissable"> <div id="feedback" style="width:50%;margin-left:25%;position: relative; top:10px;" class="alert alert-danger alert-dismissable">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a> <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<strong> {!! trans('metaGer.feedback') !!}<a href="{{URL::to('')}}/kontakt/{{base64_encode(Request::fullUrl())}}/" target="_blank"> <strong> {!! trans('metaGer.feedback') !!}<a href="{{URL::to('')}}/kontakt/{{base64_encode(Request::fullUrl())}}/" target="_blank">
{!! trans('kontakt.form.1') !!}</a> {!! trans('kontakt.form.1') !!}</a>
</strong> </strong>
</div> </div>
@include('parts.footer', ['type' => 'resultpage', 'id' => 'resultPageFooter']) @include('parts.footer', ['type' => 'resultpage', 'id' => 'resultPageFooter'])
<img src="{{ action('ImageController@generateImage')}}?site={{ urlencode(url()->current()) }}" class="hidden" /> <img src="{{ action('ImageController@generateImage')}}?site={{ urlencode(url()->current()) }}" class="hidden" />
......
@extends('layouts.resultPage') @extends('layouts.resultPage')
@section('results') @section('results')
{{-- Show all errors --}}
@if(sizeof($errors) > 0) @if(sizeof($errors) > 0)
<div class="alert alert-danger"> <div class="alert alert-danger">
<ul> <ul>
...@@ -10,6 +11,7 @@ ...@@ -10,6 +11,7 @@
</ul> </ul>
</div> </div>
@endif @endif
{{-- Show all warnings --}}
@if(sizeof($warnings) > 0) @if(sizeof($warnings) > 0)
<div class="alert alert-warning"> <div class="alert alert-warning">
<ul> <ul>
...@@ -19,40 +21,41 @@ ...@@ -19,40 +21,41 @@
</ul> </ul>
</div> </div>
@endif @endif
@if($metager->showQuicktips()) <div id="results">
<div class="col-xs-12 col-md-8 resultContainer"> {{-- Show initial products or ads --}}
@else
<div class="col-xs-12 col-md-12 resultContainer">
@endif
@if($metager->hasProducts()) @if($metager->hasProducts())
@if( $metager->getFokus() !== "produktsuche" && !$apiAuthorized) @if( $metager->getFokus() !== "produktsuche" && !$apiAuthorized)
@include('layouts.products', ['products' => $metager->getProducts()]) @include('layouts.products', ['products' => $metager->getProducts()])
@endif @endif
@else @else
@for($i = 0; $i <= 2; $i++) @for($i = 0; $i <= 2; $i++)
@include('layouts.ad', ['ad' => $metager->popAd()]) @include('layouts.ad', ['ad' => $metager->popAd()])
@endfor @endfor
@endif @endif
{{-- Show map --}}
@if($metager->getMaps()) @if($metager->getMaps())
<div class="result row" id="map"> <div class="result" id="map">
<div class="resultInformation col-xs-12 col-sm-11">
<iframe class="" src="https://maps.metager.de/metager/{{ $metager->getQ() }}" scrolling="no" tabindex="-1" style="width: 100%; height:0; border:0;"></iframe> <iframe class="" src="https://maps.metager.de/metager/{{ $metager->getQ() }}" scrolling="no" tabindex="-1" style="width: 100%; height:0; border:0;"></iframe>
</div> </div>
</div>
@endif @endif
{{-- Create results and ongoing ads --}}
@foreach($metager->getResults() as $result) @foreach($metager->getResults() as $result)
@if($result->number % 7 === 0) @if($result->number % 7 === 0)
@include('layouts.ad', ['ad' => $metager->popAd()]) @include('layouts.ad', ['ad' => $metager->popAd()])
@endif @endif
@include('layouts.result', ['result' => $result]) @include('layouts.result', ['result' => $result])
@endforeach @endforeach
{{-- Show pagination --}}
<nav class="mg-pager" aria-label="..."> <nav class="mg-pager" aria-label="...">
<div @if($metager->getPage() === 1) class="disabled" @endif><a href="@if($metager->getPage() === 1) # @else javascript:history.back() @endif">{{ trans('results.zurueck') }}</a></div> <div @if($metager->getPage() === 1) class="disabled" @endif>
<div @if($metager->nextSearchLink() === "#") class="disabled" @endif><a href="{{ $metager->nextSearchLink() }}">{{ trans('results.weiter') }}</a></div> <a @if($metager->getPage() !== 1) href="javascript:history.back()" @endif>{{ trans('results.zurueck') }}</a>
</div>
<div @if($metager->nextSearchLink() === "#") class="disabled" @endif>
<a @if($metager->nextSearchLink() !== "#") href="{{ $metager->nextSearchLink() }}" @endif>{{ trans('results.weiter') }}</a>
</div>
</nav> </nav>
</div> </div>
@if( $metager->showQuicktips() ) @if( $metager->showQuicktips() )
<div class="col-md-4 hidden-xs hidden-sm" id="quicktips"></div> <div id="quicktips"></div>
@endif @endif
@endsection @endsection
@if( sizeof($errors) > 0 ) {{-- Show all errors --}}
@if(sizeof($errors) > 0)
<div class="alert alert-danger"> <div class="alert alert-danger">
<ul> <ul>
@foreach($errors as $error) @foreach($errors as $error)
...@@ -7,7 +8,8 @@ ...@@ -7,7 +8,8 @@
</ul> </ul>
</div> </div>
@endif @endif
@if( sizeof($warnings) > 0) {{-- Show all warnings --}}
@if(sizeof($warnings) > 0)
<div class="alert alert-warning"> <div class="alert alert-warning">
<ul> <ul>
@foreach($warnings as $warning) @foreach($warnings as $warning)
...@@ -16,37 +18,40 @@ ...@@ -16,37 +18,40 @@
</ul> </ul>
</div> </div>
@endif @endif
<div class="col-xs-12 col-md-8"> <div id="results">
{{-- Show initial products or ads --}}
@if($metager->hasProducts()) @if($metager->hasProducts())
@if( $metager->getFokus() !== "produktsuche" && !$apiAuthorized) @if( $metager->getFokus() !== "produktsuche" && !$apiAuthorized)
@include('layouts.products', ['products' => $metager->getProducts()]) @include('layouts.products', ['products' => $metager->getProducts()])
@endif @endif
@else @else
@for($i = 0; $i <= 2; $i++) @for($i = 0; $i <= 2; $i++)
@include('layouts.ad', ['ad' => $metager->popAd()]) @include('layouts.ad', ['ad' => $metager->popAd()])
@endfor @endfor
@endif @endif
{{-- Show map --}}
@if($metager->getMaps()) @if($metager->getMaps())
<div class="result row" id="map"> <div class="result" id="map">
<div class="resultInformation col-xs-12 col-sm-11"> <iframe class="" src="https://maps.metager.de/metager/{{ $metager->getQ() }}" scrolling="no" tabindex="-1" style="width: 100%; height:0; border:0;"></iframe>
<iframe class="" src="https://maps.metager.de/metager/{{ $metager->getQ() }}" style="width: 100%; height:0; border:0;"></iframe>
</div>
</div> </div>
@endif @endif
{{-- Create results and ongoing ads --}}
@foreach($metager->getResults() as $result) @foreach($metager->getResults() as $result)
@if($result->number % 7 === 0) @if($result->number % 7 === 0)
@include('layouts.ad', ['ad' => $metager->popAd()]) @include('layouts.ad', ['ad' => $metager->popAd()])
@endif @endif
@include('layouts.result', ['result' => $result])