Skip to content
Snippets Groups Projects
Commit 80de1618 authored by Dominik Hebeler's avatar Dominik Hebeler
Browse files

Merge branch '796-ergebnisse-lesbarer-machen' into 'development' 

Resolve "Ergebnisse lesbarer machen"

Closes #796

See merge request !1306
parents 21e4b6bc fff582b4
No related branches found
No related tags found
1 merge request!1365Resolve "Filter Options for MetaGer"
Hide whitespace changes
Inline Side-by-side
app/Models/Result.php
+ 3
− 2
View file @ 80de1618
...@@ -35,11 +35,12 @@ class Result ...@@ -35,11 +35,12 @@ class Result
$this->titel = strip_tags(trim($titel)); $this->titel = strip_tags(trim($titel));
$this->link = trim($link); $this->link = trim($link);
$this->anzeigeLink = trim($anzeigeLink); $this->anzeigeLink = trim($anzeigeLink);
$this->anzeigeLink = preg_replace("/http[s]{0,1}:\/\/(www\.){0,1}/si", "", $this->anzeigeLink);
$this->descr = strip_tags(trim($descr), '<p>'); $this->descr = strip_tags(trim($descr), '<p>');
$this->descr = preg_replace("/\n+/si", " ", $this->descr); $this->descr = preg_replace("/\n+/si", " ", $this->descr);
$this->longDescr = $this->descr; $this->longDescr = $this->descr;
if (strlen($this->descr) > 250) { if (strlen($this->descr) > 150) {
$this->descr = wordwrap($this->descr, 250); $this->descr = wordwrap($this->descr, 150);
$this->descr = substr($this->descr, 0, strpos($this->descr, "\n")); $this->descr = substr($this->descr, 0, strpos($this->descr, "\n"));
} }
......
resources/assets/less/metager/quicktips.less
+ 129
− 130
View file @ 80de1618
...@@ -4,143 +4,142 @@ ...@@ -4,143 +4,142 @@
@quicktip-font-medium: @result-font-medium; @quicktip-font-medium: @result-font-medium;
@quicktip-font-small: @result-font-small; @quicktip-font-small: @result-font-small;
#quicktips { #quicktips {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.quicktip { .quicktip {
.card-light; .card-light;
position: relative; position: relative;
details[open=""] .quicktip-extender { details[open=""] .quicktip-extender {
animation-name: quicktip-extender-turn; animation-name: quicktip-extender-turn;
animation-fill-mode: forwards; animation-fill-mode: forwards;
} }
margin: 10px 0px; margin: 10px 0px;
padding: 10px 10px 10px 10px; padding: 10px 10px 10px 10px;
width: 100%;
border: 1px solid #ccc;
background-color: white;
details:not([open=""]) {
.quicktip-summary p {
.overflow-ellipsis;
}
}
.quicktip-summary {
.quicktip-headline {
width: 100%; width: 100%;
border: 1px solid #ccc; display: flex;
background-color: white; justify-content: space-between;
details:not([open=""]) { .quicktip-title,
.quicktip-summary p { .quicktip-title a {
.overflow-ellipsis; flex-grow: 0;
} margin: 0px 0px 5px 0px;
font-size: 13px;
display: flex;
justify-content: space-between;
} }
.quicktip-summary { .space-taker {
.quicktip-headline { flex-grow: 1;
width: 100%;
display: flex;
justify-content: space-between;
.quicktip-title,
.quicktip-title a {
flex-grow: 0;
margin: 0px 0px 5px 0px;
font-size: 18px;
display: flex;
justify-content: space-between;
font-size: @quicktip-font-large;
}
.space-taker {
flex-grow: 1;
}
.quicktip-hoster {
flex-grow: 0;
font-size: @quicktip-font-small;
color: #808080;
white-space: nowrap;
}
.quicktip-extender {
flex-grow: 0;
color: #777;
font-size: 20px;
height: 20px;
font-size: @quicktip-font-large;
}
>* {
margin: 0px 5px;
&:first-child {
margin-left: 0px;
}
&:last-child {
margin-right: 0px;
}
}
}
.result-hoster {
font-size: @result-font-small;
margin-left: 20px;
color: #808080;
white-space: nowrap;
}
p {
font-size: 16px;
}
} }
.quicktip-detail { .quicktip-hoster {
border-top: 1px solid #ddd; flex-grow: 0;
border-bottom: 1px solid #ddd; font-size: @quicktip-font-small;
h2 { color: #808080;
margin: 10px 0px; white-space: nowrap;
font-size: 16px;
}
p {
display: none;
font-size: 14px;
}
} }
&[type=spendenaufruf] { .quicktip-extender {
order: 100; flex-grow: 0;
border: none; color: #777;
box-shadow: none; font-size: 20px;
background-color: inherit; height: 20px;
.quicktip-summary { font-size: @quicktip-font-large;
display: flex;
justify-content: space-between;
align-items: center;
h1 {
margin: 0px;
}
p {
margin: 5px;
.spendenaufruf-btn {
color: white;
background-color: @link-color;
font-size: 16px;
}
}
}
} }
&[type=spruch] { > * {
order: 1; margin: 0px 5px;
p { &:first-child {
display: flex; margin-left: 0px;
flex-direction: column; }
text-align: justify; &:last-child {
.author { margin-right: 0px;
color: #404040; }
font-style: italic;
align-self: flex-end;
}
}
} }
&[type=duckDuckGo-bang] { }
order: 2; .result-hoster {
.bang-btn { font-size: @result-font-small;
width: 100%; margin-left: 20px;
margin-top: 5px; color: #808080;
color: #fff; white-space: nowrap;
background-color: #286992; }
font-size: 16px; p {
} font-size: 13px;
} }
&[type=wikipedia] { }
order: 3; .quicktip-detail {
} border-top: 1px solid #ddd;
&[type=dictCC] { border-bottom: 1px solid #ddd;
order: 4; h2 {
margin: 10px 0px;
font-size: 16px;
}
p {
display: none;
font-size: 14px;
}
}
&[type="spendenaufruf"] {
order: 100;
border: none;
box-shadow: none;
background-color: inherit;
.quicktip-summary {
display: flex;
justify-content: space-between;
align-items: center;
h1 {
margin: 0px;
} }
&[type=tip] { p {
order: 5; margin: 5px;
.spendenaufruf-btn {
color: white;
background-color: @link-color;
font-size: 16px;
}
} }
&[type=ad] { }
order: 6; }
&[type="spruch"] {
order: 1;
p {
display: flex;
flex-direction: column;
text-align: justify;
.author {
color: #404040;
font-style: italic;
align-self: flex-end;
} }
}
}
&[type="duckDuckGo-bang"] {
order: 2;
.bang-btn {
width: 100%;
margin-top: 5px;
color: #fff;
background-color: #286992;
font-size: 16px;
}
}
&[type="wikipedia"] {
order: 3;
}
&[type="dictCC"] {
order: 4;
}
&[type="tip"] {
order: 5;
}
&[type="ad"] {
order: 6;
} }
} }
\ No newline at end of file }
resources/assets/less/metager/result.less
+ 193
− 181
View file @ 80de1618
...@@ -2,193 +2,205 @@ ...@@ -2,193 +2,205 @@
@result-font-large: 18px; @result-font-large: 18px;
@result-font-medium: 16px; @result-font-medium: 16px;
@result-font-small: 14px; @result-font-url: 14px;
@result-font-small: 12px;
.result { .result {
.card; .card;
margin: @resultpage-leftbox-min-dist-top-bottom 0px @resultpage-leftbox-min-dist-top-bottom 0px; margin: @resultpage-leftbox-min-dist-top-bottom 0px
padding: 15px; @resultpage-leftbox-min-dist-top-bottom 0px;
width: 100%; padding: 15px;
.result-header { width: 100%;
.result-headline { .result-header {
display: flex; .result-headline {
justify-content: space-between; display: flex;
.result-title { justify-content: space-between;
margin: 0px; .result-title {
&>* { margin: 0px;
font-size: @result-font-large; & > * {
} font-size: @result-font-large;
.overflow-ellipsis;
.result-price {
padding: 0px 10px;
color: white;
background-color: #666699;
border-radius: 3px;
}
a {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
text-decoration: none;
}
}
}
.result-hoster {
font-size: @result-font-small;
margin-left: 20px;
color: #808080;
white-space: nowrap;
}
} }
.result-link { .overflow-ellipsis;
.overflow-ellipsis; .result-price {
display: block; padding: 0px 10px;
font-size: @result-font-small; color: white;
width: fit-content; background-color: #666699;
max-width: 100%; border-radius: 3px;
&,
&:active,
&:hover,
&:focus,
&:visited {
color: #333;
text-decoration: none;
}
} }
} a {
.result-body { &,
margin-top: 10px; &:active,
width: 90%; &:hover,
display: flex; &:focus,
text-align: justify; &:visited {
.result-image { color: black;
width: 180px; text-decoration: none;
padding-right: 10px; }
margin-right: 10px;
& img {
display: block;
max-width: 160px;
max-height: 120px;
width: auto;
height: auto;
}
}
.result-description {
margin-bottom: 3px;
word-break: break-word;
color: @result-description-color;
font-size: @result-font-medium;
line-height: 1.3;
clear: both;
.date {
font-weight: bold;
}
p {
margin: 0;
margin-bottom: 4px;
}
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;
}
} }
}
.result-hoster {
font-size: @result-font-small;
margin-left: 20px;
color: #808080;
white-space: nowrap;
}
} }
.result-footer { .result-link {
margin-top: 10px; .overflow-ellipsis;
display: flex; display: block;
flex-wrap: wrap; font-size: @result-font-small;
&>*:not(:first-child) { width: fit-content;
margin-left: 20px; max-width: 100%;
} &,
.result-open, &:active,
.result-open-newtab { &:hover,
&, &:focus,
&:active, &:visited {
&:hover, font-size: @result-font-url;
&:focus, text-decoration: none;
&:visited { }
color: black; span.advertisement-mark {
font-size: @result-font-small; background-color: #0d9c0d;
text-decoration: none; color: white;
} padding: 3px;
} border-radius: 4px;
@media (max-width: 499px) { font-weight: bold;
.result-open-newtab { font-size: 10px;
display: none; margin-right: 10px;
} }
}
.result-open-proxy {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
white-space: nowrap;
margin-left: 25px;
img {
margin-bottom: 0px;
margin-right: 2px
}
}
.open-result-options {
font-weight: normal;
flex-grow: 1;
text-align: right;
@media (max-width: 499px) {
display: none;
}
}
} }
&.ad .ad-label { }
&, .result-body {
& a, margin-top: 1px;
& a:active, width: 90%;
& a:hover, display: flex;
& a:focus, text-align: justify;
& a:visited { .result-image {
font-size: @result-font-small; width: 180px;
color: #808080; padding-right: 10px;
} margin-right: 10px;
& img {
display: block;
max-width: 160px;
max-height: 120px;
width: auto;
height: auto;
}
} }
&>.remover { .result-description {
cursor: pointer; margin-bottom: 3px;
text-align: right; word-break: break-word;
color: #777; color: @result-description-color;
font-size: 13px;
line-height: 1.3;
clear: both;
.date {
font-weight: bold;
}
p {
margin: 0;
margin-bottom: 4px;
}
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;
}
} }
&>.result-options { }
&>.options { .result-footer {
width: 100%; margin-top: 10px;
text-align: right; display: flex;
overflow: hidden; flex-wrap: wrap;
max-height: 0px; & > *:not(:first-child) {
transition: all 1.0s; margin-left: 20px;
-webkit-transition: all 1.0s; }
opacity: 0; .result-open,
} .result-open-newtab {
&>.result-toggle:checked+.options { &,
max-height: 150px; &:active,
overflow: initial; &:hover,
opacity: 1; &:focus,
} &:visited {
li { color: black;
font-size: 14px; font-size: @result-font-small;
text-transform: uppercase; text-decoration: none;
margin: 10px 0; }
} }
li>a { @media (max-width: 499px) {
color: black; .result-open-newtab {
} display: none;
}
}
.result-open-proxy {
&,
&:active,
&:hover,
&:focus,
&:visited {
color: black;
font-size: @result-font-small;
text-decoration: none;
}
white-space: nowrap;
margin-left: 25px;
img {
margin-bottom: 0px;
margin-right: 2px;
}
}
.open-result-options {
font-weight: normal;
font-size: @result-font-small;
flex-grow: 1;
text-align: right;
@media (max-width: 499px) {
display: none;
}
}
}
&.ad .ad-label {
&,
& a,
& a:active,
& a:hover,
& a:focus,
& a:visited {
font-size: @result-font-small;
color: #808080;
}
}
& > .remover {
cursor: pointer;
text-align: right;
color: #777;
}
& > .result-options {
& > .options {
width: 100%;
text-align: right;
overflow: hidden;
max-height: 0px;
transition: all 1s;
-webkit-transition: all 1s;
opacity: 0;
}
& > .result-toggle:checked + .options {
max-height: 150px;
overflow: initial;
opacity: 1;
}
li {
font-size: 14px;
text-transform: uppercase;
margin: 10px 0;
}
li > a {
color: black;
} }
} }
\ No newline at end of file }
resources/views/layouts/ad.blade.php
+ 2
− 1
View file @ 80de1618
...@@ -8,9 +8,10 @@ ...@@ -8,9 +8,10 @@
{{ $ad->titel }} {{ $ad->titel }}
</a> </a>
</h2> </h2>
<a class="ad-label" href="{{ $ad->gefVonLink }}" target="_blank" rel="noopener">Werbung von {!! $ad->gefVon !!}</a> <a class="ad-label" href="{{ $ad->gefVonLink }}" target="_blank" rel="noopener">{!! $ad->gefVon !!}</a>
</div> </div>
<a class="result-link" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}"> <a class="result-link" href="{{ $ad->link }}" target="{{ $metager->getNewtab() }}">
<span class="advertisement-mark">Anzeige</span>
{{ $ad->anzeigeLink }} {{ $ad->anzeigeLink }}
</a> </a>
</div> </div>
......
resources/views/layouts/result.blade.php
+ 1
− 1
View file @ 80de1618
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
<span class="result-price">{!! $result->price_text !!}</span> <span class="result-price">{!! $result->price_text !!}</span>
@endif @endif
<a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" rel="noopener"> <a href="{{ $result->link }}" target="{{ $metager->getNewtab() }}" rel="noopener">
{{ $result->number }}. {!! $result->titel !!} {!! $result->titel !!}
</a> </a>
</h2> </h2>
<a class="result-hoster" href="{{ $result->gefVonLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">{{ $result->gefVon }}</a> <a class="result-hoster" href="{{ $result->gefVonLink }}" target="{{ $metager->getNewtab() }}" rel="noopener">{{ $result->gefVon }}</a>
......
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