From 332f4ff4b1b3c0676e11c7396c3c8e42ad492e0e Mon Sep 17 00:00:00 2001
From: Karl Hasselbring <Karl Hasselbring>
Date: Tue, 28 Nov 2017 08:57:48 +0100
Subject: [PATCH] Refactoring: Result Style sortiert
---
resources/assets/less/metager/result.less | 259 +++++++++-------------
resources/lang/de/ad.php | 2 +-
resources/views/layouts/ad.blade.php | 30 +--
resources/views/layouts/result.blade.php | 18 +-
4 files changed, 135 insertions(+), 174 deletions(-)
diff --git a/resources/assets/less/metager/result.less b/resources/assets/less/metager/result.less
index 91efaf649..33a367c37 100644
--- a/resources/assets/less/metager/result.less
+++ b/resources/assets/less/metager/result.less
@@ -1,21 +1,29 @@
/* Ergebnis */
.result {
- margin-top: 20px;
- margin-bottom: 40px;
+ margin-top: 30px;
+ margin-bottom: 30px;
+ padding-bottom: 30px;
width: 100%;
- .result-title a {
- color: black;
- font-size: 18px;
- font-weight: bold;
+ .result-title {
+ margin: 0px;
+ overflow: hidden;
+ 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 {
display: flex;
- >* {
- white-space: nowrap;
- }
>*:not(:first-child) {
- margin-left: 5px;
+ margin-left: 10px;
}
.result-link {
overflow: auto;
@@ -26,162 +34,111 @@
display: block;
}
}
- }
- .result-information {
- border-radius: 5px;
- padding-left: 0px;
- &>.save {
- position: absolute;
- top: 0;
- right: 10px;
- cursor: pointer;
- }
- }
- &>.remover {
- cursor: pointer;
- text-align: right;
- color: #777;
- }
- .title {
- color: @result-title-color;
- text-decoration: none;
- font-size: 18px;
- font-weight: bold;
- margin-bottom: 0;
- white-space: nowrap;
- line-height: 1.1;
- max-width: 115ch;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- .link {
- font-size: 16px;
- margin: 0;
- line-height: 1.5;
- &>div {
- white-space: nowrap;
+ .result-options {
+ .option-opener-icon {
+ display: block;
+ font-size: 16px;
+ color: #2A2ADE;
+ }
+ .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:hover,
+ a:focus,
+ a:visited {
+ color: black;
+ display: block;
+ }
+ }
}
- &>span {
+ .result-hoster {
+ font-size: 13px;
+ color: @result-hoster-color;
white-space: nowrap;
- margin: 0 5px;
- }
- .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;
+ a {
+ color: @result-hoster-a-color;
+ }
}
- img {
- margin: 5px;
- margin-left: 0px;
- margin-right: 15px;
- height: auto;
- width: auto;
- max-width: 120px;
- max-height: 200px;
- border: solid 1px @result-description-img-border-color;
+ .partnershop-info {
+ font-size: 13px;
+ margin-top: 0;
+ margin-left: 10px;
}
- }
- &.ad {
- .ad-label {
- border: green solid 1px;
- padding: 1px;
- color: green;
- border-radius: 4px;
- }
- .description {
- max-width: 115ch;
- overflow: hidden;
- text-overflow: ellipsis;
+ .result-proxy {
+ font-size: 13px;
+ margin-top: 0;
white-space: nowrap;
+ img {
+ margin-bottom: 0px;
+ margin-right: 2px
+ }
}
}
- .hoster {
- font-size: 13px;
- margin: 0;
- color: @result-hoster-color;
- margin-right: 10px;
- white-space: nowrap;
- a {
- color: @result-hoster-a-color;
- }
- }
- .options {
- .option-opener-icon {
- display: block;
+ .result-body {
+ .result-description {
+ margin-bottom: 3px;
+ color: @result-description-color;
font-size: 16px;
- color: #2A2ADE;
- }
- .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
+ line-height: 1.3;
+ clear: both;
+ .date {
+ font-weight: bold;
}
- li:not(.option-title):hover {
- background-color: #e0e0e0;
+ p {
+ margin: 0;
+ margin-bottom: 4px;
}
- a,
- a:hover,
- a:focus,
- a:visited {
- color: black;
- display: block;
+ img {
+ margin: 5px;
+ margin-left: 0px;
+ margin-right: 15px;
+ height: auto;
+ width: auto;
+ max-width: 120px;
+ max-height: 200px;
+ border: solid 1px @result-description-img-border-color;
}
}
- }
- .proxy {
- font-size: 13px;
- margin-top: 0;
- white-space: nowrap;
- img {
- margin-bottom: 0px;
- margin-right: 2px
+ .result-image>img {
+ height: 100px;
+ padding: 10px;
+ max-width: 100%;
}
}
- .partnershop-info {
- font-size: 13px;
- margin-top: 0;
- margin-left: 10px;
+ &.ad .ad-label {
+ border: green solid 1px;
+ padding: 1px;
+ color: green;
+ border-radius: 4px;
}
- .result-image>img {
- height: 100px;
- padding: 10px;
+ .result-information {
+ border-radius: 5px;
+ padding-left: 0px;
+ &>.save {
+ position: absolute;
+ top: 0;
+ right: 10px;
+ cursor: pointer;
+ }
}
- .image>img {
- max-width: 100%;
+ &>.remover {
+ cursor: pointer;
+ text-align: right;
+ color: #777;
}
}
\ No newline at end of file
diff --git a/resources/lang/de/ad.php b/resources/lang/de/ad.php
index 45514ae25..41637b613 100644
--- a/resources/lang/de/ad.php
+++ b/resources/lang/de/ad.php
@@ -2,5 +2,5 @@
return [
'werbung' => 'Werbung',
- 'von' => 'Werbung von',
+ 'von' => 'von',
];
diff --git a/resources/views/layouts/ad.blade.php b/resources/views/layouts/ad.blade.php
index fff25159c..ddcf96034 100644
--- a/resources/views/layouts/ad.blade.php
+++ b/resources/views/layouts/ad.blade.php
@@ -1,22 +1,22 @@
@if(isset($ad) && !$apiAuthorized)
- <div class="result ad row">
- <div class="result-information col-sm-10">
- <p class="title">
- <a class="title" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ $ad->gefVon }}" data-count="0">
- {{ $ad->titel }}
- </a>
- </p>
- <p class="link">
+ <div class="result ad">
+ <h2 class="result-title">
+ <a class="title" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ $ad->gefVon }}" data-count="0">
+ {{ $ad->titel }}
+ </a>
+ </h2>
+ <div class="result-header">
+ <div class="result-link">
<a href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}" data-hoster="{{ $ad->gefVon }}" data-count="0">
{{ $ad->anzeigeLink }}
</a>
- <span class="hoster">
- <span class="ad-label">{!! trans('ad.werbung') !!}</span> {!! trans('ad.von') !!} {!! $ad->gefVon !!}
- </span>
- </p>
- <p class="description">
- {{ $ad->descr }}
- </p>
+ </div>
+ <span class="result-hoster">
+ <span class="ad-label">{!! trans('ad.werbung') !!}</span> {!! trans('ad.von') !!} {!! $ad->gefVon !!}
+ </span>
+ </div>
+ <div class="result-description">
+ {{ $ad->descr }}
</div>
</div>
@endif
diff --git a/resources/views/layouts/result.blade.php b/resources/views/layouts/result.blade.php
index df1111fb9..7daf17c73 100644
--- a/resources/views/layouts/result.blade.php
+++ b/resources/views/layouts/result.blade.php
@@ -52,8 +52,8 @@
</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>
+ <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">
@@ -61,16 +61,16 @@
<span>{!! trans('result.options.5') !!}</span>
</a>
</div>
- <div>
+ <div class="result-body">
@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 }}">
<img src="{{ $metager->getImageProxyLink($result->logo) }}" alt="" />
</a>
</div>
@endif
@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">
<img src="{{ $metager->getImageProxyLink($result->image) }}" align="left" width="120px" height="60px" alt="" />
</a>
@@ -78,9 +78,13 @@
</div>
@else
@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
- <div class="description">{{ $result->descr }}</div>
+ <div class="result-description">
+ {{ $result->descr }}
+ </div>
@endif
@endif
</div>
--
GitLab