Skip to content
Snippets Groups Projects
Commit 2fa9f80b authored by Karl Hasselbring's avatar Karl Hasselbring
Browse files

Refactoring: Result Style sortiert

parent bfe5d979
No related branches found
No related tags found
1 merge request!1365Resolve "Filter Options for MetaGer"
Hide whitespace changes
Inline Side-by-side
resources/assets/less/metager/result.less
+ 108
− 151
View file @ 2fa9f80b
/* Ergebnis */ /* Ergebnis */
.result { .result {
margin-top: 20px; margin-top: 30px;
margin-bottom: 40px; margin-bottom: 30px;
padding-bottom: 30px;
width: 100%; width: 100%;
.result-title a { .result-title {
color: black; margin: 0px;
font-size: 18px; overflow: hidden;
font-weight: bold; text-overflow: ellipsis;
white-space: nowrap;
a,
a:active,
a:focus,
a:visited {
color: black;
font-size: 18px;
font-weight: bold;
text-decoration: none;
}
} }
.result-header { .result-header {
display: flex; display: flex;
>* {
white-space: nowrap;
}
>*:not(:first-child) { >*:not(:first-child) {
margin-left: 5px; margin-left: 10px;
} }
.result-link { .result-link {
overflow: auto; overflow: auto;
...@@ -26,162 +34,111 @@ ...@@ -26,162 +34,111 @@
display: block; display: block;
} }
} }
} .result-options {
.result-information { .option-opener-icon {
border-radius: 5px; display: block;
padding-left: 0px; font-size: 16px;
&>.save { color: #2A2ADE;
position: absolute; }
top: 0; .option-content {
right: 10px; background-color: white;
cursor: pointer; z-index: 1000;
} position: absolute;
} border: grey solid 1px;
&>.remover { color: black;
cursor: pointer; font-size: 16px;
text-align: right; border-radius: 5px;
color: #777; hr {
} margin: 5px;
.title { }
color: @result-title-color; li {
text-decoration: none; padding: 5px
font-size: 18px; }
font-weight: bold; li:not(.option-title):hover {
margin-bottom: 0; background-color: #e0e0e0;
white-space: nowrap; }
line-height: 1.1; a,
max-width: 115ch; a:hover,
overflow: hidden; a:focus,
text-overflow: ellipsis; a:visited {
} color: black;
.link { display: block;
font-size: 16px; }
margin: 0; }
line-height: 1.5;
&>div {
white-space: nowrap;
} }
&>span { .result-hoster {
font-size: 13px;
color: @result-hoster-color;
white-space: nowrap; white-space: nowrap;
margin: 0 5px; a {
} color: @result-hoster-a-color;
.options { }
color: @result-link-options-color;
float: left;
}
.options>a {
color: @result-link-options-a-color;
display: block;
padding-left: 8px;
padding-right: 5px;
}
}
.link-link {
white-space: nowrap;
max-width: 60%;
overflow: hidden;
text-overflow: ellipsis;
float: left;
}
.description {
margin-bottom: 3px;
color: @result-description-color;
font-size: 16px;
line-height: 1.3;
clear: both;
.date {
font-weight: bold;
}
p {
margin: 0;
margin-bottom: 4px;
} }
img { .partnershop-info {
margin: 5px; font-size: 13px;
margin-left: 0px; margin-top: 0;
margin-right: 15px; margin-left: 10px;
height: auto;
width: auto;
max-width: 120px;
max-height: 200px;
border: solid 1px @result-description-img-border-color;
} }
} .result-proxy {
&.ad { font-size: 13px;
.ad-label { margin-top: 0;
border: green solid 1px;
padding: 1px;
color: green;
border-radius: 4px;
}
.description {
max-width: 115ch;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
img {
margin-bottom: 0px;
margin-right: 2px
}
} }
} }
.hoster { .result-body {
font-size: 13px; .result-description {
margin: 0; margin-bottom: 3px;
color: @result-hoster-color; color: @result-description-color;
margin-right: 10px;
white-space: nowrap;
a {
color: @result-hoster-a-color;
}
}
.options {
.option-opener-icon {
display: block;
font-size: 16px; font-size: 16px;
color: #2A2ADE; line-height: 1.3;
} clear: both;
.option-content { .date {
background-color: white; font-weight: bold;
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 { p {
background-color: #e0e0e0; margin: 0;
margin-bottom: 4px;
} }
a, img {
a:hover, margin: 5px;
a:focus, margin-left: 0px;
a:visited { margin-right: 15px;
color: black; height: auto;
display: block; width: auto;
max-width: 120px;
max-height: 200px;
border: solid 1px @result-description-img-border-color;
} }
} }
} .result-image>img {
.proxy { height: 100px;
font-size: 13px; padding: 10px;
margin-top: 0; max-width: 100%;
white-space: nowrap;
img {
margin-bottom: 0px;
margin-right: 2px
} }
} }
.partnershop-info { &.ad .ad-label {
font-size: 13px; border: green solid 1px;
margin-top: 0; padding: 1px;
margin-left: 10px; color: green;
border-radius: 4px;
} }
.result-image>img { .result-information {
height: 100px; border-radius: 5px;
padding: 10px; padding-left: 0px;
&>.save {
position: absolute;
top: 0;
right: 10px;
cursor: pointer;
}
} }
.image>img { &>.remover {
max-width: 100%; cursor: pointer;
text-align: right;
color: #777;
} }
} }
\ No newline at end of file
resources/lang/de/ad.php
+ 1
− 1
View file @ 2fa9f80b
...@@ -2,5 +2,5 @@ ...@@ -2,5 +2,5 @@
return [ return [
'werbung' => 'Werbung', 'werbung' => 'Werbung',
'von' => 'Werbung von', 'von' => 'von',
]; ];
resources/views/layouts/ad.blade.php
+ 15
− 15
View file @ 2fa9f80b
@if(isset($ad) && !$apiAuthorized) @if(isset($ad) && !$apiAuthorized)
<div class="result ad row"> <div class="result ad">
<div class="result-information col-sm-10"> <h2 class="result-title">
<p class="title"> <a class="title" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ $ad->gefVon }}" data-count="0">
<a class="title" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ $ad->gefVon }}" data-count="0"> {{ $ad->titel }}
{{ $ad->titel }} </a>
</a> </h2>
</p> <div class="result-header">
<p class="link"> <div class="result-link">
<a href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ $ad->gefVon }}" data-count="0"> <a href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ $ad->gefVon }}" data-count="0">
{{ $ad->anzeigeLink }} {{ $ad->anzeigeLink }}
</a> </a>
<span class="hoster"> </div>
<span class="ad-label">{!! trans('ad.werbung') !!}</span> {!! trans('ad.von') !!} {!! $ad->gefVon !!} <span class="result-hoster">
</span> <span class="ad-label">{!! trans('ad.werbung') !!}</span> {!! trans('ad.von') !!} {!! $ad->gefVon !!}
</p> </span>
<p class="description"> </div>
{{ $ad->descr }} <div class="result-description">
</p> {{ $ad->descr }}
</div> </div>
</div> </div>
@endif @endif
resources/views/layouts/result.blade.php
+ 11
− 7
View file @ 2fa9f80b
...@@ -52,8 +52,8 @@ ...@@ -52,8 +52,8 @@
</span> </span>
@if( isset($result->partnershop) && $result->partnershop === TRUE ) @if( isset($result->partnershop) && $result->partnershop === TRUE )
<span class="partnershop-info"> <span class="partnershop-info">
<img src="/img/boosticon.png" height="13" alt=""> <img src="/img/boosticon.png" height="13" alt="">
<a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/partnershops") }}" target="_blank" rel="noopener">{!! trans('result.options.4') !!}</a> <a href="{{ LaravelLocalization::getLocalizedURL(LaravelLocalization::getCurrentLocale(), "/partnershops") }}" target="_blank" rel="noopener">{!! trans('result.options.4') !!}</a>
</span> </span>
@endif @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"> <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">
...@@ -61,16 +61,16 @@ ...@@ -61,16 +61,16 @@
<span>{!! trans('result.options.5') !!}</span> <span>{!! trans('result.options.5') !!}</span>
</a> </a>
</div> </div>
<div> <div class="result-body">
@if( isset($result->logo) ) @if( isset($result->logo) )
<div> <div class="result-logo">
<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>
</div> </div>
@endif @endif
@if( $result->image !== "" ) @if( $result->image !== "" )
<div class="description"> <div class="result-image result-description">
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener"> <a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ strip_tags($result->gefVon) }}" data-count="{{ $result->number }}" rel="noopener">
<img src="{{ $metager->getImageProxyLink($result->image) }}" align="left" width="120px" height="60px" alt="" /> <img src="{{ $metager->getImageProxyLink($result->image) }}" align="left" width="120px" height="60px" alt="" />
</a> </a>
...@@ -78,9 +78,13 @@ ...@@ -78,9 +78,13 @@
</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="result-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="result-description">
{{ $result->descr }}
</div>
@endif @endif
@endif @endif
</div> </div>
......
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